BLOGスタッフブログ

Twitter Bootstrapを利用する3

Twitter Bootstrapは、その名の通りTwitterが提供しているcssフレームワークです。
さて、前回「既存のwebサイト(システム)」に単純にブートストラップを適用した状態を作ってみました。 ひどく崩れてしまってますよね。 レイアウトが崩れてしまう原因は、前回の記事の通り「既に出来上がっているHTML」 に対して何も考えずにブートストラップをぶち込んだためです。 この状態では、元からあったCSSとブートストラップのCSSとで 同レベルの定義をしている場合にどちらが適用されるかわからない状態となります。 これではバグを作っているようなものですね。 では、対応方法について。 3.ブートストラップと既存CSSを共存させる。 方法をとるため、今回はブートストラップのCSSを修正していきます。 それでは、ブートストラップのCSSファイル(bootstrap.css)を編集します。 例)不要な指定を解除 こんな感じに、定義として不必要な指定を変更する・削除する、等々の対応をしてやることで こんな感じになりました。 割と見れる状態になりましたね。 今回は、一番簡単なブートストラップ側のCSSを変える対応をしてみました。 変更対応したので、コメントを残して完了とします。 変更の目的等の詳細はバージョン管理側で詳しく書くとして、どこを修正したかは 後々対応する人のことも考えてマーキングしておきましょう。 次回は、新規のHTMLの場合を書こうかと思います。

上松 博志が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します