Bootstrapテンプレートにメインコンテンツを追加する

今さら聞けない!スマホ、PC対応サイトを小一時間で作れるようになる」の4回目の記事となり、今回はメインコンテンツエリアに3カラムの要素を追加します。

 

 

今回の追加する要素

 

下記のような3カラムのコンテンツを追加します。

 

 

追加方法

 

PC用には3カラム表示で、スマートデバイスには1カラムで表示を行います。
今回はポイントだけ説明させていただきますので、ソースコードをGithubからダウンロードするか、サンプルサイトより閲覧いただければと思います。

 

  1. 3カラムの適用について
    3カラムで表示を行うにはBootstrapのGridシステムを利用します。
    下記のソースが3カラム表示を行っている箇所になります。
     

    <div class="row">
      <div class="col-sm-4">
          <!--1カラム目-->
      </div>
      <div class="col-sm-4">
          <!--2カラム目-->
      </div>
      <div class="col-sm-4">
          <!--3カラム目-->
      </div>
    </div>
    

    Bootstrapは、全部で12になるように設定します。今回は均等に3等分していますので「"col-sm-4"」クラスを追加しています。
    2カラムで均等にする場合は、「"clo-sm-6"」になります。詳細はBootstrapのGridシステムを参照ください。
     

  2. イメージ画像の丸に表示

    css3のborder-radiusプロパティを使用します。

    border-radius: 50%;

 

ソースコードダウンロード

 

今回ブログで紹介しています、Bootstrapの記事ですが、折角ですのでダウンロードできるようにGithubにアップロードしました。
ご自由に使用していただければと思います。

https://github.com/abechiyo/bootstrap-basic

サンプルサイト

 

関連記事

 

BootstrapのイケテないNavbarにスタイル適用。センターリング(justified)などについて

Bootstrapにメインビジュアルを追加する

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。