CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSボーダー（枠線）の使い方を徹底解説！初心者向けステップバイステップチュートリアル

CSSのborderプロパティは、HTML要素に枠線（ボーダー）を設定するために使用されます。このプロパティは、border-width（幅）、border-color（色）、border-style（スタイル）という3つのサブプロパティのショートハンド（省略記法）です。

Webページ上の要素に枠線を追加することは、Webデザインにおいて重要な要素の一つです。枠線を活用することでページ内のコンテンツを視覚的に区切ることができ、訪問者が情報を理解しやすくなります。

本記事では、CSSのborderプロパティとそのサブプロパティを使って、HTML要素に枠線をデザインする方法を詳しく解説します。この記事を読み終える頃には、CSSで枠線を自由にデザインできるようになっているはずです。

CSSボーダーの基本

前述の通り、CSSのborderプロパティは、Web要素の周囲に枠線を指定するために使用します。例えば、画像やボックス、フォームなどの周囲に枠線を適用できます。

borderプロパティは、要素の枠線に特定のスタイルを適用するための3つのサブプロパティのショートハンドです。それぞれ以下の役割を持っています。

  • border-width：枠線の太さを指定する
  • border-color：枠線の色を指定する
  • border-style：枠線のスタイル（見た目）を指定する

枠線を定義する際には、borderプロパティを一括で使う方法と、各サブプロパティを個別に使う方法のどちらでも対応できます。本記事では両方のアプローチについて解説していきます。

CSSボーダーのサブプロパティ

CSSで枠線を定義するためのサブプロパティは3つあります。ここからは、それぞれのサブプロパティを詳しく分解し、実際のコード例とともに動作を確認していきましょう。

border-styleプロパティ

border-styleプロパティは、Webページに表示する枠線の種類を定義するために使用します。つまり、枠線が「実線」なのか「点線」なのか「破線」なのかなど、線の見た目を決定するプロパティです。

border-styleプロパティには10種類の値を指定できます。以下は、それぞれのスタイルをボックスに適用したときの表示イメージと説明です。

CSSボーダー（枠線）の使い方を徹底解説！初心者向けステップバイステップチュートリアル

これらのWeb要素を作成するために使用したCSSコードは以下の通りです。

.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }

ご覧の通り、コードではすべての値を使用して枠線のスタイルを設定しています。主な値の意味は以下の通りです。

  • solid：一本の実線
  • dotted：点線
  • dashed：破線
  • double：二重線
  • ridge：浮き上がって見える立体線
  • groove：くぼんで見える立体線
  • inset / outset：要素全体がへこんだ／浮き上がったように見える線
  • none / hidden：枠線を非表示にする

border-widthプロパティ

border-widthプロパティは、CSSの枠線の太さを設定します。太さはCSSの長さの値（pt、px、emなど）で指定するか、あらかじめ用意されているキーワード値であるthin（細い）、medium（普通）、thick（太い）のいずれかで指定できます。

例えば、ボックスの周囲に5pxの実線の枠線を作りたい場合は、次のようなコードになります。

<style>
  .box {
    border-style: solid;
    border-width: 5px;
  }
</style>

<html>
  <p class="box">5pxの実線ボーダー</p>
</html>

このコードでは、solid（実線）スタイルで太さ5pxの枠線が作成されます。

border-colorプロパティ

名前の通り、色に関するプロパティは色を指定します。border-colorプロパティは、CSSで枠線の色を設定するために使用します。border-colorプロパティで受け付けられる色の値は以下の通りです。

  • カラー名：色の名前（例：blue）
  • HEX：16進数のカラーコード（例：#000）
  • HSL：HSL形式の色の値（例：hsl(10, 100%, 25%)）
  • RGB：RGB形式の色の値（例：rgb(102, 222, 95)）
  • transparent：透明

例えば、幅5pxの青い点線の枠線を持つボックスを作りたい場合は、次のようなコードを使用します。

<style>
  .box {
    border-style: dotted;
    border-width: 5px;
    border-color: blue;
  }
</style>

<html>
  <p class="box">5pxの青い点線ボーダー</p>
</html>

サブプロパティに複数の値を指定する

CSSのborder関連の各サブプロパティは、複数の値を受け付けることができます。これにより、要素の各辺（上下左右）に異なる枠線を設定することが可能になります。

要素の各辺に個別の枠線を設定する場合、値の数に応じて以下のルールが適用されます。

  • 値を1つ指定した場合：すべての辺に同じスタイルが適用される
  • 値を2つ指定した場合：「上下」「左右」の順で適用される
  • 値を3つ指定した場合：「上」「左右」「下」の順で適用される
  • 値を4つ指定した場合：「上」「右」「下」「左」の順（時計回り）で適用される

例えば、「上下は実線、左右は破線」という枠線を作りたい場合は、次のようなコードで実現できます。

<style>
  .box { border-style: solid dashed; }
</style>

<html>
  <p class="box">上下が実線・左右が破線のボーダー</p>
</html>

このコードでは、2つの枠線スタイルを指定することで組み合わせの枠線を作成しています。この要素は左右の辺にdashed（破線）スタイルが、上下にはsolid（実線）スタイルが適用されます。

同じ考え方は、枠線の色や太さを変更したい場合にもそのまま応用できます。

CSSボーダーのショートハンド（省略記法）

ここまで、3つのサブプロパティをそれぞれ個別に使用する方法を見てきました。しかし実は、これらすべてのサブプロパティを1つのborderプロパティにまとめて指定することも可能です。そうすることでコードを短縮でき、より効率的に書けます。

borderプロパティで枠線を定義する際の構造は以下の通りです。

  • border-width（任意）
  • border-style（必須）
  • border-color（任意）

例えば、テキストの周囲に「5pxのピンク色の実線」の枠線を作りたい場合は、次のようなコードになります。

<style>
  .box { border: 5px solid pink; }
</style>

<html>
  <p class="box">5pxのピンク色実線ボーダー</p>
</html>

このコードでは、3行に分けて各サブプロパティを記述する代わりに、たった1行で枠線を定義できていることが分かります。なお、ショートハンドを使う場合、border-styleの指定は必須である点に注意しましょう。

特定の辺だけにボーダーを設定する

枠線のプロパティは、Web要素の特定の1辺だけに適用することもできます。要素の特定の辺の枠線だけを設定したい場合は、以下のプロパティを使用します。

  • border-left-[property]：左辺
  • border-right-[property]：右辺
  • border-top-[property]：上辺
  • border-bottom-[property]：下辺

[property]の部分に入る値は以下のいずれかです。

  • style：枠線のスタイルを設定する
  • color：枠線の色を設定する
  • width：枠線の太さを設定する
  • 空欄：ショートハンドとして枠線をまとめて定義する

これらのプロパティと値の組み合わせはシンプルで覚えやすいですが、可能な組み合わせをすべて挙げると以下のようになります。

  • border-left-style ／ border-left-color ／ border-left-width
  • border-right-style ／ border-right-color ／ border-right-width
  • border-top-style ／ border-top-color ／ border-top-width
  • border-bottom-style ／ border-bottom-color ／ border-bottom-width

例えば、「左辺には幅2pxの実線、上辺には幅5pxの点線」というテキストボックスを作りたい場合は、次のようなコードで実現できます。

<style>
  .box {
    border-left: 2px solid;
    border-top: 5px dotted;
  }
</style>

<html>
  <p class="box">組み合わせボーダー</p>
</html>

このコードでは、ボックスの左側に2pxの実線、上側に5pxの点線が表示されます。個別のボーダープロパティを使うことで、ボックスの各辺ごとに枠線の見た目を細かく指定できるのです。

まとめ

CSSのborderプロパティは枠線を作成するために使用され、スタイル（style）、色（color）、幅（width）という3つのサブプロパティによって、枠線の各部分を個別にカスタマイズできます。

本記事では、具体的なコード例とともに、borderプロパティとその3つのサブプロパティを使ってCSSで枠線を作成する方法を解説しました。さらに、個別のボーダープロパティを使用して、要素の各辺ごとに異なるスタイルを適用する方法についても学びました。

CSSのボーダーについてさらに学びたい方は、ボーダー画像の実装、border-collapseによる枠線の統合、アウトラインとオフセット、角丸を実現するborder-radius、そして美しい影効果を演出するbox-shadowに関するチュートリアルもぜひ参考にしてみてください。

  1. CSSのborderショートハンド（一括指定）プロパティの使い方

    borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。構文CSSのborderプロパティは、次のように記述します。セレクタ {     border: /*値*/ }値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれ

  2. CSSのアウトライン（outline）とボーダー（border）の違いと使い方

    アウトライン（outline）とは？ CSSのアウトライン（outline）は、要素の周囲に線を引くためのプロパティです。最大の特徴は、レイアウト上のスペースを占有しないという点にあります。ボーダー（border）が設定されている場合は、そのボーダーの外側に描画されます。 アウトラインは、要素を視覚的に強調（ハイライト）する目的でよく使われます。たとえば、キーボード操作でフォーカスを受けたリンクやフォーム部品を目立たせるといった使い方が典型的です。なお、Firefoxなど一部のブラウザでは、フォーカス中の要素に自動的に細いアウトラインが表示されることがあります。 ただし、アウトラインには次のよ