レイアウトが崩れる原因と対処

これまで綺麗に表示されていたのに、htmlを更新しているとレイアウトが崩れてしまう事があります。このような時の調査方法や崩れないように更新する方法について説明しています。

レイアウトが崩れる原因

 これまで綺麗に表示されていてhtmlを更新していると大きく表示が崩れる時があります。

スタイルが崩れた時1

 この場合、多くの原因はタグの閉じ忘れです。

【タグの閉じ忘れ例】
<div class="maincontents">
<h2>テント</h2>
<p>テントについて・・・</p>
</div>

<div class="maincontents">
<h2>ランタン</h2>
<p>ランタンについて・・・</p>
</div> ←閉じ忘れ

<div class="maincontents">
<h2>テーブル</h2>
<p>テーブルについて・・・</p>
</div>

 特に<div>を閉じ忘れると大きくレイアウトが崩れる可能性があります。

 まずは、タグが正常に閉じられているか確認が必要です。

HTML Project2での確認

 HTML Project2を使っている場合、「階層」をクリックする事でエラーがあるか確認出来ます。

スタイルが崩れた時2

 「エラーが検出されました」の部分を左クリックする事でエラーがある部分を確認出来るため、タグの閉じ忘れ等を素早く見つける事が出来ます。

 HTML Project2の詳細は「HTML Project2について」をご参照下さい。

レイアウトを崩さないようにホームページを更新する方法

 「本文ページ:記述方法」で示した通り、内容を記述する部分を決めておくとホームページを更新していてもレイアウトが崩れる事が少なくなります。

 つまり、これまでのページをコピーして本文を記述する部分だけ更新していきます。

 各章立てにして、文章を以下の<div class="maincontents">と</div>で囲まれた部分に記述し、これを追加していくと崩れる事が少なくなると思います。

【記述を追加していく時】
<div class="maincontents">
<h2>テント</h2>
<p>テントについて・・・</p>
</div>

 ↓コピー

<div class="maincontents">
<h2>ランタン</h2>
<p>テントについて・・・</p>
</div>

 つまり、赤字部分をコピーして太字部分だけ修正する事で章を追加していけば、タグの付け忘れや閉じ忘れを少なく出来るため、レイアウトが崩れる可能性を少なく出来ます。

 又、万一崩れた時の確認も比較的楽に行えます。

  • このエントリーをはてなブックマークに追加