Quantcast
Channel: jmblog.jp » Webデザイン
Browsing all 10 articles
Browse latest View live

背景色に応じて最適な文字色を自動判定する SCSS mixin を書いてみた

Sass、そしてSassy CSS (SCSS) を読んで、俄然 SCSS に興味が出て、新しいプロジェクトで試しています。「CSS でこう書けたらいいのになぁ」という記法をサポートしていて、ものすごく便利です。特に mixin で関数を用意すると非常に強力。 というわけで、表題のような mixin を書いてみました。まぁ、そんな大げさなものでもないですが。 @mixin...

View Article



YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509 というエントリーを見て、最近 CSS Fonts を SCSS で管理するようになってすごく楽になったので、ご紹介。 _fonts.scss といったような名前で次のような mixin を追加した SCSS ファイルを用意します。 これを style.scss などで...

View Article

「The 1Kb CSS Grid」をSCSS化してみた

CSS フレームワークについて調べていたところ、「どんなCSSフレームワークがあるのか調べてみた一覧と感想 – ふじこのプログラミング奮闘記」で The 1Kb CSS Grid というフレームワークを見つけました。 他の多くのフレームワークには、レイアウトだけでなく、タイポグラフィーやフォーム要素のスタイルなども含まれていますが、The 1Kb CSS Grid...

View Article

続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

「YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ」というエントリーで、@mixin を使ったフォントサイズの指定方法を紹介したのですが、Sass 3.1.0 から追加された、@function ディレクティブを使ったほうが、管理しやすいんじゃないかと思い、関数を書いてみました。 使い方は以下のようになります。 body { font-size:...

View Article

続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

@mixin を使ったやり方や、@function を使ったやり方を書きましたが、単純に変数を使えばいいんじゃね?というご指摘を Twitter で受けました。そうか。いや、まったくその通りです。 $yui-10px: 77%; $yui-11px: 85%; $yui-12px: 93%; $yui-13px: 100%; $yui-14px: 108%; $yui-15px: 116%;...

View Article


Sass で 出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話

CSS3 のグラデーション(linear-gradient)を以下のように Sass の mixin にして使っています。IEにも対応できるようにしたつもりだったのですが・・・ IE の filter で色を指定する場合、「# + 6桁(#cccccc)」である必要があるため、mixin の引数に「# + 3桁(#cccとか)」を指定した時を考慮して、6桁に変換したものを $ieTopColor,...

View Article

続・Sass で 出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話

「Sass で 出力スタイルを compressed にするとカラーコードが3桁に短縮されて困った話」で、IE の Filter で指定する色の形式が意図したものにならないということを書いたのですが、解決策が見つかりました。 Sass のドキュメントを見ると、ie_hex_str() というそのままな関数が用意されており、これを使えば OK でした。 @mixin...

View Article

Image may be NSFW.
Clik here to view.

google-code-prettify 用のテーマを公開しました

google-code-prettify といえば、Webサイト上のソースコードをシンタックスハイライト表示するためのライブラリとして、最も有名なものの一つだと思います。(Bootstrap でも使われてますし。) そんな google-code-prettify 用のテーマをいくつか作ってみました。 » Color themes for Google Code Prettify...

View Article


Image may be NSFW.
Clik here to view.

highlight.js 用のテーマを公開しました

google-code-prettify 用のテーマに続けて、highlight.js 用のテーマも作ってみました。 » Color themes for highlight.js こちらも、google-code-prettify 用のテーマと同様、お気に入りの vim カラースキームを移植したものになります。 そしてなんと、このうち Tomorrow 系テーマは highlight.js...

View Article


Sass の if 関数

これは CSS Preprocessor Advent Calendar 2012 5日目の記事です。 今日はあまり知られていない(と思われる) Sass の if 関数について紹介したいと思います。 Sass には、条件分岐のための制御構文として @if ディレクティブ(いわゆる if 文)が用意されています。 $type: ocean; p { @if $type == ocean {...

View Article
Browsing all 10 articles
Browse latest View live


Latest Images