カテゴリー: css

iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 – くらげだらけ（くだくらげのBLOG）で、Web Symbols typefaceというテクニックが紹介されていた。
WebFontという技術を使って、文字の代わりにボタン画像なんかを埋め込んだフォントを使えば、画像ファイルを持たなくてもよく使うアイコンを表示できるよ！というアイデア。
みんながこのフォントを使うようになって、jQueryみたいに高速なサーバからこのフォントが落とせるようになれば面白い技術だと思う。

でも、iOSに限定していいんだったら、[titanium]画像を使わずにボタンを表示の手法を使ってWebFontなしにボタン画像を表示することも出来る気がしたので、やってみた。

machine dependent charactors on iOS5 – mogya

理屈は前回と同じ。Apple SymbolsやLucida Grandeといったフォントは、上記のようなデザインの文字を元々持っている。これらは、同じフォントを持っていないと表示できないからWEBの世界では使わないことになっているけれど、iPhone専用サイトと割り切るのであれば、CSSでフォント指定して上げれば表示することが出来る。
どんな記号が使えるかは、下記を参考に。

• わかばマークのMacの備忘録 : Macで使うHTMLでの特殊文字 
• Mac OS X 10.6 Help: 特殊文字と記号を入力する

長所としては、WebFontを使うより当然高速軽量に表示が出来る。短所としては、iOSの持っているフォントに依存してしまうので、昔のIE専用WEBページと同様、他の機種で見た時の表示が保証されない。
実際問題としては、サンプルをひらいてみると分かるようにWindowsでもけっこう表示できちゃうんだけど、WEBの精神から行くとあんまり望ましくないことなのは事実。「iPhone」といったらiPadもAndroidも含めた全てのスマートフォンで動くものを想像されるお客さまも日本にはいらっしゃるので、利用する時は慎重に利用することをお勧めします。

　こういう、たくさん項目があって必要なものにチェックを入れてください、というフォームを作ることがあって。

山手線
京浜東北・根岸線
中央線
常磐線
東海道本線
総武線

このとき、何も指定していないと、ブラウザはこんなふうに、チェックボックスの後ろで改行されてしまうことがある。

山手線
京浜東北・根岸線
中央線
常磐線
東海道本線
総武線

これを避けるために、強制的に改行を入れる人がいて。

<div style="border:1px solid black;width:200px;padding:10px;">
<label><input type='checkbox' name='field[]' value='1' />山手線</label>
<label><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label><br/>
<label><input type='checkbox' name='field[]' value='3' />中央線</label>
<label><input type='checkbox' name='field[]' value='4' />常磐線</label><br/>
<label><input type='checkbox' name='field[]' value='5' />東海道本線</label>
<label><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>

より力ずくの例としては、テーブルにして行を切ってしまうとか。
そういう方法でも一応問題は解決するんだけど、後日路線が増えたら関係ないところまで直さないといけないし、フォントサイズを変えている人がいたら意味不明なところで改行される恐れもあって、できればこういうことはしたくないものですよね。

で、スマートにやる方法。

<blockquote>
<div style="border:1px solid black;width:200px;padding:10px;">
<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='1' />山手線</label>
<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label>
<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='3' />中央線</label>
<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='4' />常磐線</label>
<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='5' />東海道本線</label>
<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>
</blockquote>

こういう風に、改行されたら困る単位で”white-space:nowrap;”を指定してあげれば、それ以外の位置を見つくろって改行してくれるので、内容が変わってもフォントサイズが変わっても大丈夫なコードになります。

＃ここでstyle=””を使っているのは、見やすさのためなので、本来はもちろんCSS上で適当なセレクタに”white-space:nowrap;”を指定しましょう。

当たり前の話なんだけど、なぜか強引に改行を挿入する人がいっぱいいるみたいなので書いてみた。