可変幅のホームページは、いろいろなディスプレイ環境の人がホームページを見るのには、大変いいと思います。
でも、作る側からしてみると、デザインが難しいので、プロが作るホームページは、大抵固定幅です。
このところのディスプレイ事情は、XVGA(1024px×768px)以上ですので、ブラウザーを最大幅にして、左側にお気に入りなどを表示させると、コンテンツを表示できる幅は、800px以下ということになります。(推奨は750pxだそうです。)
幅800pxとして、その中の左サイドにナビゲーションなどを入れると、有効幅600pxくらいとなります。
一昔前のノートパソコンは、SVGA(800px×600px)でしたので、左サイドにお気に入りなんかを出しておくと、コンテンツの右側がはみ出してしまいます。
逆に最近はやりのワイドタイプSXGA+(1400px×1050px)などでは、左右に余白が多すぎて、もったいないです。まぁこのサイズクラスになってくると、最大表示でブラウザーを使うとダサイといわれますが・・・。
そこで本題です。画面サイズの小さいディスプレイには、できるだけ幅を縮めて表示してあげて、画面サイズの大きなディスプレイには、幅をある程度大きく表示させるような可変幅のホームページを見たことがある人はいると思います。IT工房にんにく庵のホームページもこのような作りになってます。このページを限定可変幅ページと勝手に名づけてしまいます。
最近のトレンドは、tableタグを使わず、divタグでレイアウトしますが、限定可変幅ページをdivタグで作ろうとすると、レイアウトの乱れに苦労させられて、挫折してしまいます。そこで、昔ながらのtableタグのお世話になります。
単純な可変幅ページは、tableタグのwidth属性に、80%とかのパーセンテージ指定をすれば、画面の大きさによって、勝手に幅が変わります。ただし、幅の小さい画面は、がんばって幅を小さくしてくれるために、右側にレイアウトしてたものが改行されて左に行ってしまったりして、デザインもへったくれもありません。逆に幅が大きくなると、右にデザインしたものだけが遙か彼方へ行ってしまい、間の抜けたものになってしまいます。
この単純な可変幅ページを限定可変幅ページに改良します。HTMLのタグやCSS(スタイルシート)だけでは、実現できません。JavaScriptを使用します。
まず、bodyタグのイベント発生時にJavaScriptを実行する定義をします。
<body class="style1">
↓
<body class="style1" onLoad="resize_waku('waku');" onResize="resize_waku('waku');">
つぎに、tableタグにidを定義します。idのwakuという名前は、bodyタグのイベント発生時に実行するJavaScriptの引数と同じものにします。
<table width="90%" height="500" border="0" align="center" cellpadding="5" cellspacing="0" class="style2">
↓
<table width="90%" height="500" border="0" align="center" cellpadding="5" cellspacing="0" class="style2" id="waku">
JavaScriptをheadタグの中に記述します。
<script language="javascript">
<!--
function resize_waku(obj){
// ブラウザーの幅が大きい場合、あまり横に広げない
clientSize=getWindowClientSize(obj);
var obj1=document.getElementById(obj);
if(obj1){
//alert(obj1.tagName);
if(clientSize.width > 800){
//alert("800px以上");
obj1.style.width = "790px";
}else if(clientSize.width < 801 && clientSize.width > 630){
// 800px以下630px以上の場合は、最大幅で表示
//alert("630～800px");
obj1.style.width = "100%";
}else{
// 630px以下の場合は、620px固定表示
//alert("630px以下");
obj1.style.width = "620px";
}
}
}
function getWindowClientSize(){
// ブラウザーのサイズを取得
var result={"width":0,"height":0};
if(window.self&&self.innerWidth){
result.width=self.innerWidth;
result.height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientHeight){
result.width=document.documentElement.clientWidth;
result.height=document.documentElement.clientHe
ight;
}else{
result.width=document.body.clientWidth;
result.height=document.body.clientHeight;
}
return result;
}
//-->
</script>
限定可変幅ページの結果がこんな感じになります。
getWindowClientSize()関数の返値は、ウィンドウの外側のサイズですので、内側のサイズは、マイナス10pxくらいです。JavaScriptの詳細は割愛しますが、幅の指定にスタイルシートのwidth属性を変更しています。
JavaScriptのDOMという機能を使用したDynamic HTML使用例です。ブラウザーに依存しますので、古いブラウザーですと、うまく動作しません。また、JavaScriptを無効にしていると、通常の可変幅になります。
MSPゴシック、MSP明朝、MS UIゴシック、MSゴシック、MS明朝です。
WindowsXPにOffice2003をインストールすると26書体の和文フォントが追加されます。
