borderは線の太さ、色、種類を指定してかんたんに枠線を作れるプロパティですが、実はかなり細やかな指定もできます。本記事では「border」の使い方について具体例を交えて詳しく解説していきます。
枠線を使ったデザインを柔軟に作れるようになるため、ぜひ最後までご覧ください。
- borderプロパティの書き方（枠線の付け方）
- border-colorの書き方
- border-styleの書き方
- border-widthの書き方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSで枠線をつけるプロパティ border
borderは、要素の余白部分を表す「padding」と「margin」の境界を、枠線として表示させるためのプロパティです。
参考記事【CSS】marginとpaddingの違いを初心者向けに丁寧に解説 | ZeroPlus Media
borderと要素、余白の構造は下の図のようなイメージで捉えると分かりやすくなります。
borderを使うことによって、上の図にあるオレンジの領域に枠線を表示させられます。次にborderの基本的な書き方を確認しましょう。
基本書式
セレクタ {
border: 線の太さ, 線の種類, 線の色 ;
}具体的には以下のように指定します。
<div>
線を引きます。
</div>div {
padding: 10px;
border: 1px solid #000;
}出力結果
要素に枠線が出力されました。
borderで一括して指定できる3つのプロパティについて解説
borderを使えば、一度に線の太さ、線の種類、線の色を指定することができます。
ここで押さえておきたいポイントが、borderは以下の3種類のプロパティを一括で指定しているプロパティである点です。
- border-color：線の色
- border-style：線の種類
- border-width：線の幅
このように複数のプロパティをまとめて記述する手法を「ショートハンド」といいます。そして、borderのように複数のプロパティをまとめて記述できるプロパティは「ショートハンドプロパティ」と呼ばれます。
この章では通常、borderでまとめて記述される3つのプロパティについて、それぞれ解説していきます。
border-color：枠線の色を指定する
border-colorは枠線の色を制御するプロパティです。
border-colorに色を指定すれば、上下左右の線全てに色が付きます。任意の方向の線だけに色を指定する場合は、以下のプロパティを使います。
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
これらのプロパティを使用すれば上下左右に異なる色を指定できます。
<div>
上下左右の線の色を変えます。
</div>div {
padding: 10px;
border: 4px solid;
border-top-color: black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
}出力結果
上下左右の色を変更することができました。
線の色を一括で指定する場合
なお、線の色を一括で指定する場合は下記のようになります。
div {
padding: 10px;
border: 4px solid;
border-color: red blue green yellow;
}出力結果
このように、border-colorもショートハンドを使ってまとめて記述できるプロパティです。以下のような指定方法も有効です。
border-color: red blue green; /** 上 左右 下 **/
border-color: red blue; /** 上下 左右 **/完全無料！60本の動画でHTML/CSSをガッチリ学べるプログラミングスクール
毎月先着制のサービス。登録はお早めに！
border-style：枠線の種類を指定する
border-styleは枠線の種類を指定できるプロパティです。border-styleもborder-colorと同様に以下のプロパティを使って、上下左右の線の種類を個別で指定できます。
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
指定できる線の種類を以下にまとめます。
| 値 | 説明 |
| none | 線無し（規定値） |
| solid | 実線 |
| dashed | 粗い点 |
| dotted | 点線 |
| double | 2重線 |
| groove | 谷線 |
| ridge | 山線 |
| inset | 内線 |
| outset | 外線 |
| inherit | 継承 |
<div class="dotted">
dotted
</div>
<div class="solid">
solid
</div>
<div class="double">
double
</div>
<div class="groove">
groove
</div>
<div class="ridge">
ridge
</div>
<div class="inset">
inset
</div>
<div class="outset">
outset
</div>div {
padding: 10px;
border: 8px red;
margin-top: 20px;
margin-left: 20px;
width: 50px;
}
.solid {
border-style: solid;
}
.dotted {
border-style: dotted;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
出力結果
線のスタイルを一括で指定する場合
なお、線のスタイルを一括で指定する場合は下記のようになります。
div {
padding: 10px;
border: 4px solid;
border-style: solid dotted double groove;
}出力結果
border-colorプロパティと同様に、以下のような指定方法も有効です。
border-style: solid dotted double; /** 上 左右 下 **/
border-style: solid dotted; /** 上下 左右 **/30日間でHTML/CSSが身に付く無料のプログラミングスクール
費用の一切かからないサービスです
border-width：枠線の太さを指定する
border-widthは枠線の太さを指定できるプロパティです。border-widthもborder-styleと同様に上下左右の線の太さを個別に指定できます。
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
border-widthはpxで指定する方法が基本ですが、thin（細い）、thick（太い）、medium（中程度の太さ）といった値を適用する方法もあります。thin、thick、mediumを適用すると、ブラウザにあらかじめ設定された太さで枠線が出力されます。
<div class="thick">
太い線を引きます。
</div>
<div class="thin">
細い線を引きます。
</div>
<div class="medium">
中程度の線を引きます。
</div>
<div class="line">
上下左右の線の太さを個別に指定します。
</div>div {
padding: 10px;
margin-bottom: 10px;
border-style: solid;
border-color: red;
}
.thick {
border-width: thick;
}
.thin {
border-width: thin;
}
.medium {
border-width: medium;
}
.line {
border-top-width: thick;
border-right-width: thin;
border-bottom-width: medium;
border-left-width: 20px;
}出力結果
これで線の太さを変更することができました。
線の太さを一括で指定する場合
なお、線の太さを一括で指定する場合は下記になります。
div {
padding: 10px;
border-style: solid;
border-width: thick thin medium thick;
}出力結果
border-colorプロパティと同様に、以下のような指定方法も有効です。
border-width: thick thin medium; /** 上 左右 下 **/
border-width: thick thin; /** 上下 左右 **/完全無料！60本の動画でHTML/CSSをガッチリ学べるプログラミングスクール
毎月先着制のサービス。登録はお早めに！
線を非表示にする方法
transparentを使用すると、枠線を非表示にできます。
<div>
線を一部消します。
</div>div {
padding: 10px;
border: 4px solid;
border-color: red transparent transparent blue;
}出力結果
個別に指定することで一部だけ線を非表示にすることができます。
borderで見出しをデザインする
borderプロパティを使って見出しをデザインすることができます。例えば次のようなコードを見てみましょう。
<h2 class="left-border">左側に線がある見出しのデザイン</h2>
<h2 class="left-bottom-border">左側と下側に線がある見出しのデザイン</h2>.left-border {
border-left: 6px solid orange;
padding-left: 8px;
}
.left-bottom-border {
border-left: 6px solid orange;
border-bottom: 3px solid orange;
padding-left: 8px;
display: inline-block;
}出力結果
border-leftやborder-bottomを個別でスタイル指定することにより、見出しのようなデザインを出力することができます。
まとめ：borderなら種類・太さ・色をまとめて指定して枠線を作れる
borderは種類・太さ・色をまとめて指定したうえで、枠線を表示できるプロパティです。これを細かく分解してみると本記事で紹介したように、多彩な設定が行えます。
以下にborderについて押さえておくべき知識をまとめますので復習のためにご活用ください。
- border：線のスタイルを一括指定して枠線を表示させられるプロパティ
- border-color：線の色を指定するプロパティ
- border-style：線の種類を指定するプロパティ
- border-width：線の太さを指定するプロパティ
この他、borderに関連してよく使われるプロパティとして、枠線に角丸を作る「border-radius」があります。よく使われるプロパティのため、以下の記事を参考にして、習得していくことをおすすめします。
CSSのborder-radiusを極める！円・角丸自在に実装
またWeb制作の分野には、その他にも学ぶべき知識や技術が数多くあります。Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。
ここまで独学で学んできたけど、今後どうやって学習をすすめればよいか分からないという方は、ぜひ参考にしてみてくださいね！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
