レスポンシブデザインとやらがとてもはやっている。
表示サイズに応じてブロック単位での表示や並びが自動的に調整されるという優れもの。
とは言ってもレスポンシブデザインに対応したサイトを作るとなるとそれなりに大変。
というかかなり手間がかかる。
サイズを取得しつつ、設定値になったら並び替えるスクリプトを組んだり、組み込んだりということが必要になってくる。
しかし、いろいろと探しているとdivタグ入れるだけでレスポンシブデザインに対応できるものがあった。
いまさらな感じもする人もいるかもしれないけどTwitterが出してる「http://twitter.github.com/bootstrap/index.html」というCSSフレームワークなるもので対応することが出来る。
bootstrapはグリッドシステムというもので940px・12カラムの段組で管理することで色んな表示を簡単に作ることが出来る。
簡単なソースだとこんな感じ
<html>
<head>
<title>bootstrap</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="span3" style="background: #908070;">Span3</div>
<div class="span9" style="background: #708090;">Span9
<div class="row">
<div class="span5" style="background: #ffcc33;">Span5</div>
<div class="span4" style="background: #234567;">Span4</div>
</div>
</div>
</div>
</body>
</html>
<div class="container">
</div><body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background: #908070;">Span3</div>
<div class="span9" style="background: #708090;">Span9
<div class="row-fluid">
<div class="span5" style="background: #ffcc33;">Span5</div>
<div class="span4" style="background: #234567;">Span4</div>
</div>
</div>
</div>
</div>
</body><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
関連記事
