13Mar/17

[SASS] 画像データURIスキーム変換関数

2017年3月13日CSS, Knowledge, Sass Code, Snippet浅野 利博

解説 画像データURIスキームに変換する（Inline Data Helpers）。 指定された画像をデータURIスキームに変換し、普遍的にCSS内に保存する。 この関数が有効なのは、画像の変更頻度は低く、小さなものに限Read More…

12Mar/17

[SASS] リセット補助関数

2017年3月12日CSS, Knowledge, Sass Code, Snippet浅野 利博

解説 ボックスサイズの算出方法を「border-box」にすることで、padding, marginのサイズに関係なく、全てのwidth, heightで指定した値をボックスのサイズとさせる関数。 この関数を最初に読み込Read More…

11Mar/17

[SASS] BOX中央配置関数

2017年3月11日CSS, Knowledge, Sass Code, Snippet浅野 利博

解説 指定されたボックスを親ボックスの中央（上下左右）配置させるための関数。 要素を親要素topから50%に配置、すると子要素のtopが親要素の中央位置にくるので、 子要素を自身の高さの半分マイナス上にずらす（transRead More…

30Jan/17

[CSS] SASS/Compassの使用に関して

2017年1月30日CSS, Knowledge浅野 利博

解説 SASSとは、CSSでは不可能なプログラミング的な記述のできるシステムである。 また、Compassとは、SASSを補足し、ベンダープレフィックスを自動的に追加してくれるシステムである。 CSSのみで記述すると、煩Read More…

30Jan/17

[CSS] Sass, Compassの利用方法

2017年1月30日CSS, Environ, Knowledge, Tool浅野 利博

解説 「Compass」とは、基本的には、CSSにベンダープレフィックスを自動で追加してくれるツールである。（それ以外の有用な関数等も定義されている） CSSを記述する上で、CSS3のコードを書く場合には、必須と言ってもRead More…

12Jan/17

[CSS] 適用優先順位の詳細

2017年1月12日CSS, Knowledge浅野 利博

解説 CSSは基本的には、後で定義されたものが優先されるが、セレクタの指定の仕方でも優先順位が変わってしまう。 ここでは、明確に優先順位を決定するための仕組みを解説する。

11Nov/16

Sass / Compass インストール方法

2016年11月11日CentOS, CSS, Environ, Knowledge, Macintosh, Ubuntu浅野 利博

解説 Sass / Compass のインストール方法を示す。

11Nov/16

JSONを使ってSassとJavaScriptで設定値を共有する方法

2016年11月11日CSS, JavaScript, Knowledge, Node.js, PHP, Python, Ruby, Wordpress浅野 利博

解説 SassとJSONを扱える言語の間で、データを共有する方法を示す。 特にPHP / Node.js / JavaScriptで有効となる。

29Oct/16

CSS/CSS3で使用できる長さの単位

2016年10月29日CSS, Knowledge浅野 利博

解説 CSS/CSS3で使用できる長さの単位には、様々なものが定義されている。 ここでは、それらの定義、使用目的を示す。