CSSフレームワークBootstrap, Bootstrap4

No Image

Bootstrap4では、グリッドシステムにおけるcontainer内の要素の最大幅が1170pxから1140pxに変更されました。
グリッドシステムを利用したとき、それぞれのcol内で使用する画像の大きさをどのように指定すべ ...

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の長いクラス名を簡単に書くことができます。

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

BEMSass, CSS, BEM

No Image

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

CSSフレームワークBootstrap, JavaScript, jQuery

No Image

WordPressのテーマ等でも頻繁に使用されるCSSフレームワーク、Bootstrap。
様々な機能があるBootstrapですが、今回は、中でも個人的に有用な「タブUI」の実装と、先日遭遇したトラブルについてメモ。 ...