Life is Tech! Lesson
オリジナル制作サンプル集
文字と文字の間隔をあける
難易度：
プロパティ：letter-spacing
関連レッスン：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タグの中にある、h2タグに対しCSSを反映させていきます。
Step2
文字と文字の間隔をあける要素のCSSセレクタを探す
CSSのセレクタで クラス名"photo"の中の h2 を探しましょう。
CSS
.photo h2 {
color: #ffffff;
border-color: #ffcc11;
}
サンプルでは"photo"というクラス名の中の h2 に反映させていますが、文章なら好きな箇所に指定できます。
Step3
文字と文字の間隔を指定する
letter-spacing を追加して、文字と文字の間隔を指定しましょう。
CSS
.photo h2 {
color: #ffffff;
border-color: #ffcc11;
letter-spacing: 20px;
}
サンプルでは letter-spacing を20px に指定しています。
自由に幅を変えてみましょう。
Step4
コードを書くかコピー＆ペーストする
CSS
letter-spacing: 20px;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
ワンポイント解説
photo 内の h2 はtitleというクラス名がついています。
titleクラスにletter-spacingを追加した場合は、同じクラス名を持つ shop 内の h2 にも適応されます。
CSS
.title {
font-size: 30px;
border-left-style: solid;
border-left-width: 10px;
padding-left: 15px;
margin-bottom: 50px;
letter-spacing: 20px;
}
Step5
実際の見え方を確認する
文字と文字の間隔が広がっていたら完成です。
