同じソースのはずなのにレイアウトが違う時


スポンサーリンク

1つのソースから複数ページに移植することがありますが、極稀に同じソースでもレイアウトが異なってしまいます。その場合、まずはDOCTYPE宣言を確認してください。

1つ目のページには<!DOCTYPE html>と書いてあり、2ページ目には書いていなかった時、ブラウザでの解釈が異なってきて、若干レイアウトがずれることがあります。
自分で制作しているページではこのような心配はあまりないのですが、クライアント様のサイトを編集する際、ページごとにDOCTYPE宣言の有無で不整合が発生している場合があります。

もう1つ確認すべき個所があります。それは、Bootstrapの導入の有無です。これについても同じことが言えます。

特に、Bootstrapは自動的に全ての要素にbox-sizing: content-box;を設定するようになっているので、ページによってBootstrapのcssが導入されている、されていないの違いで、大きくレイアウトが変わってくる場合もあります。

しかし、クライアント様のページをすべてBootstrap導入済みにするには手間がかかりますし、必要最低限の部分にBootstrapのCSSを適用するというのも、CSSの性質上、そのままでは不可能です。

ここで、「必要最低限の部分にBootstrapのCSSを適用する」という方法に絞ることにします。ページ内のBootstrapが影響を及ぼすべき部分のみdivで囲うなどして任意の名前のclassを付与して、そのclassに対してSassというものを使用します。Sassの導入方法などは、ググっていただければわかると思います…。

このサイト様で説明されている、「入れ子構造」というものに目を向けます。ここでは、class名をbsとしたとして説明します。

Sassの記法により、bsクラスが付与された要素の内部のみ、Bootstrapを適用したいということなので、例えばbs.cssという名前で

.bs{
BootstrapのCSSの中身をすべてコピペ
}

と書き、これをコンパイルします。その出力ファイルをサイトで読み込みます。

たったこれだけです。

この手法については、Bootstrap以外のCSSフレームワークにも使用可能なので、ぜひ利用してみてください。

ご覧いただきありがとうございました。

last

フォローする