レイアウト

トップ > 逆引きリファレンス > レイアウト

中央に表示する(センタリングする)には

文字や画像を中央に表示(センタリング、中寄せ)するには、<center> もしくは <div align="center"> を用います。スタイルシートの場合は、text-align を用います。

<center>この部分は中央に表示されます</center>
<div align="center">この部分は中央に表示されます</div>
<div style="text-align:center">この部分は中央に表示されます</div>

縦方向の中央に表示するには

文字や画像を画面の縦方向の中央に表示するには、<table> の height="100%" を利用してやります。

<table height="100%">
<tr>
<td>
文字や画像
</td>
</tr>
</table>

右寄せするには

文字や画像を右寄せするには、<div align="right"> を用います。スタイルシートの場合は、text-align を用います。<right> というタグはありません。

<div align="right">この部分は右寄せです</div>
<div style="text-align:right">この部分は右寄せです</div>

段組するには

Netscape 4.* では段組用のタグとして <multicol> がサポートされていましたが、Netscape 6.0 や Internet Explorer ではサポートされていません。手軽に段組を実現するには、テーブルを用いる方法があります。valign で各段の上部に空白が空かないようにするのがコツです。

<table width="100%">
<tr>
<td valign="top">
この方法を用いると段組になります。
この方法を用いると段組になります。
</td>
<td valign="top">
この方法を用いると段組になります。
この方法を用いると段組になります。
</td>
<td valign="top">
この方法を用いると段組になります。
この方法を用いると段組になります。
</td>
</tr>
</table>
この方法を用いると段組になります。 この方法を用いると段組になります。 この方法を用いると段組になります。 この方法を用いると段組になります。 この方法を用いると段組になります。 この方法を用いると段組になります。

文章を縦書きにするには

Internet Explorer 5.5 で、縦書きを可能とするスタイルシート writing-mode がサポートされました。

<div style="writing-mode: tb-rl">
むかし、むかし、あるところに・・・
</div>

Netscape 7.0 にも対応するには、テーブルを用いる方法があります。valign で行頭が上に配置されるように、align で文字が中央揃えされるように、width で行の幅を 1文字分に、font-family で等幅フォントを指定するのがコツです。

<table>
<colgroup span=100 valign="top" align="center"
 style="width:1em; font-family:monospace;" >
<tr>
<td>さしすせそ</td>
<td>かくくけこ</td>
<td>あいうえお</td>
</tr>
</table>
さしすせそ かくくけこ あいうえお

ただし、この方法では、音声読み上げブラウザなどが最後の行から読んでしまい、アクセシビリティ的には好ましくありません。アクセシビリティを下げずに縦書きを実現するには、各行の位置をページの x, y 座標で直接指定してやる方法があります。

<style type="text/css">
<!--
.tate {
  position: absolute;
  width:1em;
  text-align: center;
  top: 10em;
}
-->
</style>
<div class="tate" style="left:20em;">あいうえお</div>
<div class="tate" style="left:18em;">かきくけこ</div>
<div class="tate" style="left:16em;">さしすせそ</div>

画像と文字の大きさを合わせるには

画像と文字の大きさのバランスを考慮しながらレイアウトするには、文字の大きさを固定する必要があります。「文字の大きさを固定するには」を参照してください。ブラウザに依存せず、見栄えを重視するなら文字も画像ファイルで作成してしまう方法があります。ただしこの場合、画像には alt 属性を指定したり、テキストブラウザ用のページを用意するなど、アクセシビリティにも考慮してください。

画像や文字を好きな位置に表示するには

スタイルシートの position を用いることで、画像や文字の表示位置をピクセル単位で指定することができます。下記の例では、「Hello!!」とい文字を、画面の上端から 100ピクセル、左端から 200ピクセルの箇所に表示します。

<div style="position:absolute; top:100px; left:200px;">
Hello!!
</div>

Copyright (C) 2003-2004 杜甫々
初版: 2003年10月12日、最終更新:2004年3月28日
http://www.tohoho-web.com/how2/layout.htm