【CSS Modules】border-bottom省略形プロパティの使い方
border-bottom省略形プロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
border-bottomプロパティは、HTML要素の下側に表示される境界線（ボーダー）のスタイルを一括で設定するためのプロパティです。これは、border-bottom-width（境界線の太さ）、border-bottom-style（境界線の種類）、border-bottom-color（境界線の色）の3つの個別プロパティの値をまとめて指定できるショートハンドプロパティとして機能します。
値を指定する際は、これら3つの値を半角スペースで区切って記述します。例えば、border-bottom: 2px solid #007bff; と記述することで、下側の境界線を太さ2ピクセルの実線で、色は青色に設定できます。各値の順序は任意であり、いずれかの値を省略した場合、そのプロパティには初期値が適用されます。例えば、スタイルや色を省略して太さのみを指定することも可能です。
このプロパティを使用することで、個別のプロパティを複数行にわたって記述する手間を省き、CSSコードをより簡潔かつ効率的に記述することが可能になります。ウェブページのレイアウトやデザインにおいて、特定の要素の下部に視覚的な区切りや強調を加えたい場合に非常に役立ちます。システムエンジニアを目指す方々にとって、効率的なCSS記述の基礎として理解しておくべき重要なプロパティの一つです。
公式リファレンス: border-bottom
構文(syntax)
1border-bottom: <border-width> <border-style> <border-color>;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません