ノウハウコラム： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

iPhoneで傾きに合わせてスタイルを切り替えるjquery

iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。
そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。

サンプル

サンプル
※iPhoneで見てみてください。

ダウンロード

tilt.zip

使い方

ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。

用途

縦横でボックスの幅を切り替える
縦横で背景色を切り替える
縦（または横）の場合だけ表示する文章や画像を設置する
縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する

等々...

仕組み

仕組みはとても単純でwindow.orientationを使い、傾きを取得し、0の場合は「縦」それ以外の場合は「横」としてbodyのclassをlong（縦）とside（横）に切り替えています。

スマートフォンコーディング

スマートフォンで積極的に使いたい4つのCSS3

CSS3は通常のWebサイトでは、IE6～8が高いシェアを持っているため現状ではあまり使われません。
しかし、iPhoneとAndroidのブラウザはwebkitという同じHTMLレンダリングエンジンが使われているため、古いブラウザを気にせずCSS3(*1)を使うことが出来ます（IEを気にせずコーディング出来るなんてちょっとうれしいですね！）。

ということで、スマートフォンで積極的に使っていきたいCSS3を紹介します。

*1...全てのCSS3プロパティが使えるわけではありません。

ボーダーの角丸を指定する

border-radiusプロパティを使うことで簡単に角丸を作ることが出来ます。

4つ角の半径を一度に指定するショートハンド

サンプル01

左上の角の半径を指定する

サンプル02

※-webkit-と-moz-という指定を先頭に付けることでそのブラウザだけを対象にした指定となります。
※本来であれば4つ角をショートハンドで指定出来るのですが、webkitは対応していないため、個別に指定します。

続きを読む "スマートフォンで積極的に使いたい4つのCSS3"

スマートフォンコーディング

今から始めるiPhoneコーディング

何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。
それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。

iPhoneの特徴

まずは、iPhoneの特徴を見てみましょう。

一つの端末で複数の解像度を持つ
iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。
例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。

※縦持ちのとき

※横持ちのとき

そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。
※そのためには、デザインをしっかりと考えたものにしなければいけませんが...。
HTMLやCSSの実装状況はパソコンと同様
iPhoneに搭載されているブラウザ（Safari）では、パソコン版のSafariと同程度のHTML/CSSが実装されているため、パソコンサイトと同じ感覚でコーディングが出来ます。