zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 要素に枠線(ボーダー)をつける方法まとめ

CSSで要素に枠線(ボーダー)をつける方法をまとめて紹介します。

以下のように、border: 種類 太さ 色;の形式で指定します。

<div style="border: solid 1px red;">
  テキスト
</div>
<div style="border: dotted 3px blue;">
  テキスト2
</div>
<div style="border: double 5px #000;">
  テキスト3
</div>

また、border-上下左右で上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。

<div style="border-top: solid 1px red;">
  テキスト
</div>
<div style="border-left: dotted 3px blue;">
  テキスト2
</div>
<div style="border-bottom: double 5px #000;">
  テキスト3
</div>

枠線の種類

枠線の種類には、以下があります。

solid
1本線で表示
double
2本線で表示
dashed
破線で表示
dotted
点線で表示
ridge
浮き出た線で表示
groove
凹んだ線で表示
inset
凹んだように表示
outset
浮き出たように表示
none
表示しない

border-styleで枠線の種類のみを設定できます。

また、border-上下左右-styleで上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。

枠線の色

文字の色はredblueのようにすでに定義された色かもしくは、色コードで指定します。

色コードとは#AB3F7Cのように、先頭の#のあとに16進数の文字を6桁指定します。

先頭から2文字が赤、真ん中の2文字が緑、末尾の2文字が青の値に対応しています。

赤緑青をそれぞれ00(暗)〜FF(明)の値で指定します。

border-colorで枠線の色のみを設定できます。

また、border-上下左右-colorで上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。

枠線の太さ

border-widthで枠線の色のみを設定できます。

また、border-上下左右-widthで上下左右のうち、指定した部分のみを指定できます。

上下左右の部分にはtop(上), bottom(下), left(左), right(右)のいづれかを指定します。


関連記事

  • CSS テーブルのセルで入りきらない文字列をカットして表示する

    CSSでテーブルのセルで入りきらない文字列をカットして表示する方法を紹介します。以下のようなtableのとき、tdの要素に対して以下のようにスタイルを設定します。white-space: nowrap...


  • テキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する

    CSSでテキストボックスの幅を100%にしたときに親要素からはみ出る問題を解決する方法を紹介します。以下のように、親要素に対して100%のサイズのテキストボックスを配置すると、親要素をはみ出してしまい...


  • CSS テキストボックスのサイズを設定する

    CSSでテキストボックスのサイズを設定する方法を紹介します。サイズを設定するには以下のように、テキストボックスの要素に対してwidth: サイズ;とheight: サイズ;の形式で指定します。親要素の...


  • CSS テキストボックスの余白を設定する

    CSSでテキストボックスの余白を設定する方法を紹介します。以下のように、余白を設定していないテキストボックスは枠線とテキストの位置が非常に近くなってしまいます。余白を設定するには以下のように、テキスト...


  • CSS テキストボックスの文字寄せ(中央寄せ、右寄せなど)を設定する

    CSSでテキストボックスの文字寄せを設定する方法を紹介します。通常テキストボックスは左寄せで入力しますが、中央寄せや、右寄せで入力させたい場合があります。以下のように、テキストボックスの要素に対してt...


  • CSS 文字(テキスト)の大きさを変更する

    CSSで文字(テキスト)の大きさを変更する方法を紹介します。以下のように、font-size: 文字の大きさ;の形式で指定します。文字の大きさを指定する単位はpx, %などがあります。%は親要素に対し...


  • CSS 文字(テキスト)の色を変更する

    CSSで文字(テキスト)の色を変更する方法を紹介します。以下のように、color: 色;の形式で指定します。文字の色はredやblueのようにすでに定義された色かもしくは、色コードで指定します。色コー...


  • CSS 要素を非表示にする方法

    CSSで要素を非表示にする方法を紹介します。要素を非表示にするには以下のように、要素に対してdisplay: none;のスタイルを指定します。display: none;で非表示にすると、非表示にな...


  • CSS 要素に枠線(ボーダー)の角に丸みをつける方法

    CSSで要素に枠線(ボーダー)の角に丸みをつける方法を紹介します。以下のように、border-radius: 円の半径;の形式で指定します。border-上下左右-radiusで上下左右のうち、指定し...


  • webpack postcssを導入する

    webpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。postcssの設定ファイルを作成しま...