携帯向けXHTMLを書いているとバッドノウハウばかりが身について行くのですが、その中で私が愛してやまないspacerのことについて熱く語ってみようと思います。
私が個人的に見つけたバッドノウハウばかりですので、これら以外にもっとスマートな方法がありましたら是非ご教示ください。
一般的な使い方
<br /><br />での改行するなんてとんでもない、でも3キャリ対応しようと思ったらline-heightも使えないし。。。そんなことでお悩みの方が良く使っているのがこのspacer。
原理は簡単、1ドットの画像をimgタグのwidthとheightで大きさを好きに変えてお好みの行間を作るのがメインのお仕事です。
気をつけること
<div><img src="spacer画像のパス" width="X" height="Y" /></div>のみでももちろんその用途は果たせますが、一部機種にて必ず<br /><br />した時と同じだけのスペースが入ってしまうことがございます。
その対策として。。。
<div style="height:Ypx"><img src="spacer画像のパス" width="X" height="Y" /></div>と外側のdivタグにも同じ高さを指定してあげることで見た目的には正しいスペースが表示されるようになります。
デザインを統一するために
同じようなデザインのページなのに、スペースの開け方だけ全然違っていても気になる人なんてほとんどいないかとは思いますが、私のようなA型の人はぜひサイト全体でスペースの開け方を統一してみましょう！
- 3,4種類の行間スペースを決める
私が良く使っているのは、2px, 3px, 5px, 10pxの4種類です - どの行間スペースをどんな時に使うのかを決める
例)- 2px: デザイン上で必要な微妙なスペース
- 3px; 文章と文章の間のスペース
- 10px: フッター等で本当にいっぱい開けたい時
- 5px: 上記以外で適当なスペースがほしい時
- 自分を含めコーディングする人がピクセル単位で指定出来ないようにする
人間は間違えるものです。自分で決めたルールでもあれ？どれだっけ？と忘れてしまうこともあります。厳密にはもちろん不可能ですが、たとえばHTMLヘルパー的なものでどの高さにするのかをピクセル単位ではなく種類を選ばせることによってミスは大分減り、より統一されたデザインのサイトに仕上がるかと思います。
height代わりに使う
これまた3キャリ対応させようと思っていると、auの一部(?)機種にてtableタグのheightが効かないことに気付きました。
そんな時にもspacerは使えます！
<table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td> 何かの文章 </td> <td width="1"> <!-- 高さを100pxにしたい場合 --> <img src="spacer画像のパス" width="1" height="100" /> </td> </tr> </table>
このような感じになります！
※見やすいようにtableとimgタグ両方にボーダーを入れています。
| 何かの文章 |
|
tableタグ自体のheightが使えなくても、無理やりspacerでその分の高さを出しているだけなのですが、こうすることにより、中身のテキストや画像が短くても一定の高さのtableがほしい場合のデザインを実現出来ます。
ラインを表現するのに使う
<hr />タグの代わりに1pxの画像を横いっぱい伸ばして使っている場合が多いかと思いますが、そうすると、ローディング中にラインが表示されなかったり、機種によっては特別なことをしない限りテキストと一行分と同じだけのスペースをとってしまうので、少し見栄えが悪くなります。
そこでspacerの登場です。
<div style="background-color:red;height:1px"> <img src="spacer画像のパス" width="1" height="1" /> </div>
以下のようになります。
何を隠そう行間用のspacerのdivに色を付けただけなんです。
しかし、こうすることにより、ローディング中でもきちんと表示されるラインの出来上がりです！
何かと制限の多い携帯向けXHTMLですが、spacerのように頭をひねれば意外といろいろが解決可能だということに気づくかと思います。
全てがバッドノウハウですので、本当に役に立っているのか時たま分からなくなる時もありますが、みなさんもぜひspacerを愛でみてはいかがでしょうか？意外な使い方が見つかるかもしれません！