border-bottomとは？初心者にも分かるCSSの基本と実例解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

border-bottomとは？

CSS の border-bottom は要素の下部にだけ境界線を引くためのプロパティです。ボックスの底辺に表示される境界線であり背景色や文字色とは独立して描画されます。border-bottom を使うと見出しの下線風の装飾やカードの区切り線などデザインの区切りを作るのに役立ちます。border-bottom は width と style と color の三つの要素を同時に指定することもできますし個別に border-bottom-width border-bottom-style border-bottom-color を設定することもできます。

基本の書き方

基本は border-bottom: width style color; の順番で書きます。例えば border-bottom: 2px solid #4a90e2; と書くと要素の下部に 2 ピクセルの実線が水色のような色で表示されます。width は px も em も % も使えますがパネルの高さに合わせる場合は em を使うと便利です。style は solid などの値を取り color には 16 進数カラーコード rgb などを使えます。これらを組み合わせるとさまざまなデザインが可能です。

三つの要素を詳しく

border-bottom には三つの要素が組み合わさって動きます。

<th>要素

説明	例
width	境界線の太さを決めます	1px, 2px, 0.5em など
style	境界線のスタイルを決めます	solid, dashed, dotted など
color	境界線の色を決めます	#ff0000, red, rgb(0,0,0)

ショートハンドの使い方

時間を節約したいときは border-bottom というショートハンドを使います。例えば border-bottom: 3px dashed #333; と書くと下部の線が3ピクセルの破線になり色は濃いグレーになります。ショートハンドを使えば width, style, color を別々に設定する手間が減ります。

実践的な使い方のコツ

サイトの見た目をきれいに整えるために見出しの下に border-bottom を使うのはとても一般的です。見出しと本文の区切りをはっきりさせたいときに有効です。またリスト項目の間に border-bottom を入れると段落ごとに区切る効果が出ます。注意点としては要素に padding がある場合 border-bottom はその padding の下端に表示され要素の高さが変わることです。レスポンシブデザインでは画面幅が変わると border-bottom の見え方も微妙に変わることがありますこうした点を理解して使うとデザインの統一感が高まります。

よくある疑問

Q1: border-bottom と border-top などは同時に設定できますか はい border-bottom border-top border-left border-right を別々に設定して組み合わせることができます。

Q2: border-bottom に透明な色は使えますか はい rgba や透明度のある色を使えば透明度を調整できます。

Q3: テーブルで border-bottom を使うとどうなりますか テーブルのセルや行の下に線が現れますが border-collapse の設定によって見え方が変わる場合があります。表全体に適用する場合は border-bottom を適用する要素を適切に選ぶことが大切です。

まとめと実装のヒント

border-bottom は下部の境界線を制御する基本的な CSS プロパティです。ウェブページのデザインで区切りや強調を作るときに便利で使い方はとても直感的です。ショートハンドで一気に書く方法も覚えておくと効率的です。実際の運用では border-bottom の太さ色質感を他の要素と比較して統一感を保つことが重要です。

border-bottomの同意語

下枠線: 要素の下部に表示される境界線を指す表現。border-bottom に対応する日本語の略称です。
下部境界線: 要素の下端に位置する境界線を指す表現で、下部を強調します。
下境界線: 要素の下側の境界線を示す表現です。
下ボーダー: 下部のボーダーを指すカジュアルな表現です。
下部ボーダー: 要素の下部を形成する境界線を指す一般的な表現です。
ボトムボーダー: 英語の bottom border を日本語風に表現した俗称です。
底部ボーダー: 要素の底部にあるボーダーを指す表現です。
底部境界線: 要素の底部に位置する境界線を指す表現です。
下辺の境界線: 要素の下端に接する境界線を指す説明です。
下部の枠線: 下部に表示される枠線のことを指します。
ボーダーの下部: ボーダーのうち下部に位置する部分を示す表現です。
下部の境界線: 要素の下部側にある境界線を指す表現です。
border-bottom-width: 下部の境界線の幅（太さ）を設定するサブプロパティ。border-bottom の一部です。
border-bottom-style: 下部の境界線のスタイル（実線・点線など）を設定するサブプロパティ。
border-bottom-color: 下部の境界線の色を設定するサブプロパティ。

border-bottomの対義語・反対語

border-top: 要素の上部に境界線を引く設定。border-bottom の反対の位置に境界線を置くイメージです。
border-left: 要素の左端に境界線を引く設定。左右の境界線のうち左側を指定します。
border-right: 要素の右端に境界線を引く設定。左右の境界線のうち右側を指定します。
border-none: すべての境界線を描かない状態。border-bottom を含む全方向の境界線をなくす形です。
outline: 境界線の代替として使われる外枠線。要素の外側に線を描くため、レイアウトには影響を与えず視覚的な境界を作る手法です。

border-bottomの共起語

border-bottom: 要素の下端に引かれる境界線を設定する CSS プロパティ。長さ・スタイル・色を個別に指定する長ハンドの要素の一部として使われることが多い。
border-bottom-width: 下部の境界線の太さを設定します。例: 1px、0.5em など。
border-bottom-style: 下部の境界線のスタイルを指定します。例: solid、dashed、dotted など。
border-bottom-color: 下部の境界線の色を指定します。色名、HEX、rgb、rgba などを使用します。
border: 四辺すべての境界線を一括設定するショートハンド。border-bottom の設定も同時に行えます。
border-width: 四辺の境界線の太さを一括設定するショートハンド。個別指定も可能です。
border-style: 四辺の境界線のスタイルを一括設定するショートハンド。
border-color: 四辺の境界線の色を一括設定するショートハンド。
padding-bottom: 要素の内容と下部境界線の間の縦方向の余白を設定します。
margin-bottom: 要素の下方向の外側の余白を設定します。レイアウトの間隔調整に使われます。
border-top: 上部の境界線を設定するプロパティ。
border-left: 左側の境界線を設定するプロパティ。
border-right: 右側の境界線を設定するプロパティ。
border-bottom-left-radius: 下左角の丸みを設定する半径。デザインによっては下部の見た目にも影響します。
border-collapse: テーブルのセルの境界線の結合方法を設定します。内部的には border-bottom の見え方にも影響します。
ショートハンド: 複数の境界線関連プロパティを一つにまとめて指定する概念・手法です。

border-bottomの関連用語

border-bottom: 要素の下辺に表示される境界線を指定するCSSプロパティ。色・太さ・スタイルを個別に設定するショートハンド的な役割を持つ。
border-bottom-color: 下部の境界線の色を決めるプロパティ。カラー値にはカラー名、16進カラー、rgb/rgba、hsl/hslaなどを使える。
border-bottom-width: 下部の境界線の太さを決めるプロパティ。px・em・rem・%などの長さ単位を使い、thin/medium/thick も指定できる。
border-bottom-style: 下部の境界線のスタイルを決めるプロパティ。none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset などを指定する。
border: 周囲の境界線をまとめて指定するショートハンド。例: border: 1px solid #333; で四辺を一度に設定できる。
border-color: 四辺すべての境界線の色を一括指定するショートハンド。border-bottom-color も含む。
border-width: 四辺すべての境界線の太さを一括指定するショートハンド。border-bottom-width も含む。
border-style: 四辺すべての境界線のスタイルを一括指定するショートハンド。border-bottom-style も含む。
border-radius: 要素の角を丸くする半径を指定するショートハンド。border-bottomの角にも影響する。
border-bottom-left-radius: 要素の左下の角の丸みを個別に指定するプロパティ。
border-bottom-right-radius: 要素の右下の角の丸みを個別に指定するプロパティ。
box-model: CSSの基本概念。要素はcontent、padding、border、marginで構成され、border-bottomはBorderの一部として扱われる。
outline: 境界線の代わりに要素を包むライン。フォーカス時の補助表示として使われることが多く、レイアウトには影響しない。
カラー値の表現: 色を指定する表現方法の総称。カラー名、16進数、rgb/rgba、hsl/hslaなどがある。
長さの単位: border-widthを決める際に使う長さの単位。px、em、rem、%、vh/vw などがある。
hover効果: マウスを乗せた時に border-bottom を変える等のインタラクションを追加するテクニック。
transition: border-bottom の変化を滑らかにするためのCSSトランジション。duration、timing-function、delay を指定できる。
アクセシビリティ: 色だけでなくコントラストやフォーカス表示を考慮して、 border-bottom が情報伝達に適切かを検討すること。