このページの位置: ホーム > blogっぷり! > 石輪っぷり! > Web制作 > 長いURLを折り返し、Validation もクリアする

石輪っぷり!

長いURLを折り返し、Validation もクリアする

[Web制作] 2007年3月26日 1時55分

Webページ上で、URL を表記することが多々ありますが、Firefox や IE では URL が長くなっても途中で改行してくれないので、レイアウト的に不都合が発生します。（通常、英文は単語の途中で改行することはしないので、半角英数が連続する URL も同様に扱われるため）

Firefox や Netscape では、ボックスを突き破って表示されるだけなのでまだいいのですが、IE 6 以前に関しては困ったことにボックスの幅を拡張してしまうので、概ねページ全体のレイアウトが大きく崩れてしまいます。特に float プロパティを使って2カラムや3カラムのレイアウトをしていると、拡張されたボックスが親ボックスにおさまらず、下に落ちたりしてしまいます。

その解決方法として、Firefox など Mozilla 系のブラウザに対しては、url_breaker という Firefox 拡張の GreaseMonkey 版を Javascript として利用することで解決します。（参考：小粋空間: Firefox・Netscapeで連続した半角文字を折り返す）

問題は IE。 CSS に "word-break: break-all;" という記述を加えれば、単語の途中で改行してくれることは知っていたのですが、これは IE 独自の仕様のため、W3CのCSS Validation にかけるとエラーになるのです。

Validation にパスすることよりきちんと表示することを優先すべきかもしれないですが、トコトンこだわる性格の私としては、何としても表示と Validation の両方をクリアしたいとあれこれ試し、ついにそれを解決する方法を見いだしました。

それは、IE のバージョン判定に使用される「条件付コメント」を利用して、"word-break: break-all;" を記述した CSS ファイルを読み込ませるという方法です。
この条件付きコメントも IE の独自拡張なのですが、IE 以外（CSS Validation を含めて）には単にコメントとして扱われるだけなので "word-break: break-all;" は読み込まれず、エラーにならないわけです。（もっとも、本当の意味でのクリアではないですが）

具体的には以下のとおりです。

［XHTML］

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/import.css" media="screen,tv" />
・・・ 通常のCSSファイルの読み込み。
<!--[if IE]>
　<link rel="stylesheet" type="text/css" href="/css/ie_url_break.css" />
<![endif]-->
・・・ 条件付きコメント <!--[if IE]> ～ <![endif]--> を利用し、全ての IE のみに "ie_url_break.css" を読み込む。
　：
</head>
<body>
　：
<script type="text/javascript" src="/js/url_breaker_plus.user.js"></script>
・・・ XHTML の最後で "url_breaker_plus.user.js" を読み込む。スクリプト内の記述で Mozilla 系ブラウザのみに適用。 
</body>
</html>

［ie_url_break.css］

対象のセレクタ {
　word-break: break-all;
}

［url_breaker_plus.user.js］
（outsider reflex: Firefoxで長いURIを折り返すよりダウンロード/小粋空間: Firefox・Netscapeで連続した半角文字を折り返すを参考に、Mozilla 系ブラウザのみで動作させる記述を追加）

(function () {
if(navigator.appName == 'Netscape'){
　：
（中略）
　：
}
})();

ただ、Firefox では、"/" や "."，"-" の後で改行（はみ出る部分は今まで通り）されるので見た目もきれいですが、IE ではところかまわず改行されるので、少々読みづらいです。
とはいえ、仮に IE で "/"や"."の後のみで改行すると、ドメインなど連続する半角英字が長ければ、結局ボックスが拡張されるという事態に陥りますので仕方ないですね。

少なくとも、これまで苦肉の策として採用していた、display プロパティを使ってスクロールバーを出したり、はみ出た部分を非表示にしたりするよりはよいかも。
なお、Opera はこんなことなくても最初から、 "/" の後で改行してくれます。

3月27日追記
url_breaker は Firefox と Netscape 7.1 には有効ですが、Netscape 7.0 以前には無効でした。
また、Safari には当然上記の手法は無効。そのうえ Opera みたいに標準で改行もしてくれないので、Netscape 7.0 や 6.2、Safari はボックスをはみ出て表示されたままです。

それはまだ目を瞑るとして、問題は Mac 版の IE 。"/" や "-" などで改行してくれるのはよいですが、条件付きコメントも word-break プロパティも Mac 版 IE には無効なので、連続する半角英字が長ければボックスが拡張されてレイアウトが崩れるという最悪の状態になります。

コメント(0) | トラックバック(1)

トラックバック(1)

このブログ記事のトラックバックURL:

送信元: Blog萬 - CSS文書の文法チェック (66.160.206.221)

おはようございます、萬次郎です。今日は、HTML文書の文法... 続きを読む

トラックバック日時: 2007年5月30日 9時37分

コメントする

« 前の記事: Mac版 Internet Explorer
次の記事 »: 複数ファイル・複数行一括変換ソフト

カレンダー

2007年3月
日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31