今回のポイント
今回は前回作成したブロックへ影を付ける方法を解説していきます。
自身のサイトやブログを装飾するには、非常に役立つスキルとなります。
前準備
いつものように前準備をしていきましょう。
HTMLファイルを準備する
前回使用した、HTMLファイルとソースコードを使用します。
もしHTMLファイルの作成方法が分からない方は、以下の記事を参考にしてみて下さい。
使用するソースコードについては以下を参照して下さい。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<img src=”pakupaku.png” alt=”ぱくぱくブログ画像１”>
<div class=”test”>
</div>
</body>
</html>
画像を準備する
今回使用する画像は事前に私が準備したものを使用しますね。
使用する画像は以下のものです。
画像の情報】
種 類：PNGイメージ
大きさ：1656 × 630
名 前：pakupaku.png
この画像は、HTMLと同じフォルダに保存しておきます。
CSSファイルを準備する
CSSファイルは外部にファイルを作成して記述していきます。
CSSファイルを外部に作成する方法については以下の記事を参考にして下さいね。
そしてソースコードは前回使用したものをそのまま使用します。
ソースコードは以下を参照して下さい。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
}
それでは前回作成したHTMLファイルをブラウザで確認しておきましょう。
影を付ける方法
それではこのサイトにあるブロックへ、影をつけていきたいと思います。
CSSに影を付けるコードを記述する
影を付けるプロパティには『box-shadow』を使用します。
●● {
box-shadow: ▲px ■px △px □px 色;
{
このプロパティの指定内容を解説しておきます。
▲px・・・影の左右の向き
■px・・・影の上下の向き
△px・・・影のぼかし
□px・・・影の広がり
色・・・・影の色
このような感じです。
文字で解説してもイメージ湧かないですね。
それでは一つ一つを記述しながら解説していきますね。
影の左右と上下の向きを指定する
早速先程の解説にあったように、影の左右を指定してみましょう。
以下のようにソースコードを追記します。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
box-shadow: 4px 4px;
}
このCSS内容をブラウザで確認すると以下のようになります。
少し影の位置を変えてみましょう。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
box-shadow: 4px -4px;
}
そしてブラウザで確認してみます。
影の位置が変化したのが分かりますね。
このように『マイナス記号』を付けることで、影の位置が上下逆になることが分かりました。
左右についても同様の方法で、影の位置を変えることが可能です。
今回は『box-shadow: 4px 4px;』の方がしっくりくるので、こちらに戻しておきましょう。
影にぼかしの指定をする
それでは更に、先程のCSSに以下の内容を追記します。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
box-shadow: 4px 4px 8px;
}
それではブラウザで確認してみましょう。
影にぼかし効果が現れたのが分かりますか？
先程の影よりも、よりリアルに見えますね。
数字を大きくすることで『ぼかし効果』は大きくなります。
影の広がりを指定する
また更に以下の内容を、CSSに追記してみましょう。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
box-shadow: 4px 4px 8px 4px;
}
影に広がりができたのが確認できたでしょうか。
うーん。。。
今回のケースでは必要なさそうですね。
元に戻しておきましょう！
数字を大きくすることで『広がり効果』は大きくなります。
影の色を指定する
最後に以下のソースコードを追記してみましょう。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
box-shadow: 4px 4px 8px red;
}
それではブラウザで確認してみましょう。
派手な感じの影になりました！
（分かりやすくする為にワザとやってしまったのですが。。。）
では私好みの影の色に指定してみます。
img {
width: 80%; height: 80%;
}
.test {
height: 4em;
background: #fff8e8;
border-left: solid 10px #ffc06e;
box-shadow: 4px 4px 8px gray;
}
それではブラウザで確認してみましょう。
いかがですか？
影と言っても沢山指定することがあります。
色々試して『影を指定する方法』をマスターしてみて下さい。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
