整理後のCSSソース部分的にgridシステムを使う*ちょっと余談ですが、コレがこのサイトの最初の投稿です。「どこかにメモっておかないと、せっかくできた事をすぐ忘れてしまう」という理由で始めました。自分だけでWordPress化するのは初めてと言っていいほどのレベルなので、まずは、このサイトをwordPressで作った過程をメモることから始めようと思います。そのほか、仕事で使ったメモるべき事柄を記事にしていく予定です。DownloadPCブラウザで、デモページでウィンドウ幅を変え、レスポンシブであることが体験できる。デモページの構造zBrandonデモページの構造は、ざっとこのようになっている。全体を「.zerogrid」というクラスのdivで囲んで、コレだけはピクセルでサイズ指定。その中を「.col-full」なら幅100%、「.col-2-3」なら3分の2...といった具合で分割。その内部も同様に分割。CSSでパーセントで指定しているので、親に対してピッタリ分割できている。CSSはざっと下記のように。(★主要な部分だけ抜粋。下部に整理したCSS全文を記載。すれば、float指定があっても縦に並ぶ、というわけだ。{margin:10px;}。これは各ボックス間に均等にマージンをつけるためのアイディア。これがポイントだった。ポイント!これは、100%や66.66%などのwidth指定したボックス内に、この「margin:10px」のマージン専用ボックスを入れることで、それぞれのボックスの間に20pxのマージンを確保するようにしているんだよね。</div>この造りなら、レスポンスしても、内部のボックスのマージンは何の影響も無し。隣接するボックス同士でマージンが相殺されることが無い。デモページではこうなってる。↓スマホビューでボックスが縦に並んだときにも、このマージンが活きて、画面の左右に10pxずつの空きが生まれて読みやすいというわけ。これは画期的なアイディア!(だと私は思ったんですよ。サイズ指定はNGところで、このgridシステムを使う時は、img要素にサイズの記述をしちゃダメ。1ファイルの画像を、いろいろなサイズで表示させるシステムだから。<!--これだけでOK-->デモページのモノクロの親爺の画像は、3つともサイズが違うが1つの画像。親ボックスの幅に合わせてサイズが変化している。画像を複数用意する必要がない(WordPressの場合は、メディアのサイズが1個でイイ)ので便利!ただしこの場合、img要素に対してCSSの「max-width:100%」を指定をしておく必要あり。imgが原寸以上に拡大され、解像度が低い劣化した表示になるのを防ぐため。auto;}1ファイルの画像はどんなサイズで作るかデモページでの画像サイズは、Retina対応のため横幅620pxで作っていた。(iPhone5Cとか)−左右のマージン合計20px)画像を表示する場所(PCビューで)のマックス幅で作っておけば大丈夫だろう。このブログでは、PCビューでのマックス幅670pxで作っている。