Life is Tech! Lesson
オリジナル制作サンプル集
マーカーで引いたような線をつける
難易度：
プロパティ：linear-gradient
関連レッスン：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タグ中のh3タグに対し、CSSを反映させていきます。
Step2
マーカー線をつける要素をタグで囲む
spanタグでh3の文字を囲いましょう。
HTML
<section class="photo">
<h2 class="title">おすすめのパン</h2>
<div>
<img src="img/cro.jpg" width="240">
<h3><span class="marker">サクサククロワッサン</span></h3>
</div>
<div>
<img src="img/danish.jpg" width="240">
<h3><span class="marker">レーズンデニッシュ</span></h3>
</div>
<div>
<img src="img/rye.jpg" width="240">
<h3><span class="marker">こだわりライ麦パン</span></h3>
</div>
<p>毎日8:00、12:00、15:00に焼きたてのパンをご用意してお待ちしております。</p>
</section>
span は文章の中の一部分に目印をつけることができるタグです。
クラス名をつけておくと後でcss の指定がやりやすくなります。
サンプルでは"marker"というクラス名をつけています。
Step3
要素にCSSを指定する
marker クラスにプロパティを追加していきます。
CSS
.marker {
}
クラスセレクタの書き方は、.maker { } です。
{ } 波カッコの中にプロパティを書いていきます。
Step4
背景色を2色指定する
background-image に linear-gradient を追加して、背景色を指定します。
CSS
.marker {
background-image: linear-gradient(transparent 50%,#ffcc11 50%);
}
linear-gradient を使うと1つの要素に2色以上の色を指定できます。
カッコの中に、色とその色が表示される範囲(-％)を指定します。0%は一番上、100%は一番下になります。
値と値は , (カンマ) で区切るように注意しましょう。
サンプルでは transparent(色を表示させない) と#ffcc11(オレンジ) を指定しています。
上から50%の位置まではtransparent(色を表示させない) なので、真ん中から下の部分に #ffcc11(オレンジ) が表示されます。
Step5
実際の見た目を確認する
文章にマーカーで引いたような線がついていたら完成です。
