[css] borderで枠線をつける方法

どうも、べ〜やんです。

今回はCSSで枠線を指定する方法のborderの使い方を紹介します。

borderとは

borderは枠線を指定できるプロパティです。

線の種類、太さ、色などを指定してさまざまな枠線をつけることができます。

borderの使い方

border: 値；で指定します。

また　border: 種類の値太さの値色の値;　と書くと線の種類、太さ、色を同時に指定できます。

線の種類

border: 種類の値；で枠線の種類を指定します。

枠線の種類を指定する値はこちら↓

border:  none;    /* 枠線なし（デフォルト） */
border:  solid;   /* １本線 */
border:  double;  /* ２本線 */
border:  dashed;  /* 破線 */
border:  dotted;  /* 点線 */
border:  groove;  /* 立体的に窪んだ線 */
border:  ridge;   /* 立体的に隆起した線 */
border:  inset;   /* 全体が窪む */
border:  outset;  /* 全体が隆起する */

See the Pen wvvJgpy by beeyan (@orientado) on CodePen.

borderの線の太さ

border: 太さの値；で枠線の太さを指定します。

pxやemで数値で指定する方法や、medium(標準)、thick(太く)、thin(細く)などキーワードで指定する方法があります。

See the Pen XWWMMRj by beeyan (@orientado) on CodePen.

borderの色

border: 色の値；で枠線の色を指定します。

色コード(例: #000000)やカラーネーム(例: red)で指定します。

transparentで透明にできます。

See the Pen wvvJJdO by beeyan (@orientado) on CodePen.

borderの種類

borderには他にも類似のプロパティがあり使い分けることでデザインの幅が広がります。

border-top: 値;           /* 上に線 */
border-right: 値;　      　/* 右に線 */
border-bottom: 値;　       /* 下に線 */
border-left: 値;　　       /* 左に線 */
border-style: 値;　　      /* 線の種類 */
border-width: 値;　　      /* 太さ */
border-color: 値;　　　　　 /* 色 */
border-top-style: 値;     /* 上の線の種類 */
border-top-width: 値;     /* 上の線の太さ */
border-top-color: 値;     /* 上の線の色 */
border-right-style: 値;　　/* 右の線の種類 */
border-right-width: 値;　　/* 右の線の太さ */
border-right-color: 値;　　/* 右の線の色 */
border-bottom-style: 値;　 /* 下の線の種類 */
border-bottom-width: 値;　 /* 下の線の太さ */
border-bottom-color: 値;　 /* 下の線の色 */
border-left-style: 値;　　 /* 左の線の種類 */
border-left-width: 値;　　 /* 左の線の太さ */
border-left-color: 値;　　 /* 左の線の色 */

一部使用例

類似プロパティの使い方を一部紹介します。

See the Pen yLLMMYB by beeyan (@orientado) on CodePen.

おわりに

今回はCSSで枠線を指定する方法のborderの使い方を紹介しました。

borderは使いこなせればデザインの幅がグッと広がります。