CSSのメタ言語であるSassやCSS設計で注目されているFLOCSSを用いてランディングページを制作するチュートリアル。

CSSを効率的に書けるSassや、管理しやすいCSSの書き方であるFLOCSSなどを用いて実際に簡単なランディングページを制作していきます。

▼本書で学べること
- Sass と FLOCSS を組み合わせた管理しやすい CSS の書き方
- Sass を用いたスタイリング
- FLOCSS に基づいた CSS クラスの命名

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

▼本書で作成するページのデモ
<a href="https://traveler20.github.io/practice/00/" target="_blank" rel="nofollow noopener noreferrer">https://traveler20.github.io/practice/00/</a>

▼ソースコード（GitHub）
<a href="https://github.com/traveler20/practice/tree/master/00" target="_blank" rel="nofollow noopener noreferrer">https://github.com/traveler20/practice/tree/master/00</a>

※【2022年4月20日 更新】Dart Sass版のLPに更新しました。


CSSのメタ言語であるSassやCSS設計で注目されているFLOCSSを用いてランディングページを制作するチュートリアル。

CSSを効率的に書けるSassや、管理しやすいCSSの書き方であるFLOCSSなどを用いて実際に簡単なランディングページを制作していきます。

▼本書で学べること
- Sass と FLOCSS を組み合わせた管理しやすい CSS の書き方
- Sass を用いたスタイリング
- FLOCSS に基づいた CSS クラスの命名

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

▼本書で作成するページのデモ
https://traveler20.github.io/practice/00/

▼ソースコード（GitHub）
https://github.com/traveler20/practice/tree/master/00

※【2022年4月20日 更新】Dart Sass版のLPに更新しました。


【Dart Sass対応】LPをつくって学ぶSass×FLOCSS

はじめに

前提知識＋環境構築

Figmaファイルからページの構成を考える

Sass×FLOCSSに適したフォルダを作成する

HTMLをコーディングする

foundationのコーディング

headerのコーディング

fvセクションのコーディング

themeセクションのコーディング

solutionセクションのコーディング

faqセクションのコーディング

cvセクションのコーディング

footerのコーディング

最後に

読者コミュニティ｜LPをつくって学ぶSass×FLOCSS

html

sass

コーディング

flocss

とらべらー