• Home
  • Web制作
  • Webページにメリハリを！CSSのborder-widthプロパティを使いこなそう！

Webページにメリハリを！CSSのborder-widthプロパティを使いこなそう！

schedule
Tags: CSS

はじめに

Webページを制作する上で、要素間の境界線を調整することは、視覚的なメリハリを生み出すために非常に重要です。CSSには、境界線の幅を調整するためのプロパティとして「border-width」が用意されています。

この記事では、border-widthプロパティの基本的な使い方から、実践的な活用例までご紹介します。この記事を通じて、border-widthプロパティをマスターし、より洗練されたWebページ制作にお役立てください。

あわせて読みたい
CSSのborderでデザインをブラッシュアップ！表現の幅を広げるテクニック集

1. border-widthプロパティの基本

border-widthプロパティは、要素の境界線の幅を指定するために使用します。具体的な記述方法を見ていきましょう。

/* 単位を指定する場合 */
border-width: 1px; /* すべての境界線の幅を1pxに設定 */
border-width: 2pt; /* すべての境界線の幅を2ptに設定 */

/* キーワードを指定する場合 */
border-width: thin; /* 細い境界線を設定 */
border-width: medium; /* 中くらいの太さの境界線を設定 */
border-width: thick; /* 太い境界線を設定 */

上記のように、border-widthプロパティには、ピクセル（px）、ポイント（pt）などの単位を指定する方法と、「thin」「medium」「thick」といったキーワードを指定する方法があります。

2. 上下左右個別に幅を設定する

border-widthプロパティでは、上下左右の境界線の幅を個別に指定することも可能です。具体的な記述方法は以下の通りです。

  • border-top-width: 上側の境界線の幅を指定
  • border-right-width: 右側の境界線の幅を指定
  • border-bottom-width: 下側の境界線の幅を指定
  • border-left-width: 左側の境界線の幅を指定
/* 上下左右個別に幅を指定する場合 */
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 20px;

3. 実践的な活用例

border-widthプロパティを活用することで、以下のような表現を実現できます。

  • ボタンに立体感を出す

    ボタンの上側の境界線を細く、下側の境界線を太くすることで、クリックできるボタンのような立体感を表現できます。

    .button {
  border-top-width: 1px;
  border-bottom-width: 3px;
}

  • 表の見出し行を強調する

    表の見出し行の上側の境界線を太くすることで、見出し行を強調し、視認性を向上させることができます。

    table th {
  border-top-width: 2px;
}

  • 区切り線を引く

    要素の上側または下側の境界線の幅を調整することで、要素間に区切り線を引くことができます。

    .section {
  border-bottom-width: 1px;
  border-bottom-style: solid; /* 線の種類を指定 */
  border-bottom-color: #ccc; /* 線の色を指定 */ 
}

4. まとめ

この記事では、CSSのborder-widthプロパティを使って、境界線の幅を調整する方法を解説しました。基本的な記述方法から、実践的な活用例までご紹介しましたので、ぜひ参考にしてWebページ制作にお役立てください。

関連記事