題材サイトについて
ここからのレッスンでは「ズーロッパ東京」という架空の動物園のWebサイトを作成していきます。 レスポンシブデザインのコーディングとなります。
ブレイクポイントを設定して、デザインにあるPC、タブレット、スマホ３つのレイアウトを作っていきましょう。
素材とコーディング要件
使用するデザインデータ
レスポンシブコーディングの題材となるデザインは「zooloppa-top.ai」にまとめてあります。
素材タブにある“コース素材”より、素材フォルダ（design-sozai.zip）をダウンロードしてご利用ください。
コーディング要件
- モバイルファースト方式でCSSを書いてください
- テキストはWebブラウザのデフォルトフォントで構いません（CSSでのフォント指定不要）
- コンテンツ幅は最大で 1200px までとします
- コードはなるべくコンパクトに。CSSは共通クラス化して良いです
- ピクセル単位でぴったりデザインに合わせる必要はありません
- ロゴとサイト名は、1つの画像として切り出して良いです
- 見出し下などに使っている5色のラインも画像化OKです