やぁ、白髪が増えてきたユトピ(@yutopi60pa)です。
今回はボックスに枠をデザインできるCSSプロパティ「border」について解説していくよ。
要するに額縁みたいな感じのデザインを設定できます。
それではさくっとまいりましょう！
目次
borderとは？
cssプロパティborderとは、指定した要素に対して枠線を付け加えることができるプロパティです。
borederでは枠線のスタイル、太さ、色を指定することができます。
早速やってみましょう！
borderを使ってみよう！
3px、1本線、緑の枠線を指定
コード
|
1 2 3 4 5 6 7 8 |
#border1 { border: 3px solid green; width:100%; height:300px; } HTML <div id="border1">枠線が入ったね！</div> |
結果
こんな感じで枠線を設定できます。
上のCSSを解説します。
border: 太さ=3px スタイル=solid 色=green
borderの値に枠線の太さ、スタイル、色を順番にしていしています。指定の順番は順不同でも大丈夫です。
指定方法は以下です。
- 太さ
数値(pxなど)
ワードでの指定：
thin medium thick - スタイル
スタイル名(solidなど)を指定する - 色
色の名前(redやblueなど)
カラーコード(#ffffffなど)
transparent・・・透明
さっきから言ってる枠線のスタイルってなんなのでしょうか？と疑問に思う人もいますよね。
枠線のスタイルっていうのは、枠線のデザインを決める値だよ。
例えばsolidなら1本線、dottedなら点線みたいな感じね。この後詳しく説明するからそっちも見てね！
borderのスタイルの種類
borderプロパティでは枠線のスタイルを好きな物に指定することができます。
種類は10種類。ひとつひとつ実際に見ていきましょう。
borderのスタイル
none・hidden
コード
|
1 2 3 4 5 6 7 8 |
#border2 { border:none; width:100%; height:300px; } HTML <div id="border2">枠線は表示されないよ！</div> |
結果
8種類のデザイン
結果
solid
1本線
double
2本線※doubleは太さが2px以下だと重なって1本線になっちゃうので注意！
dashed
破線
dotted
点線
groove
へこみのあるような枠線
ridge
盛り上がりのある枠線
inset
上と左の枠線が暗く、下と右の枠線が明るくなり、立体的に見える枠線
outset
下と右の枠線が暗く、上と左の枠線が明るくなり、立体的に見える枠線
よりどりみどりなラインナップですね。
特に上の4つはよく使うので覚えておきましょう。
borderの関連プロパティ
borderにはもっと細かい設定を行える関連プロパティがあります。
例えば上の線は赤で、下の線は青にしたりなど色や太さ、スタイルをバラバラに設定できたりします。
ここからはその関連プロパティを紹介します。
border-width・border-style・border-color
この3つのプロパティはborderで指定できる太さ、スタイル、色を個別に設定できるプロパティです。
値の指定方法はborderと同じです。
border-width・border-style・border-color
borderを分けて指定！
コード
|
1 2 3 4 5 6 7 8 9 10 |
#border3 { border-width: 3px; border-style: dotted; border-color: gold; width:100%; height:300px; } HTML <div id="border3">borderと変わらないね！</div> |
結果
これってborderだけで書いたときと結果はどう違うのかな？
基本的にはborderだけで指定した方が早いし、短くすむから無理にこっちを使う必要はないかもね。
ただ、細かく分けて書けば理解しやすいという点もあるから、こちらは状況に応じて変えていきましょう。
border-top・border-bottom・border-right・border-left
こちらは上下左右それぞれ違う値を指定したい場合に便利なプロパティです。
値の指定方法はborderと同じです。
- border-top・・・上の枠線の太さ、スタイル、色を指定できる
- border-bottom・・・下の枠線の太さ、スタイル、色を指定できる
- border-right・・・右の枠線の太さ、スタイル、色を指定できる
- border-left・・・左の枠線の太さ、スタイル、色を指定できる
上下左右の枠線を個別に指定
border-top
コード
|
1 2 3 4 5 6 7 8 9 10 11 |
#border4 { border-top: 5px solid #DEB887; border-bottom: 5px dotted #F0E68C; border-right: 5px inset #FF4500; border-left: 5px double #ADD8E6; width: 100%; height: 300px; } HTML <div id="border4">上下左右の枠線が違うよ！</div> |
結果
このように上下左右の枠線を別々に指定することが可能です。
このプロパティは非常に使う場面が多いので、覚えておきましょう。
この他にも先ほどのborder-widthやborder-styleなどと同じで、border-top-width、border-top-style、border-top-colorと3つに分けられたプロパティもあります。
使い方も先ほどのものと同じですが、こちらを使うとコードが長くなるので、あまり使うことはないです。
念のためその他のプロパティも並べておきます。
- border-top-width
- border-top-style
- border-top-color
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-right-width
- border-right-style
- border-right-color
- border-left-width
- border-left-style
- border-left-color
まとめ
これでcssプロパティ「border」の解説は終わりです。
全体を通してみるそこまで難しいようなプロパティではないですね。おそらく1度自分で書いてしまえばすぐにできるようになると思いますよ。
ぜひとも挑戦してみてください！