目次
CSS 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)の4辺をそれぞれ別々に細く調整したい場合は、border-top,border-bottom,border-left,border-rightなど４辺をそれぞれ指定して調整していきます。
borderの使い方
borderの4辺をまとめて指定する場合や、borderの四辺をそれぞれ別々に細かく指定する時の使い方をそれぞれ基本から詳しく見ていきましょう。
borderの基本的な書き方
borderプロパティは、枠線の太さ、枠線のスタイル、枠線の色を一括で指定することができます。基本的な書き方は次のようになります。
基本
{border: 枠線の太さ 枠線のスタイル 枠線の色;}
表示例
"Owlviewのサイトです"という見出しh1の要素（エレメント）に対してオレンジ色の二重枠線で囲ってみました。
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>Owlviewのサイトです。</h1> </body> |
CSSコード
|
1 2 3 |
h1 { border: 10px double #ff8c00; } |
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 | 枠線が表示されない |
表示例
"Owlviewのサイトです"という見出しh1の要素（エレメント）に対して点線の枠線で囲ってみました。
上記例のソースコード
<border.html>
|
1 2 3 |
<body> <h1>Owlviewのサイトです。</h1> </body> |
<border.css>
|
1 2 3 |
h1 { border-style: dotted; } |
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を指定するキーワード | 太さ |
 |
thin | 細い |
 |
medium | 普通 |
 |
thick | 太い |
表示例
"Owlviewのサイトです"という見出しh1の要素（エレメント）に対して二重線で上を20px、右を15px、下を10px、左を5pxの枠線で囲ってみました。
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>Owlviewのサイトです。</h1> </body> |
CSSコード
|
1 2 3 4 |
h1{ border: double #000000; border-width: 20px 15px 10px 5px; } |
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 |
 red |
#ff0000 |
 blue |
#0000ff |
 green |
#008000 |
 white |
#ffff |
 brown |
#a52a2a |
| 外観 | カラーコード |
 gray |
#808080 |
 aqua |
#00ffff |
 orange |
#ffa500 |
 yellow |
#ffff00 |
 pink |
#ffc0cb |
 navy |
#000080 |
表示例
"Owlviewのサイトです"という見出しh1の要素（エレメント）に対して、上下左右の色をそれぞれ黒青緑赤の20pxの枠線で囲いました。
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>Owlviewのサイトです。</h1> </body> |
CSSコード
|
1 2 3 4 5 |
h1{ border-style: solid; border-width: 20px; border-color: #000000 #ff0000 #0000ff #008000 ; } |
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サイトで使用するようなサンプルをご紹介します。
表示例
”Owlviewです。”という見出し<h1>のエレメントに対して左側が青い二重枠線、下側が青の実線で装飾を施しています。
上記例のソースコード
HTMLのコード
|
1 2 3 |
<body> <h1> Owlviewのサイトです。</h1> </body> |
CSSのコード
|
1 2 3 4 5 |
h1{ border-style: solid solid solid double; border-width: 0px 0px 10px 10px; border-color: #1e90ff; } |
HTMLファイルでは、先ほどと同じく<body>タグ内で見出し<h1>で”Owlviewのサイトです。”で表示します。
CSSファイルではh1タグ要素のborder-styleを上右下の枠線をsolidで指定し、左の枠線をdoubleで二重線に指定します。border-widthを上右の値を0pxで指定し、下左の枠線の太さを10pxで指定します。border-colorをカラーコード[#1e90ff]でdodgerblueで指定します。
表示例
”Owlviewです。”という見出し<h1>のエレメントに対して左側のみの青い二重枠線で装飾を施しています。
上記例のソースコード
HTMLのコード
|
1 2 3 |
<body> <h1> Owlviewのサイトです。</h1> </body> |
CSSのコード
|
1 2 3 4 5 |
h1{ border-style: double; border-width: 0px 0px 0px 10px; border-color: #1e90ff; } |
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プロパティの使い方
続きを見る