11 ホームページ基礎講座 box-shadow

2020年4月5日2024年12月25日

URLをコピーしました！

今回使うHTML/CSSファイルの準備

下記のコードをコピーもしくは模写して練習を開始しましょう。いくつか追加要素である、aria-labelledbyとidがあります。これは、ウェブアクセシビリティやHTML構造を分かりやすくするための機能です。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="エコロジーや環境問題に関する取り組みを紹介するページです。">
    <title>エコロジーと環境問題</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header role="banner">
        <h1 class="header-title">ECOLOGY【エコロジー】</h1>
    </header>
    <main role="main" class="content">
        <article>
            <section aria-labelledby="basic-policy">
                <h2 id="basic-policy" class="sub-title">基本ポリシー</h2>
                <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
                    Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
            </section>
            <section aria-labelledby="ecology-approach">
                <h2 id="ecology-approach" class="sub-title">エコロジーへの取り組み</h2>
                <p>Computer Technology
                    Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
                </p>
            </section>
            <section aria-labelledby="product-lineup">
                <h2 id="product-lineup" class="sub-title">商品のラインナップ</h2>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
                </p>
            </section>
        </article>
    </main>
    <footer role="contentinfo">
        <p>&copy;
            <script>document.write(new Date().getFullYear());</script> Computer Technology Groups. All rights reserved.
        </p>
    </footer>
</body>

</html>

ここでの`id`とは？

HTMLの各要素に「一意（ユニーク）な名前」を付けるものです。
ページ内で一つだけ使える「目印」になります。
使い方は、例えば、<h2 id="basic-policy">と書くと、この見出しに「basic-policy」という名前を付けたことになります。
その要素を特定するため。
CSSやJavaScriptで特定の要素を装飾したり操作したりする際に使います。
スクリーンリーダーなどの支援技術で、内容を伝える際にも使われます。

`aria-labelledby`とは？

「この要素はどの要素によって説明されているか」を指定するものです。
アクセシビリティ向上
aria-labelledby="basic-policy"と書くと、「このセクションはid="basic-policy"の要素によって説明されています」と指定しています。

<section aria-labelledby="basic-policy">
    <h2 id="basic-policy">基本ポリシー</h2>
    <p>...</p>
</section>

この場合、<section>全体の「タイトル」が<h2>に指定されています。スクリーンリーダーは、まず<h2>を読み上げてから<section>の内容を伝えます。

style.cssを記述

今回は、全体の背景にグラデーションを設置し、タイトルなどにドロップシャドウがかかるプロパティの設定です。

html {
    font-size: 100%;
}

body {
    /* 45度斜めの背景グラデーション */
    background-image: linear-gradient(45deg,
            #ff0000,
            /* 赤 */
            #ffff00,
            /* 黄色 */
            #ff00ff);
    /* ビューポート全体の高さを設定 */
    height: 100vh;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.content {
    /* 大きな画面での可読性を向上 */
    width: 70%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #000;
    padding: 1rem;
    /* 内側の余白を少し広げる */
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 優しい影を追加 */
    border-radius: 8px;
    /* 柔らかな角丸を追加 */
}

section {
    border: solid 1px #000;
    padding: 1rem;
    /* 内側の余白を広げる */
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    /* セクション間の間隔を広げる */
    border-radius: 8px;
    /* セクションにも角丸を統一 */
    background-color: rgba(245, 245, 245, 0.9);
    /* 背景色を明るく調整 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 立体感を控えめに表現 */
}

h1 {
    margin-top: 0;
    padding: 1rem;
    color: #ff0000;
    /* 影を控えめに調整 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    /* シンプルで読みやすいフォントを設定 */
    font-family: "Arial", sans-serif;
}

header,
footer,
h1,
h2 {
    /* ヘッダーやフッターの統一感を向上 */
    text-align: center;
    font-family: "Verdana", sans-serif;
}

.sub-title {
    /* 色の透明度を微調整 */
    background-color: rgba(255, 105, 49, 0.8);
    /* さらに柔らかさを強調 */
    border-radius: 12px;
    padding: 1rem;
    /* よりモダンな影の調整 */
    box-shadow: 0 4px 6px rgba(21, 64, 27, 0.4);
    /* サブタイトルを強調 */
    font-weight: bold;
    /* サブタイトルの文字色を白に変更してコントラストを向上 */
    color: #fff;
}

先に完成イメージ

角を丸くする`border-radius`

border-radiusは、要素（ボックス）の角を丸くするCSSプロパティです。このプロパティを使用すると、四角いボックスの角に柔らかな丸みを持たせることができます。

border-radius: 値;

ピクセル（px）: 明確なサイズで丸みを設定。
パーセント（%）: 要素のサイズに基づいて丸みを設定。
値を1つ指定すると、全ての角に同じ丸みが適用されます。
それぞれの角を個別に指定する場合　＞　border-radius: 左上右上右下左下;

全ての角を同じ丸みにする

border-radius: 8px;

全ての角に「8px」の丸みが適用されます。

個別に丸みを指定する

border-radius: 8px 0 8px 0;

左上と右下だけに「8px」の丸みが適用され、他の角はそのまま。

楕円形や円形にする

border-radius: 50%;

ボックス全体が円形または楕円形になります。

ドロップシャドウを設置

box-shadowは、HTML要素（ボックス）に影を付けるCSSプロパティです。これを使うと要素が立体的に見えたり、注目を集めたりする効果が得られます。

box-shadow: [横方向の距離] [縦方向の距離] [ぼかしの半径] [広がりの半径] [色];

横方向の距離 (x-offset)
- 影を左右どちらに動かすかを指定します。
- 正の値 → 右方向に影を移動
- 負の値 → 左方向に影を移動
縦方向の距離 (y-offset)
- 影を上下どちらに動かすかを指定します。
- 正の値 → 下方向に影を移動
- 負の値 → 上方向に影を移動
ぼかしの半径 (blur-radius)
- 影のぼやけ具合を指定します。
- 大きな値 → 影がぼんやりする
- 0 → 影がシャープになる
広がりの半径 (spread-radius)
- 影の広がりを調整します。
- 正の値 → 影が広がる
- 負の値 → 影が縮む
色
- 影の色を指定します（rgbaや#hex形式など）。

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

5px (横方向の距離) → 影が右に5px移動。
5px (縦方向の距離) → 影が下に5px移動。
10px (ぼかしの半径) → 影が少しぼやける。
rgba(0, 0, 0, 0.3) → 半透明の黒い影。

控えめな立体感を出す

要素に控えめな立体感を与えることができます。

.my-box {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

ネオン風の効果

明るい色を使用して、内側や外側に光るような影を作れます。

.my-box {
    width: 200px;
    height: 100px;
    background-color: #000; /* 背景を暗くしてネオンを際立たせる */
    border: none; /* ネオン効果には境界線は不要 */
    box-shadow: 
        0 0 10px #00ff00, /* 内側の光 */
        0 0 20px #00ff00, /* 中程度の光 */
        0 0 30px #00ff00, /* 外側の光 */
        0 0 40px #00ff00; /* 強く広がる光 */
}

文字に影をつける時は、text-shadow

text-shadow: [横方向の距離] [縦方向の距離] [ぼかしの半径] [色];

横方向の距離 (x-offset)
- 影を左右どちらに動かすかを指定します。
- 正の値 → 影を右に移動
- 負の値 → 影を左に移動
縦方向の距離 (y-offset)
- 影を上下どちらに動かすかを指定します。
- 正の値 → 影を下に移動
- 負の値 → 影を上に移動
ぼかしの半径 (blur-radius)
- 影のぼやけ具合を指定します。
- 大きな値 → 影がぼんやりする
- 0 → 影がシャープになる
色
- 影の色を指定します（rgbaや#hex形式など）。

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

2px (横方向の距離) → 影が右に2px移動。
2px (縦方向の距離) → 影が下に2px移動。
5px (ぼかしの半径) → 影が少しぼやける。
rgba(0, 0, 0, 0.3) → 半透明の黒い影。

テキストが赤くなり、黒っぽい影が右下方向にぼんやりと表示

h1 {
    color: #ff0000;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

グロー効果

明るい色を影に設定することで文字が光っているように見せることができます。

h1 {
    color: #000; /* 基本の文字色 */
    text-shadow: 
        0 0 5px #ff0000, /* 内側の強い光 */
        0 0 10px #ff0000, /* 中間の光 */
        0 0 20px #ff0000, /* 外側の光 */
        0 0 30px rgba(255, 0, 0, 0.7); /* 広がる半透明の光 */
}

複数の影

カンマ（,）で区切ることで、複数の影を付けることも可能

h1 {
    color: #ff0000; /* ベースカラー */
    text-shadow: 
        3px 3px 5px rgba(0, 0, 0, 0.4), /* 黒の影で立体感を強調 */
        -3px -3px 5px rgba(255, 255, 255, 0.6), /* 白の影で明るさを追加 */
        0 0 8px rgba(255, 0, 0, 0.5); /* 光の効果を追加 */
    background-color: rgba(245, 245, 245, 1); /* 背景色を淡いグレーに設定 */
    padding: 1rem; /* 文字と背景の間に余白を追加 */
    border-radius: 8px; /* 柔らかな角丸を追加 */
}