ワードプレスはデフォルトで様々なブロックが搭載されておりまして、GUI操作でブロックを配置するだけでホームページ作成が可能なホームページビルダーともなっております。
しかし、ワードプレスでホームページ作成をしている方には分かると思いますが、ワードプレスにデフォルトで搭載されているブロックは基本的なブロックばかりでありまして、このデフォルトのブロックでは「自分の思うようなコンテンツが実現できない」というジレンマがあります。
このような場合、ワードプレスには「カスタムHTML」というブロックを使えば、任意のHTMLコードをページ内に挿入できることとなり、自分好みのコンテンツを実現可能ではあります。
しかしこの方法ですと、HTML言語やCSS言語に熟知していなければならず、また、言語に熟知していても一からブロック設計が必要となり、煩わしいこと他なりません。このような場合に使用の検討をおススメしたいのが「フレームワーク」です。
「フレームワーク」とは、簡単に平易に説明するとアプリの枠組みです。また、アプリ開発のためのテンプレートと言っても良いでしょう。
ホームページのブロック設計は、HTML言語だけではなくCSS言語（スタイルシート）の知識が必要となります。例えば、レスポンシブ仕様とする場合、モバイル端末使用時の各ブロックの挙動を検討する必要があり、フレキシブル、ブロック、インライン等といったCSSで用意された各種コンテナの挙動仕様を活用しておりますので、このような仕様を熟知していなければならず、また、リキッドレイアウト仕様としたい場合には、マージンやパッディング属性についても熟知の必要があります。そして、様々なブロックを組み合わせて自分の思うようなブロックを設計・作成するわけです。
しかし、前述の「フレームワーク」を用いればそのような設計の手間を省くことができ、多少のHTML言語やCSS知識があればブロック作成が容易になります。
世の中で出回っている「フレームワーク」には色々とあります。ウェブアプリ作成でよく知られている「フレームワーク」には、
・Laravel（PHP言語向けのフレームワーク）
・BOOTSTRAP（HTML言語、CSS言語向けフレームワーク）
等があります。
特にブロックの設計においては、BOOTSTRAPが便利です。BOOTSTRAPは、先のレスポンシブやリキッドレイアウト設計が既になされた「ブロック」テンプレートです。ブロック作成にはCSS言語でスタイルシート（クラス）を作成し、HTMLコード内にそのクラスを適用することであらかじめ設計した装飾や挙動が得られます。BOOTSTRAPは様々なクラスが用意されたクラスライブラリなのです。
例えば「ジャンボトロン」。
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more
上のような「ジャンボトロン」を作成したい場合、H1やPタグ、アンカータグ、ボタン等の各要素を組み合わせで一つの「ジャンボトロン」というブロックコンポーネントを形成します。各要素の配置位置やレスポンシブ時の挙動、装飾などは、先のとおりあらかじめ設計したうえでCSS言語にてクラス作成し、コード内にクラス名を適用します。しかし、BOOTSTRAPにはあらかじめこの「ジャンボトロン」の作成に必要なクラスライブラリが用意されており、また、HTMLコードも準備されています。それが下記コードです。
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div> 上記「ジャンボトロン」も「カスタムHTML」ブロックを用いておりますが、あらかじめBOOTSTRAPで用意された上記コードを貼り付けただけです。
次に「カルーセル」。これはワードプレスにも欲しい機能ですよね。
Placeholder First slide
Placeholder Second slide
Placeholder Third slide
Previous
Next
下記がBOOTSTRAPで用意されたコードです。これも「カスタムHTML」ブロックへのコピペで動作します。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
BOOTSTRAPにはアイコンのライブラリも用意されています。
これら以外にもたくさん用意されています。
最後に注意点ですが、BOOTSTRAPを使うには、あらかじめBOOTSTRAPを使うための環境設定が必要です。BOOTSTRAPで用意されたコンポーネントを使うには、専用のCSSやJSが準備されております。
方法としては、
①BOOTSTRAPで用意されたCSSファイルやJSファイルをダウンロードして使う方法。
②CDN（コンテンツ・デリバリ・ネットワーク）を使う方法。
使い方としては②のCDNが簡単かと思います。あらかじめBOOTSTRAP側にてサーバー上にて専用CSSやJSが用意されておりますので、自身のホームページが表示される度に自動で必要なファイルがダウンロードされます。
BOOTSTRAPには上記以外にも様々なコンポーネントが用意されています。興味のある方は是非、BOOTSTRAPの日本語サイトを覗いてみてください。自分が欲しかったブロックコンポーネントが見つかるかもしれませんよ。
https://getbootstrap.jp
