CODING

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

投稿日:2019年10月23日 更新日:


どうも、べ〜やんです。

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





borderとは


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

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



borderの使い方


border: 値;で指定します。

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



線の種類

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

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

border:  none;    /* 枠線なし(デフォルト) */
border:  solid;   /* 1本線 */
border:  double;  /* 2本線 */
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は使いこなせればデザインの幅がグッと広がります。



-CODING
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[CSS] 変形transformの使い方

どうも、べ〜やんです。 今回は、デザインを変形させるtransformを紹介します。 transformとは transformは変形を指定するプロパティで、transitionとセットで使用すること …