Wakizaka2018/10/302019/6/17皆さんは、Bootstrapを使ったことがありますか?WEBアプリ・WEBサービスなどの画面を作るときに、Bootstrapの使い方を知っているととても便利です。まとめBootstrapとはまず、Bootstrapについて簡単に解説します。Bootstrapは、WEBサイトやWEBページを効率よく開発するためのWEBフレームワークです。(WEBフレームワークって何?という方は、先にこちらの記事をご覧ください。)HTML・CSS・JavaScriptから構成される、最も有名なWEBフレームワークですね。WEBページでよく使われるフォーム・ボタン・メニューなどの部品がテンプレートとして用意されています。レスポンシブ対応がされているため、Bootstrapを使うだけでパソコン、iPad、スマホなど画面サイズに自動対応した画面を作ることができます。次に、BootstrapでCSSを使って画面を作る方法について解説します。事前準備:Bootstrapを読み込んだHTMLファイルを作成するまず、事前準備として次のような手順で、Bootstrapを読み込んだHTMLファイルを作ります。作り方は次のとおりです。「.html」の拡張子でファイル保存これでBootstrap4を使ったHTMLファイルができました。ここまで準備できれば、Bootstrapで画面を作る方法を覚えるだけです!それぞれ詳しく解説しますね。グリッドシステムまずは、グリッドシステムの使い方についてです。Bootstrapはグリッドシステムといわれる、画面を12分割してサイズを決める仕組みがあります。グリッドシステムのイメージ:divタグのcontainerクラス、divタグのrowクラスのあとに、col-2、col-sm-7、col-md-12のように、数字を直接指定して横幅のサイズを指定できます。「col-XX」「col-sm-XX」等の違いは以下のとおりです。:最大幅1140px「col-XX」形式を使ったサンプルを用意しました。crossorigin="anonymous"></script></body></html>実行結果:1行目のデータは3列でそれぞれ「col-4」、2行目のデータは6列でそれぞれ「col-2」をclassに指定し、全体で12分割されるように設定しています。次に、ナビゲーションバーの作り方について解説します。ナビゲーションバーはclassに「navbar」「navbar-expand-〇〇」「navbar-色名」「bg-色名」を指定して、次のように作ります。mb-3">」でサイズをsm(タブレット用サイズ)、色にdark(黒色)を指定して、ナビゲーションバーを作っています。このように、簡単にナビゲーションバーを使うことができます。ちなみに、ナビゲーションバーは次のように色を変えたり、検索ボックスを用意することもできます。2019年5月9日フォームつぎに、フォームの作り方について解説します。フォームを使えば、次のような画面を簡単に作ることができます。2019年5月28日ボタン次に、ボタンの作り方について解説します。ボタンは次のように書くことで、作ることができます。value="ボタン名"/>サンプルコードを用意しました。</body></html>実行画面:ボタンの色の種類・サイズを変更する方法を含め、ボタンの使い方については以下で詳しく解説しています。2019年7月7日まとめ今回は、BootstrapでCSSを使って画面を作る方法について解説しました。おしゃれなデザインの画面を作ることができます。使い方も簡単なので、ぜひ使ってみてくださいね!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。Wakizaka新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。インフラ、製造、テスト、運用保守など、様々な経験あり。侍ブログ編集部として、これまでに200記事以上の記事を執筆。現在はフリーランスエンジニア兼テックライターとして活動中。