影の達人になる！CSSでボックスに上下のみ影をつけるテクニック
CSS でボックスに上下のみ影をつける方法
上下のみ影をつけるには、box-shadow プロパティの最初の2つの値を0に設定し、3番目の値を影のぼかし量、4番目の値を影の色と透明度を指定します。以下のコード例をご覧ください。
.element {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
このコード例では、以下の設定になります。
- 影は上下方向に10pxぼかされます。
- 影色は黒で、透明度は50%です。
ぼかし量と影色を調整することで、影の見た目を変えることができます。ぼかし量を大きくすると、影がよりぼやけて広くなります。影色を明るくすると、影が目立たなくなります。
以下に、ぼかし量と影色の調整例を示します。
- 影をぼかす:
疑似要素を使って影を装飾する
::before や ::after などの疑似要素を使って、要素に影を装飾することもできます。これにより、影を要素の特定の部分にのみ表示することができます。
以下に、疑似要素を使って要素の下に影をつける例を示します。
.element::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
.element要素の下に疑似要素::afterが作成されます。- 疑似要素は要素の幅と高さと同じサイズになります。
- 疑似要素に影が設定されます。
CSS の box-shadow プロパティを使って、要素に様々な種類の影をつけることができます。影の向き、ぼかし量、色を調整することで、要素のデザインをより洗練させることができます。
CSS Box Shadow - 上下のみ影を表示するサンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Shadow - 上下のみ影</title>
<style>
.box {
width: 200px;
height: 100px;
margin: 20px auto;
background-color: #ccc;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
このHTMLコードは、以下の内容を定義します。
<!DOCTYPE html>: HTML5ドキュメントであることを宣言します。<html lang="ja">: ルートHTML要素を定義し、言語属性を日本語に設定します。<head>: HTMLドキュメントのヘッダー部分を定義します。<meta charset="UTF-8">: 文字エンコーディングをUTF-8に設定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">: デバイスの幅に合わせてビューポートを調整します。<title>CSS Box Shadow - 上下のみ影</title>: ドキュメントのタイトルを定義します。<style>: スタイルシートを定義します。.box: スタイルを適用する要素のセレクターを定義します。width: 要素の幅を200pxに設定します。margin: 要素の周りに20pxのマージンを設定します。background-color: 要素の背景色をグレー(#ccc)に設定します。box-shadow: 要素に影を設定します。0 0: 影の左右方向のオフセットを0に設定します。つまり、影は左右に広がりません。10px: 影の下方向のオフセットを10pxに設定します。つまり、影は要素の下に10px下に表示されます。5px: 影のぼかし量を5pxに設定します。rgba(0, 0, 0, 0.5): 影の色を黒(#000)で、透明度を50%に設定します。
</head>: ヘッダー部分の終了タグです。<div class="box"></div>:.boxクラスを持つdiv要素を作成します。</html>: HTMLドキュメントの終了タグです。
説明
このコード例では、以下の点に注目してください。
box-shadowプロパティの最初の2つの値を0に設定することで、影が左右に広がらないようにしています。- 3番目の値は影の下方向のオフセットを設定します。この値を調整することで、影を上下方向に移動することができます。
- 4番目の値は影の色と透明度を設定します。影の色を変更するには、最初の3つの値をRGB値または名前で指定します。透明度を変更するには、最後の値を0から1の間の値で指定します。
このサンプルコードを参考に、様々なデザインの影を作成してみてください。
CSS でボックスに上下のみ影をつけるその他の方法
inset を使用する
box-shadow プロパティに inset キーワードを追加することで、影を要素の内側に表示することができます。上下のみ影を表示するには、以下のコードを使用します。
.box {
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5) inset;
}
このコードは、前述の例と同じ影を作成しますが、影は要素の内側に表示されます。
疑似要素と ::before および ::after を使用して、要素の下に影を疑似的に作成することもできます。以下のコード例をご覧ください。
.box {
position: relative;
}
.box::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
.box要素にposition: relativeを設定することで、疑似要素を相対的に配置できるようにします。.box::after疑似要素を作成します。- 疑似要素を要素の下部に配置します。
- 疑似要素の幅と高さを要素と同じに設定します。
この方法は、より複雑な影を作成する場合に役立ちます。
グラデーションを使用する
CSS グラデーションを使用して、滑らかな影を作成することもできます。以下のコード例をご覧ください。
.box {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
このコードでは、要素の背景に上下方向のグラデーションが設定されます。グラデーションの色と位置を調整することで、影の外観を変更することができます。
CSS でボックスに上下のみ影をつける方法はいくつかあります。それぞれのアプローチには長所と短所があるので、自分のニーズに合った方法を選択することが重要です。
- シンプルで汎用性の高い方法:
box-shadowプロパティの最初の2つの値を0に設定して、影を上下方向にオフセットします。 - 影を要素の内側に表示:
box-shadowプロパティにinsetキーワードを追加します。 - より複雑な影を作成: 疑似要素と
::beforeおよび::afterまたは CSS グラデーションを使用します。
どの方法を選択する場合でも、影の色、ぼかし、およびオフセットを調整して、目的のデザインを実現することが重要です。
css
