ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >フレーム

枠線の太さ、色、種類を指定する

{border:太さ 線の種類 線の色;} でインラインフレームに枠線を指定す ることができます。

枠線の細かな指定方法はボックスの
枠線の太さを指定する 枠線の種類を指定する 枠線の色を指定するの項目を参照してください。

■ 枠線の種類

インラインフレームの枠線の種類は以下の通りです。

線の種類 説明
solid 通常の線
double 二重線
ridge 山形の線
groove 谷型の線
dotted 点線
dashed 大きな点線
inset 内側にくぼんだ線
outset 外側に突出した線

【ブラウザ表示】

ソース

<iframe src="iframesample.html" class="wakusen1" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen2" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen3" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen4" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen5" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen6" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen7" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" class="wakusen8" title="if">
インラインフレーム
</iframe>

外部ファイル

iframe.wakusen1{border:4px solid green; height:50px;}
iframe.wakusen2{border:4px double silver; height:50px;}
iframe.wakusen3{border:4px ridge red; height:50px;}
iframe.wakusen4{border:4px groove blue; height:50px;}
iframe.wakusen5{border:4px dotted navy; height:50px;}
iframe.wakusen6{border:4px dashed purple; height:50px;}
iframe.wakusen7{border:4px inset lime; height:50px;}
iframe.wakusen8{border:4px outset maroon; height:50px;}


<body>〜</body>に直接記入する場合

<iframe src="iframesample.html" style="border:4px solid green; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px double silver; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px ridge red; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px groove blue; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px dotted navy; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px dashed purple; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px inset lime; height:50px;" title="if">
インラインフレーム
</iframe>
<iframe src="iframesample.html" style="border:4px outset maroon; height:50px;" title="if">
インラインフレーム
</iframe>

■ その他の項目

横幅、高さを指定する
外側の余白を指定する
横に並ぶ文字の位置を指定する
文字を回り込ませる

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.