Life is Tech! Lesson
オリジナル制作サンプル集
写真に説明を追加する
難易度：
関連レッスン：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タグに説明を追加します。
Step2
説明文を追加する
pタグで説明文を追加しましょう。
HTML
<section class="photo">
<h2 class="title">おすすめのパン</h2>
<div>
<img src="img/cro.jpg" width="240">
<h3>サクサククロワッサン</h3>
<p>丁寧に生地を折りたたみ8,000層を実現！自家製バターをふんだんに使っています。</p>
</div>
<div>
<img src="img/danish.jpg" width="240">
<h3>レーズンデニッシュ</h3>
<p>自家製酵母を使ってもっちり良い香りに仕上げました。</p>
</div>
<div>
<img src="img/rye.jpg" width="240">
<h3>こだわりライ麦パン</h3>
<p>本場フランスのレーズンをたっぷり使用しています。</p>
</div>
<p>毎日8:00、12:00、15:00に焼きたてのパンをご用意してお待ちしております。</p>
</section>
サンプルでは、３つのdivタグの中にそれぞれ説明文を追加しました。
Step3
説明文のセレクタを作る
CSS
.photo div p {
}
"photo"の中にある divタグ、その中に追加した pタグを指定します。
Step4
説明文の文字の色を変更する
color を追加して、文字の色を変更します。
CSS
.photo div p {
color: #663300;
}
サンプルでは #663300 (茶) を指定しています。
Step5
文字の量に合わせて枠の横幅を調整する
div の width を変更して、白枠の横幅を指定します。
CSS
.photo div {
background-color: #ffffff;
width: 380px;/* 横幅を指定する */
padding: 15px;
float: left;
margin: 10px;
box-shadow: 10px 10px 20px #000000;/* 影を指定する */
height: 420px;
}
サンプルでは、白枠を width 380px、padding 15px に指定しています。
Step6
コードを書き換えるかコピー＆ペーストする
CSS
width: 380px;/* 横幅を指定する */
コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。
Step7
文字の量に合わせて写真の横幅を調整する
img タグの width の値を変更して、写真の横幅を指定します。
HTML
<section class="photo">
<h2 class="title">おすすめのパン</h2>
<div>
<img src="img/cro.jpg" width="380">
<h3>サクサククロワッサン</h3>
<p>丁寧に生地を折りたたみ8,000層を実現！自家製バターをふんだんに使っています。</p>
</div>
<div>
<img src="img/danish.jpg" width="380">
<h3>レーズンデニッシュ</h3>
<p>自家製酵母を使ってもっちり良い香りに仕上げました。</p>
</div>
<div>
<img src="img/rye.jpg" width="380">
<h3>こだわりライ麦パン</h3>
<p>本場フランスのレーズンをたっぷり使用しています。</p>
</div>
<p>毎日8:00、12:00、15:00に焼きたてのパンをご用意してお待ちしております。</p>
</section>
サンプルでは、写真の横幅を白枠と同じ width="380" に指定しています。
Step8
コードを書くかコピー＆ペーストする
HTML
width="380"
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
Step9
文字の量に合わせて高さを調整する
div の height を変更して、白枠の高さをそろえます。
CSS
.photo div {
background-color: #ffffff;
width: 380px;/* 横幅を指定する */
padding: 15px;
float: left;
margin: 10px;
box-shadow: 10px 10px 20px #000000;/* 影を指定する */
height: 450px;
}
サンプルでは height を450px に指定しています。
Step10
コードを書き換えるかコピー＆ペーストする
CSS
height: 450px;
コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。
Step11
実際の見え方を確認する
説明文がバランスよく追加できていたら完成です。
