連載第53回
2014年5月11日
ではMacBook Air用のCSSを。

 引き続き、今回はMacBook Air(より高解像度のモニタ)でアクセスした際の表示をザックリと組み立ててみます。前回作成した試作品モックアップにMacBook Airでアクセスすると、現状では各素材がほぼそのまま素の状態で表示されるだけで画面全体にバラけており、レイアウトが崩れています(↑)。僕はデザインの基礎など全く知らないので、各素材をどう配分するのが正解かつ美しいのか分かりませんが、せめて訪れに来てくれた読者がページを開いた時に「なんとなく読み辛くて疲れるなあ」というような雰囲気は、出来る範囲で避けていきたい…と思います。そんなわけで今回は「車輪の再発明」にもならないような事を延々と書き綴ってしまった前回の反省を踏まえ、サラッとした内容で済ませるとします。

 iPad横向き、つまり1024ピクセル以上の解像度を持つモニタ用には次のようなメディアクエリーを追記。

html

@media screen and (min-width : 1024px) {

/*ここにMacBook Air以上のCSS追記*/

}

 そして、またMacBook Airの画面とにらめっこしながらチマチマと組み上げた仮レイアウトはコチラ!

Night Head(MacBook Air以上用)

 …まあ、素材が一緒だから大きく変わりようがないと言うか、見方によってはウェブ1.0に逆戻りしてるような感じもしますが、でも個人的にはこれくらい簡素な構成のhtmlだとスッキリして気楽(読者目線は皆無)。という感じで、構成がシンプル過ぎるせいか、これにて超初歩的RWDモックアップ作業は終了。
 
 ただ懸念事項もあります。MacBook Airの画面だとこれで良しとも思えるけれど、iMacなどの24インチ以上もある画面だとどう表示されるのか。iMac27インチ、もう手元に無いんですよねえ…。頭の中では何となくイメージしてはいるものの、僕の事だからたぶん何処かにミスがあるに違いありません。無いとしても、現状だとバランスが悪い可能性は高い(リキッドレイアウトとやらもあまり考慮していないので)。でも確認のしようが無いので、次回からはWordPress関連の作業に移ります。つづく。

さて、問題はWordPressの仕様を思い出せるかどうかなのです…。