Articles
CSS入門
ボックスモデルの装飾関連のCSSプロパティ

ボックスモデルの装飾関連のCSSプロパティ

この記事ではボックスモデルの装飾関連のCSSプロパティについて説明します。

枠線や陰影などのプロパティについて記述の仕方を学べます。

YouTube Video

プレビュー用のHTML

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

装飾

borderプロパティ 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

borderは、CSSで要素の枠を設定するために使うプロパティです。borderには、幅、スタイル、色の3つの要素があり、これらを組み合わせて要素の枠を設定します。

borderの基本構造 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • border-widthで枠線の太さを指定します。単位は、px, em, %などの単位で指定します。

  • border-styleで枠線の種類を指定します。次の値を指定できます。

    • スタイルの値:
      • none（枠線なし）
      • solid（実線）
      • dotted（点線）
      • dashed（破線）
      • double（二重線）
      • groove（彫り込み線）
      • ridge（浮き彫り線）
      • inset（内側の影線）
      • outset（外側の影線）

border-colorで枠線の色を指定します。色の指定には、色の名前、rgb(), rgba(), hex などを指定できます。

各辺ごとの個別設定 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

このように各辺ごとに別々のスタイルを設定することもできます。

幅、スタイル、色ごとの個別設定 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

border-width、border-style、border-colorによって、幅、スタイル、色ごとに指定することもできます。

border-radiusとの併用 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

border-radiusプロパティを使うと、ボーダーに角の丸みをつけることができます。

border-radiusプロパティ 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

border-radiusプロパティは、要素の角を丸くするために使用されます。HTML要素の四隅を滑らかに曲げて、長方形や正方形を丸みを帯びたデザインに変えることができます。

説明:

  • **border-radius-all-rounded**クラスでは、すべての角が20ピクセルで丸くなり、滑らかな丸い角のボックスになります。
  • **border-radius-top-left-rounded**クラスでは、上左角だけが20ピクセルで丸められ、他の角は直角のままです。
  • **border-radius-ellipse-corners**クラスでは、楕円形の角が作られ、横方向に広がった形の丸みがついたボックスになります。

border-radiusプロパティの書式 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • border-radiusプロパティの値は通常ピクセルやパーセントで指定します。また、1から4つの値を設定できます。
    • 1つの値を指定すると、すべての角が一様に丸くなります。
    • 2つの値を指定すると、1つ目の値が左上と右下の角に適用され、2つ目の値が右上と左下の角に適用されます。
    • 4つの値を指定すると、それぞれの角に異なる半径を設定できます。値は左上から時計回りに適用されます。
  • border-top-left-radiusのように個別に指定することもできます。
1border-radius: 50px / 25px;
  • border-radiusプロパティは、縦横の半径を個別に指定して、角を楕円形にすることもできます。この場合、/で区切ります。
    • 例えば50px / 25pxと指定すると、横の半径が50ピクセル、縦の半径が25ピクセルになります。

まとめ

  • **border-radius**は、要素の角を丸くするためのプロパティです。
  • ピクセルやパーセントで角の丸みを指定でき、すべての角、特定の角、あるいは楕円形にすることが可能です。
  • 柔軟なデザインやユーザーインターフェースのカスタマイズに役立ちます。

outlineプロパティ 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

outlineプロパティは、要素の周囲に描かれるラインを設定するためのCSSプロパティです。

outlineはborderに似ていますが、以下の点で異なります。

  • outlineは、要素のボックスモデルに影響を与えないため、要素のレイアウトに影響しません。
  • outlineは要素の外側に描かれるため、borderよりも外側に表示されます。
  • borderは要素の内側に描かれるため、要素のサイズやレイアウトに影響を与える可能性があります。

この例では、以下のようにoutlineプロパティを設定しています。

  • outline-solidクラスでは、2pxの太さの赤色の実線アウトラインを設定しています。
  • outline-dashedクラスでは、3pxの青色の破線アウトラインを設定しています。
  • outline-doubleクラスでは、4pxの太さで緑色の二重線アウトラインを設定しています。
  • outline-offsetクラスでは、アウトラインと要素の間に10pxのスペースを設定しています。

基本構文 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-widthには、アウトラインの太さを指定します。
  • thin、medium、thick、またはpx, emなどの単位で具体的な数値を指定できます。
outline-style
  • outline-styleには、アウトラインのスタイルを指定します。
  • solid, dotted, dashed, double, groove, ridge, inset, outset, none などを指定できます。
outline-color
  • outline-colorには、アウトラインの色を指定します。
  • 名前、HEX、RGBなど任意の色を指定できます。
outline-offset
  • outline-offsetには、アウトラインと要素の間の距離を指定します。
  • px, emなどの単位で具体的な数値を指定できます。

box-shadowプロパティ 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

box-shadowプロパティは、要素に影をつけるために使用されます。このプロパティを使うことで、要素の周囲に影を作り、立体感や深さを表現することができます。

説明:

  • **box-shadow-basic-shadow**クラスでは、要素の右下にぼかし付きの黒い影が表示されます。

  • **box-shadow-inset-shadow**クラスでは、要素の内側にぼかし付きの影が表示されます。影が内側に入り込むことで、くぼんだようなデザインを実現できます。

  • **box-shadow-multiple-shadow**クラスでは、黒と赤の2つの影が要素に適用されます。それぞれ異なる位置に表示されるため、立体的な効果が得られます。

box-shadowプロパティの書式 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
各値の意味

1番目のhorizontal offsetは水平オフセットの値で、要素の左側からの影の位置を指定します。正の値を指定すると右に、負の値を指定すると左に影が付きます。

2番目のvertical offsetは垂直オフセットの値で、要素の上側から影の位置を指定します。正の値を指定すると下に、負の値を指定すると上に影が付きます。

3番目のblur radiusはぼかし範囲の値で、影のぼかし具合を指定します。値が大きいほど影が広がり、ぼけた影になります。正の値を指定すると下に、負の値を指定すると上に影が付きます。省略可能で、デフォルトは 0で影にぼかしがつきません。

4番目のspread radiusは広がり範囲の値で、影の広がり具合を指定します。正の値を指定すると影が大きく広がり、負の値を指定すると影が縮みます。この値も省略可能です。

5番目のcolorは色の値で、影の色を指定します。色の名前やRGB、HEX、HSLなど、CSSで使用できるカラーモデルを使って色を設定します。省略した場合は、デフォルトで要素の文字色（colorプロパティの値）が適用されます。

insetキーワードを最初に指定することもできます。insetキーワードを指定すると、影が要素の外側ではなく内側に描かれます。また、複数の影をカンマで区切って設定することも可能です。

box-shadowの例

基本的な影の例 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • 水平オフセットは10pxで、右に10ピクセルの影になります。
  • 垂直オフセットは10pxで、下に10ピクセルの影になります。
  • ぼかし範囲は5pxで、影のぼかしが5ピクセルになります。
  • 色はrgba(0, 0, 0, 0.5)で、半透明の黒になります。
内側に影を付ける例 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • insetで影を要素の内側に描きます。
複数の影を付ける例 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • 複数の影をカンマで区切って設定することもできます。この例では、黒い影と赤い影の2つが適用されています。

まとめ

  • **box-shadow**は、要素に影を付けて立体感を出すためのプロパティです。
  • 水平・垂直オフセット、ぼかし、広がり範囲、色などを組み合わせて多様な表現が可能です。
  • **inset**で影を内側に描くこともできますし、複数の影を同時に設定することもできます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

背景関連のCSSプロパティリスト関連のCSSプロパティ