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

今日も、Webデザインについて勉強しました。

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

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

background-imageプロパティは、要素の背景に画像を設置する。urlという値を使って画像のファイルを指定。「url」に続いて()内に画像のパスを記述。

background-repeatプロパティは、背景画像をどの方向に繰り返すか、または繰り返さないかを指定。

background-sizeプロパティは、背景画像のサイズを指定。数値で指定する方法とキーワードで指定する方法がある。キーワードには「cover」と「contain」がある。

background-positionプロパティは、背景画像を表示する開始位置を指定。基本的に横方向 縦方向の順にスペースで区切って記述。デフォルトは左上。数値で指定する方法とキーワードで指定する方法がある。キーワードは、横方向「left」「center」「right」、縦方向「top」「center」「bottom」がある。

backgroundプロパティは、背景関連のプロパティをまとめて指定。背景色や背景画像、サイズ、繰り返し表示など、背景に関するすべての値を一括で設定。すべての値を指定する必要はない。指定していないものは初期値が適用。プロパティ同士は半角スペースで区切る。

画像のファイルサイズが大きい場合は、画像を圧縮してサイズを軽くする。

幅は「widthプロパティ」、高さは「heightプロパティ」で要素の大きさを指定。インライン要素に指定しても、サイズの変更ができない点に注意。

単位の種類は大きく分けて「相対単位」と「絶対単位」の2種類がある。

「相対単位」は、ブラウザーの表示領域や他の要素の指定したサイズを基準として相対的に算出される単位。「%」「em」「rem」「vw」「vh」などがある。

ビューポートとは、ブラウザーでWebサイトを閲覧しているときの表示領域のこと。様々なサイズのデバイスに対応させるときに活躍。

「絶対単位」は、ブラウザーの表示領域や親要素のサイズに影響されることなく、指定したサイズでそのまま表示される単位。

余白のプロパティには「margin」と「padding」がある。要素を四角い入れ物と考えたとき、「margin」はその入れ物から他の入れ物までの距離、「padding」は入れ物の縁から中身(コンテンツ)までの距離。

marginとpaddingの間の枠線のことを「border」という。

要素の横幅を「width」、高さを「height」と呼ぶ。

要素の外側に余白を付けたいときはmarginプロパティを使う。上・右・下・左の四辺のいずれかに対して指定する方法と、上下左右を時計回りの順にして一括で指定する方法がある。

要素の内側に余白を付けたいときはpaddingプロパティを使う。指定方法はmarginと同じ。

人間は複数のものが近くに設置されていると、それらが「関連している」と認識する。レイアウトを考える上では、関連しない情報を近づけないということがとても大切。余白のバランスを調整するだけで見え方が変わる。

要素のボックスの縁と文章との間に余白がないと、非常に読みづらく、デザイン的にも美しくなくなる。Webサイトを見てくれるユーザーのために見やすい余白の領域を考える。

文章の場合、適切な縁との距離は文字サイズなどによって変わってくるが、最低でも文字サイズの1～1.5倍程度は取りたいところ。文章だけでなく、見出しなどの短文でも同じ。枠は大きめにとる。

余白をたっぷり使うことで、上品で落ち着いた雰囲気のデザインに仕上がる。余白を使いこなせば、ユーザーがWebページを見る動線や、フォーカスしてほしいポイントを作れる。

以上です！