携帯サイト制作のヒント：2ペインレイアウトをするには？

ページを縦に分割する２ペインレイアウトは、一目で多くの情報を見せることができ、ユーザビリティ向上に効果的なレイアウトです。

PCサイトではdivなどのブロック要素にfloatプロパティを指定することで２ペイン・３ペインのレイアウトをしますが、携帯サイトではdivにfloatが効かず横に並べられないので、テーブルを使います。

●XHTML・CSSのポイント

• テーブルの幅に100%のwidthプロパティを指定
• サブコンテンツ側のセルに30%程度のwidthプロパティを指定
• メインコンテンツ側のセルはwidthプロパティを指定しない（自動算出）
• テキスト装飾のCSSは、divかspan要素に記述する
• サブコンテンツ側には画像を使う

CSSはもちろん外部CSSが使えます。最後の点ですが、ここがとても重要で、セル幅の狭いサブコンテンツにテキストを入れてしまうと、1行に4,5文字程度しか入らないため折り返しが激しく、見るに耐えません。2ペインデザインを使うのであれば、サブコンテンツに画像を使うことがMUSTです。

●画像作成のポイント

• 全体の横幅が480ピクセルを想定する
• メイン側、サブ側のセル幅より小さい横幅で作る

画像幅に上限があることだけ守ればOKです。例えばサブ側のセル幅が30%なら、サブ側は144ピクセル未満、メイン側は336ピクセル未満が上限です。
画像の見え方が機種によって変わってしまうといった、機種と画像によるレイアウト崩れの心配はラウンドアバウトが解消します。

それでは簡単なレイアウトのサンプルを見てみましょう。

●XHTML

<table border="0" cellpadding="0" cellspacing="0" class="two-pain-width">
 <tr>
  <td class="sub-width">
   <span class="large">左</span><br />   
   <div class="center"><img src="image/col-sub.gif" /></div>   
  </td>
  <td class="main-width">
   <span class="large">右</span><br />   
   <div class="center"><img src="image/col-main.gif" /></div>
   <span class="small">文字装飾はdivかspan</span>
  </td>  
 </tr>
</table>

●CSS

.two-pain-width {width : 100%;}

.sub-width {
 width : 30%;
 vertical-align:top;
 background-color: #CCCCCC;
}

.main-width {
 vertical-align:top;
 background-color: #FFD0FF;
}

●表示
（docomo N905i 横幅240px）


（au W61K 横幅232px）


（SoftBank 920P 横幅471px）


携帯で2ペインレイアウトは一見難しそうに見えるかもしれませんが、ラウンドアバウトのオートレイアウト機能がすべての画像を変換し、ページレイアウト全体を維持してくれるので、少しのポイントをおさえれば簡単にできるようになります。