【bootstrap使い方】offsetが効かない時はバージョンをチェック

プログラミング

こんにちは、のくと申します。

 

Bootstrapで、カラムに余白を持たせようとしているのになぜか反映されない

もしそんなことがあれば、この記事は参考になると思います。

 

というのも、ver4.0以前とそれ以降では、カラムに余白を持たせるoffsetの書き方が変わっているのです。

 

今日は、そんなoffsetの書き方についての記事です。

 

そもそもbootstrapのoffsetとは?

まずは簡単にoffsetの解説をしたいと思います。

 

Bootstrapでは、ページを縦に12に割ったカラムという概念が特徴です。

文章や写真などの要素を、カラム何本分使うかをclassで指定することで、簡単にレスポンシブに対応するページを作ることができます。

出典:http://websae.net/twitter-bootstrap-grid-system-21060224/

基本的に、1つのまとまりの中にいくつかカラムを指定した要素を入れると、それらは左詰で入っていきます

 

したがって、場合によっては左側を空けて中央に寄せたいこともあります。

そこで活用できるのがoffsetというものです。

 

これを指定すると、offsetで指定した数のカラムを左側に余白として空けた上で、そこからカラムを並べていくことができます

 

工夫次第で色々な配置ができるoffsetはぜひ使っていきたいclassです。

 

Bootstrapのoffsetを指定する方法

では、本題に入ってbootstrapでoffsetを正しく指定する方法について話します。

 

冒頭でも触れましたが、bootstrapのoffsetは、ver4.0を境に書き方が変わりました。

なので、もし今offsetが反映されていない場合は、bootstrapのバージョンが幾つなのかを確認しましょう。

 

Bootstrapのバージョンの確認方法

まずは、自分がどのバージョンを使っているのかを把握しましょう。

 

具体的には、今offsetを指定しようとしているHTMLのheadの中を確認し、bootstrapを読み込んだ部分を探します。

おそらく、hrefの中にbootstrapの文字列がいるはずです。

 

そして、bootstrapのバージョンはそのhrefの中に書かれているはずです。

私が今あるサイトを模写するために利用しているbootstrapのバージョンは4.3.1でした。

ちなみに、bootstrapの公式サイトからCDN(インターネット経由でbootstrapのstylesheetを読み込む方法)として読み込めば、最新バージョン(もちろんver4.0以降)のbootstrapを使用できます。

 

ここを見て、自分がどのバージョンのbootstrapを使っているのかを知るのが第一です。

次からは、ver4.0以前と以降のそれぞれについて解説します。

 

Bootstrap ver4.0以降は”offset-md-2”のように書く

まずは、最新バージョンのbootstrap4.xでのoffsetの書き方です。

 

これは、offsetしたい要素のclassに”offset-(width)-(column)”のように書きます。

例えば、”offset-md-2”とすれば、画面幅が768pxより大きい時にはその要素の左に2カラム分の余白を置いて要素を配置することができるようになります。

 

Bootstrap ver4.0以前は”col-md-offset-2”のように書く

反対に、bootstrap 4.0以前のものを使う際は、少し書き方が異なります。

 

ここでは、“col-(width)-offset-(column)”のように書きます。

例えば、”col-md-offset-2”とすれば、上と同じように画面幅が768px以上の時には要素の左側に余白を2カラム分とって要素を配置できます。

 

Bootstrapを使いこなしてレスポンシブ対応のモダンなウェブサイト作りを

今回は、インターネットを検索してもなかなか治らなかったoffsetの書き方について記事を書きました。

 

ポイントは、bootstrapのバージョンによって書き方が異なるということで、それは昔に書かれた記事を読み漁ったもわかるわけなかったのです。

 

今回の記事が皆さんの参考になれば幸いです。

Bootstrapも駆使して、より面白いwebページを作っていきましょう。

 

では今日はこの辺りで終わります。

最後までお読みいただきありがとうございました。

コメント