【CSS3】メディアクエリとスマホ専用サイト

HTML5

CSS3になってから使えるようになったメディアクエリについて。
新規サイトをコーディングする際に遊んでみたのでその感想とか。

メディアクエリでどんなことできるの?
ってことに関しては、

http://ameblo.jp/linking/entry-10915382271.html
とか
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

とかで詳しく解説されているので割愛。爆

っていうのはあまりにも乱暴なので、ちょっとだけメディアクエリについて解説。

●メディアクエリとは
異なるウィンドウサイズでもユーザーが見やすいようにレイアウトを自動的に最適化することができちゃう規格。(たぶん間違ってない)

たとえば、PCサイトをスマートフォンで見た場合を想定すればイメージしやすい。
通常、PCサイトをスマートフォンで見たら、サイト全体が小さく表示され、文章を読むにはダブルタップするか、ピンチアウトしなければならない。

この操作がいちいち煩わしかったりもする。

続きを読む

【CSS】iPhoneを横向きにしたときに文字サイズが大きくなる件

ちょっとハマったのでメモ。

iPhoneを横向きにしたとき、ブラウザの文字サイズがどう考えても大きくなってしまう問題にぶちあたった。

どうやら原因はモバイルサファリの仕様にあるようで、自動的に文字サイズを調整してしまうらしい^^;

まさに小さな親切大きなお世話状態。

ってことで、以下の一行でばっちりOK!

body{
-webkit-text-size-adjust: none;
}

IE9用の背景グラデーション画像を自動生成する

ひさしぶりの投稿になりました。

以前、IE9にCSS3のグラデーションを適用するという記事を書きましたが、今回はその続編です!

前回少しだけ反響があったので、調子にのってSVGファイルを半自動生成しちゃうツールを作ってみました。

ie9-gradient-svg

IE9の背景グラデーション用のSVGファイルを生成するAPIです.

続きを読む

【CSS3】IE9にCSS3のグラデーションを適用する

CSS3もやっとこさコーディングの選択肢となりつつありますね。うれしい限りです。角丸かつ影つきのグラデーションの効いた画像を作るスキルがなくても、コーディングのスキルさえあればそれらしい絵になるっていうのが素晴らしい。

IE9も正式にHTML5/CSS3への対応を表明し、「さぁこれからはHTML5/CSS3だ!!」
と意気込んだものの、やっぱりIEはIEでした。笑

実は、IE9は背景グラデーションに対応してない!

各レンダリングエンジンによって記述が微妙に違うからコード増えるし鬱陶しいとか思ってたけど、きちんと書いたらきちんとグラデかかるから、まだましだってことに気づいた今日。苦笑

さて。ではどうやってIE9で背景グラデーションを実現するか。(←やっと本題)

当然といえば当然なんだけど、画像を使います。笑(身も蓋もないとか言わないでw)
SVGっていう拡張子のファイルを作成するんだけど、実はその中はXMLだったといふ。。

Scalable Vector Graphics

続きを読む

【CSS】IEにCSS3を適用する方法

最近は新規サイトの制作において、HTML5/CSS3でのコーディングがスタンダードになってきたように思います。とはいっても、IE6〜8の尋常ではないシェアは無視できません。

ってことで、IEにCSS3を適用できちゃうプラグインを紹介します。

CSS3 PIE

http://css3pie.com/

続きを読む