図解たっぷりbootstrap5入門

カリキュラム

1. 1Bootstrap5の導入方法を図解たっぷりで解説するBootstrapは指定のコードを組み込むだけで簡単に導入できます。Bootstrap5の導入方法を解説します。
2. 2Bootstrap5のグリッドを理解する【図解たっぷりBootstrap5入門】Bootstrapを使用するとPCやスマホなど使用する機器に左右されず整ったWebページを作ることができます。 基本的なBootstrapの使い方や、考え方を解説しています。ポイントを押さえれば十分に使いこなせますよ。
3. 3Bootstrap5のブレークポイントを理解して実装する【図解たっぷりBootstrap5入門】ユーザーはWebサイトを閲覧する時、大きなPCで見ていたり、iPadなどのタブレットだったり、スマートフォンだったりと様々です。そんな時に役立つのがこのブレークポイントを使用したレイアウトになります。どんなユーザー環境で閲覧されても適...
4. 4Bootstrap5のレイアウト方法をマスターしよう【図解たっぷりBootstrap5入門】Bootstrapを使用すればクオリティの高いWebページの作成が可能です。Bootstrapのレイアウト方法をたっぷりの図解つきで簡単に説明します。各パーツ別に実装方法を紹介していますので、少し慣れてきたら本レッスンで紹介するCom...
5. 5Bootstrap5のナビゲーションを理解する【図解たっぷりBootstrap5入門】Botstrapを使えば、ナビゲーションバーやドロップダウンリストなども簡単に組み込むことができます。Bootstrapのナビゲーションをたっぷりの図解つきで、できるだけ簡単に説明します。かんたんなコードを書くだけでプロ並みのナビゲー...
6. 6Bootstrapのユーティリティを理解する【図解たっぷりBootstrap入門】Bootstrapのユーティリティを使うと、CSSを利用しなくても文字サイズやページレイアウトを簡単に整えることができます。かんたんなコードを書くだけでプロ並みのユーティリティを作成する方法を、たっぷりの図解つきで、できるだけ簡単に説...
7. 7［よくある質問］d-flexとrowの違いって？Bootstrapでよくご質問頂く「d-flex」と「row」クラスの違い、使い分けについて解説します。
8. 8Bootstrap5のフォームを理解する【図解たっぷりBootstrap5入門】Bootstrapを使えば、フォームを簡単に組み込むことができます。フォームタグを書くだけでは味気ないデザインですが、Bootstrapで書くととてもきれいでバリエーションも豊富ですよ。Bootstrapのフォームをたっぷりの図解つき...
9. 9Bootstrap5のボタンを理解する【図解たっぷりBootstrap5入門】Bootstraには見た目もとても美しく、Call to Actionにも即役立つボタンが用意されています。
10. 10Bootstrap5のカルーセルを理解する【図解たっぷりBootstrap5入門】トップページで画像が変わっていくところありますよね。あれをカルーセルと言うのですが、Bootstrapならかんたんなコードを書くだけ作成することが出来ます。Bootstrapのカルーセルをたっぷり図解つきで簡単に説明します。
11. 11Bootstrap5のタイポグラフィを理解する【図解たっぷりBootstrap5入門】Bootstrapの仕様に従って文字を設定するだけで美しい文字組み（タイポグラフィ）が実現できます。Bootstrapのタイポグラフィをたっぷりの図解つきで、できるだけ簡単に説明します。かんたんなコードを書くだけでプロ並みのタイポグラ...
12. 12Bootstapアイコンの使用方法を理解する【図解たっぷりBootstrap5入門】Bootstrapのサイトにアイコンを加える方法をたっぷりの図解つきで、できるだけ簡単に説明します。アイコンを使うとページがぐっとしまります。何か足りなかったようなものを埋めてくれるような感じですね。プロっぽさも作ってくれるのでアイコ...
13. 13[ 補足 ] 外部Webアイコンサービス（fontawesome）の使用方法Bootstrapアイコン以外にも、Web上には手軽にアイコンを表示することができるサービスがいくつもあります。今回は、そのうちの１つ「Font Awesome」の登録方法から使い方までを紹介します。
14. 14Bootstrap5のアラートを理解して実装する【図解たっぷりBootstrap5入門】Webサイト、特にWebアプリケーションではユーザーに情報を与えることは重要です。例えば「ログインに成功しました」などの情報がないとユーザーは困ってしまいますよね。そんなときに役立つ、Bootstrapのアラートの使い方をたっぷりの図...
15. 15Bootstrap5のモーダルを理解して実装する【図解たっぷりBootstrap5入門】ポップアップが表示されるモーダル機能を取り入れて、ページのクオリティをアップさせてみましょう。Bootstrapのモーダルをたっぷりの図解つきで簡単に説明します。どんなユーザー環境で閲覧されても適切なレイアウトを実現します。
16. 16総合実習：LPを作ってみよう【図解たっぷりBootstrap5入門】Bootstrap5を使ったランディングページ（LP）の制作課題です。 本講座のおさらいとして作ってみて下さい。 完成後に『Bootstrap5のレイアウト方法をマスターしよう』で作ったページと見比べてみると、コーディングのレベ...