CSS

CSS borderの使い方を理解してデザインの幅を広げよう!

https://owl-view.com

CSS borderとは?

Borderのコンテンツに対する位置付け

CSS borderとはHTML要素であるコンテンツ(文字や写真)枠線を加えることができるcssプロパティです。CSS Borderはwebサイトで主に見出しなどの装飾の時に使用されます。

cssborderは厳密に言うとMargin(マージン)とPadding(パディング)の間の境界線の事を言います。文字や写真などのコンテンツの周りの余白はPaddingで調整が可能です。css borderはpaddingの外側の枠線部分となります。

cssのpadding、marginを含めてborderを学びたい方は以下の記事をご覧下さい。

CSS marginとpaddingとは?〜CSSで余白を作る方法〜

続きを見る

Borderプロパティ

Borderプロパティの例

 

Borderプロパティとはコンテンツの外側の四辺の枠線の太さ、枠線のスタイル、色、をまとめて指定する事ができるプロパティです。枠線(border)の4辺をそれぞれ別々に細く調整したい場合は、border-top,border-bottom,border-left,border-rightなど4辺をそれぞれ指定して調整していきます。

borderの使い方

borderの4辺をまとめて指定する場合や、borderの四辺をそれぞれ別々に細かく指定する時の使い方をそれぞれ基本から詳しく見ていきましょう。

borderの基本的な書き方

borderプロパティは、枠線の太さ、枠線のスタイル、枠線の色を一括で指定することができます。基本的な書き方は次のようになります。

基本

{border: 枠線の太さ 枠線のスタイル 枠線の色;}

表示例

borderの基本的な使い方

"Owlviewのサイトです"という見出しh1の要素(エレメント)に対してオレンジ色の二重枠線で囲ってみました。

上記例のソースコード

HTMLコード

 

 

CSSコード

 

 

HTMLファイルでは、<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。

CSSファイルで h1タグ要素に対してborderプロパティで枠線の太さ10px、枠線の種類double、枠線の色#ff8c00(オレンジ)で指定しています。

borderのスタイル

borderのstyle(スタイル)を指定することで、枠線を二重線にしたり、点線にしたり、破線にしたりすることができます。borderのstyleを指定しない場合は、デフォルトの"none"が指定されています。

基本

{border-style: スタイルの種類;}

border-style種類一覧

 

外観 種類 説明
solid 実線で表示
double 二重線
groove 谷型で表示
ridge 山形で表示
inset 左側と上側を濃く表示

 

外観 種類 説明
outset 左側と上側を薄く表示
dotted 点線で表示
dashed 破線で表示
hidden 枠線が表示されない
none 枠線が表示されない

表示例

border-styleの表示例

"Owlviewのサイトです"という見出しh1の要素(エレメント)に対して点線の枠線で囲ってみました。

上記例のソースコード

<border.html>

 

<border.css>

 

HTMLファイルでは、<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。CSSファイルで h1タグ要素のborder-styleを枠線を点線で指定するdottedで指定します。

borderの太さを変える

border-widthを使用すれば、上下左右の枠線をそれぞれ違う太さにすることができます。borderの太さを指定する次のような二つの方法があります。

  • border-widthで枠線の太さを数値pxで変更する
  • border-widthで枠線の太さをキーワードで変更する

 

border-widthで枠線の太さを数値で変更

基本

  • border-width: X px;

上下右左が一括でXの太さになる。

  • border-width:  X px  Y px ;

上下がXの太さ、右左がYの太さになる。

  • border-width: X px Y px Z px;

がXの太さ、Yが左右の太さ、下がZの太さになる。

  • border-width: X px Y px Z px F px;

がXpx、がYpx,がZpx、がFpxの太さに指定されます。時計回りです。

border-widthの太さをキーワードで変更

border-widthの太さはキーワードで指定することも可能です。

外観 Border-widthを指定するキーワード 太さ
border-widthをThinで指定 thin 細い
Border-widthをmediumで指定 medium 普通
border-widthをthickで指定 thick 太い

表示例

border-widthの調整

"Owlviewのサイトです"という見出しh1の要素(エレメント)に対して二重線で上を20px、右を15px、下を10px、左を5pxの枠線で囲ってみました。

上記例のソースコード

HTMLコード

CSSコード

HTMLファイルでは、先ほどと同じく<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。CSSファイルではh1タグ要素のborderプロパティでカラーコード[#000000]を使用し色を黒に指定し、枠線を二重線を指定するdoubleで指定します。border-widthで上下左右を20px,15px,10px,5pxの四つの値で枠線の太さを指定します。

borderの色を変える

borderの色を変えるにはborder-colorの色をカラーコードで指定します。border-colorで指定することで上下左右の枠線をそれぞれ別々の色にすることができます。

基本

  • border-color: カラーコードX ;

上下右左が一括でXの色になる。

  • border-color:  カラーコードX   カラーコードY ;

上下がXの色、右左がYの色になる。

  • border-color: カラーコードX  カラーコードY カラーコードZ ;

がXの色、左右のYの色、がZの色になる。

  • border-color: カラーコードX カラーコードY カラーコードZ カラーコードF;

がXの色、がYの色,がZの色、がFの色に指定されます。時計回りです。

border-colorカラーコード一覧

border-colorの基本的なカラーコードの一覧をまとめてみました。

border-colorカラーコード一覧

外観 カラーコード
black #000000
Border-colorがレッド red #ff0000
border-colorが青 blue #0000ff
border-colorが緑 green #008000
border-colorのwhite white  #ffff
Border-colorのブラウン brown #a52a2a

 

外観 カラーコード
border-colorのgray gray #808080
border-colorのaqua  aqua #00ffff
 orange #ffa500
border-colorの黄色 yellow #ffff00
border-colorのピンク pink #ffc0cb
border-colorのネイビー navy #000080

表示例

borderの色を変更する。

"Owlviewのサイトです"という見出しh1の要素(エレメント)に対して、上下左右の色をそれぞれ黒青緑赤の20pxの枠線で囲いました。

上記例のソースコード

HTMLコード

 

CSSコード

HTMLファイルでは、先ほどと同じく<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。

CSSファイルではh1タグ要素のborder-styleをsolidで枠線を実線に指定します。border-widthを全て20pxの枠線の太さに指定します。border-colorを四つのカラーコードで枠線の上を黒[#000000]、枠線の右を[#ff0000]、枠線の下を青[#0000ff]、枠線の左を緑[#008000]で指定します。

CSS floatとは?~要素を横並びにする方法~

続きを見る

スタイル、太さ、色の組合せ指定サンプル

borderはWebサイトの見出しなどに頻繁に使用されます。見出しを作成する際に使用するような枠線のCSSをご紹介します。

上下左右で別々や左だけの枠線など

Webサイトの見出しなどは、左側だけが実線や二重線である場合や、下側のみ実線である場合などが多いです。今回はwebサイトで使用するようなサンプルをご紹介します。

表示例

border-styleで四つのスタイルを指定

”Owlviewです。”という見出し<h1>のエレメントに対して左側が青い二重枠線、下側が青の実線で装飾を施しています。

上記例のソースコード

HTMLのコード

CSSのコード

HTMLファイルでは、先ほどと同じく<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。

CSSファイルではh1タグ要素のborder-styleを上右下の枠線をsolidで指定し、左の枠線をdoubleで二重線に指定します。border-widthを上右の値を0pxで指定し、下左の枠線の太さを10pxで指定します。border-colorをカラーコード[#1e90ff]でdodgerblueで指定します。

表示例

左だけの枠線

”Owlviewです。”という見出し<h1>のエレメントに対して左側のみの青い二重枠線で装飾を施しています。

上記例のソースコード

HTMLのコード

CSSのコード

HTMLファイルでは、先ほどと同じく<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。

CSSファイルではh1タグ要素のborder-styleをdoubleで枠線を実線に指定します。border-widthを四つの値で上右下の値を0pxで指定し、左の枠線の太さを10pxで指定します。border-colorをカラーコード[#1e90ff]でdodgerblueで指定します。

CSS overflowとは?はみ出し部分の表示を指定する方法

続きを見る

まとめ

borderの要素指定 意味
border: スタイル 太さ カラーコード; 枠線の種類や太さ色を一括指定
border-style: 種類; border-styleで枠線の種類で指定
border-width: 太さorキーワード; border-widthで枠線の太さを指定
border-color: カラーコード; border-colorで色を指定
CSSのcontentプロパティの使い方

続きを見る

-CSS
-

© 2021 OWLVIEW Powered by AFFINGER5