Life is Tech! Lesson
オリジナル制作サンプル集
できあがりイメージ
つくりかた
HTML
<h2 class="title">Mom's Bakeryについて</h2>
HTMLのh2タグ、titleという名前の class名が付いているところに対し、CSSを反映させていきます。
spanタグで「M」の文字を囲いましょう。
HTML
<h2 class="title"><span class="title-point">M</span>om's Bakeryについて</h2>
span は文章の中の一部分に目印をつけることができるタグです。
クラス名をつけておくと後でcss の指定がやりやすくなります。
サンプルでは"title-point"というクラス名をつけています。
title-point クラスにプロパティを追加していきます。
CSS
.title-point {
}
クラスセレクタの書き方は、.title-point { } です。
{ } 波カッコの中にプロパティを書いていきます。
font-size で文字のサイズを指定しましょう。
CSS
.title-point {
font-size: 40px;
}
サンプルでは文字のサイズを40px に指定しています。
他の文字より大きいサイズにするのがオススメです。
background-color で背景色を指定しましょう。
CSS
.title-point {
font-size: 40px;
background-color: #663300;
padding: 10px;
color: #ffffee;
}
サンプルでは #663300 (茶色) を指定しています。
文字の周りに余白をとっておくと読みやすくなります。サンプルでは padding を10px で指定しています。
背景色に合わせて、color で文字の色も変更しておきましょう。サンプルでは #ffffee (クリーム色) を指定しています。
CSS
font-size: 40px;
background-color: #663300;
padding: 10px;
color: #ffffee;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
border-radius: 50% を追加して、背景を円形にしましょう。
CSS
.title-point {
font-size: 40px;
background-color: #ffcc11;
padding: 10px;
color: #ffffee;
border-radius: 50%;
margin-right: 5px;
}
値はpx以外にも%で指定することができます。border-radiusを50%に指定すると全ての角が滑らかに丸まり、円形になります。
※ブラウザの種類によっては円形にならない場合があります。
また、サンプルでは、他の文字とのバランスをとるために、margin-right で 右側に 5px の余白を作っています。
CSS
border-radius: 50%;
margin-right: 5px;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
titleクラスで指定している borderプロパティを削除します。
CSS
.title {
font-size: 30px;
padding-left: 15px;
margin-bottom: 50px;
}
サンプルでは、border-left-style とborder-left-width を削除しています。
一文字目の文字が円で囲われていたら完成です。
