systemのポイントを整理すると、こんなかんじ。100%、2分の1、3分の1などのグリッドでレイアウトするCSSのfloatプロパティの特徴を利用float指定していても、ボックスがウィンドウに対して100%なら、縦に並ぶ特徴を利用。メディアクエリで、横幅を決めるclass(.col-1-2など)の幅をすべて100%にすれば、floatを解除しなくても縦に並ぶというわけだ。マージンが相殺されないように、左右のマージンを持つボックスは中に横幅を決めるclass(.col-1-2など)の中に、左右のマージンを持つボックスを入れることで、横並びのとき隣接するボックスのマージンが相殺されない。縦に並んだときも左右のマージンは一定。このポイントを押さえて、ソースを整理していった。不要なボックスを削除zBrandonのデモページはdivを何重にも入れ子にしていたが、かなり整理した。デモページのクリアフィックス用のボックスは無駄なので削除。必要な場合のみ親ボックスに通常のクリアフィックスを使えばOK。この調子で不要なボックスを取り除くと、必要なのは「分割用のボックス」と、その内側に入れる「マージン用のボックス」だけ。このマージン用のボックスは、横並びの時のマージン。左右のマージンだけが重要だ。上下マージンは、それぞれの要素(下の図だと、ピンクのボックス)で自由に変えたほうがいい。下図のように「col-1-3」のセットを並べるだけで、1列3個で繰り返される。オートマチック!この↑ソースの構造が(横並びのときの)ミニマム。その中に実際のレイアウト用のボックスを配置。3重になるってことね。この3重構造は、横に並べる場合のみ。PCビューで幅100%の(横に並ばない)ボックスなら、マージン用ボックス「wrap-col」は省略して、内側のボックスのマージンで調整したほうが、ソースが簡単だ。(以下は必要なグリッドだけでもOK。.col-5-6{width:83.33%;}あとはレスポンス用の指定を。.col-5-6{width:100%;}}本サイトはメディアクエリを細かく区切らず、960pxで縦並びになるようにしちゃった。(面倒くさがり過ぎですね。笑)部分的にgridシステムを使うzBrandonのテンプレートでは、ページ全体にgridシステムを使っている。sidebarを3分の1、main-contentを3分の2に分割しているので、ウィンドウサイズによって両方とも幅が変化する。本サイトでは、sidebarを固定サイズにしたかった(広告サイズが固定なので)。そこで、コンテント部分(今読んでいただいている記事の部分)のみにgridシステムを使用。「全体を囲むボックス」と「サイドバー」にはサイズ指定。)左右のマージン用の「.wrap-col」を、グリッドシステム以外の要素(Header、SideBar、Footer)にも使用して、左右の空きを統一している。zBrandonさんのデモページでは、なぜかheaderのnavに「.wrap-col」を使ってなくて、右が揃っていない(10pxハミ出とる)のがスッゴイ気になる...笑。最後に、本サイトの「トップページ」のHTMLの構造は、ざっと下記のとおり。END--></body>MediaQueriesとviewportは一緒じゃないと無意味(viewportの指定について)モーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。