CSS / Less

LESS で日本語の変数名を使うパッチ

CSS 拡張言語 LESS で、日本語の変数名を使えたら視認性が良くなりそうだったので改造した。 最新版の LESS 1.6.0 に対するパッチも作った。 LESS を日本語の変数名に対応させるパッチ · GitHub npm でインストールした node_modules/less に対して適用でき…

grunt-spritesmith を使って LESS でもスプライト画像を自動生成する

多数の小さな画像を 1 枚の画像の上に並べ、CSS で切り分けることにより、サーバへの問い合わせの回数を減らして Web ページの表示を高速化する CSS スプライトと呼ばれる手法がある。これまで Sass + Compass ではできていたが、Grunt をはじめとする自動化…

CSS で游明朝体、游ゴシック体を指定する。Light から Bold まで

Windows 8.1 や OS X 10.9 Mavericks には字游工房の游明朝体、游ゴシック体が入っている。さっそく Web ページに使うべく CSS で指定できる名前を調べた。テストコードはこちら。 游明朝体はサイコー - jsdo.it - Share JavaScript, HTML5 and CSS 游ゴシッ…

IE7 で box-sizing を利用したレイアウトを実現する

CSS の box-sizing プロパティはリキッドレイアウトのときに有用なプロパティだ。値に box-sizing を指定すると padding や border を含めた値で width/height を計算してくれるので、パーセント値を指定する場合は特に便利だ。box-sizing は多くのモダンブ…

IE 9/10 未満のブラウザとそれ以外を判定する

HTML 5 や CSS 3 の新機能を使う場合、古いブラウザでも誤解なく内容が伝わるよう努めるべきだ。Safari, Chrome, Firefox, Opera の場合、自動アップデート機能やユーザのリテラシーの高さゆえ、古いバージョンを使い続けていることは少ない。そもそもバージ…

LESS CSS の戸惑いやすい記法

最新版の LESS 1.5.x では動作が異なる可能性があります。CSS で変数や関数を使えるよう拡張して再利用性を高めた言語 LESS。CSS と同じように書けるため、ちょっとだけ使う分には覚えることはほとんどない。 Getting started | Less.js 文字列を結合する 文…

(-webkit-)text-size-adjust の正しい使い方

スクリーンの小さなスマートフォンでは、PC 用に作られた幅の広い Web ページを、全体が収まるように縮小して表示する機能がある。iPhone の Safari では 980 px のスクリーンに表示した Web ページを、3.5インチないし3.7インチの画面に縮小表示している。…

Android 4 に存在する device-width/height のバグ

Android 4 では、メディアクエリで用いられる device-width/height の値が、通常の CSS ピクセルではなく、デバイスピクセルとして与えられるバグがある。そのため Xperia Z など高解像度のディスプレイを持つ端末で、広い画面のために設計されたスタイルシ…

LESS CSS でキーフレームアニメーションを楽に書く

CSS で変数や関数を使えるよう拡張して再利用性を高めた言語 LESS。 Getting started | Less.js この LESS を使ってキーフレームアニメーションを楽に書いてみようと思う。現状の LESS ではスマートには書けないので、できるだけ労力の少ない方法で書く。ま…

Ligature Symbols for LESS CSS

ちょっとしたアイコンを Web フォントで表示することができる Ligature Symbols。単なるシンボルフォントではなく OpenType 合字を使っていて、たとえば「mail」というテキストでメールアイコンを表示できる優れものだ。 Ligature Symbols これを LESS でミ…

font-family の選ばれ方

いろんなフォントで表示のテストしようとしてつまずいたのでメモ。 jsdo.it でこんなテストを書いた。 font-family の適用順の調査 - jsdo.it - Share JavaScript, HTML5 and CSS Safari 5 フォントの分類やウェイト情報を利用できる ヒラギノ明朝は "Hiragi…

写真をテープで貼ったように見せるギャラリー

写真をテープで貼ったように見せます。手作り風のデザインと組み合わせて。 デモを見る HTML のマークアップはシンプルに。 <ul class="image-container"> <li><img src="p1.jpg" alt=""></li> <li><img src="p2.jpg" alt=""></li> <li><img src="p3.jpg" alt=""></li> <li><img src="p4.jpg" alt=""></li> <li><img src="p5.jpg" alt=""></li> <li><img src="p6.jpg" alt=""></li>…</ul>