![【Dart Sass対応】LPをつくって学ぶSass×FLOCSS](https://res.cloudinary.com/zenn/image/fetch/s--7debyVB0--/c_fill%2Cf_jpg%2Cfl_progressive%2Ch_700%2Cq_90%2Cw_500/https://storage.googleapis.com/zenn-user-upload/book_cover/e9787daa06.jpg)
【Dart Sass対応】LPをつくって学ぶSass×FLOCSS
無料で読める本
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に更新しました。
Chapters
はじめに
前提知識+環境構築
Figmaファイルからページの構成を考える
Sass×FLOCSSに適したフォルダを作成する
HTMLをコーディングする
foundationのコーディング
headerのコーディング
fvセクションのコーディング
themeセクションのコーディング
solutionセクションのコーディング
faqセクションのコーディング
cvセクションのコーディング
footerのコーディング
最後に
Community
Author
Topics