30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY5 HTML&CSS上級編

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY5を進めていきました。DAY5の内容は、ProgateのHTML & CSSの上級編です。これまでの初級、中級編の内容とは少し異なり、これまでに作成したWEBサイトをスマートフォンでもストレスフリーに表示することが目的です。

今回のポイント

スマートフォンで表示する際に、設定しないといけない点や、注意しないといけない点がいくつかあります。

・viewportを設定すること

・widthをpxで設定しないこと(必ずではないが、雑に使うと表示崩れのもと)

ーー以下、Progateではなかったけれど考えた方がよいと思うことーー

・mediaクエリをどこに記述するべきか考えること

・WEBページのデザイン作成時から、スマホでの表示を意識すること

(・タブレットサイズの表示はどうする??)

viewportを設定する

viewportとは、表示領域のことで、ブラウザの画面を仮想で設定し、サイトの表示を制御できます。どうしてviewportが必要なのかと言うと、PC画面用に作成されたWEBサイトをviewportを設定せずに表示すると、非常に小さく読みづらい表示となってしまうからです。(スマホのサイトを先に考え、PC画面に適用していくという、先のものとは逆からの考え方もあります。)

そんなことではユーザーは読むことにストレスを感じてしまうので、スクロールだけで、なるだけ読めるようにするためにviewportを設定します。

様々な設定方法がありますが、ユーザーそれぞれのデバイス幅に合わせた以下のような表示が一般的です。Progateのレッスンでもこちらが用いられていました。(以下をheadタグ内に記述すればOKです。)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

widthをpxでなるべく設定しない

デザインのためには絶対に必要なんだ!、自分はスマホ表示にも自信があるという方は、読む必要がありませんが、初めてのうちはwidthはなるべくpxで設定しない方がいいでしょう。

なぜ、設定しない方がいいのかというと、スマホサイズで、うまく表示されない場合があるからです。PC画面時にwidthをpxで例えば700pxとかで、設定します。

そうすると、viewportやメディアクエリをちゃんと設定したのに、スマホサイズ(例えば、横幅380px)の場合に、横側にはみ出してしまうのです。こうなると、ユーザーは縦スクロールだけでなく、横スクロールもしなければなりません。(それだけかと思う方もいるかもしれませんが、結構めんどうです。)小さいサイズの指定なら問題ないとは思いますが、この問題を起こさないためにもなるだけ最初はpx指定はしないほうがいいと思います。

 

メディアクエリをどこで記述するべきか

HTMLやCSSは、一度書いたら終わりではありません。作成したWEBページをみて、ここを直したいと思うことがあるかもしれません。CSSの場合なら、該当するファイルの下に書き足していけばなんとかなってしまうのですが、非常に読みづらいですし、だんだんコードが長くなれば、それだけ読み込みにかかる時間は増えていきます(まぁ、ちょっとですけど)

普通のCSSとメディアクエリのCSSを混ぜて書くのか書かないのか、ここは人によりけりですが、自分がどうしてそのように書いているのかは明確にした方がいいでしょう。例えば、大きく以下の2タイプが考えられます。

・CSSファイルとメディアクエリファイルに分ける。

要素ごとにCSSとメディアクエリを記述する。(それをファイルごとにわけたりもできる)

どちらでも良いと思いますが、バラバラはなるべく控えましょう。

 

WEBページのデザイン作成時から、スマホ表示を意識する

WEBページのデザインを考える時から、PC画面だけでなくスマホでみる画面についても考えて、HTMLの枠組みを考えていくのが大切です。実際に作らずとも、このWEBサイトはどういったHTMLでできているのかを考え、それをPCで再現するには、スマホで再現するにはどういったCSSを当てていけばいいのかを考えるのもためになります。

PC、スマホだけじゃない。タブレットなどはどうする?

PCやスマホだけでなく、タブレットなんかも多く使われている昨今。タブレットで見る場合の表示についても考えていかなければなりません。とはいっても、そのサイトを見せたい対象は誰かによって、タブレットの表示が必要なのか、不必要なのかはかわってきます。

 

まとめ

以上、今回は少し長くなってしまいましたが、Progateの上級が終了しました!レスポンシブは、これから先必要不可欠な技術となっていくので、知っていて損はしないものになるでしょう!

次回は、DAY6と7です。DAY6はHTML&CSSの初級、中級道場、DAY7は上級道場です。