今回はファーストビュー、<section class="firstview"> 部分をコーディングしていきます。
スマホ幅（共通CSS)で背景画像設定
まず、ファーストビュー部分全面に表示されている画像を指定しましょう。
背景画像の指定
ファーストビューに表示されている画像を、CSSで背景画像として指定します。 背景画像の指定には、CSSプロパティbackground-imageを使います。
style.css
.firstview{
background-image: url('images/top@2x-50.jpg');
}
ファイル名が違う方は、プロパティ値の(' と ') の中に書いかれている画像パスを変更してください。
画像パスを囲うクオートは、シングルクォーテーション'でもダブルクオーテーション"でも良いです。
背景画像は<section class="firstview">に高さがないと表示されません。
合わせてmin-height（最低でも確保したい高さ）も、セットで指定しておきましょう。
値はスマホ幅デザインの、ファーストビュー画像の高さに設定しておきます。
style.css
.firstview{
background-image: url('images/top@2x-50.jpg');
min-height: 360px;
}
ブラウザで表示を見てみましょう。
画像の大きさそのままで表示されています。キリンが見えませんね。 画面幅に合わせて、ちょうど良く表示してくれるように、更にCSSの指定が必要です。
背景画像のサイズと位置を指定する
● 背景画像のサイズを指定する「background-size」
背景画像の表示サイズを、画面幅に応じて変更するには、CSSプロパティbackground-sizeを使います。 値には「cover」と書いてください。
style.css
.firstview{
background-image: url('images/top@2x-50.jpg');
background-size: cover;
min-height: 360px;
}
下図のように背景画像のサイズが変わっていたら、指定が効いています。
【background-sizeプロパティの値について】 background-sizeのプロパティ値は、キーワード値での指定と、％やpxを使った数値指定が出来ます。 キーワード値での指定は、今回使ったcoverとcontainの2つがあります。
- cover：画像を表示領域いっぱいに拡大。画像の比率が要素と異なる場合は、はみ出る部分は非表示。
- contain：縦横比を崩さず、画像全体を表示領域いっぱいに表示する。
● 背景画像の位置を指定する「background-position」
今、背景画像は左端に合わせて表示されています。 この背景画像の表示位置は、CSSプロパティbackground-positionを指定することで変更可能です。
background-position: center; をCSSに追加してみましょう。
style.css
.firstview{
background-image: url('images/top@2x-50.jpg');
background-size: cover;
background-position: center;
min-height: 360px;
}
【background-sizeプロパティの値について】 background-sizeプロパティの値も、キーワード値での指定と、％やpxを使った数値指定が出来ます。 キーワード値での指定は、以下５つがあります。
- top：上辺を基準にする
- bottom：下辺を基準にする
- left：左端を基準にする
- right：右端を基準にする
- center：中央を基準にする
値を2つ以上組み合わせる、キーワード値と数値を組み合わせることもできます。
-
background-size: top center;
→ 縦方向は上辺に合わせ、横方向は中央に配置 -
background-position: center right 20px;
→ 縦方向は中央、横方向は右から20px離れた位置に配置
ファーストビュー部分で値を変えると、以下のようになります。
background-size: cover;で要素いっぱいに表示されているので、topやbottomは指定しても見え方に変化はありません。
テキスト部分の作成
幅が違うだけで、ファーストビュー内のレイアウト（並べ方）はどの画面幅でも共通です。
タブレット幅以上のサイズは一旦置いておいて、<section class="firstview">の中身を作ります。
HTMLを書く
最初に既存のクラスを使って、コンテンツ幅と余白を確保。
<div class="container">の中に、画像上に表示する文字などの幅を設定するdivを作ります。
これは、下図で黄色い線で囲った部分です。
新しく加えたdivには、スタイル指定を行えるように「firstview-lead」クラスを追加します。
index.html
<section class="firstview section-padding">
<div class="container">
<div class="firstview-lead">
</div>
</div>
</section>
作成した<div class="firstview-lead">の中に、表示させたい文字や画像を書いていきましょう。
ファーストビューのコピーはPC幅でサイズがかなり大きくなるので、専用のクラスを作ります。
5色線の画像のwidthとheightは、PC幅デザインのサイズを書きます。 ボタン風デザインの「詳細はこちら」は、spanタグで囲み「btn-more」クラスを指定します。
index.html
<section class="firstview section-padding">
<div class="container">
<div class="firstview-lead">
<h2 class="firstview-title">キリンに乗って<br>散歩しよう！</h2>
<img src="images/line@2x-8.png" width="404" height="5" alt="">
<p>
世界で一番スリリングな冒険、キリンに乗って園内を散歩できます
</p>
<img src="images/line@2x-8.png" width="404" height="5" alt="">
<a href="#">詳細はこちら</a>
</div>
</div>
</section>
CSSを書く前に、ブラウザで確認すると以下のようになります。
CSSの記述と、クラス作成
CSSを書いて、ブラウザ表示をデザインに合わせていきます。
H1見出しのサイズ、ファーストビュー全体の文字色。
下のセクションでも文字色が白の見出しがあるので、文字色を白にする「text-white」クラスを別に作っておきます。
(※ firstview や firstview-leadをセレクタに、CSSを書いても問題ありません）
index.html
<section class="firstview section-padding">
<div class="container">
<div class="firstview-lead text-white">
<h2 class="firstview-title">キリンに乗って<br>散歩しよう！</h2>
style.css
.text-white{
color: #FFFFFF;
}
.firstview-title{
font-size: 26px;
}
font-sizeの値に迷ったら、デザインデータで設定されている文字のpt数・px数をそのまま使いましょう。
次に、firstview-leadクラスに対してwidth指定をします。 こちらも、デザインデータの数値をそのまま使ってしまいましょう。
style.css
.firstview-lead{
width: 182px;
}
詳細はこちら 部分
ファーストビュー下部にある「詳細はこちら」のボタン風リンク。 このデザインは、お知らせのセクションにある「もっとみる」と同じデザインです。 ボタン風の表示を作るための「btn-more」クラスを作って、お知らせセクションでも使えるようにしましょう。
HTMLでは、aタグに「btn-more」クラスを追加。 文字を白にしたいので、text-whiteクラスも入れます。
index.html
<a href="#" class="btn-more text-white">詳細はこちら</a>
CSSで、背景色と余白を設定します。
style.css
a.btn-more{
background-color: #F15A24;
margin-top: 1em;
padding: 0.5em 2em;
}
margin-topが効いていませんね。 これは、a要素がインラインレベルの要素のためです。 margin-topが聞くように、display: inline-block; の指定を追加しましょう。
style.css
a.btn-more{
display: inline-block;
background-color: #F15A24;
margin-top: 1em;
padding: 0.5em 2em;
}
角を丸くするために、border-radiusプロパティも指定します。 値は大体でも、Illustratorで確認して設定しても良いです。
style.css
a.btn-more{
display: inline-block;
background-color: #F15A24;
margin-top: 1em;
padding: 0.5em 2em;
border-radius: 18px;
}
スマホ幅での表示は完成です。
タブレット幅、PC幅表示のCSS
タブレット幅とPC幅でのデザインに合わせたCSSを書きます。
タブレット幅以上の場合
ファーストビューがタブレット幅になった時の、変更箇所は以下の5点です。
- .firstviewの高さ（506 px）
- .firstview-leadの幅（320 px）
- .firstview-titleのフォントサイズ（42px）
- pタグで囲ったテキストのフォントサイズ（18px）
- 詳細はこちらのフォントサイズ（21px）
各要素の大きさについては、Illustrator上でサイズを確認しても、目見当で良さそうなサイズを指定してもOKです。 上で（）内に書いているのは、Illustrator上のサイズです。
それぞれの指定を、@media (min-width: 600px) { }の中に書いていきます。
なお、タブレット幅以上では「詳細はこちら」のフォントサイズは大きくなるものの、お知らせセクションの「もっとみる」の文字サイズは変わっていません。ですので、CSSセレクタはfirstview-leadクラスの中の...という書き方をします。
style.css - @media (min-width: 600px) { } 内
.firstview{
min-height: 506px;
}
.firstview-lead{
font-size: 42px;
}
.firstview-title{
width: 320px;
font-size: 18px;
}
.firstview-lead a.btn-more{
font-size: 21px;
}
PC幅以上の場合
最後に、PC幅でのCSSを書きます。
背景画像の変更
Illustratorからの画像書き出しの時に、PC用の画像は別に書き出しましたので、そちらを使いましょう。 ファーストビュー部分の高さも、PCデザインだと大きくなっているのでmin-heightも上書きます。
PC幅以上のメディアクエリ、@media (min-width: 1024px) { }の中に書きます。
style.css
@media (min-width: 1024px) {
.firstview{
background-image: url('images/top-pc@2x-50.jpg');
min-height: 706px;
}
} /* end @media */
firstview-leadクラス
次に、firstview-leadクラス。 firstview-leadクラスは、タブレット幅よりも幅が広くなっています。 また、下図で水色の点線分だけ、コンテンツ幅の左端よりも右に寄っています。
メディアクエリ内でスタイル指定が必要なのは、以下4つ。
- .firstview-leadの左に余白
- .firstview-leadの幅を広くする
- pタグで囲ったテキストのフォントサイズ（21px）
style.css - @media (min-width: 1024px) { } 内
.firstview-lead{
width: 420px;
margin-left: 150px;
font-size: 21px;
}
表示するディスプレイのサイズによって、背景画像の見え方は変わります。 デザインと同じ1500px幅だと、以下のように見えます。
firstview-titleクラス
ファーストビューの見出し部分も、PCデザインだとフォントサイズが大きくなっています。
style.css - @media (min-width: 1024px) { } 内
.firstview-title{
font-size: 60px;
}
フォントサイズを大きくすると、余白も大きくなります。
下の線との距離が空きすぎているので、margin-bottomをゼロにします。
style.css - @media (min-width: 1024px) { } 内
.firstview-title{
font-size: 60px;
margin-bottom: 0;
}
これで、ファーストビューのコーディングは完了です。 お疲れ様でした。