CSS

CSSで枠線を自由にデザイン！border・width・style・colorの基本

Webサイトのデザインでは、要素の枠線（ボーダー）を使って区切りをつけたり、装飾を加えたりすることができます。

例えば、ボタンに枠線をつけることで視認性を上げたり、表（テーブル）を見やすくするために線をつけたりします。

CSSでは、border に関する以下のプロパティを使って枠線をカスタマイズできます。

  • border-width（枠線の太さ）
  • border-style（枠線の種類）
  • border-color（枠線の色）
  • border（枠線のまとめ指定）

この記事では、これらのプロパティを詳しく解説しながら、実際に試していきます！

実際に試してみよう！

次のHTMLとCSSを使って、borderの基本 を視覚的に確認できます。

HTMLファイル（index.html）

このHTMLでは、ボックスを作成し、borderのスタイルを変更できるようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSの枠線を理解しよう！</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSの枠線を理解しよう！</h1>
    <div class="border-box">このボックスの枠線を変更してみよう！</div>
</body>
</html>

CSSファイル（style.css）

以下のCSSを保存し、値を変えながら試してみてください。

.border-box {
    width: 300px;
    height: 100px;
    border-width: 5px;
    border-style: solid;
    border-color: black;
    background-color: lightgray;
    text-align: center;
    line-height: 100px;
}

どの部分を変更すれば何が変わる？

  • border-width: 枠線の太さを調整
  • border-style: 枠線の種類（実線・点線など）を変更
  • border-color: 枠線の色を変更
  • border: 上記3つを一括で指定

いろいろな値を試してみよう！

例えば、次のような値に変更して試してみましょう。

  • border-width: 10px; → 枠線を太くする
  • border-style: dashed; → 点線にする
  • border-color: red; → 枠線を赤にする
  • border: 3px double blue; → 青色の二重線にする

それぞれのプロパティを詳しく学ぼう

border-width（枠線の太さ）

border-width は、枠線の太さを指定するプロパティです。

試してみよう！

.border-width-example {
    border-width: 10px;
    border-style: solid;
    border-color: black;
}
  • border-width: 2px; → 枠線を細くする
  • border-width: 20px; → 枠線を太くする

border-style（枠線の種類）

border-style は、枠線の種類を指定するプロパティです。

試してみよう！

.border-style-example {
    border-width: 5px;
    border-style: dashed;
    border-color: black;
}
  • border-style: dotted; → 点線の枠線
  • border-style: double; → 二重線の枠線

—

border-color（枠線の色）

border-color は、枠線の色を変更するプロパティです。

試してみよう！

.border-color-example {
    border-width: 5px;
    border-style: solid;
    border-color: red;
}
  • border-color: blue; → 青色の枠線
  • border-color: green; → 緑色の枠線

—

border（まとめ指定）

border プロパティを使うと、枠線の太さ・種類・色をまとめて指定できます。

試してみよう！

.border-example {
    border: 3px solid blue;
}
  • border: 5px dashed red; → 赤の破線の枠線
  • border: 8px double black; → 黒の二重線の枠線

    問題集

    Q1. 枠線の太さを指定するプロパティは？

    1. border-style
    2. border-width
    3. border-color

    Q2. 枠線を点線にするには？

    1. border-style: dashed;
    2. border-style: solid;
    3. border-style: double;

    ✅ 答え: Q1→2, Q2→1

    まとめ

    • border-width は枠線の太さを調整
    • border-style は枠線の種類（実線・点線など）を変更
    • border-color は枠線の色を変更
    • border はこれらをまとめて指定
    • いろいろな値を試して、枠線を自由にデザインしよう！

    シェア！

    コメントを残す

    メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

    RECOMMENDこちらの記事も人気です。