HTMLで幅を調整する
HTMLで、よくつまづくのは、幅の調整だと思います。今回は、初級編として、pre , table の幅の固定について簡単な解説をしてみたいと思います。
テーブルの幅の問題
一般的に、TABLEは、width(幅)を指定できるのだから、固定できるのでは・・・?
実は、HTMLの勉強を始めたころ、筆者自身もそう思っていました。随分以前のことです。()
例えば、以下のような場合、どうなるでしょう。
|
実例
カラム1 | カラム2 | カラム3 |
データ1 | データ2 | データ3 |
では、次のパターンは、どうなるでしょう。
|
実例
カラム1 | カラム2 | カラム3 |
データ1 | データ2 | 012345678901234567890123456789012345678901234567890123456789 |
このように、文字の幅に合わせてテーブルが膨らみます。
これを解消するには、tableのスタイルを設定してあげることで回避することができます。
|
style=”table-layout: fixed;”を追加しただけです。
実例
カラム1 | カラム2 | カラム3 |
データ1 | データ2 | 012345678901234567890123456789012345678901234567890123456789 |
と、テーブル幅が固定され、テーブルが文字幅に引きずられることは回避できました。
ただ、文字は、前回と同じようにテ突き抜けている。
文字のつきぬけの問題(連続した半角文字の折り返し)
先に示したようにテーブルは固定できたが、文字ははみ出てしまいます。これを回避するには、次のように設定すると回避できます。
- <wbr>或いは半角ブランクを折り返しても良いところに埋め込む
- style=”word-break: break-all;”を追加する(IEのみ)
|
<wbr>を折り返しても良いところに埋め込んだ例。
実例
カラム1 | カラム2 | カラム3 |
データ1 | データ2 | 0123456789 |
半角ブランクを折り返しても良いところに埋め込んだ例。
実例
カラム1 | カラム2 | カラム3 |
データ1 | データ2 | 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 |
|
|
を追加した例。IEのみ折り返される。
実例
カラム1 | カラム2 | カラム3 |
データ1 | データ2 |
012345678901234567890123456789012345678901234567890123456789 |
上記以外にもサーバ側の設定等々で切り抜ける方法もあります。詳しくは、Googleなどで検索されると良いと思います。
文字のつきぬけの問題(preタグでの折り返し)
先のようにテーブルでは、(完全とはいえまぜんが)固定できましたが、以下のようにpreタグでは、文字が突き抜けてしまいます。
|
例)
カラム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以上)
を設定すれば良いです。
|
例)(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以上)*/ };
この記事を読んだ人は、こんな記事も読んでいます。:
コメント
コメントをどうぞ