前回記事に引き続き、ヒーロービュー、SERVICEセクションのレスポンシブ化を行っていきましょう。
※前回までの記事をまだご覧になっていない方はぜひご覧ください！
完成形の確認
まずは模写するサイトで、デベロッパーツールを開き、デバイスモードで画面幅を狭くし、スマホ版のCSSが適用された状態とします。
このようなスタイルにしていきましょう！
元の模写コーディング前に確認したPC版のレイアウトはこんな感じでした。
ヒーロービューのレスポンシブ化
前回までに作成したサイトを開き、デベロッパーツールでデバイスモードを選択し、画面幅768px以下とします。
※前回記事でヘッダーのみレスポンシブ化が完了しています。
ヒーロービューは、PC版からは大きく見た目を変えずに、既に指定されているプロパティをpx→vwとして画面幅に応じてサイズが変化するようにしましょう。
デベロッパーツールで.heroのwidth、.hero_txtのfont-sizeに適当なvwの値を指定して丁度良い値を探していきましょう。
ちょうど良さそうな値を確認したら、スマホ版のスタイルを記述していきます。
/* PC版のCSS(省略) */
@media screen and (max-width: 768px) {
/* ヘッダーのCSS(省略) */
.hero { height: 50vw; } .hero_txt { font-size: 4vw; }
}これを適用すると下のようになります。
ヒーロービューのテキストの横幅の余裕が無くなった分、少し窮屈になった感じがあります。
ここで、スマホ版のみテキストの最後の行を途中で改行するようにしてあげましょう。
スマホ版でのみ改行するには、改行したい箇所に.spクラスを付与した<br>要素を設置し、PC表示の時はdisplay: none;で隠し、スマホ表示の時のみdisplay: block;で現れるようにします。
/* PC版のCSS(省略) */
.sp { display: none; /* PC版では非表示 */}
@media screen and (max-width: 768px) {
.sp { display: block; /* スマホ版では表示 */ }
/* ヘッダーのCSS(省略) */
.hero {
height: 50vw;
}
.hero_txt {
font-size: 4vw;
}
}index.htmlにてヒーロビューのテキストを一部変更します。
<div class="hero">
<p class="hero_txt">WEBコーダーKATSUの<br>ポートフォリオサイトです。<br>コーディングなら<br class="sp">お任せください。</p></div>これでスマホ版でのみ改行が入ります。
この.spを一つ用意しておくと、<br>以外にも、スマホ版で非表示としたい他の箇所でも同様に使いまわすことができます。
SERVICEセクションのレスポンシブ化
SERVICEセクションは次のように進めます。
- PC版で指定されている各プロパティの単位を
px→vwとします。 - カードと、カードの中に表示する画像の幅については、親要素に対する
%指定とします。 - カードの横並びを解除して縦に並べます。
先ほどのヒーロービューと同様にデベロッパーツールでいい感じになるサイズを確認し、指定していきましょう。
/* PC版のCSS(省略) */
@media screen and (max-width: 768px) {
/* ヘッダーのCSS(省略) */
/* ヒーローのCSS(省略) */
.service { padding: 10vw 0; } .service_txt { font-size: 4vw; margin-bottom: 6vw; } .service_wrap { display: block; /* display: flex; を解除する */ } .service_card { width: 90%; margin: 0 auto 10vw; padding: 5vw 10vw; } .service_cttl { font-size: 5vw; margin-bottom: 4vw; } .service_cfig { width: 50%; margin: 0 auto 4vw; } .service_ctxt { font-size: 4vw; }
}ひたすらいい感じとなるサイズを見つけていきましょう。ここまでを適用すると次のようになります。
ここでのサイズが決まれば、以降各sectionでの上下のpaddingや、テキストのfont-sizeはこれを参考にすることができます。
スタイルが適用されないとき
よくやりがちですが、スマホ版のセレクタをPC版のセレクタと異なるものとしてしまうと、詳細度が異なってしまい、プロパティが適用されない場合があります。
例えばPC版とスマホ版で、次のような書き方をしていた場合です。
...
.hero .hero_txt { ...
font-size: 26px;
...
}
...
@media screen and (max-width: 768px) {
...
.hero_txt { font-size: 4vw;
}
...
}これをデバイスモードをスマホ表示にして、見てみると、、、
スマホ版のCSSも記述しているのに、PC版のセレクタの方が詳細度が高くなっています(上方に表示されるほど詳細度が高い)。このため、スマホ版のfont-size: 4VW;は無効となります。
プロパティを上書きする場合は、前に記述したセレクタ以上の詳細度となるようにしなければなりません。
スマホ版とPC版で、全く同じセレクタで記述するのが無難でしょう。
レスポンシブ化できているか確認
ここまでをデベロッパーツールで確認してみましょう。
デベロッパーツールをデバイスモードとし、画面幅を調整して確認してみましょう。
ヘッダーは固定としていますが、ヒーロービューとSERVICEセクションはどのサイズでも、一枚の画像のようにいい感じに表示されていますね！！
まとめ
今回までの記事で模写コーディング～レスポンシブ化を紹介してきました。
模写コーディングについては手順を紹介しているサイトは多いですが、レスポンシブ化についてはあまりない印象でしたので、画像を用いて分かりやすい記事を心がけましたが、如何でしたでしょうか？？
参考にしていただければ幸いです！
次回からはやり残したドロワーメニュー等の実装にJavaScript、jQueryの導入をやっていきます。