受付9:00～18:00 ※土日祝除く
2023.01.12Web制作
最終更新日：2024年2月2日
【WordPress TIPS】Bootstrapで段組みを制御する
Bootstrapのグリッド機能のひとつ、ORDER指定を使って、複雑な段組みを簡単に組むことが出来ます。
例えば上のサンプルでは、スマートフォンサイズの場合は「画像(1)」「最初の文章」「画像(2)」「2番目の文章」「画像(3)」「3番目の文章」「画像(4)」「最後の文章」と並んでいますが、パソコンなどの幅広の画面ではスマホとは違った配置になっています。
BootstrapのcontainerDIVでレイアウト
Bootstrapの「container-fluid」DIVの中に、「row」DIVブロックを配置。
さらにその中に、「col」DIVを入れ子にしていく基本的なグリッドシステムを使います。
スマホ用に並べた順番で記述
「row」DIVスマホで上から表示したい順に、DIVブロックを並べていきます。
この時、並べたcolDIVブロックのクラスに、今回は「col-lg-6」でBootstrapのlgグリッド以上の時に親要素の横幅の半分になるように設定。
画像colDIVと文章colDIVを交互に記述していきます。
ORDERクラスを定義する
「row」に並べたcolDIVブロックのクラスに、「order-xl-●」「order-lg-●」を追加します。
「order-xl-●」はBootstrapグリッドのXLサイズの時の並び順「order-lg-●」はLGサイズの時の並び順、を指定します。
例えばこんな感じになります
LGサイズ以上の時の見た目がこんな感じになります。
画像・文章DIVブロックが全部で8つあり、それらがORDERで指定した順に「col-ld-6」定義によって２列に配置される・・・といった感じになります。
スマホの時は画像→文章の並び順になってほしいけど、パソコンの時は違うレイアウトにしたい場合など 使い道の多い機能だと思います。ぜひお試しを。
【この記事のライター】
SASSAN
株式会社エー・エム・ティー Web Director / Web Engineer
お問い合わせCONTACT
株式会社エー・エム・ティーは
印刷物からホームページ制作・更新運用管理までトータルサポート。
企業様の課題解決や企業価値向上のお手伝いをいたします。