レスポンシブウェブデザインの基本

枠ブログ on

遅ればせながら当サイトもレスポンシブウェブデザインに対応しました。
といっても、ヘッダの meta要素に viewport を挿入し、スタイルシートの末尾に下記を追加しただけ。

@media screen and (max-width: 640px){
div#canvas{ width: 610px; }
div#logo{ height: 150px; }
}
@media screen and (max-width: 320px){
div#canvas{ width: 280px; }
div#main{ width: 100%; }
div#logo{ height: 100px; }
div#menu{ clear: both; width: 100%; }
}

これだけでデバイスやブラウザの幅に応じてレイアウトがちょこっと変化します。
もちろん、これは簡単な対応に過ぎません。表示領域が狭いとメニューはコンテンツの下に行ってしまい、使い勝手が悪いので、スマホ向けにプルダウンメニュー等を実装出来れば理想的ですね。

昔は携帯には携帯向けのテンプレートを用意しなければならず大変だったんです。
スマートフォンの登場で携帯機器でもおおむねPCと同じようにウェブページを表示出来るようになり、更に CSSの規格が整備されて今は本当に便利になりました。

一覧  前« 2015-02-28 »次  最新

✉ お問い合わせ

トップページ | これまでの実績 | ご相談・お見積もり | 運営者情報 | 利用者さまの声 | お問い合わせ