CPIスタッフブログはレンタルサーバーナレッジにうまれ変わりました。16:32「今さら聞けない!スマホ、PC対応サイトを小一時間で作れるようになる」の4回目の記事となり、今回はメインコンテンツエリアに3カラムの要素を追加します。下記のような3カラムのコンテンツを追加します。追加方法PC用には3カラム表示で、スマートデバイスには1カラムで表示を行います。今回はポイントだけ説明させていただきますので、ソースコードをGithubからダウンロードするか、サンプルサイトより閲覧いただければと思います。3カラムの適用について3カラムで表示を行うにはBootstrapのGridシステムを利用します。下記のソースが3カラム表示を行っている箇所になります。</div></div>Bootstrapは、全部で12になるように設定します。今回は均等に3等分していますので「"col-sm-4"」クラスを追加しています。2カラムで均等にする場合は、「"clo-sm-6"」になります。詳細はBootstrapのGridシステムを参照ください。イメージ画像の丸に表示css3のborder-radiusプロパティを使用します。50%;ソースコードダウンロード今回ブログで紹介しています、Bootstrapの記事ですが、折角ですのでダウンロードできるようにGithubにアップロードしました。ご自由に使用していただければと思います。https://github.com/abechiyo/bootstrap-basicサンプルサイト関連記事BootstrapのイケテないNavbarにスタイル適用。SV-Basic」を語る!TwitterCPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。cpiadjpツイートPocket掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。