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

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

重要だと思ったポイントをまとめていきます。

★重要だと思ったポイント

■レイアウト

レイアウトとは、掲載する様々なコンテンツを、ユーザーが使いやすいようにWebページ上のどこにどう配置するのかを設計すること。
Flexboxとは、「Flex Box Layout Module」の略のことで、複雑なレイアウトも簡単に組める書き方。CSSでレイアウトを組む上でのベースとなる。

〇Flexboxの基本的な書き方
Flexコンテナー呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れてHTMLを作成。

CSSで親要素であるコンテナーに対して「display: flex;」を追加する。
親要素に「display: flex;」を記述した上で、追加のプロパティを記述すれば要素の並び方をカスタマイズできる。

〇子要素の並ぶ向き「flex-directionプロパティ」
子要素をどの方向に配置していくかを指定する。横または縦に並べられる。

〇子要素の折り返し「flex-wrapプロパティ」
子要素を1行、または複数行に並べるかを指定。
複数行にする場合は子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていく。

〇水平方向の揃え「justify-contentプロパティ」
親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定する。

〇垂直方向の揃え「align-itemsプロパティ」
親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定する。

〇複数行にしたときの揃え「align-contentプロパティ」
子要素が複数行にわたった場合の垂直方向の揃えを指定する。
「flex-wrap: nowrap;」が適用されていると無効になる。

■CSSグリッドでタイル型に並べる
タイル型レイアウトとは、壁にタイルを敷き詰めるように同じ大きさのボックスを等しい感覚で並べていくレイアウトのこと。
ここでは「CSSグリッド」という方法を紹介。

〇CSSグリッドの基本的な書き方
CSSグリッドを使うにはflexboxと同じように、親要素と子要素が必要。
グリッドコンテナーと呼ばれる親要素で全体を囲み、その中に実際に横に並べていくグリッドアイテム(子要素)を配置する。

〇CSSグリッドの書き方
CSSでグリッドコンテナーに「display: grid;」を追加して、CSSグリッドのレイアウト組みを開始する。

〇グリッドアイテム(子要素)の横幅「grid-template-columnsプロパティ」
「grid-template-columnsプロパティ」で各グリッドアイテムの横幅を指定することで、横並びに設定できる。
一列にグリッドアイテムが複数必要な場合は、半角スペースで区切って必要なグリッドアイテムの数だけ幅を指定。

〇グリッドアイテム(子要素)同士の余白「gapプロパティ」
グリッドアイテムの間に余白を付ける。上下左右の端は親要素であるグリッドコンテナーの枠にそろう。

〇CSSグリッドで使える単位「fr」
「fr」「fraction(比率)」のことで、親要素から見た子要素の大きさを具体的な数値ではなく割合で指定できる。
画面の幅に合わせて自動で伸縮させるなら「fr」を使うと便利。

〇グリッドアイテム(子要素)の高さ「grid-template-rowsプロパティ」
グリッドアイテムの高さを指定。
列が複数ある場合は半角スペースで区切って、必要な行の数だけ1行ごとに指定する。

〇視線の流れを理解する
ユーザーが画面を見るとき、その視線の流れには法則がある。
・Z型…左上→右上→左下→右下の順に、「Z」の字のように視線が動くという法則。
・F型…左上から開始し、右に向けて視線を動かしながら下へ下へと「F」の字に視線が動くという法則。
ユーザーは初めて訪れたWebサイトや画像の多いWebサイトは「Zの法則」で全体を見渡すことが多い。
何度か訪れたことのあるWebサイトや情報量の多いWebサイトでは「Fの法則」で目的の情報を探すことが多い。
「Zの法則」「Fの法則」でユーザーの視線の流れを掴んだうえで、まずはそのページで何を一番見てもらいたいのかを考えてレイアウトを組む。

〇配置する順番を考える
Webページでは基本的に画面の左上から読み始める。
重要な情報や注目してほしい要素はこの位置に配置するとよい。

〇配置する面積を工夫する
目立たせたい情報の面積を大きくするだけで注目度が高まる。
逆に重要ではない情報の面積は小さくする。
画面にメリハリをつけることで読みやすいレイアウトになる。

■デフォルトCSSのリセット
ブラウザーのデフォルトで適用されているCSSはブラウザーごとに異なる。
自身で作成したCSSファイルは、デフォルトのCSSを上書きする形で適用される。
そのため、場合によってはブラウザーごとに見え方が変わってきてしまう。
リセットCSSを使うことで、ブラウザーが本来適用させているCSSを打ち消し、異なるブラウザーで見ても表示を統一することができる。

○リセットCSSの読み込ませ方
リセットCSSは自分で作成してもよいが、書く量も多く最初のうちは難しい。
外部のサイトで公開されているCSSファイルを利用するといい。

〇HTMLへの書き込み方
HTMLファイルの「head」部分にリセットCSSを読み込ませる。
ファイルをダウンロードしてもよいが、Web上に公開されている場合、URLを直接書き込めば適用される。
「head」内に読み込ませるときは、記述する順番に気を付ける。
下に書いたものが後から読み込まれるため、必ず最初にリセットCSSを書き、その下に自作のCSSファイルを書く。

〇リセットCSSのブラウザーでの見え方
リセットCSSを読み込ませると、違うブラウザーで見ても表示が統一される。
これをベースに自分でCSSファイルを作成し、表示させたいデザインに変更していく。

以上です！