Static Site Basic 03
タスク名mgm-design (Task26)のランディングページ1ページの静的サイト制作。
| 作業見積もり目安 | 作業期間(修正完了含む) |
|---|
| - | 52時間 |
デザインファイル
👉 mdm-design
| PC | SP |
|---|
 |  |
作業要件
- デザインファイル(AI)を確認し、EJS/SCSSでマークアップします。 参考サイト:
- FLOCSS ルールに従って CSS を設計し、コーディング時に再利用に注意してください。
- YoutubeとGoogleマップの部分はiframeでコーディングされています。
課題と要点
- 画像ファイルを書き出す場合は、1pxのオフセットに注意してください。 特にIllustratorは印刷物デザインで使用されることが多いため、ピクセルグリッド(mmやptで指定)が合わない場合があります。 その際、ピクセルプレビューを使用し、出力される画像ファイルに「1px」の差が生じないように注意してください。
- FLOCSS の規則に従って、後で追加のサブページが作成された場合にクラス名が競合しないように CSS クラスに名前を付けます。
- コーディング中にプロパティdisplay: flex を乱用しないでください。 水平ブロック要素の場合は、
display: inline-block または float: left を使用するだけで十分な場合があります。 これらのプロパティを意識して使用してください。