今まで勉強したことを活かして、レスポンシブデザインのLPを実装していきます。今回は実装するLPの紹介とCSS,HTML,画像の準備です。CSSの作成3.画像の準備1.デモページ今回実装するのは以下のデモページです。今までのレッスンで勉強してきたレスポンシブデザインのコーディング術をフル活用します!頑張りましょう。CSSを作成していきます。「HTMLでHello,World!を表示しよう」を参考にhtmlファイルを作成します。Viewportを指定するためにheadタグ内に以下の記述を足してください。initial-scale=1.0">次にCSS。リセットCSS読み込みます。/>※リセットCSSの使い方については「CSSの記述場所と文法について」を参考にしてください。コーディングする際に使うcssファイルを作成しHTML内に読み込みの記述を追加します。/>これでHTMLとCSSの準備は完了です。今回の画像はフリー素材を利用しています。それぞれの画像のダウンロードURLを記載しておくので加工して使用してください。大きさが同じであれば他の画像でも問題ありません。各画像のサイズを見てもらうとわかると思いますが、PCよりSPの方が大きい画像を使用している場合があります。これはRetina対応するためです。レスポンシブサイトを作る際にPCの画像をそのままスマホに使ってしまうと画像の解像度が足らずボケてしまうことがあるので注意しましょう。XSに対応する場合は3倍のサイズにする必要があります。