CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

In CSS, the border-left property allows you to set the border (its width, color, and style) solely on the left side of an element, all at once.

border-left

border-leftプロパティとは

役割と概要

border-leftプロパティは、要素の左辺にのみ境界線（ボーダー）を設定するためのCSSプロパティです。通常は、以下の3つの要素（またはその一部）を指定できます。

太さ（幅）: border-left-width
線のスタイル: border-left-style
色: border-left-color

これらをまとめて、border-leftという1つのプロパティで設定することができます。

CSS

/* 実際の書き方(例) */
.element {
	border-left: 3px solid red;
}

上述の例では、左側だけに「太さ3px」「実線（solid）」「赤色」の線を適用しています。

CSSには四方向それぞれに対応するショートハンド（border-left, border-right, border-top, border-bottom）と、全方向を一括設定する総合的なショートハンド（border）があります。border-leftは、左辺のみの見た目を詳細にコントロールしたい場合に利用されます。

border-leftの基本的な書き方

ショートハンド構文

CSS

.selector {
	border-left: <border-width> <border-style> <border-color>;
}

border-width: ボーダーの太さ（幅）。指定可能な値には、px・em・remなどの長さの単位のほか、thin, medium, thick というキーワード指定もあります。; 例 : 1px, 2em, thin, etc.
border-style: ボーダーのスタイル。よく使用するものには solid（実線）, dashed（破線）, dotted（点線）などがあります。; 例 : solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden など。
border-color: ボーダーの色。色指定には、キーワード（red, blue, greenなど）、16進数表記（#RRGGBB）、RGB表記（rgb(255, 0, 0)など）、HSL表記（hsl(0, 100%, 50%)）などが利用できます。; 例 : red, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%) など。

CSS

/* 左側の境界線を3pxの青色の実線にする */
.my-box {
	border-left: 3px solid blue;
}

このように、border-leftプロパティは幅・スタイル・色をまとめて一括指定します。ただし、これらを個別に指定するやり方もあります。

個別プロパティによる指定

border-leftを使う代わりに、次の個別プロパティで細かく指定することもできます。

border-left-width
border-left-style
border-left-color

border-left-width

左辺のボーダー幅を指定します。

CSS

.my-box {
	border-left-width: 5px;
}

指定する値は長さやキーワード（thin, medium, thick）が使用可能です。
ボーダー幅を指定しても、border-left-style が指定されていなければボーダーは表示されません（スタイルが none であれば表示なしとなる）。
既定値（初期値）は medium ですが、ブラウザによって実際の太さは若干異なる場合があります。

border-left-style

左辺のボーダーのスタイルを指定します。

CSS

.my-box {
	border-left-style: dashed;
}

よく使われる主な値
- none : ボーダーなし（表示されない）
- solid : 実線
- dashed : 破線
- dotted : 点線
- double : 二重線
- groove, ridge, inset, outset : 立体的に見える装飾線（ブラウザ依存の表現）
既定値は none です。つまり、border-left-style を指定しないと線は表示されません。

border-left-color

左辺のボーダーの色を指定します。

CSS

.my-box {
	border-left-color: #ff0000;
}

CSSで使用できる各種色指定方法を使えます。
このプロパティを指定しない場合、要素の文字色（color）と同じ色がボーダーに適用されることが多いです。ただし、ブラウザやプロパティの組み合わせによっては変わるケースもあるので注意が必要です。

組み合わせ例

個別プロパティを組み合わせるときは、次のように書きます。

CSS

.my-box {
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: green;
}

またはショートハンドを使うと以下のように1行でまとめることもできます。

CSS

.my-box {
	border-left: 2px solid green;
}

個別プロパティは指定しないものがあると、初期値が適用される、もしくはボーダーが表示されない原因にもなるので注意してください。特に border-left-style が none の状態では、幅や色を指定しても線が見えません。

border-leftプロパティの利用例

サイドバーなどの装飾

ブログやホームページのデザインで、コンテンツの左側に装飾的な線を引きたい場合に便利です。

HTML

<div class="sidebar">
	<h2>サイドバー</h2>
	<p>ここにメニューやプロフィール情報などを配置します。</p>
</div>

CSS

.sidebar {
	width: 200px;
	padding-left: 0.5em; /* ボーダーが被らないように余白をとる */
	border-left: 4px solid #666; /* 左側に太めの線を強調 */
}

こうすることで、サイドバーの左側に濃い線が入り、デザイン上のアクセントになります。

インフォメーションボックス

通知やメッセージを表示する際に、強調する目的で左辺に色付きの線を入れることがよくあります。

お知らせ : こちらのページはメンテナンス中です。

HTML

<div class="info-box">
	<strong>お知らせ</strong> : こちらのページはメンテナンス中です。
</div>

CSS

.info-box {
	padding: 10px 15px;
	margin: 10px 0;
	border-left: 5px solid #007BFF; /* ブルー系の強調線 */
	background-color: #f0f8ff;      /* うっすら青みがかった背景で視認性を上げる */
	color: #333;                    /* 文字は十分にコントラストをつける */
}

このようにボーダーと背景色を合わせて見やすいデザインにすることで、ユーザーの目をひきやすい情報ボックスを作ることができます。

borderとborder-leftの使い分け

borderとは

borderは、要素の4辺すべてのボーダーを一括設定するショートハンドプロパティです。

CSS

.element {
	border: 2px solid red; /* 4辺全てに2pxの赤い実線を設定 */
}

これに対して、border-left は左側のボーダーだけを設定します。特定の辺だけスタイルを変えたい場合は、border-left (または border-top, border-right, border-bottom) を使います。

部分的に異なるボーダーを設定したい場合

例として、上と左だけ太い線で、右と下は実線だが細めにするといったケースがあるとします。

CSS

.element {
	border: 1px solid #000;        /* 全辺に1px実線を適用 */
	border-left: 5px solid #f00;   /* 左辺だけ幅5px・赤色の線に上書き */
	border-top: 5px solid #f00;    /* 上辺も幅5px・赤色の線に上書き */
}

このように基本設定を border で行ったあと、特定の辺だけ border-left などを使って上書きできるのがメリットです。

よくある疑問や注意点

border-style を指定しないとボーダーは見えない？

はい。border-left-width や border-left-color を設定していても、border-left-style が none（または未設定の場合は初期値が none）の場合、線は表示されません。少なくとも border-left-style に何らかのラインスタイルを指定する必要があります。

色を省略したらどうなる？

border-left で太さとスタイルだけを指定し、色を指定しなかった場合、ほとんどのブラウザでは要素の color プロパティがそのままボーダーの色に継承されます。ただし、厳密には「継承」ではなく「初期値としてカレントカラー（currentColor）が適用される」という考え方です。

例 : border-left: 2px solid; と指定すると、通常は文字色と同じボーダー色になります。

レイアウトへの影響（要素のサイズや余白）

ボーダーを太くすると、その分だけ要素の全体的な幅が変わる場合があります。特に要素の幅を固定している場合は、予期せず崩れが生じることもあるため、以下の点に注意してください。

box-sizing プロパティの値が content-box（初期値）の場合、ボーダーは要素のコンテンツ幅に加算される形で要素全体のサイズが大きくなります。
box-sizing: border-box; にしていると、ボーダー分の幅がボックスの中に含まれるため、要素の実際の大きさは維持されます。

box1

box2

HTML

<div class="box1">box1</div>
<div class="box2">box2</div>

CSS

.box1 {
	box-sizing: content-box; /* 初期値 */
	width: 200px;
	height: 50px;
	border-left: 10px solid #000; /* ボーダーの分だけ外側にはみ出る */
	margin: 1ex;
	background-color: palegreen;
}

.box2 {
	box-sizing: border-box;
	width: 200px;
	height: 50px;
	border-left: 10px solid #000; /* 幅200pxの範囲内でボーダー含む */
	margin: 1ex;
	background-color: palegreen;
}

まとめ

border-leftは左側のボーダーを個別に設定するためのプロパティです。
border-left: <width> <style> <color>; というショートハンド構文を使えば、1行でまとめて指定可能。
個別プロパティ（border-left-width, border-left-style, border-left-color）で細かく設定することもできる。
ボーダーを表示するには、少なくとも border-style が none 以外の値である必要がある。
色を指定しなければ、通常は要素の文字色（カレントカラー）が適用される。
ボーダーの太さを調整するときは、レイアウト（要素の幅や配置）への影響を考慮する。

総合的なサンプルコード

下記は、左側のボーダーだけ強調したカードスタイルの例です。レスポンシブデザインなどではより複雑な指定を加えることが多いですが、基本的な使い方の参考としてご覧ください。

お知らせ

1月中旬よりシステムメンテナンスを実施するため、
一部機能がご利用いただけない場合がございます。

HTML

<div class="card">
	<h3>お知らせ</h3>
	<p>
		1月中旬よりシステムメンテナンスを実施するため、<br>
		一部機能がご利用いただけない場合がございます。
	</p>
</div>

CSS

.card {
	box-sizing: border-box;      /* ボックスのサイズが変わらないように設定 */
	width: 300px;               /* カードの幅を固定 */
	margin: 20px auto;          /* 中央揃え */
	padding: 15px;
	background-color: #fff;
	border-left: 8px solid #3498db; /* 青色の太めボーダー */
	border-top: 1px solid #ccc;     /* ついでに上の境界線を薄めに設定 */
	border-right: 1px solid #ccc;   /* 右・下は別指定も可能 */
	border-bottom: 1px solid #ccc;
	border-radius: 4px;            /* 角丸をつける例 */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけて浮き上がり感を演出 */
}

.card h3 {
	margin-top: 0;
	font-size: 1.2em;
	color: #333;
}

.card p {
	color: #666;
	line-height: 1.5;
}

この例では、コンテンツ本体を白背景にして、左側だけ8px solid #3498dbという太めの実線を設定し、**「左側だけ強調されたカード」**を表現しています。四隅を角丸（border-radius）にして、さらに薄いシャドウ（box-shadow）を加えることで、情報カードやお知らせボックスのような見た目を簡単に作れます。

さらに学びたい方向けのポイント

アニメーション効果

border-leftの幅や色をアニメーションで変化させると、ユーザーの目を引くマイクロインタラクションが作れます。

お知らせ

1月中旬よりシステムメンテナンスを実施するため、
一部機能がご利用いただけない場合がございます。

CSS

.animate-border {
	transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
}

.animate-border:hover {
	border-left-width: 10px;
	border-left-color: #e74c3c;
}

マウスホバー時にボーダーが太くなり、色が変わる演出が可能。

擬似要素での実装との比較

左側の装飾を擬似要素（:beforeや:after）で作る方法もありますが、CSSプロパティが増えて複雑になるため、単純に線を引く目的なら border-left を直接指定したほうが簡潔です。擬似要素を使うケースは、斜め線やグラデーションボーダーなど、単純なボーダーでは実現しにくいデザインを作りたいときにおすすめです。

印刷スタイルや媒体の違いへの配慮

印刷媒体用（print）CSSなどでボーダーを印刷したくない場合は、メディアクエリを使用して border-left をオフにするという手法もあります。

CSS

@media print {
	.no-print-border {
		border-left: none !important;
	}
}

結論

border-leftプロパティは、要素の左側だけにボーダーを設定できる強力なCSSプロパティです。

幅・スタイル・色を個別あるいはまとめて指定でき、デザイン上のアクセントとして非常に便利です。
基本的に、border-left-style を指定しなければボーダーは可視化されません。
太い線、色付きの線を使う際はレイアウトの崩れに注意し、場合によって box-sizing: border-box; の利用などを検討しましょう。

この解説が、初心者から中級者の方にとっても「なぜ、どのように」使えばよいのかを深く理解する助けになれば幸いです。より洗練されたUIのために、ぜひborder-leftを使ったデザインを試してみてください。