こんにちは！
子供向けプログラミングkobakoスタッフです。
ホームページを作ったりする時に使用するプログラミング言語HTMLですが、
プログラミング初心者もとっつきやすい点もあり、HTML（エイチティーエムエル）を学ぼうという方は多いんじゃないでしょうか？
ですが、いくら初心者向けとはいえ、きちんとしたWEBデザインをしようとするとなかなか難しいのが現状です。
そこでおすすめなのがBootstrap（ブートストラップ）です。
ところで・・・
この記事を書いている人はだれ？
子供向けプログラミング教室です！
JavaScriptを使ったゲームプログラミング、ゲーム企画が得意な教室です。
プログラミング教室で実際に使用している、学習成果のある教材をYouTube無料配信しています。
HTMLは勉強しすぎない
確かにHTMLは簡単な記述で、視覚的に変化が確認できるので達成感があります。
ですが、普段私たちが目にするようなWEBサイトのように、整ったデザインをしようとすると、かなり難しいです。
プロのWEBデザイナーも、最近ではテンプレートを使って制作していたりしますし、
フルスクラッチでイチからWEBデザインできるようになる！という目標は捨てた方が得策かなぁと思ったりしています。
要は、HTMLは勉強しすぎるな、ということです。
もちろん、面白く、勉強が苦にならないなら全然問題ありませんが、
苦しみながら勉強するとすれば、HTMLはサクッと勉強して30点くらいで切り上げるのが良いかなぁと思っています。
Bootstrapでサクっと学ぶ
テンプレートを使うと、簡単にそれなりなWEBデザインのホームページが手に入りますが、
テンプレートを使うと今度はカスタマイズに苦労する諸刃の剣です。
そこでおすすめなのがBootstrapという、フレームワークです。
フレームワークってなに？テンプレートと何が違うの？というと、
フレームワークは、パーツごとに切り出されておりパーツを組み合わせてオリジナリティあるホームページが作れる、という点でテンプレートと異なります。
Bootstrapの導入方法
Bootstrapの導入方法は簡単です。Head内に一行タグを差し込むだけです。
タグは公式ホームページから取得しましょう。
QuickStartという項目に、差し込む一行コードが配布されています。
https://getbootstrap.com/docs/5.0/getting-started/introduction/
Bootstrapの覚え方
Bootstrapは歴史が長く、2021年7月現在のバージョンは5.0です。（古いバージョンの情報も多くあるので注意）
機能も盛りだくさんで難しそうな印象を受けるのですが、よく使うものといえばそれほどありません。
ここではよく使うものを3つほどピックアップしていきます。
この3つだけを習得するだけでも、かなり整ったWEBデザインが実現できるはずです。
めちゃくちゃかっこよくて、独自性あふれるWEBデザインとはなりませんが、
趣味のホームページを作るくらいであれば十分事足りるはずです。
今回は、簡単な3ステップで以下のようなコンテンツパーツを作成してみたいと思います。
背景色やテキスト色
背景色を暗く、テキスト色を白くします。
bg-darkとtext-whiteというクラスを追加するだけです。
darkやwhiteといった色は、Bootstrapがテーマカラーとしてあらかじめ用意している色です。
他にもDangerやPrimaryといったテーマカラーが存在します。（例：bg-danger, text-primary)
<div class="bg-dark text-white">
<h1>Bootstrapとは？</h1>
</div>余白
余白はWEBデザインにおいて重要な要素です。
余白をとることで情報をスッキリさせることができますし、整ったデザインという印象を与えることができます。
Bootstrapでは、余白であるマージンやパディングの調整が簡単にできるようになっています。
py-5は、padding + y(縦軸）を5のサイズ感で、
px-5は、padding + x（横軸）を5のサイズ感で、という意図になります。
my-5やmx-5にすれば、paddingではなくmarginということになります。
<div class="bg-dark text-white py-5 px-5">
<h1>Bootstrapとは？</h1>
</div>グリッドカラム
Bootstrapの要とも言える機能です。
要素を横並びにしたりすることをグリッドカラムと言ったりします。
rowというクラスをつけて要素に、colという要素を羅列するだけでグリッドカラムが実現できます。
<div class="bg-dark text-white py-5 px-5">
<h1>Bootstrapとは？</h1>
<div class="row my-5">
<div class="col">
<h2>1.Simple</h2>
<p>BootstrapはSimpleです。</o>
</div>
<div class="col">
<h2>2.Speedy</h2>
<p>BootstrapはSpeedyに習得できます。</o>
</div>
<div class="col">
<h2>3.Requirement</h2>
<p>Bootstrapは必要に応じて必要な分だけ勉強すればOKです。</o>
</div>
</div>
</div>大切なのはHTMLで何を作るか
ホームページを作る上で一番大切なのは、デザインではなく、何を掲載するかです。
ひたすらHTMLを勉強しても、みている人に伝えたいことがなければ意味がありません。
プログラミング教室kobakoでは、生徒には自分の作品を紹介するホームページを作るよう指導しています。
せっかく作った自分の作品を、自分が作ったホームページで、かっこよく掲載する。
こうすることで、さらに作品を作る意欲、ホームページをかっこよくする意欲（HTMLをさらに勉強しようという意欲）が湧いてくると思っています。
HTMLはBootstrapを使ってサクッと学習を終わらせて、本編である作品作りに専念することをkobakoはお勧めしています。
ぜひ、kobakoで作品作りとホームページ作りに挑戦してみてください。
無料体験へのお申し込みはこちらから！
kobakoのゲームプログラミング教材もYouTubeで無料配信中です！
初回の授業料（体験）は無料です。
※現在はオンライン授業でのみ対応しています。通学型ではありません。