ボーダー

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 36/76。

CSSにおいて、ボーダーは要素を囲む線であり、他の要素から分離してその境界を定義するものです。

borderプロパティを使用するための基本的な構文は次のとおりです：

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: 境界線の太さ。ピクセル（px）、エム（em）、またはその他の有効なCSS単位で指定できます。また、thin、medium、thickのようなキーワードを使用することもできます。

border-style: ボーダーのスタイル。以下のいずれかを指定できます：
- dotted: 点の連続
- dashed: 破線の連続
- solid: 1本の実線
- double: 2本の実線

border-color: 境界線の色。名前付きカラー、16進数値、RGB値、またはHSL値を使用して指定できます。

また、ショートハンド記法を使用して、3つのボーダープロパティすべてを一度に設定することもできます：

selector {
    border: width style color;
}

例えば：

p {
    border: 2px solid blue;
}

この例では、すべての <p> （段落）要素は、幅が 2px の青い実線のボーダーを持ちます。

チャレンジ

簡単

金曜日、土曜日、日曜日の映画スケジュールをそれぞれ表す3つの <div> 要素が含まれるHTMLドキュメントが与えられます。あなたのタスクは、border プロパティを使用してこれらをスタイリングすることです。

金曜日のスケジュールに 3px solid black のボーダーを適用してください。
土曜日のスケジュールに 4px dashed blue のボーダーを適用してください。
日曜日のスケジュールに 5px dotted green のボーダーを適用してください。

チートシート

ボーダー（境界線）は、要素を囲む線であり、他の要素と区別し、その境界を定義します。

ボーダーのプロパティ：

border-width: 太さ（px、em、または thin、medium、thick などのキーワード）
border-style: スタイル（dotted、dashed、solid、double）
border-color: 色（カラー名、16進数、RGB、HSL）

個別のプロパティ：

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

一括指定（ショートハンド）記法：

selector {
    border: width style color;
}

例：

p {
    border: 2px solid blue;
}

自分で試してみよう

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>