カラム数を指定してBootstrapのグリッドシステムを使ったHTMLを生成するエクセルVBA

★気に入ったらシェアをお願いします!

grid

photo credit: Urban Grids via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Boostrapを使ったWebサイトのHTMLコードをエクセルVBAで自動生成するプログラムを作っています。

方針としては

  • Bootstrapを使ったWordPressによる企業向けサイト
  • service,plan,aboutの3つのセクションによるトップページ
  • エクセルの入力情報から自動生成する

で進めております。

前回はこちらの記事。

【エクセルVBA】シートの開始行や行数の変更があってもちゃんと動く繰り返し文の書き方
エクセルではワークシートの運用上、行の挿入や行の追加が発生することが多々あります。今回はエクセルVBAでワークシートの開始行や行数の変更があっても繰り返し処理がちゃんと動くプログラムの作り方です。

aboutセクションの会社概要の部分のテーブルを表現するHTML部分をその行数に関わらず自在に生成してくれます。

さて、今回はBootstrapの主役とも言ってよいグリッドシステムがテーマです。

serviceセクション、planセクションはそのグリッドシステムを使っていますが、現状はまだそのカラム数は可変ではありません。

そこで今回はカラム数を指定することで、グリッドシステムを使ったセクションのHTMLソースを自在に生成するVBAプログラムを作っていきます。

では、行ってみましょう!

Bootstrapグリッドシステムの書き方

多くのWordPressテーマやHTMLテンプレートのベースとして大人気のCSSフレームワークBootstrap

CSS初心者の強い味方!Bootstrapで簡単レスポンシブサイト制作
CSS初心者でもレスポンシブサイトが作れる!導入がややこしいBootstrapの設定を最小の記述で終わらせて実践方式で触ってみましょう!今回は導入前の予備知識の解説です。

その中でもグリッドシステムはスマホ時代を象徴する強力な仕組みです。

グリッドシステムでは画面を12分割して、そのいくつ分かを指定することで簡単にカラム組みができます。ですから、12の約数であれば3つでも4つでも6つでもいい感じに組むことができるというわけです。

例えば、縦に3つ並ぶカラムを作りたければ

とするだけでOKです。

  • 行にするエリアをclass=”row”で囲む
  • それぞれのカラムをclass=”col-画面幅-グリッド数”で囲む

という書き方です。

画面幅については本記事ではsmを使います。詳細は割愛しますので、ご興味あればこちらをご覧ください。

Bootstrapのグリッドシステムとは? 実例と一緒にグリッドシステムに用意されたクラスを復習します

お題:カラム数を指定してエクセル表からHTMLソースを出力

今回はこちら弊社サイトのserviceセクション

プランノーツサイトのserviceセクション

のHTMLを生成していきたいと思いますが、これをHTMLソースで表現すると

となります。

うっかりカラム数を3つに変えたくなった場合は

  • 不要なカラムのdiv要素よ削除
  • 残ったカラムグリッド数を3から4に変更

と、ちょっと面倒です。しかもどこかを修正漏れしそう…

ということで、カラム数も自在に変更できるHTML生成プログラムを作っていきたいと思います。

カラム数を変更可能なHTML生成VBAプログラム

ベースとしてはこちらの記事で紹介しているプログラムを使いますので、よろしければこちらも見ながらご覧ください。

エクセルVBAでインデントや改行を入れながらHTML文を追加していく便利関数を作る
エクセルVBAで自動でHTML生成シリーズです。今回はインデントや改行コードを入れながらHTML文を追加していく処理を関数化させつつ、Planセクションを生成するプログラムを作っていきます。

そして今回、まずエクセルシートをこのように準備しました。

serviceセクションのエクセルシート

各カラムに入力する内容は7~12行に入力します。6カラムまで対応できるようにしています。

また生成するカラム数をB4セルでリスト形式で1,2,3,4,6のいずれかから選択できるようになっています。なお、B4セルには「serviceカラム数」という名称をつけています。

このシートからHTMLを生成するプログラムはこちらになります。

まず20行目でカラム数を取得します。

カラム数によって26行目のFor~Nextの繰り返しの回数と、29行目で指定するグリッド数を指定してあげればOKですね。

グリッド数は12÷カラム数で算出できます。

実行結果

こちらで出力した結果をブラウザで確認してみますと、2カラムの場合は

2カラムの場合の出力HTML

6カラムにした場合は

6カラムの場合の出力HTML

と表示されます。

まとめ

以上、カラム数を指定してBootstrapのグリッドシステムを使ったHTMLを生成するエクセルVBAプログラムを作成しました。

ちょこっといじるだけですぐに対応できちゃいました。

またブラッシュアップのアイデアが浮かびましたら紹介できればと思います。

どうぞお楽しみに!

連載目次:エクセルの入力情報からVBAでHTML文を自動生成

企業向けのWebサイトを作る際、エクセルの入力情報を元に自動でHTMLコードを生成できれば楽ですよね。本シリーズではBootstrapを使ったシングルページを想定してコードを生成するVBAプログラムを作っていきます。
  1. エクセルVBAでWordPress投稿用HTMLソースを自動で生成する
  2. エクセルVBAでインデントや改行を入れながらHTML文を追加していく便利関数を作る
  3. エクセル入力情報からWebサイトの会社概要のHTML文を生成するVBAプログラム
  4. 【エクセルVBA】シートの開始行や行数の変更があってもちゃんと動く繰り返し文の書き方
  5. カラム数を指定してBootstrapのグリッドシステムを使ったHTMLを生成するエクセルVBA