境界線を作るborderプロパティの詳しい使い方【CSS】

こばゆた

borderは文字通り境界線を意味します

それを境にmargin、paddingといった余白が決まります

paddingについてはコチラ

内側の余白を作るpaddingの使い方と設定方法【CSS】

内側の余白を設定するpaddingの使い方と書き方、値につける単位を解説。これを見ればpaddingはもう完璧です。また例を細かく出しながら解説しているので初心者の方にもわかりやすいと思います。

kbyt-programming.com

2021年12月02日

marginについてはコチラ

外側の余白を作るmarginの使い方と設定方法【CSS】

外側の余白を設定するmarginの使い方と書き方、値につける単位を解説。これを見ればmarginはだいたい大丈夫です。また例を細かく出しながら解説しているので初心者の方にもわかりやすいと思います。

kbyt-programming.com

2021年12月02日

こばゆた

borderは基本的には目に見えませんがPCの中にはちゃんとあります

あなたには見えないだけで何かがあるのです(迫真)

チャッピー

コワイよ！

こばゆた

そんな地味ながら余白を考える上で重要であり、装飾的な役割ももっているborderについて解説していこうと思います。

1.borderの基本

1-1.borderを学ぶ前に

borderを学ぶ前にひとつ。

paddingやmarginでも出ましたがテキストなどの要素を作ると以下のような箱が作られます。

例として要素を作ってみます。

目には見えませんがピンクの箱の周りに枠があると思ってください。

先ほどの要素に枠を付けてみます。

シンプルな枠が作られました。このような感じでborderプロパティは枠線を作る事ができます。

ここからはその枠線についてみていこうと思います。

2.borderプロパティの使い方

2-1.border-style

border-styleプロパティは値を変えることで線の種類を選択できます。

セレクター{
  border-style: 値;
}

例として値を”solid”に設定してみたいと思います。

p{
　border-style: solid;
}

実線で囲まれたのがわかります。このようにborder-styleプロパティは値によってborderに線を付けることができます。

“solid”の他にも値にはいくつか種類があります。

こばゆた

バリエーションがあるのでこんなのもあるんだな程度で大丈夫だと思います。

・辺によってスタイルを変えたい場合は時計回りで指定します。上下と左右を変更したければ2つ、上と左右と下を変更したければ3つ、上、右、下、左の順番でそれぞれ4つ指定します。

こばゆた

余白の時と同じですね

2つ指定

p{
  border-style: solid dashed;
}
/*p要素の上下に一本線を、左右に破線をつける*/

2つ指定したので上下と左右が変わります。

3つ指定

p{
  border-style: solid dashed dotted;
}
/*p要素の上に一本線、左右に破線、下に点線をつける*/

3つ指定したので上と左右と下が変わります。

4つ指定

p{
  border-style: solid dashed dotted double;
}
/*p要素の上に一本線、右に破線、下に点線、左に二重線をつける*/

4つ指定したので上、右、下、左がそれぞれ変わります。

こばゆた

時計回りに指定すると覚えていただければ大丈夫です。

2-2.border-width

border-widthプロパティはborder-styleで指定した線の太さを指定します。

セレクター{
  border-width: 値;
}

border-styleは初期値だと無い状態なので何かしら表示します。そして値はフォントなどと同じように”px”, “rem”, “%”で指定します。

p{
  border-style: solid;
  border-width: 1px;
}

こちらも太さの例をいくつかあげておきます。

こちらも書く数を細かくすると線によって太さを変える事ができます。

2つ指定

上下3px、左右8pxの例

p{
  border-style: solid;
  border-width: 3px 8px;
}
/*p要素の上下に3pxの太さ、左右に8pxの太さの線をつける*/

3つ指定

上0px、右0px、下3px、左3pxの例

p{
  border-style: solid;
  border-width: 0 0 3px 8px;
}
/*p要素の下に3pxの太さ、左に8pxの太さの線をつける*/

サイズを０にすることで線を消すこともできます。

2-3.border-color

border-colorプロパティはborder-styleで指定した線の色を指定できます。

セレクター{
  border-color: 値;
}

こちらもborder-styleを表示させておきます。

p{
  border-style: solid;
  border-color: red;
}
/*p要素の周りに赤の線をつける*/

この色の指定ですがもちろん直接色の名前を指定をしなくてもカラーコード(#から始まるやつ)やrgb値でも指定ができます。

色についてはこちらの記事にも書いてあります。

【初心者向け】色に関するプロパティと値 rgbaとは？カラーコードとは？【CSS】

色を変える時に使うcolorプロパティとその値の指定方法3種類を解説しております。

kbyt-programming.com

2021年11月30日

こちらも書く数で色を指定できます。

p{
  border-style: solid;
  border-color: red blue green orange;
}
/*p要素の上に赤、右に青、下に緑、左にオレンジの線をつける*/

4つ書いたのでオリンピックみたいですがこんな感じになります。

2-4.border

borderプロパティでは今まで見てきた3つのプロパティをまとめて書く事ができます。

チャッピー

早く言ってよ

セレクター{
  border: border-styleの値 border-styleの値 border-colorの値;  
}

例えばこんな感じです。

p{
  border: solid red 2px;
}
/*p要素の周りに赤で太さ2pxの線をつける*/

やり方によってはいろいろなデザインができるので調べてみてください。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

...

saruwakakun.com

【CSS】シンプルな囲み枠（ボックス）コピペですぐ使える

...

love-wave.com

2-5.個別指定

border-の後にtop,right,bottom,leftをつけると個別に指定する事ができます。

p{
  border-bottom: solid red 2px;
}
/*p要素の下に赤で2pxの線をつける*/

border-bottomを指定したのでそこだけにプロパティが効いています。

また指定する数を増やして指定することも可能です。

p{
  border-top: solid blue 2px;
  border-bottom: dashed red 2px;
}
/*p要素の上に青で太さ2pxの線、下に赤で太さ2pxの破線をつける*/

こちらもアイデア次第でいろんなパターンが作れると思います。

<p class="box"></p>

.box{
  width: 0px;
  height: 0px;
  border-top: 50px transparent solid;
  border-right: 50px transparent  solid;
  border-bottom: 50px #008DD5 solid;
  border-left: 50px transparent solid;
}

線の色を透明(transparent)にすることで三角形も作ることが出来ます。

こばゆた

どちらの書き方よく使うので押さえておきましょう。

3.まとめ

セレクター{
  border-○○: ××px;/*○○にはtopやleftなど方向が入る*/
}
/*複数の方向を指定*/

セレクター{
  border-style: ××px △△px;
}
/*上下と左右を指定*/

セレクター{
  border-style: ××px △△px □□px;
}
/*上と左右と下を指定*/

セレクター{
  border-style: ××px △△px □□px ◎◎px;
}
/*順に上、右、下、左とそれぞれ時計回りで指定*/

p{
  width: 40%;
  border-top: dashed 5px;
  border-bottom: solid 5px red;  
}