Chapter 01

はじめに

ゆるけー
ゆるけー
2022.04.11に更新

つくるもの

Sass と FLOCSS を用いて管理性・保守性を意識したランディングページです。

以下の URL から実際につくるデモのランディングページを見ることができます。(完全に本書の宣伝ページですが…。)

https://traveler20.github.io/practice/00/
作成するLP

必須スキルと読んでほしい人

必須スキル

  • HTML/CSS を用いたページ制作がある程度できる

スキルとしては、Progate の HTML&CSS コースを一通り学習を終えている程度が目安になります!

ちなみに、今回のランディングページ制作では JavaScript を使いません。
なので、JavaScript の学習が追いついていない人でも最後まで制作することができます。
(if を用いた条件分岐とかがあるので概念的には理解がある程度必要ですが、都度解説しますね。)

読んでほしい人

  • HTML/CSSでのコーディングにはある程度慣れてきた人
  • SassやFLOCSS を使って制作物をつくってみたい人
  • CSS設計を意識したコーディングをしていきたい人

学べる内容

  • SassとFLOCSSを組み合わせた管理しやすい CSS の書き方
  • Sassを用いたスタイリング
  • FLOCSSに基づいた CSS クラスの命名

HTML/CSSのコーディング自体には慣れてきたけど、CSS設計を意識したコーディングとかSassを使ったスタイリングとかがまだ慣れていない際の練習になるかと思います。