ブログのテーマをマイナーチェンジしてみました

公開日 : 最終更新日 :

カテゴリー :
Bootstrap 3について書いてあるところがありますが、Bootstrap 3の開発中のものをベース書いた記事となっています。正式に公開されているBootstrap 3と違い使い方や変更となっている箇所がありますので参考程度に見ていただくようよろしくお願いします。

つい最近、BloggerからWordPressに移行したばっかりですが、WordPressで使っているテーマをマイナーチェンジしました。色などはあまり変更せずにデザインでちょっと足りない感じのところを変更しました。Young Flavorで使っているCSSフレームのBootstrapが2.3から3.0になるのでそれに合わせてデザインも少し変えようかなと思ったからです。まだBootstrap 3.0はリリースされてないですが、最近のGitHubの更新をみているとLESSの細かい変更がメインでまぁ使えるだろうと思ったのでちょっと先取りして使ってみました。2.3から3.0への変更でYoung Flavorで対応したことを中心に紹介します。

Bootstrap 3(開発版)になって変わったところ

Bootstrap 3.0に変わって対応したところは以下の感じです。

  • レスポンシブ関係のCSSがBootstrap本体のCSSに統合
  • ナビバーのインナークラスがなくなりインナーdivがなくなった
  • フォームのprepend/appendがなくなった
  • row-fluidクラスがなくなりrowがリキッドスタイルになった
  • .border-raduius()の削除
  • フォントサイズにremを採用。ただしIE8用にpxも併用

1番目のレスポンシブ関係のCSSがBootstrapの本体のcssに統合されました。2系のBootstrapのCSSの構成は、bootstrap.cssとresponsive.cssの2つがあり、Bootstrap.cssはコンポーネントのデザインが書いてあり、responsive.cssは、スマートフォンやタブレット用のレイアウトが書いてありました。3系からのBootstrapは、モバイルファーストということでresponsive.cssをやめてBootstrap.cssひとつですべてのCSSを定義することになりました。Bootstrap.cssの定義もスマートフォン用の定義が基本でPCに拡張していくような感じになります。

ナビバーの違い

2番目のナビバーなんかで使ってたdivがなくなりスッキリしたHTMLになりました。またスマートフォンでのナビバーの”brand”の位置が左から中央になってます。

Bootstrap 2系のナビバー

Bootstrap 3(開発版)のナビバー

フォームの違い

3番目のフォーム関係も変更になりました。2系までの横並びにボタンなどをくっつけたフォームをつくる場合は、”input-prepend”や”input-append”をラップしてinputを横並びさせるものを”add-on”で定義していましたが、3系からは、”input-group”というのでラップしてinputに”prependedInput”,”appendedInput”,”appendedPrependedInput”のidを書いてinputを横並びにさせたいものに”input-group-addon”や”input-group-btn”で定義するようになりました。また3系からinputのフォームの横幅がデフォルトで”width: 100%”になっています。

Bootstrap 2系の横並びフォーム

Bootstrap 3の横並びフォーム

目のrow-fluidクラスがなくなったことですが、これはBootstrapのモバイルファーストの方針で標準でレイアウトがリキッドスタイルになったため必要がなくなったからです。なのでグリッドは、rowクラスを使うだけですむようになりました。12カラムであることは変わらず、またオフセットやネスト等も使えるようです。PC等でみる場合のメディアクエリは、768pxで定義されています。

5番目のremの採用ですが、これもモバイルファーストの方針によるものです。remというのはCSS3で定義された新しいフォントサイズの値でemと似たような相対的な値です。remとemの違いはベースとなる親のフォントサイズの参照にあります。emの場合は親のフォントサイズによって定義されるので階層が変わるとフォントサイズの値が変わりますが、remの場合は、ルートやhtmlといったひとつの親のみなので階層が変わることによるフォントサイズの値はかわりません。

まとめ

Bootstrap 3.0で変わったところでYoung Flavorで対応したところを紹介しました。まだBootstrap 3.0はリリースされてないので紹介したのが変わる可能性は大いにあります。この記事のみをリリース前で使うには鵜呑みにせず対応することをおすすめします。

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>