読者です 読者をやめる 読者になる 読者になる

のんじゃんる

何でも書こう、ネタになる

初めて作るレスポンシブWebデザイン

どうも、@とよしー です。

昨日の記事でレスポンシブWebデザインを少し紹介しました。PCやタブレットスマホなどの画面解像度が違う各デバイスで、最適なデザインとなるようにする制作手法のことを言いました。

そこで、これも昨日紹介した書籍を元に、レスポンシブWebデザインを使った簡単なサイトを作ってみました。まだヘッダ部分しかコーディングしておらず動作確認もしっかりできていませんが、
各デバイスの解像度に対応できるようになっています。

ここまでのコードで、サイトはこんなかんじに仕上がります。

 f:id:tktyo:20140724065654j:plain

・・・言いたいことはわかります。

単に HTML を数行書いただけなので、こんなかんじの味気ないサイトになります。これから何回かにわたって進捗を公開していきます。
これに、CSS を適用すると下のようになります。

PC 向け
f:id:tktyo:20140724071417p:plain

タブレット向け
f:id:tktyo:20140724071421p:plain

スマホ向け
f:id:tktyo:20140724071428p:plain

webサイト内の写真が各解像度で最適化されているのがわかります?
すっごく地味な部分ですが・・・

まだまだ意図したように表示できていないです。道のりは険しいなあ・・・