記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS】 borderの基礎知識・使い方をサンプルコード付きで徹底解説(初心者向け)

「border」「box-sizing」「border-radius」の3点を中心に初心者のかた向けに解説。 基礎知識・使用方法をサンプルコード付きで詳しく解説。「border」だけでなく「box-sizing」「border-radius」についても詳しく解説しているため、「border」の概念をより深く知る事ができます。

カテゴリ: HTML/CSS

こんにちは!
「borderってなに・・?」「borderを使える様になりたい・・!」「box-sizing・border-radius・・?」

borderの基礎知識を理解したい、実践的に使用できるようになりたい、そのように考えている、初心者web制作者の方も多いのではないでしょうか?

borderは、WEBサイトを作成する上で大切な基礎概念になってきます。

今回は、初心者の方向けに、「border」「box-sizing」「border-radius」の3点を中心に詳しく解説していきます。

borderとは?

borderとは、要素に枠線を引くことができるCSSプロパティです。
枠線の色、太さ、種類を指定し、要素を見やすくする、強調するなどをしてくれます。
またボタンのデザインも作成できます。
下記のような場面でよく使用されます。

border指定方法

上記図の様に、borderプロパティを指定「線の種類」「線の太さ」「線の色」を指定していきます。

「線の種類」「線の太さ」「線の色」

項目    内容
線の種類 1.solid(実線) 2.dotted(点線) 3.dashed(破線) 4.double(二重線) 5.groove(谷型) 5.ridge(山型) 6.inset(左と上が濃い) 7.outset(右と下が濃い) 8.hidden(非表示) 9.noneなし(デフォルト)
線の太さ px,em,exで指定
線の色 blackなどの色名か、#000000などの16進数で指定

線の種類

線の種類を9種類紹介しましたが、よく使用するのは、1〜4番までです。
4番までを詳しく見てみます。

solid(実線)


dotted(点線)


dashed(破線)


double(二重線)

線を指定できる場所

borderは、上下左右に表示させる事ができます。
指定箇所を決め、下記プロパティで指定します。

項目 内容
border-top 上側の枠線
border-bottom 下側の枠線
border-right 右側の枠線
border-left 左側の枠線


上側の枠線(border-top使用)


下側の枠線(border-bottom使用)


右側の枠線(border-right)使用)


左側の枠線(border-left )

box-sizingとは

box-sizingプロパティは、枠線border(padding余白)を要素の幅、高さの中に含めるかどうかという設定を行う事ができます。
下記をみてください。

どちらにも「width:200px; height:200px;」 の大きさを指定し、「border: 20px solid red;」を同じ様に指定していますが、大きさが違います。
同じ大きさを指定しているのになぜでしょう?

これはborder 20pxの太さを正方形の大きさに含めているか、いないかの違いです。
4辺20pxの太さを含めるか、含めないのかでは大きさが違ってきます。
box-sizingで指定する値で、含めるか含めないかを決める事ができます。

box-sizingの値指定

値  内容
box-sizing: content-box(初期値) border,paddingを幅と高さに含めない
box-sizing: border-box; border,paddingを幅と高さに含める
box-sizing: inherit; 親要素のborder-boxの値を引き継ぐ
上記値を

セレクタ{
box-sizing: 値;
}

で記述し、枠線を幅、高さの中に含めるかどうか指定していきます。

borderを使用してできる事(サンプルコード)

ここからはサンプルコード付きで、borderを使用してできる事のサンプル集を記載します。

共通HTMLサンプルコード

シンプルな囲み線

サンプルコード表示結果

CSSサンプルコード

囲み線(点線、色付き)

サンプルコード表示結果

CSSサンプルコード

囲み線(二重線)

サンプルコード表示結果

CSSサンプルコード

左線

サンプルコード表示結果

CSSサンプルコード

左破線

サンプルコード表示結果

CSSサンプルコード

下線

サンプルコード表示結果

CSSサンプルコード

下線(色付き、二重線)

サンプルコード表示結果

CSSサンプルコード

下線(途中色変更)

サンプルコード表示結果

CSSサンプルコード

上下に線

サンプルコード表示結果

CSSサンプルコード

上下点線(色付き)

サンプルコード表示結果

CSSサンプルコード

上下二重線(色付き)

サンプルコード表示結果

CSSサンプルコード

左線+背景色

サンプルコード表示結果

CSSサンプルコード

下線+背景色

サンプルコード表示結果

CSSサンプルコード

上下線+背景色

サンプルコード表示結果

CSSサンプルコード

border-radiusとは

border-radiusは、ボックス、画像などの枠線の角の丸さを指定する、プロパティです。
例えばborderを指定すると、下記のように枠線が四角形で角が尖っています。

そこで枠線の角の丸さを指定する、「border-radius」を使用、
下記のように、角を丸くする事ができます。
これが「border-radius」です。

border-radius指定方法

指定方法は

セレクタ{
border-radius:数値;
}

値は「px」「 %」で指定でき、pxだと指定した大きさそのまま、%だと指定した要素の比率に合わせた角丸を指定します。

指定箇所

四つ角全て、もしくは各角ごとに丸さの指定を行う事ができます。
●四つかど一括指定

サンプルコード表示

HTMLサンプルコード

CSSサンプルコード

●各かど部分指定
下記のように指定する事ができます。

プロパティ 指定箇所
border-top-left-radius 左上
border-top-right-radius 右上
border-bottom-left-radius 左下
border-bottom-right-radius 右下

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
左上(border-top-left-radius)、右下(border-bottom-right-radius)、個別に角を丸くする指定をしました。
個別でも一括でも、px、%でも指定する事ができます。
「border」と「border-radius」を組み合わせることで、より良いデザインを作成する事ができます。

まとめ

今回は、初心者の方向けに、「border」「box-sizing」「border-radius」の3点を中心に解説してきました。

最後にポイントをまとめます。

 1.borderとは
要素に枠線を引くことができるCSSプロパティ。
枠線の色、太さ、種類を指定し、要素を見やすくする、強調するなどをしてくれる。


2.border指定方法は
borderプロパティを指定「線の種類」「線の幅」「線の色」を指定。


3.borderで使う主な線は4種類
solid(実線)
dotted(点線)
dashed(破線)
double(二重線)


4.border指定できる場所
border-top(上側の枠線)
border-bottom(下側の枠線)
border-right(右側の枠線)
border-left (左側の枠線)


5.box-sizingとは
枠線border(padding余白)を要素の幅、高さの中に含めるかどうかという設定を行う事ができるプロパティ。


6.border-radiusとは
ボックス、画像などの枠線の角の丸さを指定する、プロパティ。



いかがだったでしょうか?
borderは、WEBサイトを作成する上で大切な基礎概念になってきます。
本記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。