【今日学んだこと】HTML CSS Webデザイン

今日はWebデザインの勉強をしました。

今日の内容をまとめていきます。

★今日の内容

■レスポンシブに対応させる
現在ではWebサイトをスマートフォンで見る人の方が多くなってきている。
スマートフォンのような小さな画面でも見やすいようにCSSで調整する。

〇レスポンシブWebデザインとは
レスポンシブWebデザインとは、表示領域の幅によって見え方が変わるようデザインされたWebサイトのこと。
Webサイトに掲載するコンテンツは変更せず、デバイスのサイズに合わせてCSSだけで見た目を変更することができる。
◆カラム数を減らす
複数のカラムが横に並んでいると、スマートフォンでは非常に見づらくなる。
多くのWebサイトではスマートフォンで表示させるときには横に並んでいたカラムを下へ下へと縦に置き、1カラムにする手法をとっている。
◆表示するナビゲーションメニューの数を減らす
ナビゲーションメニューが画面上部に複数並んでいるときは、少ない画面領域に入りきらないことが多くある。
最初はナビゲーションメニューを非表示にし、メニュー用アイコンをタップすることで、すべてのナビゲーションメニューを表示させる方法がある。

〇レスポンシブに対応させる手順
◆「viewport」の設定
viewportとは、様々なデバイスにおける表示領域のこと。
HTMLの「head」内に下記の<meta>タグを記述して表示領域の横幅を合わせる。
<meta name="viewport" content="width=device-width, initial-scale=1">
◆メディアクエリーの基本
メディアクエリーは、Webページが表示された画面サイズに合わせて、適用するCSSを切り替える機能。
メディアクエリーはCSSに記述していく。
まずは「@media」と書いて「メディアクエリーを書きます」という宣言をする。
続いて()の中に画面サイズの範囲を指定。

〇文字サイズと余白を調整する
実際に制作中のサイトにメディアクエリーを適用させていく。
まずはホームページの調整。
style.cssの一番下にスタイルを追加する。

〇コンテンツを縦並びにしよう
Flexboxを使って横並びにした箇所を、スマートフォン版では縦に並べる。
Flexboxのプロパティである「flex-direction」を使えば、どの方向に並べるかを指定できる。このプロパティで値を「column」にすることで、要素を縦並びにできる。
ここではロゴとナビゲーションメニューが横に並んでいたので、この部分を縦に並べる。
「align-items: center;」も一緒に指定することで、画面中央に配置できる。
続いて「NEWS」ページも調整。
まずは横並びにしていたメインエリアとサイドバーを縦に並べる。
それぞれの幅を「100%」にすることで、横幅いっぱいにコンテンツが広がる。
あとは文字サイズや余白を調整。

〇ブレークポイントについて考える
メディアクエリーを使えば、デバイスの画面サイズによってスタイルを変更できる。
その切り替わるポイントとなる画面サイズを「ブレークポイント」という。
モバイルデバイスは縦に持って使うことが多いので、縦にしたときの画面幅=デバイスの短いほうの幅を基準にブレークポイントを考えるとよい。
600px前後に設定することが多い。

■カラムページのカスタマイズ例
〇3カラムのレイアウトに設定する
カラムを一つ追加して、3カラムに変更する。例として、縦長のバナー画像を追加。
<div class="news-contents wrapper">内に「ad」というクラスのついた<div>タグと画像を追加。
CSSで「article」の横幅を少し縮めてバランスを整える。
もともとあったサイドバーの右隣に画像が追加され、3カラムになる。
このようにFlexboxを使うと、「display: flex;」が指定された要素の中のボックスをすべて自動で横並びにしてくれる。
他にコードを追記しなくてもHTMLファイルにコンテンツを追加するだけで複数の要素を横並びにできる。

〇表示するカラムの順序を変える
現状、左から「メインエリア」「サイドバー」「バナー画像」の順に並んでいる。
これを左から「バナー画像」「メインエリア」「サイドバー」の順に変更する。
順序を変えるにはCSSのorderプロパティを使う。値には表示したい順に数字を書く。
このorderプロパティは「display: flex」の指定がある要素の子要素でしか動作しないので注意。
Webブラウザーはファイルを上から順に読み込むため、重要なコンテンツを優先的にすばやく読み込ませる必要がある。
これは、Googleなどの検索エンジンにも影響するといわれている。
一番重要なコンテンツをHTMLのなるべく上部に記述するのがベスト。

■タイル型レイアウトとは
画像や四角形の要素を、整然と並べたレイアウトのことを「タイル型レイアウト」や「カード型レイアウト」という。

〇タイル型レイアウトのメリットと構成要素
タイル型レイアウトは画像やテキストといった多くの情報を整理して一度に見せることができるので、整えられた印象になる。
レスポンシブデザインとも相性が良く、ショッピングサイトの商品一覧ページや画像ギャラリーページなどでよく利用される。
各ボックスの大きさに強弱つけたり、高さを変えて敷き詰める場合もある。
余白や左右のラインをそろえることで、画像のサイズが違っても美しく表現できる。

■タイル型レイアウトの制作の流れ
お店のメニューをタイル型レイアウトで作成する。

〇制作の流れ
01.ページ上部の紹介文を作成
ページ上部に大きな背景画像とともにページタイトルや紹介文を表示させる。
02.タイル型レイアウトの設定
CSSグリッドを使って9つのメニューをタイル型に並べていく。
03.レスポンシブに対応させる
CSSグリッドの応用を使って、自動的に画面幅に合わせて要素のサイズや数を変える。

以上です！