|
{border-位置:太さ 線の種類 線の色;} でボックスの個別の枠線の
太さ、線の種類、線の色を一括に指定することができます。
一括指定できる枠線の位置は上下左右です。
■ 個別の枠線を一括に指定する方法
個別の枠線を一括に指定する方法は以下の通りです。
| 個別の枠線を一括に指定 |
説明 |
|
border-top:太さ 線種 線の色;
|
上の枠線の太さ、種類、色を指定します。 |
|
border-bottom:太さ 線種 線の色;
|
下の枠線の太さ、種類、色を指定します。 |
|
border-left:太さ 線種 線の色;
|
左の枠線の太さ、種類、色を指定します。 |
|
border-right:太さ 線種 線の色;
|
右の枠線の太さ、種類、色を指定します。 |
【ブラウザ表示】
上の枠線のみ一括指定
右の枠線のみ一括指定
下の枠線のみ一括指定
左の枠線のみ一括指定
ソース
<p class="all1">上の枠線のみ一括指定</p>
<p class="all2">右の枠線のみ一括指定</p>
<p class="all3">下の枠線のみ一括指定</p>
<p class="all4">左の枠線のみ一括指定</p>
外部ファイル
p.all1{border-top:5px dotted green;}
p.all2{border-right:5px dotted green;}
p.all3{border-bottom:5px dotted green;}
p.all4{border-left:5px dotted green;}
<body>～</body>に直接記入する場合
<p style="border-top:5px dotted green;">上の枠線のみ一括指定</p>
<p style="border-right:5px dotted green;">右の枠線のみ一括指定</p>
<p style="border-bottom:5px dotted green;">下の枠線のみ一括指定</p>
<p style="border-left:5px dotted green;">左の枠線のみ一括指定</p>
■ その他の項目
・
枠線の太さを指定する
・
枠線の種類を指定する
・
枠線の色を指定する
・
ボックスの横幅、高さを指定する
・
外側、内側の余白を指定する
・
背景色や画像を指定する
・
背景画像の表示方法を指定する
・
背景画像の表示位置を指定する
・
ボックスを並べる
・
はみ出る部分を表示させる
・
ボックスの配置方法を指定する
・
背景画像の表示領域を指定する
・
枠線の4隅の角丸を指定する
・
枠線の4隅の角丸を個別に指定する
スタイルシート一覧のページに戻る
|
