2016/09/07

枠線を簡単指定!CSSプロパティ「border」の使い方と8個のスタイルまとめ

5a92b4d644929274ed94ecff462dac8e_s
やぁ、白髪が増えてきたユトピ(@yutopi60pa)です。


 今回はボックスに枠をデザインできるCSSプロパティ「border」について解説していくよ。
要するに額縁みたいな感じのデザインを設定できます。

それではさくっとまいりましょう!

borderとは?

cssプロパティborderとは、指定した要素に対して枠線を付け加えることができるプロパティです。
borederでは枠線のスタイル、太さ、色を指定することができます。

早速やってみましょう!

borderを使ってみよう!

3px、1本線、緑の枠線を指定

コード

結果

#border1 枠線が入ったね!


こんな感じで枠線を設定できます。
上のCSSを解説します。

border: 太さ=3px スタイル=solid 色=green

borderの値に枠線の太さ、スタイル、色を順番にしていしています。指定の順番は順不同でも大丈夫です。
指定方法は以下です。

  • 太さ
    数値(pxなど)
    ワードでの指定:
    thin medium thick
  • スタイル
    スタイル名(solidなど)を指定する

  • 色の名前(redやblueなど)
    カラーコード(#ffffffなど)
    transparent・・・透明



さっきから言ってる枠線のスタイルってなんなのでしょうか?と疑問に思う人もいますよね。

枠線のスタイルっていうのは、枠線のデザインを決める値だよ。

例えばsolidなら1本線dottedなら点線みたいな感じね。この後詳しく説明するからそっちも見てね!

borderのスタイルの種類


borderプロパティでは枠線のスタイルを好きな物に指定することができます。
種類は10種類。ひとつひとつ実際に見ていきましょう。


borderのスタイル

none・hidden

コード

結果

#border2 枠線は表示されないよ!

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を分けて指定!

コード

結果

#border3 borderと変わらないね!


これってborderだけで書いたときと結果はどう違うのかな?

ユトピ
ぶっちゃけ同じ!!

基本的にはborderだけで指定した方が早いし、短くすむから無理にこっちを使う必要はないかもね。

ただ、細かく分けて書けば理解しやすいという点もあるから、こちらは状況に応じて変えていきましょう。


border-top・border-bottom・border-right・border-left

こちらは上下左右それぞれ違う値を指定したい場合に便利なプロパティです。
値の指定方法はborderと同じです。

  • border-top・・・上の枠線の太さ、スタイル、色を指定できる
  • border-bottom・・・下の枠線の太さ、スタイル、色を指定できる
  • border-right・・・右の枠線の太さ、スタイル、色を指定できる
  • border-left・・・左の枠線の太さ、スタイル、色を指定できる


上下左右の枠線を個別に指定

border-top

コード

結果

#border4 上下左右の枠線が違うよ!

このように上下左右の枠線を別々に指定することが可能です。
このプロパティは非常に使う場面が多いので、覚えておきましょう。

この他にも先ほどのborder-widthやborder-styleなどと同じで、border-top-widthborder-top-styleborder-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度自分で書いてしまえばすぐにできるようになると思いますよ。

ぜひとも挑戦してみてください!

,