はじめに

前回marginについての記述をしたので今回はborderについて記述しようと思います。

今回のborderはmarginほど説明することは少ないかもしれませんが、WEBサイトを作るにあたってとても重要な要素であるので、丁寧に説明できたらと思っています。

borderとは

まずborderとはという記述からしていこうと思います。

cssにおけるborderというのはコンテンツの枠線になります。例えば、microsoftのwordやpowerpointで文字を打ったときのオプションとして枠線を入れられる機能があります。その機能がcssでは文字やそれ以外でも指定することができます。cssのborderには色々なデザインの枠線を背定することができ、二重線にするなど線の形を変えられたり、線の太さを指定できたり、線の色を細かく決めることもできます。

borderの書き方

cssでborderを記述する方法を紹介していこうと思います。

基本的な記述例

border: solid 2px #000;

こんな風に記述することでコンテンツに枠線を入れることができます。borderと記述した後に三つほど値を指定しましたがこの値が枠線のデザインをせいてする記述になっています。

次はそれぞれの値の説明をしていこうと思います。

線の種類の指定

これは上記の記述例でいうと「solid」と書いてある部分のことを指しています。

ちなみに、線を普通の一本線にしたい場合はこの「solid」を使います。「solid」は日本語訳では「濃い」や「がっしりとした」などと言う意味で訳されますが、cssにおける「solid」の意味としては「直線」としての意味として記述されます。

こんな風に線の種類を指定することができます。代表的なものでは「solid」の他に「double」や「dashed」などがあります。「double」は二重線を指定したいときに使われ、「dashed」は破線（ミシン目のような線）を作りたいときに使います。

太さの指定

次に太さの指定について説明していこうと思います。上記の例でいうと「2px」と書いてある部分のことを指しています。

この部分に数値を入れることで枠線の太さを自由に決めることができます。大きくて目立つようなコンテンツにしたい場合はより太く指定できますし、落ち着いたデザインにしたい場合は少ない値で指定することも可能です。このように自分がしたいデザインに合わせて枠線の太さを決めることができます。

色の指定

最後に色の指定について記述していこうと思います。上記の例でいうと「#000」の部分のことを指しています。

ちなみに、「#000」とは16進数で色の種類を指定した値になります。この場合「黒色」の枠線を指定しています。

16進数で記述するのは少しハードルが高いという人は、「black」、「red」、「chocolate」といったような色名で記述することも可能です。

box-sizingの活用

最後に「box-sizing」についての説明をしていこうと思います。

「box-sizing」とは枠線をコンテンツの外側か内側かに表示するかを指定する記述になります。デフォルトでは枠線はコンテンツの外側になっていますがWEBサイトを作るにあたってborderがあるものとないものを横に並べた場合、枠線の部分の太さ分デコボコしたデザインになってしまいます。

こうならないために「box-sizing: border-box;」と記述することにより枠線が内側に表示されデコボコしないデザインにすることができます。

まとめ

今回はborderについて記述しましたが、WEBサイトを作るにあたって、コンテンツに枠線を入れたデザインは多くありとても重要な要素になっています。そのためこの記事で「border」の理解が深まれば幸いです。