2012/05/01 @10:09 | レスポンシブWebデザイン
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 続きを読む
2011/10/17 @8:35 | レスポンシブWebデザイン
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 | レスポンシブWebデザイン
どうやらアメリカでMedia QueriesやResponsive Webについての議論がヒートアップしているようなので、Media Queriesについてじっくり考えてみた。
2011/05/09 @11:00 | レスポンシブWebデザイン
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で書くべきですね。ダウンロードサイズがかなり節約できそうです。