Category Archives: CSS

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

解説

画像データURIスキームに変換する(Inline Data Helpers)。
指定された画像をデータURIスキームに変換し、普遍的にCSS内に保存する。
この関数が有効なのは、画像の変更頻度は低く、小さなものに限る。
メリットは、リクエスト数が減り、高速化される。
サーバからの送出時にgzip圧縮するのであれば、サイズはバイナリとほぼ変わらないサイズになる。
更新日:2017年3月26日
Continue reading [SASS] 画像データURIスキーム変換関数

[SASS] リセット補助関数

解説

ボックスサイズの算出方法を「border-box」にすることで、padding, marginのサイズに関係なく、全てのwidth, heightで指定した値をボックスのサイズとさせる関数。
この関数を最初に読み込ませることで、ボックス配置時のサイズ調整を簡単にする。
更新日:2018年6月21日
Continue reading [SASS] リセット補助関数

[SASS] BOX中央配置関数

解説

指定されたボックスを親ボックスの中央(上下左右)配置させるための関数。
要素を親要素topから50%に配置、すると子要素のtopが親要素の中央位置にくるので、
子要素を自身の高さの半分マイナス上にずらす(transform: translateY(-50%))と、縦のセンタリングができる。
更新日:2017年3月26日
Continue reading [SASS] BOX中央配置関数

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

解説

SASSとは、CSSでは不可能なプログラミング的な記述のできるシステムである。
また、Compassとは、SASSを補足し、ベンダープレフィックスを自動的に追加してくれるシステムである。
CSSのみで記述すると、煩雑になりやすく、同じような記述をしなければならない。
当然、間違いも起こりやすく、修正時にも労力が必要となる。
このようなことを避けるためにも、CSSを作成する上で、SASS・Compassを使用しないと言った選択肢は存在しないと言っても良い。
更新日:2017年2月1日
Continue reading [CSS] SASS/Compassの使用に関して

[CSS] Sass, Compassの利用方法

解説

「Compass」とは、基本的には、CSSにベンダープレフィックスを自動で追加してくれるツールである。(それ以外の有用な関数等も定義されている)
CSSを記述する上で、CSS3のコードを書く場合には、必須と言っても過言ではない。
更新日:2017年7月25日
Continue reading [CSS] Sass, Compassの利用方法