【CSS】枠線を書く方法｜borderプロパティを使いこなそう！

CSSのborderとは境界やボーダーラインの意味を指し、HTMLの要素を線で区切ることが出来る便利なプロパティです。

一本線、点線と言った線のスタイルの他、線の太さ、線の色などを設定できます。Webサイトを制作する際には、borderプロパティは重要なプロパティとなります。

Webサイトの線は、要素を囲むだけでなく、ブロックを区切る役割など多彩な表現に用いられます。

この記事を読んで、borderプロパティを習得しましょう。

CSSのborderプロパティの記述方法

まずはborderの簡単なコードを紹介します。

HTML
<p> borderの使い方</p>

CSS
p{
border:solid 1px #000000;
}

borderの使い方

上記のように、p要素の上下左右が黒い1pxの一本線で囲われるようなります。

それでは、borderプロパティの値を一つずつ紐解いていきます。

borderの値：solid

solidは、一本線を表示させるという意味です。

borderは基本的に、デフォルトの設定では非表示になっているので、どんな線を表示するか指定する必要があります。solidはborderプロパティを使用する際最も使われる値です。

他の値として、

borderの値：px

pxは線の太さを示しています。

細い線（thin）、中くらいの線（medium）、太い線（thick）という設定もできますが、デザインを忠実に再現するためには、自分の思いのままに太さを調整できるpxがよいでしょう。文字

サイズを基準とした1em、1exといった値もありますが、やはり最も正確なのはpxです。

borderの値:#000000

#000000は黒のカラーコードを示しています。

カラーコードは2桁ごとに赤、緑、青の色が割り振られていて、ひとかたまりとなっています。

red、blueといった色の名前で指定することも可能です。しかし、デザインを忠実に再現するには、カラーコードで指定する方法が確実です。

それぞれの値を分けて記述する方法

なお、borderプロパティは線のスタイル、太さ、色を一括で設定できるプロパティですが、分けて設定できるプロパティも存在します。

これらのプロパティを用いて、黒い1ピクセルの一本線を表示させるには、以下のようなコードを記述します。

CSS
p{
border-style:solid;
border-width:1px;
border-color:#000000;
}

borderを上下左右で設定する

borderプロパティは、指定した要素の上下左右すべてに線を表示させるプロパティです。

しかし、Webデザインでは要素の下に罫線を引きたいなど、一方向にだけ線を設定したいシーンが多数存在します。

そんな時に重宝するのが、

それぞれ、上下左右一方向に線を表示させます。

要素の下だけに線を表示させたい場合は、以下のようなコードになります。

CSS
p{
border-bottom:solid 1px #000000;
}

これで、テキストの下にだけ一本線が表示されるようなります。上下左右の線の種類を分けて設定することも可能です。

CSS
p{
border-top:dashed 1px #000000;
border-bottom:solid 1px #000000;
border-left:dotted 1px #000000;
border-right:solid 3px #000000;
}

上が破線の1ピクセル、下が一本線の1ピクセル、左が点線の1ピクセル、右が一本線の3ピクセル。このように、上下左右すべてで別々の線を表示することも可能です。

さらに、以下のようにすれば、下だけが開いたデザインも再現できます。

CSS
p{
border-top:solid 1px #000000;
border-left:solid 1px #000000;
border-right:solid 1px #000000;
}

これでもまったく問題ありませんが、もう少し短くすることも可能です。

CSS
p{
border:solid 1px #000000;
border-bottom:none;
}

noneは無しという意味です。borderプロパティで全方向に線を設定していますが、border-bottomだけnoneで打ち消し、下だけ線が無いという状態を再現しています。

cssは下にある記述が優先されるので、こうしたことが可能です。

余白の取り方

borderを設定するだけでは、線と要素の中身とがくっつき、非常に不格好で見づらい状態となってしまいます。

見やすい状態にするためには、余白を設定しなければなりません。要素の中身と線との間に余白を設けるにはpaddingを使います。

CSS
p{
border:solid 1px #000000;
padding:10px;
}

これで、要素の中身と線との間、上下左右に10ピクセルの余白ができます。線の外側に余白を設ける場合は、以下のように記述します。

CSS
p{
border:solid 1px #000000;
margin:10px;
}

paddingとmarginはborderを使う際、かなりの頻度で併用されるプロパティです。paddingは線の内側、marginは線の外側と覚えておいてください。

角丸のボーダー

昨今、線の四隅が丸くなっているデザインをよく見かけます。それを再現するプロパティが、border-radiusです。

CSS
p{
border:solid 1px #000000;
padding:10px;
border-radius:5px;
}

このように記述すると、角が5ピクセル丸まった線が描画されます。

CSS
p{
border:solid 1px #000000;
padding:10px;
border-radius:5px 5px 0px 0px;
}

このように値を4つ記述すると、左から、左上、右上、右下、左下と時計回りに4つの角の丸みを個別で設定出来るようになります。上記のコードは、右下と左下の丸みが0ピクセルなので、上の角だけが丸くなります。値が二つの場合は左上と右下、右上と左下、3つの場合は左上、右上と左下、右下という指定になります。

なお、border-radiusは必ずしもborderと併用する必要はありません。背景色と併用すれば、そこだけが周りとは色が違う、角丸のエリアを作ることができます。

装飾としてborderを利用する

borderの利用シーンは、区切るための線を描画したいときだけではありません。装飾としても、頻繁に利用されています。例えば、以下のようなものがあります。

CSS
p{
border-bottom:solid 1px #ccc;
border-left:solid 5px #f00;
padding:5px;
}

このように記述するとテキストの下に、グレーの1ピクセルの一本線、左側に赤の5ピクセルの一本線が表示されるようになります。これは区切るというより、テキストを際立たせたいときに有効です。

このようなborderの利用法はさまざまなWebサイトで用いられているので、探してみてください。

背景色との併用などによって、テキストをさらに際立たせたり、立体的に見せたりすることも可能です。

CSSのborderプロパティ:まとめ

CSSのborderプロパティは、色々なWebサイトで使われている重要なプロパティです。

ブロックで形成されるWebサイトにとって線は、要素と要素を分ける大切な役割を担うからです。

borderプロパティを使いこなして、オシャレなWebサイトを作りましょう。

【初心者必見】CSS3って何？CSSとの違いやHTML5との関係を徹底解説