ホーム プログラミング言語 Web関連 css3 CSS ボーダースタイル (border)

CSS ボーダースタイル (border)


 
 
CSS の境界線は、要素のコンテンツとパディングを囲む 1 つまたは複数の線分であり、スタイル、幅、および色をカスタマイズできます。次のプロパティを使用して、境界線のスタイル、幅、および色を定義できます。

 

  • border-style: 実線、破線などの境界線のスタイルを設定します。
  • border-width: 境界線の幅 (太さ) を設定します。
  • border-color: 境界線の色を設定します。
  • border: 上記の 3 つの border プロパティの略。

1.border-style

border-style 属性は、要素内のすべての境界線のスタイルを設定するか、特定の境界線のスタイルを個別に設定するために使用され、その構文は次のとおりです。

border-style: border-top-style border-right-style border-bottom-style border-left-style;

border-style 属性のオプション値は次のとおりです。

価値 説明
none リムレス
hidden 「なし」と同様に、境界線を非表示にします
dotted 点線の境界線を定義
dashed 破線の境界線を定義する
solid 実線の境界線を定義する
double 二重実線の境界線を定義します。二重実線の境界線の幅は、border-width の値に等しくなります。
groove 効果が border-color の値に依存する 3D ノッチ境界を定義します
ridge 効果が border-color の値に依存する 3D 稜線境界を定義します
inset 効果が border-color の値に依存する 3D インセット ボーダーを定義します
outset 3D で強調表示された境界線を定義します。その効果は、border-color の値に依存します。
inherit 親要素からボーダー スタイルを継承する

border-style プロパティは、さまざまな方法で使用できます。

  • 4 つのパラメーターがすべて指定されている場合、ボーダーの 4 辺のスタイルは、上、右、下、左の順に設定されます。
  • 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に作用し、2 番目のパラメーターは左右の境界線に作用し、3 番目のパラメーターは下の境界線に作用します。
  • 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に作用し、2 番目のパラメーターは左右の境界線に作用します。
  • パラメータが 1 つだけ指定されている場合、このパラメータは 4 つの境界線すべてに同時に作用します。

border-style 属性を使用して要素の境界線スタイルを設定するだけでなく、次の属性を使用して、要素の上、下、左、および右の境界線のスタイルを設定することもできます。

  • border-bottom-style: 下ボーダーのスタイルを設定します。
  • border-top-style: 上のボーダーのスタイルを設定します。
  • border-left-style: 左ボーダーのスタイルを設定します。
  • border-right-style: 右ボーダーのスタイルを設定します。

[例] 要素にボーダーを設定するには、border-style 属性を使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 100px;
            float: left;
            margin: 10px;
            border-width: 5px;
            border-color: red;
            text-align: center;
        }
        .none {
            border-style: none;
        }
        .hidden {
            border-style: hidden;
        }
        .dotted {
            border-style: dotted;
        }
        .dashed {
            border-style: dashed;
        }
        .solid {
            border-style: solid;
        }
        .double {
            border-style: double;
        }
        .groove {
            border-style: groove;
        }
        .ridge {
            border-style: ridge;
        }
        .inset {
            border-style: inset;
        }
        .outset {
            border-style: outset;
        }
        .four {
            border-top-style: solid;
            border-right-style: double;
            border-bottom-style: dashed;
            border-left-style: dotted;
        }      
    </style>
</head>
<body>
    <p class="none">none</p>
    <p class="hidden">hidden</p>
    <p class="dotted">dotted</p>
    <p class="dashed">dashed</p>
    <p class="solid">solid</p>
    <p class="double">double</p>
    <p class="groove">groove</p>
    <p class="ridge">ridge</p>
    <p class="inset">inset</p>
    <p class="outset">outset</p>
    <p class="four">four</p>
</body>
</html> 

実行結果は次の図のとおりです。

図: ボーダー スタイル プロパティのデモ
図: ボーダー スタイル プロパティのデモ

2.boder-width

border-width 属性は、要素内のすべての境界線の幅を設定するか、境界線のみの幅を設定するために使用され、その構文は次のとおりです。

border-width: border-top-width border-right-width border-bottom-width border-left-width;

border-width 属性のオプションの値は次のとおりです。

価値 説明
thin より細い境界線を定義する
medium デフォルト値。中幅の境界線を定義します
thick 太い境界線を定義する
length 値と単位の形式を使用して、2px などの特定の境界線の幅を設定します
inherit 親要素からボーダーの幅を継承する

thin、medium、thick の 3 つのキーワードには固定値がなく、その値はブラウザーによって異なります.たとえば、Chrome ブラウザーでは、3 つのキーワードの値はそれぞれ 1px、3px、および 5px です。

border-style 属性と同様に、border-width 属性もいくつかの異なる使用法をサポートしています。

  • 4 つのパラメーターがすべて指定されている場合、ボーダーの 4 つの辺の幅は、上、右、下、左の順に設定されます。
  • 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に作用し、2 番目のパラメーターは左右の境界線に作用し、3 番目のパラメーターは下の境界線に作用します。
  • 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に作用し、2 番目のパラメーターは左右の境界線に作用します。
  • パラメータが 1 つだけ指定されている場合、このパラメータは 4 つの境界線すべてに同時に作用します。

border-width 属性を使用して要素の境界線の幅を設定するだけでなく、次の属性を使用して、要素の上、下、左、および右の境界線の幅を設定することもできます。

  • border-bottom-width: 下の境界線の幅を設定します。
  • border-top-width: 上の境界線の幅を設定します。
  • border-left-width: 左ボーダーの幅を設定します。
  • border-right-width: 右ボーダーの幅を設定します。

【例】border-widthでボーダーの幅を設定:

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 100px;
            margin: 5px;
            float: left;
            border-style: solid;
            text-align: center;
        }
        .one{
            border-width: thin medium thick;
        }
        .two{
            border-width: 2px 5px;
        }
        .three{
            border-top-width: 1px;
            border-right-width: 2px;
            border-bottom-width: 3px;
            border-left-width: 4px;
        }
        .four{
            border-width: thin;
        }
    </style>
</head>
<body>
    <p class="one">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
    <p class="four">四</p>
</body>
</html> 

実行結果は次の図のとおりです。

図: border-width プロパティのデモ
図: border-width プロパティのデモ

3.boder-color

border-color 属性は、要素内のすべての境界線の色を設定するか、境界線の色を個別に設定するために使用され、その構文は次のとおりです。

border-color: border-top-color border-right-color border-bottom-color border-left-color;

border-color 属性のオプション値は次のとおりです。

価値 説明
color_name 色の名前を使用して、赤などの境界線の色を設定します
hex_number 色の 16 進値を使用して境界線の色を設定します (例: #ff0000)。
rgb_number rgb() 関数を使用して、rgb(255,0,0) などの境界線の色を設定します
transparent デフォルト値、境界線の色を透明に設定
inherit 親要素から境界線の色を継承する

border-style 属性と同様に、border-color 属性もいくつかの異なる使用法をサポートしています。

  • 4 つのパラメータがすべて指定されている場合、フレームの 4 辺の色は、それぞれ上、右、下、左の順に設定されます。
  • 3 つのパラメーターが指定されている場合、最初のパラメーターは上の境界線に作用し、2 番目のパラメーターは左右の境界線に作用し、3 番目のパラメーターは下の境界線に作用します。
  • 2 つのパラメーターが指定されている場合、最初のパラメーターは上下の境界線に作用し、2 番目のパラメーターは左右の境界線に作用します。
  • パラメータが 1 つだけ指定されている場合、このパラメータは 4 つの境界線すべてに同時に作用します。

border-color 属性を使用して要素の境界線の色を設定するだけでなく、次の属性を使用して、要素の上、下、左、および右の境界線の色を設定することもできます。

  • border-bottom-color: 下の境界線の色を設定します。
  • border-top-color: 上の境界線の色を設定します。
  • border-left-color: 左の境界線の色を設定します。
  • border-right-color: 右ボーダーの色を設定します。

【例】border-colorで枠線の色を設定:

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 100px;
            margin: 5px;
            float: left;
            border-style: solid;
            border-width: 5px;
            text-align: center;
        }
        .one{
            border-color: green;
        }
        .two{
            border-color: #0000CC;
        }
        .three{
            border-top-color: #009900;
            border-right-color: #FF0000;
            border-bottom-color: #330000;
            border-left-color: #0000CC;
        }
    </style>
</head>
<body>
    <p class="one">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
</body>
</html> 

実行結果は次の図のとおりです。

図: border-color プロパティのデモ
図: border-color プロパティのデモ
4.ボーダー

border 属性は, 上で紹介した border-width, border-style, および border-color 属性の省略形です. border 属性は, 上記の 3 つの属性を同時に定義するために使用できます. 構文形式は次のとおりです.

ボーダー: ボーダー幅 ボーダースタイル ボーダーカラー;

その中で、border-width はボーダーの幅を設定するために使用され、border-style はボーダーのスタイルを設定するために使用され、border-color はボーダーの色を設定するために使用されます。

[例] 要素にボーダーを設定するには、border 属性を使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p{
            width: 100px;
            float: left;
            margin: 5px;
        }
        .one {
            border: 2px solid green;
        }
        .two {
            border: 5px double red;
        }
        .three {
            border: 3px dotted blue;
        }
    </style>
</head>
<body>
    <p class="one">一</p>
    <p class="two">二</p>
    <p class="three">三</p>
</body>
</html> 

実行結果は次の図のとおりです。

図: ボーダー プロパティのデモ
図: ボーダー プロパティのデモ

ヒント: ボーダー属性の 3 つのパラメーター (border-width、border-style、border-color) は、固定された順序に従う必要はなく、順序をシャッフルすることもできます。また、 border: soild red;のようにいずれかのパラメーターを省略することもでき、省略したパラメーターがパラメーターのデフォルト値として設定されます。

border 属性を使用して境界線の幅、スタイル、および色を均一に設定するだけでなく、次の属性を使用して、上、下、左、および右の境界線の幅、スタイル、および色を設定することもできます。エレメント:

  • border-bottom: 下の境界線の幅、スタイル、および色を均一に設定します。
  • border-top: 上の境界線の幅、スタイル、および色を一様に設定します。
  • border-left: 左の境界線の幅、スタイル、および色を均一に設定します。
  • border-right: 右ボーダーの幅、スタイル、および色を一様に設定します。

このセクションで紹介したこれらの属性を組み合わせることで、いくつかの予期しない効果を実現できます.たとえば、境界線を介して三角形を描くことができます.サンプルコードは次のとおりです:

 <!DOCTYPE html>
<html>
<head>
    <style>
        p {
            width: 0px;
            margin: 5px;
            float: left;
           
        }
        .top {
            border: 50px solid;
            border-color: red transparent transparent;
        }
        .bottom {
            border-width: 0 50px 50px;
            border-style: solid;
            border-color: transparent transparent red;
        }
        .left {
            border-top: 50px solid transparent;
            border-left: 50px solid black;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .right {
            border-width: 50px 50px 50px 0px;
            border-style: solid;
            border-color: transparent red transparent transparent;
        }       
    </style>
</head>
<body>
    <p class="top"></p>
    <p class="bottom"></p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html> 

実行結果は次の図のとおりです。

図: 境界線のある三角形を描く
図: 境界線のある三角形を描く
 

「CSS ボーダースタイル (border)」についてわかりやすく解説!絶対に観るべきベスト2動画

CSS入門講座 #08:線を引く border-width, border-style, border-color, border
CSS の境界線スタイル。