スポンサーリンク
１つのソースから複数ページに移植することがありますが、極稀に同じソースでもレイアウトが異なってしまいます。その場合、まずはDOCTYPE宣言を確認してください。
１つ目のページには<!DOCTYPE html>と書いてあり、２ページ目には書いていなかった時、ブラウザでの解釈が異なってきて、若干レイアウトがずれることがあります。
自分で制作しているページではこのような心配はあまりないのですが、クライアント様のサイトを編集する際、ページごとにDOCTYPE宣言の有無で不整合が発生している場合があります。
もう１つ確認すべき個所があります。それは、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フレームワークにも使用可能なので、ぜひ利用してみてください。
ご覧いただきありがとうございました。