彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ 修正報告 □

全テンプレートのCSS微調整

 とても細かい部分ではありますが、テンプレートのデザインを少し改良いたしました。

 これまでのテンプレートでは、ブラウザによっては、ページの縦の長さがブラウザ画面の縦寸法よりも小さい場合に、
befor.jpg
 このように、画面の上の方にぶら下がっているように表示される場合がありました。

 それを、
after.jpg
 こんな風に縦一杯にきっちりと表示するように、修正したのです。

 ※ 勿論、全てのブラウザでこの表示が実現するわけではありません……。
 ですが、これまでよりは表示が崩れない可能性がアップした、と思います。


 新しくテンプレートをダウンロードしていただくか、さもなければスタイルシートの最初の方を見てください。

html { height:100%; }
body { (中略); margin:0px; }


 ここに、以下の赤字の部分を追加してください。

html { height:100%; margin:0; padding:0; display:block; }
body { (中略); margin:0; padding:0; display:block; }



 これまでにも、「height:100%;」を <html> と <body> に設定する事で、高さを画面一杯100%に指定していたつもりだったのですが、ちょっと調べ物をしていて、初めて <html> と <body> がブロックレベル要素ともインライン要素とも定義されていないという事を知りました。
 つまり、いくら頑張って「height:100%;」と指定していても、ブラウザが、<html> や <body> をブロックレベル要素だと認識してくれない限り、高さ指定が意味のないものとなってしまうのです。
 ※ インライン要素は、行の一部、という認識のために「高さ」という概念がありません。

 今回、「display:block;」の指定を追加した事で、「height:100%;」がきっちりと働く事を期待しています。


 機能的には何も変化はありませんので、これまでのテンプレートを引き続き使用していただいても問題はありません。



*    *    *

Information

Date:2010/11/22
Trackback:0
Comment:0

Comment

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/96-f2e97c52
この記事にトラックバックする(FC2ブログユーザー)

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