我々WEB屋は、サイトを制作する際に当然、モニタサイズのことを考えますよね。一昔まえなら横幅760pxとかでSVGAのサイズに最適化してたり、最近では当然のように960pxとかでデザインしてXGAのモニタに最適化するように作っている人が多いことかと思います。ただし、もちろんSVGAに最適化するとXGAやそれ以上のモニタの人にはスカスカでほっそいサイトに見えるし、XGAで最適化しても極小かもしれませんが、SVGAサイズで見ている人には横スクロールが出てしまう結果になるわけですね。「まぁ、最近はXGAが殆どだし」とはいっても、やはりWEB屋としては無視したくないのが正直なところかと思います。

もちろん僕も例外無くそうしていたのですが、SimpleGridが使っている方法はその悩みを解決してくれるひとつの方法かもしれません。

 

このSimpleGridでは、モニタサイズが720px以上の時、985px以上の時、1235px以上の時で、読み込むCSSを切り替えて表示方法を変えているんですね。面白いと思ったので共有します！

確かに、この方法を使えば、各モニタサイズに最適化したデザイン、文字や画像サイズ、配置等を最適化することが可能です。

画面幅1235pxの時

画面幅985pxの時

画面幅720pxの時

方法としては、Downloadしたファイルを見てみるとわかるのですが、下記のような書き方でCSSをインポートしています。

[html]
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >
[/html]

最近そういうサイト増えてきていましたが、なるほど合点、こうやって作っていたのですね。いい勉強になりました。

残念ながらIE対応などはされていないようですが、今後はこういった表現方法が主流になってくる可能性は高いかなと思いました。

別にガリガリのJSとか組んでる訳ではなく、すべてCSSのみで対応しているので、是非一度参考にしてみてください。

• SimpleGrid