HTMLで幅を調整する

公開日| 2009年12月23日(Wed) | コメントはありません。

カテゴリ:html | タグ: html, pre, table, width, はみ出る, タグ, 幅

HTMLで、よくつまづくのは、幅の調整だと思います。今回は、初級編として、pre , table の幅の固定について簡単な解説をしてみたいと思います。

テーブルの幅の問題

一般的に、TABLEは、width（幅）を指定できるのだから、固定できるのでは・・・？
実は、HTMLの勉強を始めたころ、筆者自身もそう思っていました。随分以前のことです。( )

例えば、以下のような場合、どうなるでしょう。

<table width="300px" border="1" bgcolor="#f0f0f0">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td> データ３</td>
</tr>
</table>

実例

カラム１	カラム２	カラム３
データ１	データ２	データ３

では、次のパターンは、どうなるでしょう。

<table width="300px" border="1" bgcolor="#f0f0f0">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td> 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>

実例

カラム１	カラム２	カラム３
データ１	データ２	012345678901234567890123456789012345678901234567890123456789

このように、文字の幅に合わせてテーブルが膨らみます。
これを解消するには、tableのスタイルを設定してあげることで回避することができます。

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td> 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>

style=”table-layout: fixed;”を追加しただけです。
実例

カラム１	カラム２	カラム３
データ１	データ２	012345678901234567890123456789012345678901234567890123456789

と、テーブル幅が固定され、テーブルが文字幅に引きずられることは回避できました。
ただ、文字は、前回と同じようにテ突き抜けている。

文字のつきぬけの問題(連続した半角文字の折り返し)

先に示したようにテーブルは固定できたが、文字ははみ出てしまいます。これを回避するには、次のように設定すると回避できます。

<wbr>或いは半角ブランクを折り返しても良いところに埋め込む
style=”word-break: break-all;”を追加する（IEのみ）

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;white-space: -moz-pre-wrap;">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td> 0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789</td>
</tr>
</table>

<wbr>を折り返しても良いところに埋め込んだ例。
実例

カラム１	カラム２	カラム３
データ１	データ２	012345678901234567890123456789012345678901234567890123456789

半角ブランクを折り返しても良いところに埋め込んだ例。
実例

カラム１	カラム２	カラム３
データ１	データ２	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;white-space: -moz-pre-wrap;">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>
 012345678901234567890123456789012345678901234567890123456789</td>
</tr>
</table>

style="word-break: break-all;"

を追加した例。IEのみ折り返される。
実例

カラム１	カラム２	カラム３
データ１	データ２	012345678901234567890123456789012345678901234567890123456789

上記以外にもサーバ側の設定等々で切り抜ける方法もあります。詳しくは、Googleなどで検索されると良いと思います。

文字のつきぬけの問題(preタグでの折り返し)

先のようにテーブルでは、（完全とはいえまぜんが）固定できましたが、以下のようにpreタグでは、文字が突き抜けてしまいます。

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>&lt;pre&gt; 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789&lt;/pre&gt;</td>
</tr>
</table>

例）

カラム１	カラム２	カラム３
データ１	データ２	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

半角ブランクを折り返しても良いところに埋め込んでも、preタグでくくられると突き抜けてしまいます。
これを対処するには、次のように設定すると回避できます。
style=”white-space: -moz-pre-wrap;”(FireFox用),
style=”word-wrap: break-word;”(IE用),
style=”white-space: -pre-wrap;”(Opera 4-6用),
style=”white-space: -o-pre-wrap;”(Opera 7用),
style=”white-space: pre-wrap;”(CSS3用/FireFox用3.0以上)
を設定すれば良いです。

<table width="300px" border="1" bgcolor="#f0f0f0" style="table-layout: fixed;">
<tr>
<td>カラム１</td>
<td>カラム２</td>
<td> カラム３</td>
</tr>
<tr>
<td>データ１</td>
<td>データ２</td>
<td>&lt;pr style="white-space: -moz-pre-wrap;"&gt; 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789&lt;/pre&gt;</td>
</tr>
</table>

例）(FireFox)

カラム１	カラム２	カラム３
データ１	データ２	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

例）(IE)

カラム１	カラム２	カラム３
データ１	データ２	0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

ポイントは、以下の２点です。

tableタグでは、style=”table-layout: fixed;”を指定する

preタグでは、CSSファイルに以下のコードを埋め込んで対処する

pre {
	white-space: -moz-pre-wrap;	/*(FireFox用)*/
	word-wrap: break-word;		/*(IE用)*/
	white-space: -pre-wrap;		/*(Opera 4-6用)*/
	white-space: -o-pre-wrap;	/*(Opera 7用)*/
	white-space: pre-wrap;		/*(CSS3用/FireFox用3.0以上)*/
};

この記事を読んだ人は次の記事も読んでいます:

お気に入りに追加(BookMark):

Trackback URL

管理者の承認後に表示します。

コメントする

翻訳

タグクラウド

install WIndows Note Convert トップページ投稿ページ問題日付サイトマップフロントページ META remove multibyte utf-8 unicode shiftjis redirect manage generator donwload file マルチランゲージ国際化 width 幅テンプレートテーマ pre タグクラウドはみ出るリダイレクト ParmaLink Redirect パーマリンク table html タグプラグイン php コマンドヘルプ control SQLite MySQL プラグイン qTranslate WordPress

リンク

Joomla!,WordPress,Mobile Typeの使えるおすすめ格安レンタルサーバー

このサイトは？

Joomla!,WordpressなどCMSを使ったサイト構築、サイト管理からソフトウェアの使用方法、開発環境までのヒントを記述します。

お気に入りに追加(BookMark)

サイト管理

ログイン

最新の記事

HTMLで幅を調整する

テーブルの幅の問題

文字のつきぬけの問題(連続した半角文字の折り返し)

文字のつきぬけの問題(preタグでの折り返し)

この記事を読んだ人は次の記事も読んでいます:

翻訳

カテゴリ

タグクラウド

リンク

このサイトは？

お気に入りに追加(BookMark)

サイト管理