ITコース CSS基礎 024_境界線、アウトライン、影

境界線

CSSの境界線（Borders）は、要素の周りに視覚的な境界を作成するための重要なスタイルプロパティです。

例の効果

境界線プロパティ

border-width: 境界線の幅を設定します。
border-style: 境界線のスタイルを設定します（solid：実線、dotted：点線、dashed：破線、double：二重線、groove：溝、ridge：隆起、inset：凹み、outset：突出、none：境界線なし）。
border-color: 境界線の色を設定します。

例：

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* 省略記法 */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

効果：例の効果

境界線の方向

border-top, border-right, border-bottom, border-left: それぞれ上、右、下、左の境界線を設定します。

例：

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

効果：

例の効果

角丸

border-radius: 境界線の角丸を設定します。

例：

1
    .example1 {
2
        border-radius: 10px;
3
        /* すべての角が10pxの角丸 */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

効果：

例の効果

影

CSSのbox-shadowは、要素の周りに影効果を作成するプロパティです。影は要素の立体感を高め、ページをより生き生きと見せるために使用できます。box-shadow値の前にinsetキーワードを追加することで、内側の影を作成できます。複数のbox-shadow値をカンマで区切って、複数の影効果を追加できます。要素に角丸がある場合、影は角丸に応じて適用されます。

影には、水平オフセット、垂直オフセット、ぼかし半径、影の色など、複数のパラメータがあります。

水平オフセット（horizontal offset）：影の水平方向のオフセット。
垂直オフセット（vertical offset）：影の垂直方向のオフセット。
ぼかし半径（blur radius）：影のぼかし度。
拡散半径（spread radius）：影のサイズ、正の値は拡大、負の値は縮小。
影の色：影の色。

例：

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

効果：

例の効果

アウトライン

CSSのアウトライン（outline）は、要素の周りに追加できる可視の境界線で、通常は要素の外側のエッジを強調するために使用されます。アウトラインはレイアウトに影響せず、要素のサイズや位置を変更しません。アウトラインは、フォーム要素のフォーカス可視化、リンクのアクティブ状態などに一般的に使用されます。

outline-color：アウトラインの色を設定します。
outline-style：アウトラインのスタイルを設定します。
outline-width：アウトラインの幅を設定します。
outline-offset：アウトラインオフセットプロパティを設定し、アウトラインと境界線の間隔を指定します。

例：

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

効果：

例の効果

境界線

境界線プロパティ

境界線の方向

角丸

影

アウトライン

コメント