カレンダー

04 | 2017/05 | 06
- 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 - - -

最近の記事

月別アーカイブ

カテゴリー

ユーザータグ

最近のコメント

プロフィール

run800m

Author:run800m
元・陸上競技の800m選手。
好きな食べ物はねぎともやし。

専門は機械工学・ロボティクス
興味は経済・経営・生産・心理
・地理・プログラミング・性

QLOOKアクセス解析
フィードメーター - 他人の日記を見るのか? ver.BLOG

QRコード

QR

RSS

はてなRSSに追加
livedoor Readerに追加
My Yahoo!に追加
Googleに追加
goo RSSリーダーに追加
Bloglinesに追加
Technoratiに追加
newsgatorに追加
Powered by SEO対策 RSSプラス

ブログ内検索

リンク

このブログをリンクに追加する

気まぐれ広告

ブログ内容を反映するらしい。
ホントか!?

他人の日記を見るのか? ver.BLOG
デジモノ好きのたわいもない記録 デジタルライフ
スポンサーサイト
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


カテゴリ:スポンサー広告

長いプログラムソースのはみ出し対策 続編
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
QLOOKの記事を書いていて、やたらと長いソースを貼ることが多く、どうしても気になったので、再度チャレンジしてみた。

その過程で「PRE CODE はみ出す」で検索したら、前回の途中で投げ出した記事が一番上に出てきたからというのも、一つの理由ではある。

期待して見て下さった方々には申し訳ないことをしてしまった。

そんな訳で今回は基本に戻って、自分でもネットサーフィン以外の調査をして、一つの結論に至ることとなった。


まず、<PRE>を使わないという話は無しにした。

やはり<PRE><CODE>というのは主流であるし、今までもそれで書いてきているので変更が面倒だからである。

ところで話が少しそれるが、「<PRE><CODE>が正しい」という記述をいくつかのサイトで見たのだが、それはどこで定義された正しいなのだろうか?

実は私は今まで、<PRE><CODE>ではなく、<CODE><PRE>で書いてきた。

これは何も考えずに書いてきたのではなく、素人の自分なりに考えてやってきた。

PREはPreformatted Textで整形済み文書である。

自分にとって整形した文書というのは、プログラムソースそのものであり、<CODE>はその中に含まれるものではないと考えるのである。

自分の頭の中での階層を例えるなら<CODE>は箱で、<PRE>はアルミホイル、プログラムソースはバターとする。

HTMLという部屋に作ったバターを置く際、生のまま置いておくのは汚れてしまい、ナンセンスなので包装をする。

箱(<CODE>)に直接バターを入れることもできるが、それだと汚くなってしまうので、アルミホイル(<PRE>)で包んだ状態で箱に入れる。

そう、アルミホイル(<PRE>)はバター(プログラムソース)の状態・体裁を守るためのもので、箱(<CODE>)はそれがバターであると示す外装のようなイメージなのである。

いや、こんな訳の分からない馬鹿な例え方をして、「W3Cにこう書いてある」と言われてしまえば、一蹴されるだけなのだが。

同じ考えなら「じゃあ<PRE>は(本来のソースの)コードじゃないのに、<CODE>の中に入れていいのか」という意見も生まれるし。

誰か詳細を知っている方がいたら教えて欲しい。


さて、順序はともかく<PRE>を使うと決めたとして、そもそもなぜ自動改行されないのか。

どんな場合に自動改行されないのかを調べていくうちに、なんとなくだが分かってきた。

調べる方法はいたって簡単。

「あああああああああ」とか「aaaaaaaaaaaa」という長い文に対して、スペースの有無、<PRE>の有無、CSSの指定の有無の全パターンを書いたHTMLファイルを作成。

ちなみにCSSの有無とは、有名な<PRE>の改行指定。
	/* 改行対策 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
を指定するか否かということである。

このHTMLファイルをFirefox2.0.0.16とIE6.0で調べた。

自分で使っているブラウザしか使っていなくて申し訳ない。

アクセス解析見て、「もう8割ぐらい3.0に移ってるんだぁ」と思いながら、2.0系列を使う日々です。

ちなみにうちの訪問者はIE50%、FF30%、Opera6%、携帯5.6%という感じ。

ブラウザ依存の問題は、こういう環境調査の結果も反映して考えるべきですね。


さて、実際に作ったHTMLソースもここで載せておきます。
<html>
<head>
<style TYPE="text/css">
<!--
pre{
padding:3px;
border:1px solid #333333;
}
pre.kai{
/* 改行対策 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
-->
</style>
</head>
<body>
<h1>スタイルシート指定なし</h1>
<h2>日本語</h2>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<pre>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</pre>
<h2>英語</h2>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
<h2>日本語 スペース有</h2>
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
<pre>
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
</pre>
<h2>英語 スペース有</h2>
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
<pre>
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
</pre>

<h1>スタイルシート指定あり</h1>
<h2>日本語 スペースなし</h2>
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<pre class="kai">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</pre>
<h2>英語 スペースなし</h2>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<pre class="kai">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
<h2>日本語 スペース有</h2>
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
<pre class="kai">
あああああ あああああ あああああ あああああああああ あああ あああ あああああああああああああああ あああああ ああああああ ああああ あ ああああ あああ あああ あああああ あああああああ ああああ あああああ あああああ あああ ああああああ あああ あああああ ああああああああああ ああ あああああ
</pre>
<h2>英語 スペース有</h2>
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
<pre class="kai">
aaaa aaaaaaaa aaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaa aaaaa aaaaaaaaaaaaa aaaaa aaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaa aaaaaaaa aaaaaa aaaaaaaa aaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaaa aaa aaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa
</pre>
</body>
</html>

本当は本文に載せようかちょっと迷った。

だって、↑この時点でどういう対策に決めたのかネタバレしてるし。

「スクロールかよ……」と思わずに読み進めてください。

なぜそうしたのかが分かります。

実際、このHTMLのページがどんな風になるかはここ↓
http://blog-imgs-30.fc2.com/r/u/n/run800m/kaigyou.html

ダウンロードするなり、色んなブラウザで見るなりしてみて下さい。


で、実験結果です。自動改行したものは○、しなかったものは×です。
要素スタイル指定言語スペースFFIE
なしなし日本語なし
あり
英語なし××
あり
PREなし日本語なし××
あり××
英語なし××
あり××
あり日本語なし
あり
英語なし×
あり

さて実験結果を見ていくと、まず何も指定されてなくても日本語は改行されます。

読点とかがどうなるのかまでは調査してませんが、日本語の場合はどこで切っても特に問題ないからでしょう。

それに対し、英語はスペースのあるところで区切り、それを元に改行します。

スペースがないと一つの単語として扱われ、切れないんですね。

長いURLなんかはこれに当たります。


続いて何も属性とかをいじってない、普通の<PRE>タグに入れた場合。

全てがはみ出すという結果になっています。

<PRE>は整形済み文書をそのまま出すというのが仕事なので、正しい結果でしょう。


では、続いてスタイルシートで改行指定した<PRE>。

ここにきてブラウザによる違いが一箇所でました。

スペースのない英語がFFの場合自動改行されず、IEではされました。

ただ、ここまでやっておいてなんなんですが……

自動改行を目的に頑張っていたのですが、「英単語を勝手にぶつ切りにするような改行をしてもいいのか?」という疑問が生まれました。

そもそもプログラムソースを<PRE>で載せたいのは、インデントのある文や長い文などを、そのまま載せるためにしていた訳です。

はみ出すからと改行させたくないところで改行されては困る訳です。

それならばスクロールに妥協してでも、そのまま載せるほうがいいのではないかと結論に至りました。

そもそもスクロールするほどプログラムソースが長くなることが、そんなに多くはないというのも妥協に至った理由です。


最後に実験していて気付いたブラウザの違いという点なんですが、はみ出す際にFFでは文字だけがはみ出しますがIEではブロックごと延長されてはみ出します。

W3Cの規定がどうかは分かりませんが、見た目としてはIEの方がミスってないようには見えますね。

FFのはみ出し方は完全にバグだと思われます。



そんなこんなで<PRE>内の文が長い場合のみ、横スクロールさせるという方向に決めました。

実際に使っているスタイルはこれです
pre{
background-color:#ffee99;
border-color:#000000;
border-style:solid;
border-width:1px;
font-size:100%;
padding: 5px;

overflow:auto;
width:540px;
}

overflowがautoなので、ブラウザが自動で横幅を考えて、長い時にだけスクロールバーをつけてくれます。

ただ、これだけだとIEが……

スクロールバー使わずに、どこまでもはみ出しやがるんですね。

こいつには横幅を任せておけん、ということで渋々widthを指定しました。

ほんとはwidthを固定値にするのはやりたくなかったんですよ。

せめて%指定にしたかった。

普通のGUIアプリケーションでもウィンドウサイズいじれない奴あるじゃないですか。

ああいうの、融通がきかねぇなぁと思っちゃうんです。

自分でアプリ作る時も、そこらへんは結構気にしてます。

Firefoxではフォームのサイズが自由にいじれる、Resizeable Form Fieldsっていう拡張機能使ってるし。

それにwidth:540pxっていうのは、自分のディスプレイ環境を基準に合わせた訳じゃないですか。

他の人にどう見えてるか分かったもんじゃない。

まあテンプレート自体がpxでサイズ指定してるんで、今さら言っても仕方がないんですけどね。

ちなみにIEは「横のスクロールバーのみ表示」ということができないようなので、横が出ると必要のない縦のバーも出ます。

というか、スクロールバーの厚さが増えた分だけ<PRE>の枠を圧迫するので、スクロールバーが縦も横も必要になります。

その上見にくい……

設定できないかと考えた末、paddingをいじることに。

スクロールバーが増えた分だけ、下を+15px伸ばしてみた。
padding: 5px 5px 20px 5px;}
このせいで今度はスクロールバーがない時やFirefoxで見た時に、下が少し長くなってしまった。

まあ、スクロールバーがある時の不恰好さを考えれば、このぐらいは我慢しよう。



そんなこんなで結局また妥協だらけだった気がするが、なんとか一つの形にはなった。

またブラウザ側の仕様変更や、いいアイデアがあれば新たに試してみようと思う。

今回興味を持ったもの

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
市瀬 裕哉

九天社 2007-02
売り上げランキング : 2554
おすすめ平均

Amazonで詳しく見る
by G-Tools

スポンサーサイト


関連した記事を見る(タグ検索)
HTML CSS 設定 FC2ブログ
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:HP作成 - ジャンル:コンピュータ

カテゴリ:ネット関連

この記事に対するコメント

この記事に対するコメントの投稿
質問・指摘・その他諸々、古い記事にも遠慮なくコメントして下さい!














管理者にだけ表示を許可する
宣伝・スパム・荒し行為でしかないものは削除します。


この記事に対するトラックバック
古い記事にも遠慮なくトラックバックして下さい!
トラックバックURL
→http://run800m.blog23.fc2.com/tb.php/24-a6aadd2a
この記事にトラックバックする(FC2ブログユーザー)

言及リンクのないもの、宣伝・スパム・荒らし行為でしかないものは削除します。
またトラックバック先の内容について当ブログ管理人は一切保障しませんし、責任も負いません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。