Chapter 02

前提知識+環境構築

ゆるけー
ゆるけー
2022.04.19に更新

FigmaやHTMLのコーディングをする前に、まずはSassやFLOCSSの前提知識を抑えながら、今回必要な環境を構築していきます。

Sassとは?

Sassは、CSSをより効率的に書けるようにしたメタ言語です。
これだけだと意味わからないと思うので、具体的なコードの例を紹介します。

こういう一般的なHTMLがあったとき、

<section class="p-section">
	<h2>Title</h2>
</section>

CSSはそれぞれのクラスやタグに対してスタイリングします。

.p-section {
	padding: 1rem 3rem 4rem;
}
.p-section h2 {
	font-size: 3.2rem;
}

ただ、CSSだと全て左寄せの書き方になってしまう以上、HTML と違って構造が視覚的にわかりにくいです。
Sassだと、HTMLのように入れ子でスタイリングすることができます。

.p-section {
	padding: 1rem 3rem 4rem;

	h2 {
		font-size: 3.2rem;
	}
}

Sassのような入れ子構造のスタイリングは、HTMLの構造と似たかたちになるため、視覚的にどこをスタイリングしているかわかりやすくメンテナンスがしやすいです。

ただ、SassのままHTMLを読み込むことはできません。
なので、Sassを書いた際はCSSにコンパイルという変換作業をする必要があります。コンパイルする環境を次で紹介します。

Sassをコンパイルする環境を構築する

本書では、SassからCSSへコンパイルする際は、VisualStudioCodeの拡張機能を用います。

DartJS Sass Compiler and Sass Watcher をインストール

まず、DartJS Sass Compiler and Sass Watcher をインストールします。

インストールして再起動すればすぐに使えます。

Sass→CSS のコンパイル

VSCodeの設定から、setting.jsonを以下のように反映させます。

以下のように setting.json を編集すると asset/css ディレクトリのなかに style.css と style.min.css がコンパイルされます。

setting.json
{
	"dartsass.targetDirectory": "asset/css"
}

もちろん、Scssファイルを移動してもコンパイルされる場所は変わりません。
私はよくCSSと同じassetフォルダ内にscssフォルダをつくって、その中にScssファイルを使っています。

▼こんな感じ

今回はこの設定でSassのコーディングを進めていきます。

Lib Sass版はこちら(非推奨)

Live Sass Compile をインストール

まず、Live Sass Compile をインストールします。

インストールして再起動すればすぐに使えます。

Sass→CSS のコンパイル

手順としては単純で、ワークスペースを開いて Sass のコーディングをする際に Sass watch を選択するだけ。

VisualStudioCodeを立ち上げて、Ctrl+Bを使ってワークスペースを開きます。そこにScssファイルがあるフォルダを開きます。

上の画像にもありますが、VSCodeの下部分にWatch Sassがあり、このWatch Sassを選択すると、Sassのコンパイルがされるようになります。

watching...という表示が出ている間はコンパイルされます。

とはいえ、初期設定のままだと Sass のファイル群のなかに style.css が混ざってしまいます。
また、CSS も素の CSS でわざわざ先程の拡張機能を使って minify をするのも面倒です。

ので、コンパイル先を変更させたい場合や CSS の縮小化したい場合は「設定」から setting.json を編集します。

以下のように setting.json を編集すると asset/css ディレクトリのなかに style.css と style.min.css がコンパイルされます。

setting.json
"liveSassCompile.settings.formats": [
	// style.css
	{
		"format": "expanded",
		"extensionName": ".css",
		"savePath": "/asset/css/"
	},

	// style.min.css
	{
		"format": "compressed",
		"extensionName": ".min.css",
		"savePath": "/asset/css/"
	}
]

CSS設計とは?

CSS設計とは端的に言うと、CSSを記述するためのルール、CSSを管理しやすくするためのルールのことです。

そもそもなぜCSSを管理しやすくしないといけないのかというと、見た目は普通にサイトとして機能していても、いざメンテナンスしようとするとコードがぐちゃぐちゃで修正に時間がかかるというのを未然に防ぐためです。

より詳しいCSS設計の解説については、CSSの管理が雑になったときに見直すCSS設計入門という記事で紹介しています。

https://zenn.dev/yurukei20/articles/272a6b5f528cdd

FLOCSSとは?

CSS設計についてなんとなくイメージがつかめたところで、FLOCSSについて触れます。

FLOCSSは、CSS設計の種類の1つで、サイバーエージェントのhirokiさんがまとめたCSS設計の方法です。
github

ざっくり解説すると、FLOCSSは

  • サイトの基本となるスタイルを定義するFoundation
  • サイト全体の共通部分となるものを定義するLayout
  • サイト内の各パーツのビジュアルに関するものを定義するObject

の3つで構成されています。
さらにObjectは、

  • サイト内で部分部分で使うパーツを定義するComponent
  • Componentとかのカタマリで構成されるProject
  • 一部分だけ微妙にスタイリングが必要になったときに使うUtility

の3つに構成されています。

フォルダの構成の具体例としては、以下のようになります。(今回もこんなイメージでコーディングを進めていきます。)

scss
├──style.scss
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _grid.scss
│ ├── _media.scss
│ └── _title.scss
├── project
│ ├── _articles.scss
│ ├── _contact.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ ├── _gnavi.scss
│ ├── _hamburger.scss
│ ├── _profile.scss
│ └── _section.scss
└── utility
  ├── _align.scss
  ├── _clearfix.scss
  ├── _margin.scss
  └── _typography.scss

より詳しいFLOCSSについての解説はFLOCSSの知識と運用方法で紹介しています。

https://zenn.dev/yurukei20/articles/df151d3b276fbc

それでは、次の章からFigmaでサイトの構造を把握していきましょう。