パソコン

CSSで要素の枠に線を付ける

要素の枠に線を付けた様子

CSSで要素に線を付けることができます、周りを線で囲むのは勿論、一辺だけに線を付けたりと様々な指定方法があります、また実線だけでなく点線や二重線なども指定できます。

要素を線で囲む指定の方法

要素に線を指定する時は「border」プロパティを使います。

要素の枠線に指定する値には「線の種類」「線の幅」「線の色」があります。

この3つをまとめて指定できますが、その方法は後で書きます。

最初は、「線の種類」の指定方法から

線の種類 線の形を指定する style

枠の線の形には下のようなものがあります。

  • solid 実線で表示
  • dotted 点線で表示
  • dashed 破線で表示
  • double 二重線で表示
  • groove 谷型、線が窪んで見える
  • ridge 山形、線が隆起して見える
  • inset 左と上が濃い、全体が窪んで見える
  • outset 右と下が濃い、全体が隆起して見える
  • none 線を無しに
  • hidden 線を非表示に

htmlの記述から枠を付けたい要素をCSSで指定します。

htmlに記述した段落

CSSのファイルに線の種類を指定するために「border-style」を記述し実線の値「solid」を指定します。

CSSに記述した枠線の種類

widthを指定していないと枠が横幅一杯になってしまうので指定しています。

ブラウザの表示例

線の種類を変更したい時には値の所を変更すれば代わります。

線の幅を指定する width

枠線の幅を指定します、値は数字と「px(ピクセル)」を使用します、記述の最後は「;(セミコロン)」を付けます。

border-widthを5pxに指定してみます。

枠の幅と種類の記述例

先ほどの線より太くなったのが分かると思います。

ブラウザに表示された例

このようにして線の幅を指定します。

線に色を指定する color

枠に線の色を変更してみましょう、色の指定には「color」を使います。

border-colorに赤色のredを指定します。

CSSに線の色と幅と種類の記述例

枠の色が赤に変更されました

ブラウザに表示

線の種類・幅・色は合わせて指定できる

CSSの記述を簡素化する例

この様に色・幅・種類と一つずつ記述していくのは大変です、これらをまとめて記述する方法がこちらです。

セレクタ{ border:線の幅 線の種類 線の色 }

この様に記述しますが、幅・種類・色の順番は指定はありません、どの順番でも構いません。

色、幅、種類を併せたやり方

borderプロパティに値の線の種類、幅、色を指定します。

線の種類にはこのようなものも

枠の一部を装飾する

枠に一部だけに線を入れる

枠の一部、「上下左右」個別に設定するプロパティ

  • border-top 枠の上の線
  • border-bottom 枠の下の線
  • border-left 枠の左の線
  • border-right 枠の右の線

個別の指定方法

セレクタ { border-top: 線の幅 線の種類 線の色; }

枠の一部に指定したい場合は先ほどのプロパティの値をCSSで指定します。

枠の一部を装飾するやり方

この様に枠の一部にCSSが指定されます。

ブラウザの表示

CSSで要素の枠に線を付ける

この様に枠全体を囲んだような線もあれば一部をやるやり方もあります、文字を目立たせたい時や見出しなどを強調したい時に有効と思います。

色んなやり方を試してみて下さい。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事