【実践編】デザインとコーディング要件

• 題材サイトについて
• 素材とコーディング要件
• 使用するデザインデータ
• コーディング要件

題材サイトについて

ここからのレッスンでは「ズーロッパ東京」という架空の動物園のWebサイトを作成していきます。
レスポンシブデザインのコーディングとなります。

ブレイクポイントを設定して、デザインにあるPC、タブレット、スマホ３つのレイアウトを作っていきましょう。

素材とコーディング要件

使用するデザインデータ

レスポンシブコーディングの題材となるデザインは「zooloppa-top.ai」にまとめてあります。

本講座のサイドバーにある“コース素材一覧”、もしくは下記ボタンより素材ファイルをダウンロードしてご利用ください。

素材ダウンロードはこちら

コーディング要件

• モバイルファースト方式でCSSを書いてください
• テキストはWebブラウザのデフォルトフォントで構いません（CSSでのフォント指定不要）
• コンテンツ幅は最大で 1200px までとします
• コードはなるべくコンパクトに。CSSは共通クラス化して良いです
• ピクセル単位でぴったりデザインに合わせる必要はありません
• ロゴとサイト名は、1つの画像として切り出して良いです
• 見出し下などに使っている5色のラインも画像化OKです