前回に引き続きスタイルシートで枠線を指定する方法です。今回は個別の枠線の指定や一括指定について説明します。
上下左右の枠線を個別に指定
borderのキーワードに位置を示す単語を絡めると上下左右個別に枠線を変更できます。
線の太さ
| 上 | border-top-width |
| 下 | border-bottom-width |
| 左 | border-left-width |
| 上 | border-right-width |
線の種類
| 上 | border-top-style |
| 下 | border-bottom-style |
| 左 | border-left-style |
| 上 | border-right-style |
線の色
| 上 | border-top-color |
| 下 | border-bottom-color |
| 左 | border-left-color |
| 上 | border-right-color |
属性を一括で指定する
前回は線の太さ（border-width）・線種（border-style）・線の色（border-color）というように個別に属性を指定しましたが、これらを一括で並べて指定が出来ます。
例えば
border:1px solid black;
とした場合は1pxの太さの黒の実線で全体が囲まれます。なお、コロン(:)からセミコロン(;)までの指定はどういう順番で並べても構わないようです。
<div style="border:1px solid black;">一括指定した結果</div>
一括指定した結果
個別の線を一括で指定
個別の線を一括で指定することも出来ます。この場合はborder＋"位置"で指定します。
| 上 | border-top |
| 下 | border-bottom |
| 左 | border-left |
| 上 | border-right |
<div style="border-top:1px solid black;">上だけ指定</div>
<div style="border-bottom:1px solid black;">下だけ指定</div>
<div style="border-left:1px solid black;">左だけ指定</div>
<div style="border-right:1px solid black;">右だけ指定</div>
<div style="border-bottom:1px solid black;">下だけ指定</div>
<div style="border-left:1px solid black;">左だけ指定</div>
<div style="border-right:1px solid black;">右だけ指定</div>
上だけ指定
下だけ指定
左だけ指定
右だけ指定
枠線を使って囲むだけでもアクセントになってブログのイメージががらっと変わります。ぜひ試してみてください。
★記事がお役に立ちましたら応援クリック願います↓
人気ブログランキングへ
にほんブログ村 ブログノウハウ
ブログ王ランキングはこちらをクリック！
関連記事
コメントする