CSSの境界線を部分的に設定する方法を完全ガイド！初心者でもわかるborder-topなどの使い方
生徒
「CSSで、枠線（ボーダー）を全部じゃなくて上だけとかに付けることってできますか？」
先生
「はい、できます！CSSでは、border-topやborder-bottomなどを使えば、上下左右のどこに線を引くかを自由に指定できますよ。」
生徒
「なるほど！でも、どうやって書くのかちょっとイメージができません。」
先生
「それでは、実際にコードを見ながら説明していきましょう。」
1. CSSのborder（境界線）とは？基礎から仕組みを解説
Webデザインにおける「境界線（ボーダー）」とは、HTML要素（見出し、画像、文章のまとまりなど）の周囲を囲む線のことです。プログラミング初心者の方は、「情報の入れ物に付ける額縁（がくぶち）」をイメージすると分かりやすいでしょう。
この境界線があることで、コンテンツの区切りが明確になり、ユーザーにとって読みやすいレイアウトを作ることができます。CSSでは border というプロパティを使用して、以下の3つの要素をセットで指定するのが基本のルールです。
- 太さ（width）：線の厚みを
px（ピクセル）などで指定します。 - 種類（style）：一本線（実線）や点線など、線の見た目を選びます。
- 色（color）：線の色を名前やカラーコードで指定します。
まずは、ボックスの上下左右すべての辺に、同じ種類の線を引く最もシンプルな書き方を見てみましょう。一括で指定できるので、非常に便利です。
<style>
.sample-box {
/* 太さ 2px / 種類 実線(solid) / 色 青(blue) */
border: 2px solid blue;
padding: 20px;
background-color: #f9f9f9;
text-align: center;
}
</style>
<div class="sample-box">
ここに境界線が表示されます。
</div>
上記のコードでは、divタグに対して border: 2px solid blue; と記述しました。これにより、一気に「2ピクセルの太さの、青い、一本線」が四方を囲むようになります。
境界線はデザインを整えるだけでなく、「ここからここまでが一つのグループですよ」と視覚的に伝える重要な役割を持っています。まずはこの基本の書き方をマスターして、思い通りの枠線を作れるようになりましょう。
2. 境界線を部分的に設定するには？（border-topなど）
「上だけに線を引きたい」「下だけに線をつけたい」といった場合は、border-topやborder-bottomなどのプロパティを使います。
- border-top：上側の線
- border-right：右側の線
- border-bottom：下側の線
- border-left：左側の線
それぞれに線の太さ・種類・色を設定できます。
<style>
p {
border-top: 3px solid red;
padding: 10px;
}
</style>
<p>これは上だけに線をつけた例です。</p>
このように、border-topを使うことで上の線だけを設定できます。たとえば見出しの下にだけ線を引きたい場合などに便利です。
3. 境界線のデザインを変える（点線・破線など）
境界線は単なる実線だけでなく、点線や破線にもできます。線の種類はborder-styleで変更します。
代表的な指定には次のようなものがあります。
solid：実線dashed：破線dotted：点線double：二重線
<style>
h2 {
border-bottom: 3px dashed green;
padding-bottom: 5px;
}
</style>
<h2>破線のボーダーをつけた見出し</h2>
このように、線の種類を変えるだけでデザインの印象が大きく変わります。Webデザインでは、シンプルな実線よりも、点線や破線を使って区切りを柔らかく見せることも多いです。
4. 各辺に違う線をつけてデザインする
CSSでは、上下左右で異なるボーダーを設定することもできます。例えば、上は赤、下は青、左は点線などにすることも可能です。
<style>
div {
border-top: 2px solid red;
border-right: 2px dotted green;
border-bottom: 2px solid blue;
border-left: 2px dashed orange;
padding: 10px;
}
</style>
<div>上下左右で異なる境界線のデザインを設定した例です。</div>
それぞれの辺に別のスタイルを設定することで、より自由なデザインが可能になります。
5. 部分ボーダーを使った実践的なデザイン例
Webサイトのデザインでは、特定の要素にだけ部分的な線を使うことで、見た目をすっきりさせたり、情報を区切ったりすることができます。例えば、「見出しの下にだけ線をつける」ことで、ページのタイトルがよりはっきりと見えます。
<style>
h1 {
border-bottom: 4px solid #007BFF;
padding-bottom: 8px;
}
</style>
<h1>見出しの下に線を引いた例</h1>
このように、border-bottomを使うと「見出しの強調」や「セクションの区切り」にとても便利です。
6. 部分ボーダーを使うときの注意点
境界線を使うときに気をつけたいのが、要素の大きさや余白（marginやpadding）との関係です。線の太さによって、ボックスの全体サイズが変わることがあります。
また、背景色を指定している場合、線の色が背景に溶け込んで見えにくくなることもあるので、コントラスト（色の明るさの差）にも注意しましょう。
デザインを確認するときは、実際にブラウザで何度も見て、色や線の太さを微調整すると良いです。
7. まとめ：border-topなどをマスターしてデザインの幅を広げよう
CSSのborder-topやborder-bottomを使うと、部分的に線をつけられ、デザインの表現力が大きく広がります。実線・破線・点線を組み合わせることで、シンプルでもおしゃれな見た目を作ることができます。
最初は基本のborder-topやborder-bottomを使い、慣れてきたら各辺を組み合わせて自分だけのデザインを作ってみましょう。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
