2011/10/17 @8:35 | 制作・運営・ノウハウ
By geirarne (CC BY-NC-SA 2.0)
YUI Compressorを使ってCSS3 Media Qureriesの入ったCSSを圧縮したらうまく動かなくなった。なにかと思って調べてみたら、どうやらYUI Compressor 2.4.2の問題らしいです。最新版を使えば問題なさそうですが、まだ古いバージョンを使っている方はお気をつけください。 続きを読む
2011/08/12 @12:22 | 制作・運営・ノウハウ
いつもためになるツールや手法を紹介しているコリスさんでも紹介されていた「CSS3 PIE」がすごく良い感じだったのでご紹介。
このPIE、Progressive Internet Explorerの略で、Internet Explorer 6、7、8でサポートされていないborder-radiusやbox-shadowなどのCSS3の機能を実現するためのスクリプトです。シンプルかつCSS3の仕様に準拠した指定方法で実装できるところがすごく良い感じです。 続きを読む
2011/05/26 @10:31 | 制作・運営・ノウハウ
Photo by Dunechaser : CC BY-NC-SA 2.0
CSSで指定できる単位にはいろいろありますが、CSS3で新しく導入された「rem」という単位が便利そうです。これは、root emの意味で、ルート（つまり<html>）のサイズを継承するemとのこと。たとえば、リスト要素を入れ子にした際に文字サイズが大きくなってしまうなんていう問題は、この「rem」を使えば解決できます。
html { font-size: 62.5%; } /* 1.0em ≒ 10px */
li { font-size: 1.4em; } /* ≒ 14px */
2011/05/14 @11:12 | 制作・運営・ノウハウ
どうやらアメリカでMedia QueriesやResponsive Webについての議論がヒートアップしているようなので、Media Queriesについてじっくり考えてみた。
2011/05/09 @11:00 | 制作・運営・ノウハウ
Media Queriesを活用したサイト制作を始めようと思っているので、ざざっと調べたことからまとめてみました。まずは基本から…
簡単に言うと、デバイスのスクリーンサイズなどの条件によって、読み込むスタイルが切り替えられるCSS3の機能です。
<link rel="stylesheet" href="nanchara.css" type="text/css" media="print" />
CSS2では上記のように、「print」や「screen」などを指定して印刷向け、スクリーン表示向けといった「media types (媒体型)」を指定して、それぞれのメディア向けにCSSを書くことができました。Media Queriesはこれが拡張されたもので、「media types (媒体型)」にくわえ「width」、「height」、「color」などの「media features (媒体特性)」を指定することで、指定に当てはまる機器に対応したCSSを書けるようにするものです。 続きを読む
2010/10/06 @11:42 | ツール
CSS3で角を丸くしたりグラデーションを付けたりできてしまう昨今。下の画像のようにCSS3のグラデーションでボタンなどがデザインできてしまう。近い将来 Photshop の「Web用に保存」からは、JPEGやGIFの書き出しだけじゃなくてHTML5・CSS3で書き出すオプションもできるのではないでしょうか？ (というか、今作ってほしい。)
「Playing with CSS3 gradients — Cubiq.org」という記事より。
Demoページのボタンはかなりハイクオリティです。記事中にもありますが、たとえば最新のブラウザを搭載するスマートフォン（iPhone/Adroid）向けのサイトでは、こういったボタン要素はHLTML/CSS3で書くべきですね。ダウンロードサイズがかなり節約できそうです。
2010/09/23 @9:16 | 制作・運営・ノウハウ
IE9でCSS3のサポートも強化され、ようやくborder-radiusも使えるようになる。
IE9 Betaでは、W3Cの指定通りのプロパティでborder-radiusの指定ができる。
/* すべて一度に指定する場合（IE9とOpera向け）*/ border-radius: 4px; /* 個別に指定する場合（IE9とOpera向け） */ border-top-left-radius: 4px; border-top-right-radius: 3px; border-bottom-left-radius: 4px; border-bottom-right-radius: 3px; /* すべて一度に指定する場合（Mozilla向け） */ -moz-border-radius: 4px; /* 個別に指定する場合（Mozilla向け） */ -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 3px; /* すべて一度に指定する場合（Webkit向け） */ -webkit-border-radius: 4px; /* 個別に指定する場合（Webkit向け） */ -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 3px;
現状、Webkit（SafariとChrome）やMozilla（Firefox）では接頭辞付きのプロパティでサポートされているため、上記のように複数記述が必要になります。また、接頭辞付きのプロパティは将来的にサポートされなくなる可能性があるので、同時に正式なプロパティも記述しておいたほうが良いようです。
【参考】 ベンダー接頭辞は使ってもよいか（ミツエーリンクス Web標準Blog）
ちなみにIE6〜8ではborder-radiusはサポートされていないため、IE6〜8でも同じ表示をさせたい場合、このプロパティは使えません。IE6〜8では思い切って諦めるか背景画像を使うのが現実的なのでしょう。jQueryを使って実装する方法などもありますが、表示が遅くなったりするので個人的には好きではありません。