徒然ゲームブログ　～PSPの大冒険～ | CFW,エミュ,自作ソフトなどのPSP関連情報満載

 

PSPで閲覧しやすいサイトをデザインしようぜ 企画

が提案されました。

 

突拍子も無く始まりましたこの企画。提案者simaはどういう頭をしているんでしょう。

いえ、正常です。　（恐らく・・・いや、多少病んでるかも）

 

なぜ提案したのかといいますと、まず、PSPで閲覧した場合，解像度の問題でどうしても形状が崩れがちです。例えば”左右のサイドバー＋記事コンテンツの３カラム構成”という場合、左右のサイドバーと記事コンテンツがPSPの画面内に収まらず上下に離れてしまうということがあったりしますね。

 

そこで、PSPでも見やすいサイトを増やしてしまおうという魂胆です。

PSPで見やすいサイトが増えれば、PSPでインターネットをする方も増え、またPSP普及にも繋がるかもしれません。

というわけで、PSPサイト運営者様はなるべくPSPブラウザも考慮してみませんか？

 

今回、その崩れをCSSで回避する手段を説明します。

 やり方は簡単。

CSSの、幅のサイズを％で表現し、可変自在にさせるだけ。

％指定すると、 ブラウザの表示域（大きさ）を変えると、それに合わせて％指定した大きさの幅として計算されます。

 

つまり、

例えば、幅480pxのPSPに合うように480pxのうちの指定した％分をサイドバーや記事部分の幅に指定するということができるわけです。

 

以下は簡単な指定場所の説明です。

---

CSSの所定のwidthを％指定にする　　　　　　

 

まず、サイトの構成が、以下のような

　　　　２カラム　　　　　　３カラム

 　

 のサイトを前提にお話しします。

 

例として、本サイト（３カラム）のサイズを基準に話します。

サイトの構成として、横幅が９００px，sidebarが170px ×2，mainが540px，

そして残りの

（９００－１７０×２－５４０）÷２＝１０pxがmainとsidebarの間の間隔

にしたいとします。

 

すると例えばmain部分のサイズ設定のスタイルシート（idをmainとした場合）は、

 

width : 540px;

}

 

のようにpxで書いている方が多いでしょう。

 

 そこを、全体幅９００pxのうちの540pxを、％で考えます。

５４０÷９００＝６０％

 

つまり、

 

width : 60%;

}

 

というように表記します。

 

同様に、sidebarも調整しましょう。

 

width : 18.88%;

}

 

小数点は適当な場所で四捨五入して構いませんが、全体の幅９００px（１００％）を超えないように注意しなければいけません。超えてしまうと画面内に収まらず上下に離れ、崩れてしまいます。

 

本サイトの場合，６０％＋１８．８８％×２＝９７．７６％

としていますので、PSPで見ても崩れず表示できていると思います（崩れていたら言ってください）。

 

---

 

ただし、記事の幅に比べてサイドバーなどその他の幅が大きい場合、記事の幅が小さくなり逆に記事が読みづらくなるので、これが良いかどうかの判断は難しいところです。（３カラムは特に）

ひょっとしたら本サイトも記事幅が狭いかもしれませんね・・・。

 

 

この記事を見て、サイトが崩れて欲しくないと思ったそこのあなた、是非他のサイトなどにも広めてください。どうぞ宜しくお願いします。