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

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

関連記事

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …