【HTML】borderで枠線のスタイルや太さをカスタマイズする方法まとめ
  • facebookページ
  • twitterページ
  • 2020.02.28

    【HTML】borderで枠線のスタイルや太さをカスタマイズする方法まとめ

    borderとは

    borderとは、ボーダー(枠線)のスタイル(線の種類)、太さ、色を指定し表示するプロパティのことです。

    サイトの見出しのデザインや文章の囲み、ボタンデザインなどさまざまな用途でborderプロパティは利用できます。

    borderプロパティでまとめて記述する方法

    borderプロパティの記述方法は次の通りです。

    ■HTML

    ■CSS

    スタイル、太さ、色をスペースで区切り、指定する値を記述します。

    borderの種類

    では、次にborderの「スタイル、太さ、色」の指定方法を解説します。

    borderのスタイル(style)

    borderのスタイルの種類は次の10通りあります。

    1. none:ボーダーが表示されません
    2. hidden:ボーダーが表示されません。ボーダーが重なり合う場合(表のセルなど)はhiddenが優先されます。
    3. solid:1本線で表示
    4. double:2本線で表示
    5. groove:立体的にくぼんだ線で表示
    6. ridge:立体的に隆起した線で表示
    7. inset:内側全体がくぼんだ線で表示(上と左のボーダーが暗く、下と右のボーダーが明るく表示)
    8. outset:内側全体が隆起した線で表示(上と左のボーダーが明るく、下と右のボーダーが暗く表示)
    9. dashed:破線で表示
    10. dotted:点線で表示

    それぞれの表示のされ方は、「borderの記述方法」で確認します。

    borderの太さ

    borderの太さは、pxなどの数値で指定する方法と、キーワードで指定する方法があります。

    キーワードは次の3つです。

    1. thin(細い)
    2. medium(標準)
    3. thick(太い)

    borderの色

    borderの色は、次の4通りあります。

    1. カラーコード(#ffffffなど)
    2. カラーネーム(whiteなど)
    3. RGB(rgb(255, 255, 255)など)
    4. RGBA(rgba(255, 255, 255, 0.8)など)

    色の指定については、次の記事の「background-colorで色を指定する方法」で説明しています。

    わからない人は参考にしてみてください!

    【関連記事】

    【5分でわかる】HTMLでbackground-colorの使い方まとめ

    borderを個別で記述する方法

    borderを個別で記述する方法は、次の通りです。

    1. border-style:ボーダーのスタイルを指定
    2. border-width:ボーダーの太さを指定
    3. border-color:ボーダーのスタイルを指定
    4. border-top:ボーダーを上側に表示
    5. border-bottom:ボーダーを下側に表示
    6. border-left:ボーダーを左側に表示
    7. border-right:ボーダーを右側に表示

    表示やスタイルシートへの記述方法は「borderの記述方法」で見ていきましょう。

    borderの記述方法【表示サンプルあり】

    ここではborderの記述方法と、表示のされ方をサンプルコードで確認してみます。

    border styleの記述方法と表示

    ここでは、borderのstyleごとにどのように表示されるのか見ていきましょう。

    表示は次のサンプルコードで確認します。

    ■表示結果

    border styleの記述方法と表示

    それぞれ指定したスタイルで表示されているのがわかります。

    double(二重線)を指定する場合は「3px」以上で指定しないと二重線にならないので注意しましょう。

    「groove」や「ridge」の場合もある程度の太さで指定しないと、スタイルがきれいに表示されません。

    次に、borderを個別で指定して表示する方法も見てみましょう。

    ■表示結果

    border styleの記述方法と表示

    borderを上下左右に表示

    borderを上下左右で指定した場合の表示も確認してみましょう。

    ■表示結果

    borderを上下左右に表示

    borderプロパティを使ったアレンジ

    borderプロパティは、使い方によってはおしゃれなデザインにアレンジすることも可能です。

    参考までに、borderプロパティを使ったアレンジサンプルを紹介します。

    ■表示結果

    borderプロパティを使ったアレンジ

    まとめ

    HTMLのborderについて解説しました。

    borderプロパティは、見出しのデザインや文章の囲みなどさまざまな利用用途に対応でき、非常に便利なプロパティです。

    ぜひこの記事で、borderプロパティを使いこなせるようになってください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE