Joomla!,Wordpressでサイトを構築するためのヒント

HTMLで幅を調整する

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


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

テーブルの幅の問題

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

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

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



実例

カラム1 カラム2 カラム3
データ1 データ2 データ3

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

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

実例

カラム1 カラム2 カラム3
データ1 データ2 012345678901234567890123456789012345678901234567890123456789

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

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

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

カラム1 カラム2 カラム3
データ1 データ2 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>カラム1</td>
<td>カラム2</td>
<td> カラム3</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td> 0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789<wbr>0123456789</td>
</tr>
</table>

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

カラム1 カラム2 カラム3
データ1 データ2 012345678901234567890123456789012345678901234567890123456789

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

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

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

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

カラム1 カラム2 カラム3
データ1 データ2

012345678901234567890123456789012345678901234567890123456789

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

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

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

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

例)

カラム1 カラム2 カラム3
データ1 データ2
 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>カラム1</td>
<td>カラム2</td>
<td> カラム3</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>&lt;pr style="white-space: -moz-pre-wrap;"&gt; 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789&lt;/pre&gt;</td>
</tr>
</table>

例)(FireFox)

カラム1 カラム2 カラム3
データ1 データ2
 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

例)(IE)

カラム1 カラム2 カラム3
データ1 データ2
 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789

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

  • 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以上)*/
    };





コメント

コメントをどうぞ








翻訳

最近の記事

カテゴリー

タグクラウド

execute remove フロントページ 投稿ページ トップページ install WIndows Note Convert META generator 日付 donwload file manage multibyte utf-8 unicode shiftjis euc console サイトマップ 問題 ParmaLink Redirect パーマリンク はみ出る pre テンプレート テーマ タグクラウド マルチランゲージ リダイレクト PHP(タグ) タグ table control HTML(タグ) コマンド 国際化(翻訳) SQLite(タグ) MySQL(タグ) qTranslate プラグイン(タグ) Wordpress(タグ)

リンク

このサイトは?

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

  • はてなブックマークへ追加する
  • Facebookでシェアする
  • twitter でつぶやく
  • Google Plusでシェアする
  • Pocketでシェアする
ページトップへ