Programing beginner by koala

【超便利】Bootstrapでメイン記事を2カラムにしてサイドバーを付ける方法「過保護説明」

この記事では、Bootstrapでメイン記事エリアを2カラムにして、さらにサイドバーをつける方法を簡単に説明しています。

Bootstrapで単純に3カラムにするのは簡単ですが、下記のように、3カラム目をサイド―バーにするには、通常の方法ではなかなかうまくいきませんよね(^_^;)

ただ、この方法を知っておくと便利ですし、デザインの幅も広がるので是非参考にしてみてください(^^)

大まかな流れ

2カラム+サイドバーにする方法の大まかな流れとして、

1.メイン記事とサイバーの2カラムを作る
2.メイン記事に「入れ子」をして、2カラムにする

という2ステップになります。詳しく見ていきましょう!

ちなみに、Bootstrapの導入方法や復習は下記の記事をご覧くださいね(^^)

【Bootstrap】の使い方①初心者向けの画像&動画付き「過保護説明」
【Bootstrap】の使い方②便利なグリッドシステム!画像&動画付き「過保護説明」
Bootstrapって実際のサイトではどうやって使うの?的な話。画像&動画付き「過保護説明」

まず最初の状態はこんな感じですね!

※今回は、「section1」~「section4」をメイン記事で2カラムにし、「Aboutme」をサイドバーにするという感じで説明していきます!

普通にリロードすると、縦に並んだ状態になっていると思います。まずはこれを「メイン記事」+「サイドバー」の2カラムにしていきます!

Bootstrapで2カラムにする。

とりあえずはこうなるかなと思います。

メイン記事に入れ子をしていきます!

続いて、メイン記事を2カラムにしていきます。

簡単に言うと、colの中に、また、rowcolのグループを作ってあげるという感じですね(^^)

こうなるかなと思います。

うまくいかない場合

うまくいない場合は、だいたいは<div>タグの閉め忘れ(数が足りない)であることがほとんどです。

最初のcontainerrowは、サイドバーすべてを囲むもので、2番目のrowは、メイン記事だけを囲んでいます。

そこだけご注意くださいませ!

まとめっ!

Bootstrapの「入れ子」を知っておくと、2カラム+サイドバー、3カラム+サイドバーなど、デザインの幅も広がりますね!

是非使ってみてください。以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら