自分のレスポンシブWEBデザインの何が盲点だったのか
いきなりマルチデバイス対応のWeb画面のサンプルを作ることになったのですが、とりあえず作ってみたらすごく疲れた。 (もっといいやり方あるだろコレ...)と思いながらやってた。いくらか原因がわかったので棚卸し。
問題
グリッドデザインのためのクラス(col-md-12, とかのことを言いたい)を宣言する時に、divタグがやたら多くて疲れた。 ヘッダーのロゴ画像とかタイトルとかがうまくヘッダーに収まってくれず、一部人力で高さや幅を指定してしまった。
仮説
ヘッダーは、専用のクラスがある気がする。 divタグ以外に要素を表すタグを使うべきだったんじゃないだろうか。
結論
グリッドデザインの組み方が悪い。PC用の表示をする時に、1行の中の箱要素の中身まで横に崩す必要はなさそうだ。 ヘッダーは、ナビゲーション関連のクラスを使うのが良さそうだった。
参考にしたサイト
bootstrapのチュートリアルをじっくりみた。 www.tutorialrepublic.com
気がついたこと
ヘッダーについて - 便利なクラスがたくさんある。 - ページのタイトルとかをトップに張り出す時には"navbar-header"。スマホ表示の時にヘッダーを右端に寄せてくれる -
divについて - rowの内側の要素それぞれの縦並びを横に崩そうとしない。 - PC用の画面をデザインしてからスマホ用に並べようとすると↑の失敗をしてしまう - 子要素の中でさらに柔軟な縦横のデザインをやりだすと、マージンがかさんで場所ごとに横の位置が揃わなくなる。