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

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

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

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

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

.first-view {
 height: 100vh; 
}

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

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

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

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

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

STEP3 クラス名を追加する

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

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

5 ページとサブタイトルを設定する

STEP2 並び順を縦並びに変更する

1. デフォルトの状態：縦並び
2. display: flex;の指定：横並び
3. flex-direction: column;の指定：縦並び

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

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

6 コンセプトエリアをスタイリングする

STEP4 フレックスアイテムの上下の表示位置を調整する

• align-items: stretch;(デフォルト)：すべてのアイテムの高さを自動でそろえる
• align-items: flex-start;：各アイテムは開始位置から普通に表示される

この例では画面幅が狭い場合、長文テキストと画像が並んでいるため、align-items: stretch;だと長文の高さに合わせて画像が引き延ばされてしまう。