BootStrapを使って、サイドバー付き2カラムを実現する方法【けっこう簡単です】

BootStrapを使って、サイドバー付き2カラムを実現する方法【けっこう簡単です】

こんにちは、LLENNです。

普通のCSSでサイドバーを作るのが面倒なので、BootStrapを使って作りたいです!

ですが、方法が分かりません。。教えてください!

こんな疑問、悩みにお応えします。

本記事の内容

・BootStrapを使って、サイドバーを作る方法

今回は、コーディングに関するメモ記事となります・・!!

サイドバー作りは、初めてWordPressのJINテーマを模写した際、苦労したポイントでした。

僕自身、それほどコーディングが得意ではないので、BootStrap初心者の目線でお話できるのかなと感じます。

※以下の記事を参考にさせていただきました!ありがとうございます(^^)

BootStrapを使って、サイドバー付き2カラムを実現する方法

結論としては、BootStrapの「入れ子」を使い、クラスの中にクラスを入れてあげれば完了です。

コードを先に載せておきますね。


<div class="title">
<h1 class="text-center">SIDE BAR DEMO</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<h3>Title</h3>
<p>本文テキスト</p>
</div>
<div class="col-sm-6">
<h3>Title</h3>
<p>本文テキスト</p>
</div>
<div class="col-sm-6">
<h3>Title</h3>
<p>本文テキスト</p>
</div>
<div class="col-sm-6">
<h3>Title</h3>
<p>本文テキスト</p>
</div>
   </div>
</div>
<div class="col-sm-4">
<h3>Sidebar</h3>
<p>サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文サイドバー本文</p>
</div>
</div>
</div>

とりあえず、コピペでOKです(^^)

このコードを実行すると、以下のようになりますね。

実行結果

BootStrapでサイドバー付き2カラムを実現しました

簡単に、上記のコードの説明をしていきます。

コードの仕組み

上記のコードは、いわゆる「入れ子」になっています。

具体的に言うと、以下の通り。

・12グリッドを、「col-xs-8」「col-xs-4」で2:1に分ける

・「col-xs-8」を、さらに「col-xs-4」×2で2つに分解

つまり、1つ目に分けた「col-xs-8」の中に、「col-xs-4」を2つ作ったというわけですね。 

画像にするとこんな感じ。

図解

BootStrapを使って、サイドバー付き2カラムを作るための図解

シンプルですが、けっこう使える配置なのかなと思います。

ぜひ参考にしてくださいませ(^^)

Twitterでは、大学生である僕がプログラミングで稼ぐまでの過程や、ブログに関する有益情報の発信も行っています。

 

気になる方はフォローお願いします・・! 

人気記事

≫プログラミングスクールのおすすめ3つはこれだけです。【無料体験|無料カウンセリングあり】

≫大学生がプログラミングを始める方法【4つあります|とりあえずこれ読めばOK】

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です