「CSS」カテゴリー一覧

Susyを使おうとしたらNo such framework: “susy”のエラー

レスポンシブグリッドレイアウトが組めるSass/Compassベースのフレームワーク「Susy」を使おうとしたところ「No such framework: “susy”」というエラーが発生。Susyプロジェクトを作成するコマンドを打つと…

続きを読む

要素の横並びをリキッドレイアウト(%単位)で、ネガティブマージンを使って実装する方法

ホームページを作っていると頻繁に行うデザイン「横並び」。これをリキッドレイアウト+ネガティブマージンで実装する内容です。 2014年10月23日追記: 以降で述べる計算をそのまま使ったWebツールを作ってみました。ちょっと使いづらいかもしれませんが、自分で計算…

続きを読む

Compassのsingle-text-shadowに引数を渡すときの使い方。公式リファレンスの方法では使えない?

SASSと、そのフレームワークであるCompassを使ってテキストに影を付けようとしたときの話です。 テキストに影を付けたい場合、Compassが提供しているmixin「single-text-shadow」を使えばチョチョイのチョイだと思っていたのですが、公…

続きを読む

PhpStormでSCSS(SASS)ファイルをCompassでコンパイルする方法とMacの場合の注意点

MacでPhpStormを使っていて、CompassでSCSSファイルをコンパイルしようとしたらエラーが起きたので、その回避策の次いで使い方も一緒に書いておくことにしました。(WebStormも同様です) 以下の2つが既に行われていること前提で話を進めます。 …

続きを読む

【Sass】4つの値を指定するだけでストライプ柄(縞模様)を実装するmixin

CSSでストライプ柄(縞模様)を実現させる方法を見つけたので、それをmixinにしてみました。 ストライプ柄のタイプ(斜め、横、円など) 色1 色2 線の太さ の4つの値を指定するだけで背景をストライプ柄にデザイン出来ます。  ストライプ柄のサンプル Chro…

続きを読む

SASSファイルをWindowsコマンドプロンプトから文字化けさせずにコンパイルする方法

SASSファイルをWindowsコマンドプロンプトからコンパイルすると、僕の環境では主に日本語が文字化けします。 SASSファイルから生成したCSSファイルを直接弄るワケでもないので特に問題は無いと思っていたのですが、CSSのプロパティ「content」で特殊…

続きを読む