HTML&CSSとWebデザインが1冊できちんと身につく本

6-3 フルスクリーンレイアウトのCSSを書いてみよう

3 ファーストビューエリアの領域を作成する

STEP3 ファーストビューエリアの高さを調整する

ファーストビューエリアの高さが確保できましたが、上部にヘッダーがあるため、ヘッダーの高さ110px分、メインビジュアルがブラウザの下辺からはみ出してしまいます。

.first-view {
 height: 100vh; 
}

あまりにも知識がなさ過ぎて意味が理解できなかった。
高さを100vhに指定することで、デバイスの画面と同じ高さにしている。
しかし、ヘッダーが固定で表示されるのでその分したにずれる。これで、「常に」下の部分が切れてしまうので、これを調整したい。

.first-view {
 height: calc(100vh - 110px); 
}

ということで、ヘッダー分の高さを引くことで調整する。

mortlach

 8-2 シングルカラムレイアウトのHTMLを書いてみよう

 5 2つ目のコンセプトエリアを作成する

 STEP3 クラス名を追加する
1つの要素に複数のクラス名を設定することができる
その場合は、クラス名をスペースで区切って並べる

mortlach

 8-3 シングルカラムレイアウトのCSSを書いてみよう
 5 ページとサブタイトルを設定する
 STEP2 並び順を縦並びに変更するデフォルトの状態：縦並び

display: flex;の指定：横並び

flex-direction: column;の指定：縦並び
と一見意味がなさそうに思えるが、flexを使った方がこの後のレイアウトの調整が楽になるため、flexを指定する。

mortlach

 8-3 シングルカラムレイアウトのCSSを書いてみよう
 6 コンセプトエリアをスタイリングする
 STEP4 フレックスアイテムの上下の表示位置を調整する
align-items: stretch;(デフォルト)：すべてのアイテムの高さを自動でそろえる

align-items: flex-start;：各アイテムは開始位置から普通に表示される
この例では画面幅が狭い場合、長文テキストと画像が並んでいるため、align-items: stretch;だと長文の高さに合わせて画像が引き延ばされてしまう。

mortlach

 10-3 ECサイトへリンクするページのHTMLを書いてみよう

 学習のポイント

 外部サイトへのリンクは別タブで開く
a要素のtarget属性はリンクをどのように開くかを制御する属性です。...中略...「_blank」を指定することで、別タグで開くことができます。

mortlach

 10-4 2カラムレイアウトのCSSを書いてみよう
 メインコンテンツエリアをスタイリングする
 STEP1 メインコンテンツエリアの幅を指定するflex-grow: 1;
flex-growの意味が分からなかったので調べた。
【CSS】flex-growを使おう
わかりやすい。
端的にまとめると、
画面サイズ的に何も表示されていない余白があれば、自動で埋める
flex-growを指定していない要素：余白があっても伸びない
flex-growを指定した要素：その要素に設定した値/全体として設定した値の比率で埋める

mortlach

 10-5 2カラムレイアウトのモバイル用CSSを書いてみよう
 5 メインコンテンツエリアの表示を調整する
 STEP2 グリッドの値を変更する1frという単位の意味が分からなかった。
display:gridとしたとき用の単位で、グリッドを画面の比率で割りつけてくれるもの。

1fr,2frとすると、最初のグリッドに1/3,後のグリッドに2/3の割合になる。