CSSグリッドを使ってレスポンシブなサイトを試作する

問題の概要

レスポンシブとは?

レスポンシブなサイトとは、端末の種類に対応(レスポンス)するWebサイトのことである。スマホで見てもパソコンで見ても、格好よく表示されるサイトを作りたい。

これを実現する方法にはいくつかあるが、今回は次のような方法を考えた。

素のHTML, スマホビュー、PCビューのモデル

画面が小さい場合にはメイン部分とサイド部分のどちらかを非表示にしておき、画面が大きい場合はどちらも表示する。これを1つのHTMLファイルにCSSを当てることで実現する。

ページの作成

素のHTMLの作成

まずは単なるHTMLファイルを作成する。

テスト1

次に各要素の余白(margin, padding)を消去し、それぞれの要素に仮のコンテンツを入力した。

テスト2

ヘッダー部分を固定し、サイド部分を非表示にした。

テスト3

テスト4

テスト5

テスト6