極意（42）段組とセクションとパネル

前回の「段組と入れ子」のページは、段組と枠（box）の入れ子に特化した内容でした。
今回は、段組とセクション及びパネルの３部品間の入れ子の例を、実ページで検証した結果です。

１．段組の中にセクションを入れる

上記のおまじない内容です。

#cols{{{
#section(bgcolor=#9B9FC9,color=#ffffff,left){{
// bgcolor に背景の色、color に文字の色を指定します。
* 左側のセクションです
初めまして、塾長の「morisaki」です。
当方は、千葉県柏市でパソコン教室を運営しながら、裏でホームページの制作代行 業を細々と営業している二足の草鞋を履いた個人事業主です。
}}
====
#section(bgcolor=#B8E1EC,color=#393939,left){{
// bgcolor に背景の色、color に文字の色を指定します。
* 右側のセクションです
ホームページの制作に使用しているツールは、QHM（Quick Homepage Maker） と言う、大阪にある純粋な国産メーカー北摂情報学研究所のCMS（Contents  Management System）ツールです。
}}
}}}

２．段組の中にパネルを入れる

上記のおまじない内容です。

#cols(++++){{{
#panel(danger){{
&deco(,,20){左側のパネルです};
====
CMSツールと言えば、WordPressに代表されるツールが有名ですが、当方のQHM は知名度が低くて見積競争では負け続けています。
正直言って、今のままではWordPress業者とは勝負にならない。
}}
++++
#panel(primary){{
&deco(,,20){右側のパネルです};
====
HPユーザーにとって、QHMはWordPressより遥かに易しく日々のページ更新が簡単にできるメリットがあり、お薦めのツールだと思うのですが、当方の思いが、世の中に浸透していかないのが残念至極です。
}}
}}}

３．セクションの中に段組を入れる

上記のおまじない内容です。

#section(bgcolor=#119E5F,color=#ffffff,left){{{
// bgcolor に背景の色、color に文字の色を指定します。
* セクションの中に段組を入れる
#cols{{
何とかQHMの知名度を上げる必要があると前々から思っており、自前サイト「藤心QHMクラブ」でQHMの普及とユーザーサポート活動を続けてきました。そのような状況の中で・・・・
====
haikと言うQHMの新しいデザインテーマが公開されました。
それまでQHMでは、実装できていなかったレスポンシブ・レイアウトが実装でき、これでやっとWordPressと互角に勝負できる環境が整ったと思いますが、何分、知名度が低いために、そう簡単には手放しで喜んでいられないのも事実です。
}}
}}}

４．セクションの中にパネルを入れる

上記のおまじない内容です。

#section(bgcolor=#FFF171,color=#393939,left){{{
* セクションの中にパネルを入れる
#panel(primary){{
&deco(,,20){今、QHMユーザーは混迷の中にいます};
====
haikが公開されてもう間もなく２年、そして2016年9月にはQHMのサポートが終了するという衝撃的な事実に、QHMユーザーは、今後どうすべきなのかという岐路に立たされて、混迷の一年を過ごさざるを得ないことになっています。
====
長年、QHMユーザーを、ユーザーフォーラムでの回答者やQHM講習会の開催、個人レッスンでの技術サポート等々、ユーザー支援活動を続けてQHMの普及を努めてきましたが今後はQHMからhaikへの方向転換に向けて、haikに特化した新たなユーザー支援をすべく当サイトを開催した次第です。
}}
}}}

５．パネルの中に段組を入れる

上記のおまじない内容です。

#panel(primary){{{
&deco(,,20){パネルの中に段組を入れる};
====
#cols(++++){{
当初、当サイトを公開するにあたって「藤心haik道場」と命名してみましたが 「HAIK道場」なるサイトが、既に存在しています。そして試行錯誤の末、「藤心８１９塾」と命名しました。感の良い方なら直ぐお分かりのことと思いますが、数字８１９はハイク（俳句）に通じるキーワードです。
++++
「藤心８１９塾」は haik を使った新しいホームページ作りを推進し、QHMからhaikに方向転換を試行するQHMユーザーを支援する「haik塾」としてスタートします。そして筆者が、その塾長の「morisaki」です。以後、お見知りおき程、よろしくお願い致します。
}}
}}}

６．パネルの中にセクションを入れる

上記のおまじない内容です。

#panel(primary){{{
&deco(,,20){パネルの中にセクションを入れる};
====
パネルの中のセクションです。
#section(bgcolor=#FFF171,color=#393939,left){{
* もう一つの開催目的
当サイトの開催目的には、前記のユーザー支援の他に、実はもう一つの意図を含んでいます。それは、筆者の愚痴のはけ口としてのつぶやきの場です。
つぶやきと言えば、ツイッターとかFacebookとかのSNS等がありますが、個人のボヤキ・ため口・愚痴などを、そのようなSNSに公開するのは、いささかためらいがある世代です。それならば一層のこと自分のサイト上で思いきっり愚痴ってしまえれば、気分が晴れるのではないかとの意図です。
}}
}}}

７．セクション＞段組＞パネル？

前記までの入れ子の例とは別に、セクション／段組／パネルの３ツを全て使用して画面編集してみました。その概要ですが、先ずセクションを設定して、そのセクション内に段組を設定します。更に段組内にパネルを設定する仕様が一番、オーソドックスな使い方のような気がしますが、皆さんは如何でしょうか？

上記のおまじないです。

#section(bgcolor=#B4E7CF,color=#393939,left){{{{
* セクションの見出しです
#cols(++++){{{
#panel(primary){{
&deco(,,20){段組左側のパネル見出し};
====
筆者の周りには、HP絡みのいろいろな人間がおります。HP制作代行でのお客様や、お客様になるかもしれない人、もっと具体的に言うと、見積依頼フォームで見積依頼をしてきた人、QHMやhaikの技術的な質問をメール等で問合せしてきた人、ランサーズというマッチングサイトでのクライアント、QHMユーザーフォーラムでの質問者、等々、実際に会ったことも無い人達です。
}}
++++
#panel(primary){{
&deco(,,20){段組右側のパネル見出し};
====
共通して言えるのは、会ったことがないから顔も知らない。声さえ電話で聞いたぐらいの筆者に言わせればバーチャルに近い人間達です。実際には存在しているリアルな人間達ですが、ネットを介するとバーチャルになってくる不思議な人間関係です。要するに、こちらの常識が通じない異次元の世界です。その異次元の世界の人達に向けた筆者の思いが愚痴となって延々と続くかも知れません。
}}
}}}
}}}}