さわらブログ

さわら(@xhiroga)の技術ブログ

自分のレスポンシブWEBデザインの何が盲点だったのか

いきなりマルチデバイス対応のWeb画面のサンプルを作ることになったのですが、とりあえず作ってみたらすごく疲れた。 (もっといいやり方あるだろコレ...)と思いながらやってた。いくらか原因がわかったので棚卸し。

問題

グリッドデザインのためのクラス(col-md-12, とかのことを言いたい)を宣言する時に、divタグがやたら多くて疲れた。 ヘッダーのロゴ画像とかタイトルとかがうまくヘッダーに収まってくれず、一部人力で高さや幅を指定してしまった。

仮説

ヘッダーは、専用のクラスがある気がする。 divタグ以外に要素を表すタグを使うべきだったんじゃないだろうか。

結論

グリッドデザインの組み方が悪い。PC用の表示をする時に、1行の中の箱要素の中身まで横に崩す必要はなさそうだ。 ヘッダーは、ナビゲーション関連のクラスを使うのが良さそうだった。

参考にしたサイト

bootstrapのチュートリアルをじっくりみた。 www.tutorialrepublic.com

気がついたこ

ヘッダーについて - 便利なクラスがたくさんある。 - ページのタイトルとかをトップに張り出す時には"navbar-header"。スマホ表示の時にヘッダーを右端に寄せてくれる -