こんにちは。冬はニット帽と手袋が必需品のサイトウです。
サイト制作を進めていくと、多くの人に見てもらうにはどうしたら良いかなと考えることが増えてきます。印象的な見た目にするためにCSSを学んでいる方もいるでしょう。
「この部分の言葉や文章を強調したい」という時によく使用われるのが、border-bottomプロパティで下線を引く方法です。
あれ？思っていたのと違う線が表示された・・・なんで？？
これ、実はプログラミング初学者にはとてもよくあることなのです。
今回は、【border-bottom】の
・基本的な使い方
・応用的な使い方
について説明します。
border-bottomの基本的な使い方を知りたい方やイメージ通りの線を引きたい方、文字の装飾にお悩みの方は是非読んでみてくださいね。
目次
【border-bottom】とは
【border-bottom】の読み方
「ボーダーボトム」と読みます。端や境目、国境という意味のborderに、下部や底という意味のbottomがくっついた言葉です。
直訳すると、境目の下の部分。そのままですね。「装飾が入れられた縁」という意味のbordureという言葉が語源とされています。
【border-bottom】の説明
borderという要素の周りを四角く囲むプロパティがあります。見出しのレイアウトを作成するときに使用されることが多いプロパティですが、この下線部分のみを指定することができるのが、border-bottomプロパティです。言葉や文章の下に線を引いて、強調したり目立たせるために使用します。
また、border-bottomプロパティは
- border-style どんな線をひくのか指定する
- border-width 線の太さを指定する
- border-color 線の色を指定する
をまとめて書くことができます。それぞれ別々に記載しても問題ありませんが、まとめたほうがコードが見やすくなっておすすめです。
すっきりとしたコードを書くことで、エラーが生じた時にどの部分に問題があるのか探しやすくなります。普段からきれいなコードを書くように心がけましょう。
style、width、colorを記述する順番は任意です。指定したい値をスペースで区切って書きます。
【border-bottom】で利用できる値
【border-bottom】では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| solid
double groove ridge inset outset dashed dotted |
border-style（どんな線をひくのか）を指定するときに使用します。
初期値はnone です。 |
| px
rem ex thin medium thick |
border-width（線の太さ）を指定するときに使用します。初期値はmediumです。数値にpxやremやexなどの単位をつけるか、キーワードで記します。
キーワードで指定する場合、表示される太さはブラウザにより異なります。 |
| カラーネーム
カラーコード rgb |
border-color（線の色）を指定するときに使用します。
初期値はcolorプロパティの値です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
【border-bottom】の基本的な使い方
【border-bottom】の使い方
border-bottomプロパティの書き方は、CSSの基本的な書き方どおり「セレクタ・プロパティ・値」を指定します。
|
1 2 3 |
h1 { border-bottom: solid thin red; } |
では、具体的に細かく見ていきましょう。
どんな線を引くか指定する
どんな種類の線を表示させるのか決めます。実線なのか、点線なのか、それとも立体感をだすのか、値を指定しましょう。以下の線を使うことができます。
- solid 1本線
- double 2本線
- dashed 破線
- dotted 点線
- groove 立体線（窪み）
- ridge 立体線（隆起）
- inset 囲み立体線（窪み）
- outset 囲み立体線（隆起）
insetとoutsetは、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。立体的な線が使えるのはおもしろいですよね。
線の太さを指定する
レイアウトやデザインによって、線の太さを変えてみるのもおすすめです。数字に％やremなどの単位をつけて指定する方法と、thinやmediumなどのキーワードで指定する方法があります。
キーワードで指定する場合、ブラウザによって表示される太さが異なるので、確実に同じ太さで表示させたい場合は前者の方法をとりましょう。
線の色を指定する
黒い文字と黒い線ではせっかくの下線が目立ちません。ぜひ色を変えて文字を強調しましょう。
指定の仕方は、通常色の指定を行う方法と同じです。
- red、blueなどのカラーネームを書く
- 3～6桁のカラーコードを書く
- rgbで指定する
詳細な色の指定をする場合はカラーコードかrgbで指定しましょう。
【border-bottom】とtext-decorationとの違い
border-bottomと同じように文字の下に線を引くことができるプロパティにtext-decorationがあります。下記の例をご覧ください。
See the Pen
JjRGwOZ by F Saito (@kero23)
on CodePen.
See the Pen
BaLjvYy by F Saito (@kero23)
on CodePen.
spanタグで囲んだ部分に線を指定しています。同じ線でも表示のされ方が違いますね。
text-decorationの下線は文字にかなり近い位置に表示されます。また、線の太さを指定することができません。
border-bottomは下線と文字の間に余白があるので、読みやすい印象です。波線は使うことができませんが、立体的な線を引くことができます。
まとめると
- シンプルな線を入れる場合・波線を使う場合→text-decoration
- 線の太さを指定して表現に幅をつけたい場合・読みやすさを重視したい場合→border-bottom
となります。デザインや目的に合わせて、使い分けましょう。
【border-bottom】の応用的な使い方
プログラミング初学者によくある声として、「文字の部分にだけ線を引きたいのにうまくいかない。」「思ったより線が長くなってしまった」というものがあります。その理由は、border-bottomプロパティが要素の下線部分に適用されるためです。
先ほどの例のようにspanタグで囲む方法以外に、「display: inline-block;」と追加で記載するという方法があります。具体例を見てみましょう。border-bottomだけ指定するとこのようになります。
See the Pen
PoGZXxw by F Saito (@kero23)
on CodePen.
「display: inline-block;」と追加するとこのようになります。
See the Pen
PoGZXLq by F Saito (@kero23)
on CodePen.
この方法は、文字や画像の大きさに応じて要素の大きさが自動で変わるので便利です。ぜひ試してみてください。
まとめ
いかがでしたか？今回はborder-bottomプロパティについてご紹介しました。線の形状・太さ・色を組み合わせて、思い通りの下線を表示させましょう。デザインの幅が広がること間違いなしです。
この記事が少しでもお役に立てればうれしいです。
参考文献：2019年 SBクリエイティブ株式会社｜1冊ですべて身につくHTML&CSSとWebデザイン入門講座【著】Mana
