レイアウト

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

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

文字や画像を中央に表示(センタリング、中寄せ)するには、<center>、もしくは align="center" を用います。

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

HTML5では、<center> や align属性は廃止され、代わりにスタイルシートを用います。テキストをセンタリングするには、text-align を用います。

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

ただし、text-alignでは、<table> や <div> などのブロック要素をセンタリングすることができません。ブロック要素をセンタリングするには、text-align の詳細説明を参照してください。

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

文字や画像を画面の縦方向の中央に表示するには、テーブルを用います。

HTML
<table style="border:1px solid gray; height:60px; width:200px;">
<tr><td>文字や画像</td></tr>
</table>
表示
文字や画像

スタイルシートを用いて実現するには、vertical-align: middle と display: table-cell を用います。

HTML
<div style="border:1px solid gray; height:60px; width:200px; vertical-align:middle; display:table-cell;">
文字や画像
</div>
表示
文字や画像

右寄せするには

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

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

段組するには

段組みを行うには、下記のようなスタイルシートを用います。

CSS
.multicol .mcol {
    float: left;
    margin-left: 8px;
    width: 100px;
    background-color: #ffcccc;
}
HTML
<div class="multicol">
 <div class="mcol">
 あいうえおかきくけこさしすせそたちつてと
 </div>
 <div class="mcol">
 あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ
 </div>
 <div class="mcol">
 あいうえおかきくけこさしすせそたちつてと
 </div>
 <br style="clear:both;">
</div>
表示
あいうえおかきくけこさしすせそたちつてと
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ
あいうえおかきくけこさしすせそたちつてと

文章を縦書きにするには

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

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

しかし、HTML5 にもまだ採用はされておらず、他のブラウザでもサポートしているものはまだ無い様です。

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

画像と文字の大きさのバランスを考慮しながらレイアウトするには、文字の大きさを固定する必要があります。「文字の大きさを固定するには」を参照してください。ブラウザに依存せず、見栄えを重視するなら文字も画像ファイルで作成してしまう方法があります。ただしこの場合、画像には 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