追加のレイアウト調整
ヘッダー
- お問い合わせボタンを右上に絶対配置にする
COMPANY
- テキストエリア、画像エリアをパーセント対応にして、画像エリアを絶対配置にしてエリアの重なりを作る
レスポンシブ対応の流れ
1. 横スクロールが発生しない状態を作る
横スクロールしてしまう場所（＝widthで幅指定しているところ）にmax-width: 100%;を追加
2. 横幅いっぱいデザインのところを除き、タブレットサイズで左右余白が入るように設定
各セクションの左右paddingでデザイン上の余白サイズを設定
デザイン上の横幅＋左右余白サイズの値をwidthで設定
↑の場合、
width: 1000px + 16px + 16px = 1032px;
padding-inline: 16px;
3. 見出しなど共通コンテンツの調整
4. セクション毎の調整を上から行っていく
レスポンシブ対応
全体
- 横幅指定している箇所の最大幅を100%にする
- タブレットサイズ幅の左右余白を16pxで設定する
NEWS
- 各記事の幅をパーセント対応にする
ABOUT
- 画像エリア、テキストエリアをパーセント対応にする
COMPANY
- テキストエリア、画像エリアをパーセント対応にする
- 画面を小さくしたときにテキストエリアの文字と画像が被らないよう、テキストエリアの余白を調節する
スマホ対応
ヘッダー
- お問い合わせボタンを画面下部に固定配置にする
- ロゴサイズ変更
- ロゴとメニューを縦並びに
メインビジュアル
- 画像を入れ替え(HTMLのpictureタグで対応)
ABOUT
- 画像エリア、テキストエリアを縦並びに
BUSINESS
- 各コンテンツを縦並びに
COMPANY
- 各項目を縦並びに
フッター
- 各項目を縦並びに
全体
- コンテンツ間の余白等調整