2010年5月アーカイブ

コンテンツ量が少なくても常に縦スクロールバーを出す方法は、昔に以下の記事を書きました。

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ(safari、Opera、Chome)には有効のようです。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

前回の記事で改行の方法を指定する「word-wrapプロパティ」について述べました。

もうひとつ、改行の方法を指定するプロパティに「word-breakプロパティ」というのがあります。

word-breakプロパティとは?

word-breakプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。例えば、表示範囲に合わせて改行するか、あるいは単語の切れ目で改行するかなどです。

値には、narmal、keep-all、break-allの3種類があり、意味は以下のとおりです。

normal
日本語は表示範囲で単語の途中でも改行されるが、英語は単語の切れ目で改行される。
keep-all
全ての言語で単語の途中で改行せず、単語の切れ目で改行される。
break-all
全ての言語で単語の途中でも改行される。

ただ、各ブラウザで動作が若干異なります。例えば、keep-allは、IE6や7では、そのとおりの動作をするのですが、他のブラウザでは日本語は表示範囲に合わせて単語の途中でも改行されます。

word-breakプロパティの実装状況

各ブラウザで確認してみてください。

表にしてみました。

ブラウザ/値narmalkeep-allbreak-all
Firefox 3.6.3××
Safari 4.0.5
Google Chome 4.1
Opera 10.51××
IE6
IE7
IE8××

基本的に、値がnarmalの場合はどのブラウザでも同じ動作をします。

しかし、値がkeep-allの場合、Safari、Chomeは、日本語は表示範囲に合わせて単語の途中でも改行され、英語は単語の切れ目で改行されます。一方、IE6と7は、日本語も英語も単語の切れ目で改行されます。

また、値がkeep-allの場合、Safari、Chomeは禁則処理が無効になるのに対し、IE6と7では禁則処理は有効のままです。禁則処理に関しては、以下の記事で説明しています。

また、IE6、7で使えたword-breakプロパティがIE8で使えなくなっているのは、改行の方法をword-wrapプロパティのみにしたということでしょうか?

word-breakプロパティとword-wrapプロパティの「break-all」の違い

word-breakプロパティにもword-wrapプロパティにも「break-all」という強制的に改行する値を指定できるのですが、この違いは何なのでしょうか。

IEやSafari、Google Chomeはどちらのプロパティの「break-all」も使えるのですが、その差を見てみると、日本語に違いはありませんが、英語のショートセンテンスにおいて、 word-breakプロパティは単語の途中でも強制的に改行してしまいますが、word-wrapプロパティは単語の後の半角スペースで改行してくれるようです。

word-wrapプロパティは最新のブラウザならほどんど使える事、また、英単語の途中で強制的に改行しないことを考えると、word-wrapプロパティを使うのが望ましいと言う事ですね。

それにしても、似たようなプロパティがあるというのもとても変ですね。

という記事を見て、おお!全てのブラウザでword-wrap:break-word;が有効なのか!と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。

word-wrapプロパティとは?

まず、word-wrapプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。単語の途中で改行するかどうかを指定します。

word-wrapプロパティは確かIEが独自先行で実装してたと思ったのですが、CSS3で草案されていて、主要の最新のブラウザで実装されているようですね。

値には、narmal、break-wordの2種類があり、意味は以下のとおりです。

normal
英単語の途中で改行しない。表示範囲をはみ出す場合は表示範囲を拡張する。日本語は表示範囲に合わせて強制的に単語の途中でも改行する。
break-word
日本語も英語も表示範囲からはみ出す場合は強制的に単語の途中でも改行する。

サンプル

朝起きると体がだるく感じた。とりあえず起きてみたものの、段々気分が悪くなってきた。熱を測ってみると39度7分もあった。「Oh, my God!」と僕はふざけて天を仰いだ。今日はどうしても外せない用事があるのだ。 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789@com.abcdefghijklmnopqrstuvwxyz0123456789@com. abcdefghijklmnopqrstuvw-xyz0123-456789@com.abcdefghijklmnop/qrst/uvwxyz0123456789@com.abcdefghijklm_nopqrstuvwxyz0123456789@com.

ハイフンとかスラッシュがある場合は、場所によってはそこで強制的に改行するみたいです。

禁則処理

文字のレイアウトで重要なのは、禁則処理です。禁則処理とは、例えば日本語で言えば、句読点が行頭にこないなど、作文を書くときによく注意された、文章を書く上での決まりごとですね。

ブラウザによってもこの禁則処理に若干の違いがあります。Safari、Chome、Operaでは、一般的な禁則処理は行われます。

しかし、firefoxでは、「段々」などの「々」が行頭にきてしまうことがあります。また、IEでは小さい「っ」が行頭にきてしまうことがあります。

あと、似たようなのに、word-breakプロパティというのもあります。これも同様に改行方法を指定するものなのですが、ブラウザで実装状況が異なるようです。詳しくは別の機会に。

「IE6以前のブラウザにおいて、floatしたブロック要素にマージン(margin)を指定すると値が2倍になってしまう」というのは非常に有名なIE6のバグなのですが、最近floatを解除するのに、親要素にfloatを指定して回り込みを解除することをよくしているので、このバグによく遭遇します。このバグの解決方法を紹介します。

(X)HTMLコード

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSSコード

li {
   display:inline;
   float:left;
}

display:inline;にすると、他のブラウザで不都合は起こらないのか?という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。

というのも、「floatを指定した要素にdisplayプロパティは無視される」と仕様書に書いてあります。

float:left・・・左に浮動するブロックボックスを生成する。 続く内容は、('clear'プロパティの指定に従いつつ)そのボックスの右側に上から流し込まれる。 このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。

視覚整形モデルより引用

また、リストを横並びにして、余白をマージンで空ける場合があります。その際、最後の余白は不必要な場合、親要素にマイナスのマージン(ネガティブマージン)を指定することで、各要素の間だけに余白を空けることが出来ます。しかし、IE6ではネガティブマージンが効かない場合があります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。

CSSコード

ul {
   zoom:1;
}
これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。