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

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

サンプル

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

ダウンロード

tilt.zip

使い方

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

用途

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

等々...

仕組み

仕組みはとても単純で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の特徴を見てみましょう。

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

    photo01.jpg

    ※縦持ちのとき

    photo02.jpg

    ※横持ちのとき

    そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。
    ※そのためには、デザインをしっかりと考えたものにしなければいけませんが...。

  2. HTMLやCSSの実装状況はパソコンと同様
    iPhoneに搭載されているブラウザ(Safari)では、パソコン版のSafariと同程度のHTML/CSSが実装されているため、パソコンサイトと同じ感覚でコーディングが出来ます。

大きく二つの特徴を挙げましたが、iPhoneサイト構築の際には1番目の特徴を考えて、デザイナーはリキッドなデザインをする必要があります。

続きを読む "今から始めるiPhoneコーディング"

HTML5で短くなったDOCTYPE宣言

HTML5には「頻繁に書く必要のあるものは簡単に書けるように」という考えがあり、これまで書いていたコードがより簡単になります。 たとえば、HTML5において、DOCTYPEは「標準モードへのスイッチ」という役割でしかありません。そのため、DOCTYPE宣言以下のように短くなっていきます。

これまでのDOCTYPEは上記のように長く、そのまま入力できる人は少ないと思います。
HTML5では上記のように長く、複雑だったものは以下のように簡略化されました。

なお、主要なブラウザはIE6も含め、このDOCTYPEで標準モードに切り替わります。

preタグ内のテキストを自動改行させるスタイルシート

preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます(縦横のスクロールバーでます!)。

そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。

 1  |  2  |  3  |  4  |  5  |  6  | All pages