Life is Tech! Lesson
オリジナル制作サンプル集
タイトルを光らせる
難易度：
プロパティ：filter:drop-shadow
関連レッスン：Chapter 1 レッスン 1
できあがりイメージ
つくりかた
Step1
光らせる要素をHTMLから探す
HTML
<header>
<h1>Mom's Bakery</h1>
</header>
このHTMLのh1タグで囲まれているところに対し、CSSを反映させていきます。
Step2
光らせる要素のCSSセレクタを探す
CSSのセレクタで h1 を探しましょう。
CSS
h1{
color: #ffffee; /* フォントの色 */
font-size: 90px; /* フォントの大きさ */
font-family: lobster; /* フォントの種類 */
text-align: center; /* 文字・画像を中央にそろえる */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
}
サンプルでは h1 に反映させます。
効果を分かりやすくするために、枠線を削除して、背景を濃いめの色の画像に変更してあります。
Step3
フィルターで影を追加する
文章を光らせるために filter で白い色の影を追加します。
CSS
h1{
color: #ffffee; /* フォントの色 */
font-size: 90px; /* フォントの大きさ */
font-family: lobster; /* フォントの種類 */
text-align: center; /* 文字・画像を中央にそろえる */
height: 320px; /* 高さ */
padding-top: 40px; /* 上がわの余白 */
background-repeat: no-repeat; /* 背景のくり返しをやめる */
background-position: top center; /* 背景の位置 */
filter: drop-shadow(0 0 5px white);
}
filter:drop-shadow(0 0 5px white);を追加して白色の影を追加します。
カッコの中は ( 影の縦の位置、横の位置、影の大きさ、色 ) の順番に値を指定します。
タイトル文字と同じ色の影をつけることで文字が光って見えます。
Step4
コードを書くかコピー＆ペーストする
CSS
filter: drop-shadow(0 0 5px white);
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
ワンポイント解説
背景と要素の明るさが似ている場合、要素を目立たせるために影を濃い色にするのも効果的です。
CSS
filter: drop-shadow(0 0 5px black);
Step5
実際の見え方を確認する
文章がこのように光って見えたら完成です。
