本日もマナブさんの【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】で勉強中。

「9.Bootstrapを理解しよう【爆速でサイト制作】」に取り掛かりました。

BootstrapはCSS(Webサイトのデザイン)を簡単にするコードです。

普通はサイトの文字を表示させるHTML、サイトのデザインをするCSSで別々に書かないといけないんですが、Bootstrapを使うと、HTML内にCSSを簡素化して書いても、同じように表示される。

しかも、Bootstrapのサイトのコードをコピペするだけで、かっこいい感じに出来ちゃうんです。

マナブさんのブログ記事に載っていた以下の参考動画を見つつ

Bootstrap Tutorial For Beginners – Responsive Design with Bootstrap 3 – Responsive HTML, CSS

素人が15分程度で作れたのが……こんな感じ!

正直、上部のメニューバーを自力で作ろうとしたら、かなり大変なんですよね。

でも、これコピペだけで出来てます。

あと、下部の色がついたラインと、白い枠内のボタン(分かりづらいですが)も

<div class=”card”>
<div class=”card-heading bg-primary”>Widget 2</div>
<div class=”card-body”>
<a href=”#” class=”btn btn-primary”>do something</a>
</div>
</div>

という簡単なコードで構成されてます。

ちなみに、今回参考にした動画は少し古いものなので、”panel”という関数?が使われていますが、“panel”から”card”に変更してます。

というか、バージョンアップによって、似通った機能である2つのうち”panel”が廃止になったみたいです。

詳しく勉強したい方はBootstrapって検索したら、youtube動画とか見つかるはずです。

まだ勉強し始めなので、詳しくは書けませんが、このくらいで。

ただ本当に簡単に書けるので、勉強しやすいというのと合わせて、誰にでも出来そうで、需要があるのかどうか不安です。

まぁみんな忙しいですから、面倒なことは検索しないで、誰かに任せちゃうってこともあるかもしれないし。

あくまで、あくまでもHTML、CSSは基礎の基礎で、ボク自身もここは通過点としか思ってないので。

いえーい、簡単だーとか調子に乗ってる暇はないね、うん。


%d人のブロガーが「いいね」をつけました。