ホームページレイアウト崩れを防ぐコツとは？

Question

現在、ＨＴＭＬとＣＳＳを使ったホームページのレイアウトを作っていますが、ブラウザが変わったり、スライドショーを追加したりするとレイアウトが崩れます。これからやろうと思っているスマホへのレスポンシブ挑戦の際にも、必ず、レイアウト崩れは立ちはだかると思います。

みなさんが、実際にレイアウトに組まれるまでに心がけることや順番などがあったら教えてください。

例） 僕の予想

１．最初にｐｘベースで詳細に設計して大きな枠を作る。
２．細部を作りこむ
３．画像などを埋める
４．レイアウトが崩れたら都度修正していく。

Answer 1

回答としては、「レイアウト崩れしないようにそもそも組む」ですね。
レイアウトが崩れるのは、要素の中にどういうコンテンツが入っていて、どういう幅のときにレイアウトを切り替えるか、などについて考えられていない場合や、コードが抜けていたり適切になっていない場合によく起こります。

HTMLにどういう要素（タグ）が有り、CSSにどういうプロパティがあるか、JavaScriptでどのようにそこが変動するのかなどを、少しずつ勉強されてはいかがでしょうか。勉強法としては、レベルの違う本を数冊買って、平行しながら読んでみるのがお勧めです。辞典のような本や入門書やよくわからないけど関係ありそうな難しい本など、様々な本を読むことで世界観がつかめると思います。Webの情報は「まとまって体系だてた説明」はほとんど無いため、まず本をお勧めします。

Comments

[kei344]

あ、解決（？）してた。

[yoshipu]

ありがとうございます。
たしかにｗｅｂ上ではまとまった情報が見つけれらないような気がしました。
本を読んでみようと思います。

Answer 2

• 極力ベンダープレフィクスを使わない。どうしても必要になったときだけ使う。
• 画面サイズに応じた設計をきちんと行う。
• 古いブラウザは無視可能であれば、無視する。

（一番良いのは、シェアの高い各ブラウザの最新版だけサポートする。）

• バグは都度修正

Comments

[yoshipu]

ありがとうございます。参考になりました。

Answer 3

すみません。質問が漠然としておりました。
今度は、具体的にしたいと思います。

Answer 4

すみません。質問が漠然としておりました。
今度は、具体的にしたいと思います。

Answer 5

すみません。質問が漠然としておりました。
今度は、具体的にしたいと思います。

Answer 6

すみません。質問が漠然としておりました。
今度は、具体的にしたいと思います。