SassSass, CSS, HTML

No Image

最近はdisplay:flex;によるフレックスボックスだのなんだのでCSSによるレイアウトの組み方は随分と効率的になってきている気がする。
それでも、未だにfloatは現役だ。

floatを使うときには、clea ...

SassSass

No Image

Sassで使用する変数のスコープについて確認したのでメモ。
特にグローバル変数の上書きについては、覚えておきたい。

Sassの変数のスコープ

Sassの変数には、他のプログラミング言語等と同じくスコープ(有効な範囲) ...

SassSass

No Image

Sass便利だなぁと思いつつ使っていない機能とかが結構あるので、あらためてSassでできることを確認。

基本事項Sassとは「Syntactically Awesome StyleSheet」の略。
sass記法とscss ...

SassSass, CSS, BEM

No Image

優れた命名方法である一方、どうしても長ったらしいクラス名になってしまう難点を持つBEM。
そんなBEMですが、Sassの「&」を使うことでBEMの長いクラス名を簡単に書くことができます。

ちょっと感動するく ...

Gulpの基礎知識Gulp, Sass, EJS, CSS

No Image

基本的なGulpのタスクをコード付きでまとめて紹介します。
技術的なこと、基礎としての記述方法の紹介などはすでに充実した記事がネット上にあるため、ここでは実際のタスク紹介をメインで扱います。

実際に使用・動作してい ...

BEMSass, CSS, BEM

No Image

CSSはサイトの長期運営・規模拡大に伴って複雑化し非常に壊れやすいものです。
壊れにくいCSSを作成するには、明確なルールが必要不可欠です。今回は、CSSの設計に有用な方法論であるBEMについて紹介するとともに、BEMを理解す ...