Life is Tech! Lesson
オリジナル制作サンプル集
背景を半透明にする
難易度：
プロパティ：background-color
関連レッスン：Chapter 1 レッスン 3
できあがりイメージ
つくりかた
Step1
影をつけたい要素をHTMLから探す
HTML
<section class="photo">
<h2 class="title">おすすめのパン</h2>
<div>
<img src="img/cro.jpg" width="240">
<h3>サクサククロワッサン</h3>
</div>
<div>
<img src="img/danish.jpg" width="240">
<h3>レーズンデニッシュ</h3>
</div>
<div>
<img src="img/rye.jpg" width="240">
<h3>こだわりライ麦パン</h3>
</div>
<p>毎日8:00、12:00、15:00に焼きたてのパンをご用意してお待ちしております。</p>
</section>
HTMLの"photo"というクラス名のsectionタグ中にあるdivタグに対し、CSSを反映させていきます。
Step2
影をつけたい要素のCSSセレクタを探す
CSSのセレクタで クラス名"photo"の中の div を探しましょう。
CSS
.photo div {
background-color: #ffffff;
width: 240px;/* 横幅を指定する */
padding: 15px;
float: left;
margin: 10px;
box-shadow: 10px 10px 20px #000000;/* 影を指定する */
}
サンプルではクラス名、"photo" の中の div タグに反映させています。
Step3
影の値を指定する
background-color を rgba の指定に変更して、背景の透明度を指定します。
CSS
.photo div {
background-color: rgba(255,255,255,0.3);
width: 240px;/* 横幅を指定する */
padding: 15px;
float: left;
margin: 10px;
box-shadow: 10px 10px 20px #000000;/* 影を指定する */
}
rgba で色を指定すると、R (レッド)、G (グリーン)、B (ブルー) に加えて、A (アルファ=透明度) の値を設定することができます。
透明度の数値は0〜1の範囲で指定します。
サンプルではRGBの値を白に、透明度を 0.3 にして、半透明にしています。
Step4
コードを書き換えるかコピー＆ペーストする
CSS
background-color: rgba(255,255,255,0.3);
コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。
Step5
実際の見え方を確認する
写真の背景が半透明になっていたら完成です。
分かりやすくするために、サンプルでは白い枠線をつけています。
