カレンダー

06 | 2017/07 | 08
- - - - - - 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にブックマーク
(新たに続編を書いたのでご覧下さい。)

javascriptを色々と試したくて、IE TabでレンダリングエンジンをIEに替えてこのブログを見たら……

ものすっごいレイアウトが崩れてました。

今までIEで見に来てくれてた人に、こんな姿を晒していたのか!!

申し訳なさと恥ずかしさでいっぱいです。

問題の記事は、

GV-MC/RCkit その2
http://run800m.blog23.fc2.com/blog-entry-4.html

なんですが、途中の取得データを掲載してるところが右にはみ出しまくってました。

以前にもなったことがあったので、Firefox用にはきちんと対策したんですが……

普段使わないとはいえ、いまだシェア80%近いIEを無視しちゃいけないわな。



そんな訳で対策するために色々と調べました。

プログラムソースを載せてるところはみんな同じ悩みを抱えているようです。

ブログにコードを貼り付ける方法で悩むの巻
http://www.ideaxidea.com/archives/2006/09/post_128.html

半角文字列の折り返し
http://blog-imgs-29.fc2.com/p/i/n/pinotan/word-break.html

pre 要素のスタイル定義とマークアップ
http://2xup.org/log/2006/09/07-0056

pre要素へのスタイル指定
http://hail2u.net/blog/webdesign/styling-pre.html

やっぱりソースコードや長いURL、英文なんかがはみ出し、その改行方法に苦慮しているようです。

HTMLタグには<CODE>というコードを示すタグがあるんですが、私の知る限りこれ自体には見た目として効果はありません。

W3Cが標準でサポートしてくれればいいのに。

<を&lt;とか>を&gt;とかも非常にめんどくさいし。

プログラムソースをHTMLに載せる場合、何が問題かというと一番の問題はインデントの部分でしょう。

普通はインデントをそのままコピペするためにも、<PRE>と<CODE>を使います。

ただ、対策を調べながらふと「このやり方は正しいんやろうか?」と思ったら、

コードは<pre>でマークアップするべき ...か?
http://archiva.jp/web/html-css/sorce_pre_code.html

やっぱり同じことを考える人はいるもんですね。

しかしながら、今さらHTMLを書き換えるのも手間だし、いい解決策は見つからない…

ちなみにこのブログではスタイルシートで<PRE>を
pre{
background-color:#ffee99;
border-color:#000000;
border-style:solid;
border-width:1px;
font-size:100%;
padding: 5px;

/* 改行対策 */
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+ */

}

と、設定しています。

後半の改行対策の部分は、結構一般的な方法らしいです。

これでFirefoxでの表示はうまくいってるんですがねぇ……

word-break: break-all;

っていう、IEにしか使えない方法とかも試してみたんですが、以前効果なし。

どうにもこうにもスマートにいく方法が浮かばない。

普段使ってるFirefoxで見れないならまだしも、IEだけっていうのが「まあいいか」ってやる気をそいでいるのかもしれないw



で、結局眠くなってきたんで、該当記事だけを手作業で改行してしまいました。

一番ダメな解決方法を選んでしまいましたね。

また今度頑張ろう。(⇒続編


今回興味を持ったもの

CSS完全ガイドCSS完全ガイド
Eric A. Meyer クイープ

オライリージャパン 2005-06
売り上げランキング : 231048
おすすめ平均

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/11-fd11d63b
この記事にトラックバックする(FC2ブログユーザー)

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


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