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

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

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

★今日の内容

■ページ上部の紹介文を作成
MENUページのファーストビューには、大きな背景画像とページタイトル、紹介文を掲載。

〇ファイルの準備
「news.html」を複製し、複製したファイルを「menu.html」という名前で保存する。
この「menu.html」を編集してMENUページを作っていく。

〇HTMLを編集
共通部分は残し、必要な個所を編集していく。
◆「head」内の「title」を編集
MENUページ用のタイトルに変更。
「WCB Cafe - MENU」とする
◆不要なコンテンツを削除
ページのコンテンツである見出し部分と<div class="news-contents wrapper">の部分を削除。
◆ID名を変更
「news」とつけていたIDを「menu」に変更。
◆見出し部分を追加
「header」の下にページの見出しや紹介文を追加。

〇CSSで装飾
今まで作成してきたCSSのstyle.cssに書き足していく。
背景画像や見出し部分の高さ、余白などを指定。
モバイル版では余白のみ少し調整。

〇画像を効果的にトリミング
同じ画像でも、どの部分をトリミングするかによって見え方や伝えたい情報は大きく変わる。
デザインの目的によってどの部分に焦点を当てるかを考えるとよい。
◆目的に合わせたトリミング
・引いて見せることで、画像に映る全体像を主役として表現できる。
・1つのものをズームアップすると、その被写体を主人公として強調できる。

■タイル型レイアウトを設定
「CSSグリッド」を使って9つのメニューの画像とテキストをタイル型に並べていく。
〇コンテンツを用意
<div id="menu" class="big-bg">と<footer>の間にコンテンツを記述。
画像とテキストは「item」というクラスの<div>タグで囲み、さらに9つの「item」を「grid」というクラスのついた<div>タグで囲む。

〇CSSグリッドを使う
タイル型に並べるように親要素である「grid」クラスに対して「display: grid;」を指定する。
続いて横幅の指定ができる「grid-template-columns」で、値を「1fr 1fr 1fr」とすることで、「1:1:1」の割合で一列に3つの要素を横に並べられる。
幅が固定されず、画面の幅に合わせて自動で伸縮できるので便利。
要素同士の余白は「gap」で指定。

■レスポンシブに対応させる
〇要素を繰り返し並べる「repeat」
前の節では「grid-template-columns」の値を「1fr 1fr 1fr」としていた。
同じ数値が並ぶときは「repeat関数」を使うとスッキリとまとめて指定できる。
書き方は「repeat(繰り返す数,要素の幅)」となる。

〇要素の幅に最小値や最大値を指定「minmax」
今のままではスマートフォンで見ると画像が小さすぎて少し見づらい状態になっている。
そこで要素の幅に最小値を指定。最小値とは「これ以上は小さくならない」というサイズ。
この指定には「minmax」を使う。「minmax」ではサイズの最小値だけでなく、最大値も指定できる。
書き方は「minmax(最小値,最大値)」となる。

〇画面の幅に合わせて要素を折り返し「auto-fit」
一列に3つと限定せず、画面の幅に合わせて要素を折り返して次の行に表示させる。
repeat関数で指定した繰り返しの数値の部分を「auto-fit」に置き換えて使用できる。
「auto-fit」を使えば要素を折り返しながら親要素の余ったスペースが埋まっていく。
これでどのデバイスで見ても、見やすさを保ちながらタイル状の表示になる。

〇画像を効果的にトリミング
◆空間を生かしたトリミング
画像の主人公となる被写体をあえて中心からずらして空間を作っている画像もある。大きな背景画像として設置したいときに使える。
・視線の先に空間があると未来や前向きな印象となる。
・背後に空間があると過去を思い出しているような印象になる。

以上です！