Static Site Basic 01

タスク名training-wireframe (Task01)のコーディングを行う。

デザインファイル

👉 training-wireframe

Top	Archive	Article

作業要件

• デザインファイル(PSD)を確認し、EJS/SCSSでマークアップします。 参考サイト：
  • EJS - Embedded JavaScript templates
  • SCSS 学習ガイド | 標準的なWeb学習
• スタイリングはFLOCSSを用いた命名規則を用いること。
• gitを使用したバージョン管理を用いること。

課題と要点

• 正確に素早くコーディングを行う事。
• h1~h6タグの適切な使用方法について理解する。
  • 要素のデザイン的な大きさに関係なく、HTMLを文章として捉えた際に適切な位置に存在するようにすること。
  • SEOの観点からh1タグは文章中一つしか存在できないが、その他のhタグは複数存在することが出来る。
  • アクセシビリティの観点からは、h1~h6は基本的には昇順に配置されているべきである。
• 日本語フォントの「font-family」の設定方法を理解する
  • 英語フォントと同じように、日本語フォントもセリフ体とサンセリフ体に分かれます。
  • 使用するデバイスはWindows、Mac、iPhone、Androidで、各デバイスにインストールされているセリフ、サンセリフフォントは異なります。
  • フォントが正しく表示されるかどうかは、デバイスに登録されているフォント名に影響されます。 そのため、同じフォントに対して複数の名前を登録しなければならない場合があります。
• デザインファイル内で数値として設定されている行間、文字間の大部分はCSSで再現可能であり、場合によってはline-height, letter-spacingなどのプロパティを利用してデザイン再現性は細部にこだわること。