サンプル

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

ダウンロード

tilt.zip

使い方

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

用途

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

等々...

仕組み

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

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

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

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

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

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

サンプル01

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

サンプル02

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

iPhoneの特徴

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

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

   

   ※縦持ちのとき

   

   ※横持ちのとき

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

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

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

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

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

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

発生条件

<br>を包括する要素に letter-spacing が指定されている場合に発生します。値はpxの絶対値指定でもemの相対値指定でも発生し、またネガティブ値（-5pxなど）でも発生します。

対処方法

<br>に letter-spacing: 0 か letter-spacing: normal を指定することで対処できます。
◆サンプル（別ウィンドウで開きます）

サンプルでは<br>一つ一つに指定していますが、スタイルシートで br { letter-spacing: normal } と記述しても対処できますので、CSSファイルに取り合えず記述しておくのもいいかもしれません。

このように後ろに指定されたものが優先されるというだけではなく、スタイルセレクタの種類によっても優先順位に影響を与えます。

こちらのサイトを参考にさせていただきました。
【メモ】 prototype.jsとjQuery.jsを共存させてThickboxを動かす

重要なポイントは上記のサイトでまとめられていますので、それを踏まえた実際のやり方がこちら。

しかし、IE6では a要素にしか使えないため、どうしてもIE6のユーザーに対してはユーザビリティが悪くなってしまいます。そんなときに使えるのが csshover.htc というビヘイビアファイルです。これは、IE限定の拡張機能でJscriptを実行するものです。

HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。※1．ウェブページを作成成するためのマークアップ言語。.※2．ウェブページのデザイン・レイアウトを定義するための規格。※3．Internet ExplorerやFirefox・Safariなどの、インターネットを閲覧するために使うソフトのこと。※4．HTMLコーディングと言います。 HTMLコーダーの仕事仕事の種類と内容HTMLコーダーは普段どのような仕事をしているのでしょうか。ここからは仕事の種類と内容について紹介します。ウェブサイトのHTMLコーディング冒頭でも触れたように、ウェブデザイナーがデザインしたものをブラウザで見られるようにするためにHTMLコーディングしていきます。 ここで、Internet Explorer・Firefox・Safariなど複数のブラウザへの対応が求められます。何故なら、ブラウザごとに表示の差違があり、 Internet Explorerで表示されたものがSafariでは表示されないということが起こる上に、ユーザーもInternet Explorerだけを使っているだけではないからです。この複数のブラウザへの対応がHTMLコーディングの一番難しいところであり、これが出来て一人前のHTMLコーダーと言えるところでもあります。

このようにウェブサイトでは改行位置が揃っていないことが多いと思いますが、やはり改行位置が揃っていた方が読みやすく、見た目的にも綺麗で気持ちがいい文章に見えます。

ということで今回は、CSSを使った文章の改行位置を揃える方法の紹介です。

それでは早速使い方のご紹介

必要なデータを揃える

まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。

ここではファイル名を下記の通り保存しました。

• jquery.js
• jquery-ui.js
• jquery.easing.js
• jquery.scrollfollow.js

ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルが全て入っています）。

これは特定の条件が揃った際に起こるIE6のバグなのですが…はてさてその発生条件とは。

発生条件

text-indet が指定されている親要素に text-align: right が指定されていると発生します。
恐らくtext-alignが効くブラウザ全てで発生するものと思います。発生を確認したブラウザは、IE6～8、Firefox2～3、Safari2～3、Google Cromeです。
◆サンプル

このライブラリの便利なところは、小難しい設定をしなくても使えることや、ポップアップした画像を自動的にブラウザに収まるサイズに縮小してくれるところです。
※HTMLを表示する場合にはサイズを指定する必要があります。

使ってみたい！と思った方のために使い方の手順を下記にまとめました。

必要なデータを揃える

まずは、配布元であるThickBox3.1に行き、Downloadから下記ファイルをダウンロードしましょう。

ファイル名

• thickbox.js
• thickbox.css
• loadingAnimation.gif
• jquery-latest.js

リンクを左クリックしてしまうと、ファイルが開かれてしまいますので、右クリックから「名前を付けてリンク先を保存」を選びましょう。
このとき、保存するフォルダは下記の用にしてください。

imagesフォルダの中にloadingAnimation.gifが入ります。この画像データはポップアップ画像を読み込んでいるときに表示されるローディングアニメーションです。

CSSでコーディングしているときに、背景や線が途中で消えたり、floatした親要素の下マージンがおかしくなることがあると思います。

※このサンプルは、floatした要素と回り込みテキストを背景と線が指定された親要素が囲うようにCSSを書いています。

これは、floatした要素が親要素の高さに反映されていないため起きる現象です。
clearfixはこういった現象を解決するための方法です。