メディアクエリでレイアウト2

とりあえずヘッダ部分をつけました。

http://mcre.ojaru.jp/test/

まぁ、のっぺりしてんなぁという印象でしかないですがｗ

フラットデザインがはやりみたいなことも言われてますが実際のところどうなんでしょうね。Win8登場時はダサいの声が圧倒的だったと思いますが。

とは言え、へっぽこクオリティしか提供できないでしょうから自分の実力的には相応かもしれません。仕事のほうではわかり易さよりも一昔前のかっこいいとかの雰囲気を要求されることが多いのでこういうシンプルなものをやりたくもなるのです。

しかし、PCでブラウザ800pxほどのウインドウサイズにしたときはロゴでかすぎとも思いますがｗ

ウインドウ幅による画像のサイズ可変はメディアクエリ関係なくイメージ要素のwidth指定を実際の画素数ではなく”％指定”することで可変してくれます。heightのほうは数値を入れません。

今回のロゴはwidth100%で指定していますが親要素の入れ物であるid=logoの幅指定がPCサイトでは30%指定なので、その30%の中でめいいっぱい広げて表示ということになります。

ブラウザサイズが800px以下になるとid=logoの指定も幅100%になるためロゴ画像はブラウザ幅の端から端まで表示してくれるようになります。

でも旧nexus7で確認したけど縦位置でも自動でPCサイトの状態で縮小して表示するんですよねぇ。実機による800px以下時の表示イメージが確認できないので果たしてどうなっているのやら。。。