極意(41)段組と入れ子 2016-5-5

当ページは「藤心QHMクラブ」の「段組と入れ子の例」のページを情報源としています。haik以前のボックス(#box)と枠(#style)は、haik環境では「枠=ボックス」(#bs_box)として統合されました。勿論、旧のボックス(#box)と枠(#style)は、haik環境でもそのまま使えますので何ら問題ないのですが、旧の段組(#style2)自体が #cols に変わっただけでなく、以前より簡単になったのを契機に、旧の「段組と入れ子の例」のページをhaik版としてリニューアルしてみました。
新旧のプラグイン(おまじない)を表にして纏めると・・・・

旧のQHMhaik環境
#style2#cols
#box#bs_box
#style#bs_box

段組と背景色つき枠の入れ子

ユーザーフォーラムでの元々の質問が、枠とかボックスを横に並べて設置できないかと言うことでした。その回答が以下のような結果になりました。

こちらは水色の背景の枠です。
おまじない「#bs_box」で作成されています。
こちらは左側のボックスです。

こちらは赤色の背景の枠です。
おまじない「#bs_box」で作成されています。
こちらは右側のボックスです。

[check]上記のおまじない

#cols{{{
#bs_box(alert,info){{
こちらは水色の背景の枠です。
おまじない「#bs_box」で作成されています。
こちらは左側のボックスです。
}}
====
#bs_box(alert,danger){{
こちらは赤色の背景の枠です。
おまじない「#bs_box」で作成されています。
こちらは右側のボックスです。
}}
}}}


段組と色つき枠線の入れ子

前記の背景色つき枠の替りに色つき枠線枠で試した結果です。

こちらは青色の枠線の使用例です。
おまじない「#bs_box」で作成されています。
こちらは左側の枠です。

こちらは緑色の枠線の使用例です。
おまじない「#bs_box」で作成されています。
こちらは右側の枠です。

[check]上記のおまじない

#cols{{{
#bs_box(panel,primary){{
こちらは青色の枠線の使用例です。
おまじない「#bs_box」で作成されています。
こちらは左側の枠です。
}}
====
#bs_box(panel,success){{
こちらは緑色の枠線の使用例です。
おまじない「#bs_box」で作成されています。
こちらは右側の枠です。
}}
}}}


段組とアコーディオンの入れ子・その1

ボックス(枠)で入れ子ができるのなら、アコーディオンでもできるはずとの軽い乗りでテストしてみました。見事できました。これは使えそうです。

見出し1のテキスト1行目です
見出し1のテキスト2行目です

見出し2のテキスト1行目です
見出し2のテキスト2行目です

見出し3のテキスト1行目です
見出し3のテキスト2行目です

見出し4のテキスト1行目です
見出し4のテキスト2行目です

見出し5のテキスト1行目です
見出し5のテキスト2行目です

見出し6のテキスト1行目です
見出し6のテキスト2行目です

見出し7のテキスト1行目です
見出し7のテキスト2行目です

[check]上記のおまじない

#cols(++++){{{
#bs_accordion{{
- 見出し1です
- 見出し2です
- 見出し3です
====
見出し1のテキスト1行目です
見出し1のテキスト2行目です
====
見出し2のテキスト1行目です
見出し2のテキスト2行目です
====
見出し3のテキスト1行目です
見出し3のテキスト2行目です
}}
++++
#bs_accordion{{
- 見出し4です
- 見出し5です
- 見出し6です
- 見出し7です
====
見出し4のテキスト1行目です
見出し4のテキスト2行目です
====
見出し5のテキスト1行目です
見出し5のテキスト2行目です
====
見出し6のテキスト1行目です
見出し6のテキスト2行目です
====
見出し7のテキスト1行目です
見出し7のテキスト2行目です
}}
}}}


段組とアコーディオンの入れ子・その2

段組とアコーディオンの入れ子

見出し4のテキスト1行目です
見出し4のテキスト2行目です

見出し5のテキスト1行目です
見出し5のテキスト2行目です

見出し6のテキスト1行目です
見出し6のテキスト2行目です

見出し7のテキスト1行目です
見出し7のテキスト2行目です

[check]上記のおまじない

#cols(++++){{{
&show(auto-JaqTPF.jpg,,段組とアコーディオンの入れ子);
++++
#bs_accordion{{
- 見出し4です
- 見出し5です
- 見出し6です
- 見出し7です
====
見出し4のテキスト1行目です
見出し4のテキスト2行目です
====
見出し5のテキスト1行目です
見出し5のテキスト2行目です
====
見出し6のテキスト1行目です
見出し6のテキスト2行目です
====
見出し7のテキスト1行目です
見出し7のテキスト2行目です
}}
}}}


段組とアコーディオンの入れ子・その3

見出し1のテキスト1行目です
見出し1のテキスト2行目です

見出し2のテキスト1行目です
見出し2のテキスト2行目です

見出し3のテキスト1行目です
見出し3のテキスト2行目です

段組とアコーディオンの入れ子

[check]上記のおまじない

#cols(++++){{{
#bs_accordion{{
- 見出し1です
- 見出し2です
- 見出し3です
====
見出し1のテキスト1行目です
見出し1のテキスト2行目です
====
見出し2のテキスト1行目です
見出し2のテキスト2行目です
====
見出し3のテキスト1行目です
見出し3のテキスト2行目です
}}
++++
&show(auto-4bAZ4F.jpg,,段組とアコーディオンの入れ子);
}}}


段組とスクロールボックスの入れ子

スクロールボックス2ッを横に並べてみました。

[check]左のスクロールボックス

  • 2013年10月 ああああああああ
  • 2013年8月 いいいいいいいいい
  • 2013年7月 ううううううううう
  • 2013年6月 えええええええええ
  • 2013年5月 おおおおおおおおお

[check]右のスクロールボックス

  • 2012年10月 AAAAAAAA
  • 2012年8月 BBBBBBBBB
  • 2012年7月 CCCCCCCCC
  • 2012年6月 DDDDDDDDD
  • 2012年5月 EEEEEEEEE



[check]上記のおまじない

#cols{{{
✓左のスクロールボックス
#scrollbox(100%,150px){{
- 2013年10月 ああああああああ
- 2013年8月 いいいいいいいいい
- 2013年7月 ううううううううう
- 2013年6月 えええええええええ
- 2013年5月 おおおおおおおおお
}}
====
✓右のスクロールボックス 
#scrollbox(100%,150px){{
- 2012年10月 AAAAAAAA
- 2012年8月 BBBBBBBBB
- 2012年7月 CCCCCCCCC
- 2012年6月 DDDDDDDDD
- 2012年5月 EEEEEEEEE
}}
}}}


タブボックスと段組の入れ子にチャレンジ?

外側にタブボックス、内側に段組の入れ子にしてみました。

段組左側のテキスト1行目です
段組左側のテキスト2行目です
段組左側のテキスト3行目です

段組右側のテキスト1行目です
段組右側のテキスト2行目です
段組右側のテキスト3行目です

見出し2のテキスト1行目です
見出し2のテキスト2行目です
見出し2のテキスト3行目です
見出し2のテキスト4行目です

段組左側のテキスト1行目です
段組左側のテキスト2行目です

段組右側のテキスト1行目です
段組右側のテキスト2行目です



[check]上記のおまじない

#bs_tabs{{{
- 見出し1です
- 見出し2です
- 見出し3です
==== 
#cols(++++){{
段組左側のテキスト1行目です
段組左側のテキスト2行目です
段組左側のテキスト3行目です
++++
段組右側のテキスト1行目です
段組右側のテキスト2行目です
段組右側のテキスト3行目です
}}
====
見出し2のテキスト1行目です
見出し2のテキスト2行目です
見出し2のテキスト3行目です
見出し2のテキスト4行目です
====
#cols(++++){{
段組左側のテキスト1行目です
段組左側のテキスト2行目です
++++
段組右側のテキスト1行目です
段組右側のテキスト2行目です
}}
}}}


段組に表と画像を配置する

項目名1項目名2項目名3
項目1項目2項目3
項目a項目b項目c

段組を使用して表と画像を配置



[check]上記のおまじないです

#cols{{
|STYLE:responsive|
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目a | 項目b | 項目c |
====
&show(auto-AARUgr.jpg,,段組を使用して表と画像を配置);
}}

[check]解説します
2列の段組を使って、左側に表、右側に画像を配置した例です。
この例の欠点として、表が大きくなってコンテンツ幅の半分以上を占める場合、段組幅を制御して調整する必要が発生します。そのことは画像の大きさにも同じことが言えます。即ち、表の横幅にしても画像の大きさにしても、いずれもコンテンツ幅の半分以下の場合に適用できる方法です。



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 21  
    役に立たなかった 0  


コメント記入欄