2005年08月22日

「最大幅750ピクセル」をIEでも実現

【迷ログ】(http://www.hanameiro.net/meilog/nicky.cgi)では、コンテンツの幅を770ピクセルに固定しています。さらに左に模様のあるタイプの背景を使っているので、実際の文章の幅は630ピクセルになります。文章を読む場合には、このくらいの幅が読みやすいと思っています。
また、背景は文章の読みやすさ優先で薄いグレイなのですが、全面的にグレイにするとちょっと暗い印象になる気がするので、コンテンツの幅より右は白地にして、画面を明るくしています。

しかし、コンテンツの幅をピクセルで指定してしまうと、指定した幅より小さいサイズのウィンドウで閲覧した際に横スクロールバーが出現して、かえって読みづらくなってしまいます。
このため、アクセス時とウィンドウのサイズ変更時にjavascriptを起動してウィンドウサイズをチェックし、ウィンドウの横幅が770ピクセルを切る場合は文章部分の幅の指定を630ピクセルから100%に変更しています。

方法を紹介しておきます。
1)文章部分の幅をIDで指定。

スタイルシート:
#mainarea {
width:630px;
}


2)ウィンドウの幅に合わせて文章の幅を変更するjavascriptを設置。
※06/07/12 標準準拠モード対応を追加しました。
function chkwindowsize() {
if (document.documentElement.clientWidth) { // IE標準準拠モード
wX = document.documentElement.clientWidth;
} else if (document.all) { // IE過去互換モード
wX = document.body.clientWidth;
} else { // Netscapeなど
wX = window.innerWidth;
}
if ((wX) && (wX < 770)) {
document.getElementById('mainarea').style.width = '100%';
} else {
document.getElementById('mainarea').style.width = '630px';
}
}


3)アクセス時とウィンドウサイズ変更時に上記のスクリプトを呼び出し。
<body onLoad="chkwindowsize()" onResize="chkwindowsize()">


WindowsのIE、Netscape、Firefox,、MacのIE、Safari、各最新バージョンでの動作確認済み。NN4.78は動作確認対象から外してます。

06/07/12 追記:
WindowsIEは標準準拠モードと過去互換モードでdocument.body.clientWidthの値が変わってしまいます。
標準準拠モードの場合はdocument.documentElement.clientWidthを使えば正しい値が取れるようなので、スクリプトを一部変更しておきました。


posted by 文月夕 at 11:28| Comment(6) | TrackBack(0) | web技 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは。いつもお世話になっております。
実は迷ログを拝見していて気になったもので、本当に失礼だと思いつつも、こっそりとソースを参照させていただいていました。

Opera8.02でも有効でした。私の環境では旧バージョンでの動作は判りませんが最新版では有効でしたので、参考までにご報告させていただきます。
(Operaで迷ログを拝見させていただきました)
Posted by 鈴杜 at 2005年08月24日 16:34
>鈴杜さん
動作状況のご報告、ありがとうございます! Operaでも動作したのですね。良かったです。
ソースの参照は、私はまったく気にしませんので、ご自由にどうぞ。役立ててもらえるほうが嬉しいです。
Posted by 文月夕 at 2005年08月25日 15:17
以前、読みやすさアンケートには回答したのですが、コメントは初めてのような気がします。はじめまして。

個人的には、「まさに、欲しかったもの」でして>最大幅限定の機能、使用にさしつかえがないのであれば、自サイトも近日中に、このスクリプトを入れさせていただきたいと思っております。

ところで、文月さまも小説用雛形配布をなさっていることを承知のうえで、これをお願いするのは、まことに身勝手な話なのですが。このスクリプトを組み込んだ形での雛形配布(つまりスクリプト再配布)をお許しいただけないでしょうか。

↓こんな形で…。
http://homepage3.nifty.com/gaia/rearmouse/site/white/doc/650.htm

サイトトップはこちら。
http://homepage3.nifty.com/gaia/

文月さまのサイトに比べると、デザイン力も技術力もはるかに下方をさまよっており、お恥ずかしいのですが…。

色よいお返事を期待しております。
Posted by 麻生新奈(しんがりねずみ) at 2005年08月30日 02:59
>麻生さん
こんにちは。先日はアンケートに投票&記名コメントありがとうございました。

このjavascriptを組み込んだ形での雛形配布に関しては、ご自由にどうぞ。
javascriptやCSSのテクニックは、私もいろいろなところから拾って寄せ集めたもので、威張れるものではありませんし……。
すでにお書きいただいているようにコメントとして作者表示がしてあれば、これ以上の要望は特にありません。
Posted by 文月夕 at 2005年08月30日 11:16
早速のご回答&お許し、ありがとうございます。感謝です。いろいろ整えましたら、またご報告させていただくつもりでおります。
Posted by 麻生新奈 at 2005年08月31日 04:29
上記、お許しをいただいた後、気まぐれを起こし、自サイトを全面改訂してしまったため、大変遅くなりましたが、ようやく、文月様のスクリプトを組み込んだテンプレートを公開いたしました。

遅ればせながら、ご報告まで。
Posted by 阿檀(サイトだけでなく名前も変えました) at 2005年09月21日 00:49
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

PR