CSSでできることが少しずつ増えてくると、やってみたいことがさらに増えてくるのではないでしょうか？
文章の下に線を引きたいな、アンダーラインってどうやって引くの？せっかくだから線の色は黒じゃなくて好きな色にしたいな。点線にしたいときはどうするんだろう？と考えたことはありませんか？全部CSSでできます！
今回は、borderを使ってCSSで線を引く方法について解説します。
border（ボーダー）って何ですか？
上記の構造図を見てください。「あいうえお」という文字の要素をWebで表示したときには、このような構造になっています。
border（ボーダー）とは、要素の境界のことです。図のように「あいうえお」の文字要素のまわりには黒い境界線があるとイメージしてください。
この黒い境界線（border）の内側の余白を「padding（パディング）」といいます。黒い境界線（border）の外側の境界線を「margin（マージン）」といいます。
要素の横幅のことを「width（ウィドゥス）」、要素の高さのことを「height（ハイト）」といいます。
borderを使って線を引く
要素のまわりに線を引くと、おしゃれな装飾ができます。色や線の太さ、線の種類もCSSで変えることができます。
線の太さを変える「border-width」
border-widthプロパティを使うと、線の太さを変えることができます。線の太さを1つだけ指定したときは、上下左右すべてに同じ太さの線が指定されます。
上下左右に違う指定をしたいときは、上・右・下・左（時計まわり）の順に、半角スペースで区切って指定します。
値は、「thin（細い線）」「medium（普通の太さ）」「thick（太い線）」のようにキーワードで指定する方法と、pxやremや％などの単位をつけた数値で指定する方法があります。
要素のまわりに線を引くborder-styleの初期値は「none」で線がない状態になっているので、border-widthで線の太さを指定するときには、必ず一緒にborder-styleで線を引く指定をしておく必要があります。
【CSSの記載例】
p{
border-width:5px;
border-style:solid;
}
線の種類を変える「border-style」
border-styleプロパティを使うと、線の種類を変えることができます。border-styleプロパティを使うときには、必ず一緒にborder-widthプロパティを指定します。線の種類を1つだけ指定したときは、上下左右すべてに同じ種類の線が指定されます。
border-styleの初期値は「none」で線がない状態です。
線の種類の主な値を表にまとめました。
| 指定する値 | 線の種類 |
|---|---|
| none | 線なし |
| solid | 1本の実線 |
| double | 2本の実線 |
| dotted | 点線 |
| dashed | 破線 |
| groove | 立体的な谷線 |
| ridge | 立体的な山線 |
| inset | 囲まれた要素がくぼんで見える立体的な線 |
| outset | 囲まれた要素が出っぱって見える立体的な線 |
【CSSの記載例】
p{
border-width:5px;
border-style:dashed;
}
線の色を変える「border-color」
border-colorプロパティを使うと、線の色を変えることができます。色を1つだけ指定したときは、上下左右すべてに同じ色が指定されます。
border-styleの初期値は「none」で線がない状態になっているので、border-colorプロパティを使うときには必ずborder-styleも一緒に指定します。
色を何も指定しないと、黒い線になります。
色の指定する方法は、カラーコードで指定する、RGB値で指定する、色の名前で指定するという3つの方法があります。
【CSSの記載例】
p{
border-width:5px;
border-style:solid;
border-color:#0000ff;
}
CSSで文字の色を変える方法について解説した記事で、色を指定する方法について詳しく説明しましたので、ぜひあわせて参考に読んでみてください。
上下左右に線を引く指定をする
値を指定するとき、1つだけ指定をすると上下左右すべてに同じ指定をしたことになりますが、上下左右に違う指定をしたいときは、上・右・下・左（時計まわり）の順に、半角スペースで区切って指定します。
【CSS記載例（要素の上下左右に一度に違う太さの線を指定する場合）】
p{
border-width:5px 6px 7px 8px;
border-style:solid;
}
また、border-topで上に、border-bottomで下に、border-leftで左に、border-rightで右に線の指定をすることができます。このとき、border-width、border-style、border-colorを、半角スペースで区切ってまとめて指定することができます。
【CSS記載例（要素の下にまとめて線の太さと種類と色を指定する場合）】
p{
border-bottom: 5px solid #0000ff;
}
borderを使って実際に線を引いてみる
HTMLを準備しましょう。
【HTML記述例】
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSで文字の種類を変える</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>あいうえお</p>
</body>
</html>
線を引くためのCSSも準備します。
【CSS記述例】
p{
border-bottom: 5px solid #0000ff;
width: 100px;
}
ブラウザで、この画像のように「あいうえお」の文字の下に青い線が出ていたら大成功です！
番外編：マーカーみたいな線を引きたいときはどうするの？
borderを使うと、要素の下に線を引くことができます。ふだんマーカーで重要な部分に線を引くときには、文字にかぶるように線を引きますよね。でも、borderを使うときは要素の境界の下に線を引くので、文字にかぶるような位置に線を引くことはできません。では、どうしたら実現できるのでしょうか？
番外編として、マーカーみたいな線を引きたいときの方法を書きます。ちょっと難しいので、気になった方はぜひ応用編としてチャレンジしてみてください。
【HTML記述例】
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSで文字の種類を変える</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>あいうえお</p>
</body>
</html>
【CSS記述例】
p{
background:linear-gradient(transparent 50%, #4de4f5 0%);
width: 100px;
}
背景を指定するための「background」プロパティに、グラデーションを作る「linear-gradient」を組み合わせます。このときのグラデーションの色を「transparent（透明）」と1つの色（今回は「#4de4f5」）を指定します。カッコの中の最後に書いてある「0%」の部分は変えないでください。
「transparent 50%」の「50%」の部分は透明部分の大きさのことを意味します。この数字を少なくすると、マーカーのような線が細くなります。
このような画面になれば成功です。
上記のCSSを、「transparent（透明）」と1つの色「#4de4f5」の位置を逆にすると
【CSS記述例】
p{
background:linear-gradient(#4de4f5, transparent 50% 0%);
width: 100px;
}
文字の上側にかぶるようにマーカーを引いたような状態にできます。
まとめ
今回は、border-width、border-style、border-colorを使ってCSSで線を引く方法について説明しました。
borderで線を引く方法を使いこなすと、ホームページの見出しを素敵に装飾することができるようになります。
ぜひ、今回の記事を参考にいろいろな線を引く方法を試してみてください。
