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

Static Site Basic 02

タスク名mentha-oil (Task03)のランディングページ1ページの静的サイト制作を行う。

デザインファイル​

👉 mentha-oil

PCSP
index-oil.jpgindexSP2-oil

作業要件​

  • デザインファイル(PSD)を確認し、EJS/SCSSでマークアップします。 参考サイト：
  • 適切な形式 (JPEG/PNG/SVG) を選択して画像ファイルをエクスポートします。
  • 適切な見出しタグ (h1、h2、h3、...) を設定します。
  • Q&A パートでは、dl、dt、dd のタグが使用されます。
  • 添付ファイルに示すようにアニメーションを処理します。

課題と要点​

  • Design SP は、Retina ディスプレイをサポートするために 750px で設計されています。 すべてのパラメータは表示時に 2 で割る必要があります (375 ピクセルの画面で完全なピクセルを確認してください)。
  • 画像ファイルの種類とそれぞれの使用方法を理解します。
    • 写真などのコンテンツが多く含まれる画像の場合は、高圧縮の JPEG ファイルを選択する必要があります。
    • 貫通が必要なビットマップ画像の場合は、PNG ファイルを選択する必要があります
    • 情報量の少ないベクター画像の場合はSVGファイルも利用できますが、IE11での取り扱いには注意が必要です。
  • h1～h6タグの適切な使い方を知る
    • 要素のデザイン サイズに関係なく、HTML をテキストとして表示する場合、要素は適切な場所に存在する必要があります。
    • SEO の観点から、テキスト内で使用できる h1 タグは 1 つだけですが、他の h タグは複数存在できます。
    • アクセシビリティの観点から、h1 ～ h6 は昇順にソートされる必要があります。
  • デザイン上の丸い画像については、角のあるファイルはエクスポートせず、直角が4つの画像に変換し、その角をCSSプロパティで表現します。 - (スマートフォン画面で読み取ると、画像のサイズが縮小されます。その後、事前に湾曲した角の画像を使用する場合は、丸い角の半径も縮小されます。それ以外の場合、CSS プロパティで実行すると、次のようになります。画像の幅に応じて角の半径を指定できるため、この処理を選択する必要がありました。)
  • 日本語フォントの「font-family」の設定方法を理解する
    • 英語フォントと同じように、日本語フォントもセリフ体とサンセリフ体に分かれます。
    • 使用するデバイスはWindows、Mac、iPhone、Androidで、各デバイスにインストールされているセリフ、サンセリフフォントは異なります。
    • フォントが正しく表示されるかどうかは、デバイスに登録されているフォント名に影響されます。 そのため、同じフォントに対して複数の名前を登録しなければならない場合があります。
  • デザインファイル内で数値として設定されている行間、文字間の大部分はCSSで再現可能であり、場合によってはline-height, letter-spacingなどのプロパティを利用してデザイン再現性は細部にこだわること。
  • 移動する必要があるオブジェクトについては、position、transform、background-position などを正確に使用してください。