今回はHTMLで思ったような画面レイアウトが組めずに苦戦したときのメモを共有します。
前回のRuby on Railsと同様に初心者の学習記録です。
筆者のステータス
今回も初心者。
HTMLの書き方については何となく知っている。要領が分かればできそう。
やりたいこと
今回のポイントとしては次の通りです。
- Laravelで作成されたWebページの改修
- 項目やボタン等の追加、変更、削除、レイアウト調整など
- 対象のWebページにはPC向け表示とスマートフォン向け表示が存在するため、それぞれに対応したレイアウトを組む必要がある
今回の困りごと
主にレイアウト変更が上手くいかず、苦戦しました。
画像サイズや配置が指定からずれているほか、思ったような位置にボタンを配置することができておらず、特に画面サイズ変更時の表示崩れが深刻でした。
具体的には次のような点で問題が見られました。
- 埋め込み画像が想定したサイズになっていない
- 幅指定が機能していない
- マージン、パディング指定が機能していない
- 幅寄せがうまくいかない →暫定的に固定値でパディングを設定したため、画面サイズ変更時に表示崩れが起こる
などなど……。
解決方法
- 適切な位置に適切なstyle指定を行う。
結局のところこれしかありませんでした。
HTMLに慣れていない人はどうしたらいいのか？
とはいえ、(筆者のような)HTMLコーディングに不慣れな人にとっては「適切な位置」を探すだけで一苦労です。
そもそもどこの指定がどの範囲に作用しているか、それ勘のようなものを見つけるためにもある程度の習熟(いわゆる勘のようなもの)が必要となるように感じました。
解決の糸口を見つけるために、いろいろとstyle指定を変更しつつ様子を見るのも悪くありませんが、やみくもに試すべきではありません。
いろいろと試行錯誤するうち、非常に単純なことに気が付きました。
- 気になるところにborderを表示させ、まるごと囲ってしまえばいい！
要するに、自分の書いたstyle指定がどこからどこまで作用しているかの境界線を可視化してしまえ、というやり方です。
非常に初歩的かつ全くイケてないやり方で、もっといい手段があるように思えますが、今回思いついたのはまずこの方法でした(試行錯誤の記録として綴っているため、ご容赦ください)。
感覚的にはデバッグログを仕込むのとほとんど変わらないはずですが、これにたどり着くまでも随分と時間がかかってしまったところは反省点だと考えています。
以下、イメージ図です。
- ソースコード
<div class="xxx" style="xxx; border:1px solid #000000"> ★要素A
<div class="xxx" style="xxx"> ★要素B
......
......
</div>
<div class="xxx" style="xxx; border:1px solid #000000"> ★要素C
......
......
</div>
</div>
...
......
- 表示イメージ
※要素Cに指定したstyleの有効範囲を確認するためにborderを設定した際のイメージ
試行錯誤の結果わかったこと
地道にborderを表示しながらレイアウトを調整して学んだことは、おおよそ次のとおりです。
- 表示幅などを%で指定している場合、実際の表示は親要素に影響されるため、子要素のみstyleを変更しても想定通りのレイアウトにならないことがある
- レイアウトの調整に固定値を使用した場合は一見して簡単に画面が整えられるが、画面サイズが変わると表示が大きく崩れることが多い
- 特にPCとスマートフォンに対応したサイトの場合は固定値を避けたほうがよい
- styleの指定はcssファイルにまとめたほうが、修正時に便利
- 直書きすると、どこで何をしているのか後からわかりづらくなる。ここまでいろいろ書いてきたが、これが最大の学びかもしれない
cssの書き方なども勉強しつつ、次の機会にはより良い改修ができるように上達していきたいと思います。