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

