メインコンテンツまでスキップ

Static Site Advanced 02

daiwa-jyutakuという名前のランディングページの静的ウェブサイトを作成します。

デザイン

👉 daiwa-jyutaku

HomeAboutContact
daiwa-jyutaku-home.jpgdaiwa-jyutaku-about.jpgdaiwa-jyutaku-contact.jpg

仕事の要件

  • デザインファイル(PSD)を確認して、EJS/SASSでマークアップします。
  • すべての画面幅で見やすいコードを作成します。タブレットのディスプレイサイズも考慮してください。
  • デザインデータ内の指示に従って実装します。

タスクと重要なポイント

  • デザインファイルとコードにデザイン上の問題を修正するのに時間をかけないでください。
  • 細部までデザインを再現するために多くのブレークポイントを設定してください。または、多くのブレークポイントを設定せずに自動的にレスポンシブなCSSをデザインすることもできます。例えば、display: flexを使用して要素のサイズを画面の比率に応じて拡大および縮小し、同時に最小サイズと最大サイズを設定することができます。