CSS・CSSリファレンス・WEBやぁ、白髪が増えてきたユトピ(@yutopi60pa)です。今回はボックスに枠をデザインできるCSSプロパティ「border」について解説していくよ。要するに額縁みたいな感じのデザインを設定できます。まとめborderとは?cssプロパティborderとは、指定した要素に対して枠線を付け加えることができるプロパティです。borederでは枠線のスタイル、太さ、色を指定することができます。枠線が入ったね!こんな感じで枠線を設定できます。上のCSSを解説します。色=greenborderの値に枠線の太さ、スタイル、色を順番にしていしています。指定の順番は順不同でも大丈夫です。色の名前(redやblueなど)カラーコード(#ffffffなど)transparent・・・透明さっきから言ってる枠線のスタイルってなんなのでしょうか?と疑問に思う人もいますよね。枠線のスタイルっていうのは、枠線のデザインを決める値だよ。solidなら1本線、dottedなら点線みたいな感じね。この後詳しく説明するからそっちも見てね!borderのスタイルの種類borderプロパティでは枠線のスタイルを好きな物に指定することができます。ひとつひとつ実際に見ていきましょう。枠線は表示されないよ!8種類のデザイン結果solid1本線double2本線※doubleは太さが2px以下だと重なって1本線になっちゃうので注意!dashed破線dotted点線grooveへこみのあるような枠線ridge盛り上がりのある枠線inset上と左の枠線が暗く、下と右の枠線が明るくなり、立体的に見える枠線outset下と右の枠線が暗く、上と左の枠線が明るくなり、立体的に見える枠線よりどりみどりなラインナップですね。上の4つはよく使うので覚えておきましょう。borderの関連プロパティborderにはもっと細かい設定を行える関連プロパティがあります。上の線は赤で、下の線は青にしたりなど色や太さ、スタイルをバラバラに設定できたりします。ここからはその関連プロパティを紹介します。border-width・border-style・border-colorこの3つのプロパティはborderで指定できる太さ、スタイル、色を個別に設定できるプロパティです。値の指定方法はborderと同じです。borderと変わらないね!これってborderだけで書いたときと結果はどう違うのかな?ユトピぶっちゃけ同じ!!基本的にはborderだけで指定した方が早いし、短くすむから無理にこっちを使う必要はないかもね。細かく分けて書けば理解しやすいという点もあるから、こちらは状況に応じて変えていきましょう。border-top・border-bottom・border-right・border-leftこちらは上下左右それぞれ違う値を指定したい場合に便利なプロパティです。値の指定方法はborderと同じです。上下左右の枠線が違うよ!このように上下左右の枠線を別々に指定することが可能です。このプロパティは非常に使う場面が多いので、覚えておきましょう。この他にも先ほどのborder-widthやborder-styleなどと同じで、border-top-width、border-top-style、border-top-colorと3つに分けられたプロパティもあります。使い方も先ほどのものと同じですが、こちらを使うとコードが長くなるので、あまり使うことはないです。念のためその他のプロパティも並べておきます。border-top-widthborder-top-styleborder-top-colorborder-bottom-widthborder-bottom-styleborder-bottom-colorborder-right-widthborder-right-styleborder-right-colorborder-left-widthborder-left-styleborder-left-colorまとめこれでcssプロパティ「border」の解説は終わりです。全体を通してみるそこまで難しいようなプロパティではないですね。1度自分で書いてしまえばすぐにできるようになると思いますよ。コメントをキャンセルメールアドレスが公開されることはありません。