図解たっぷりBootstrap5入門

レッスン内容

• Bootstrap5の導入方法を図解たっぷりで解説する

  Bootstrapは指定のコードを組み込むだけで簡単に導入できます。Bootstrap5の導入方法を解説します。
• Bootstrap5のグリッドを理解する【図解たっぷりBootstrap5入門】

  Bootstrapを使用するとPCやスマホなど使用する機器に左右されず整ったWebページを作ることができます。 基本的なBootstrapの使い方や、考え方を解説しています。ポイントを押さえれば十分に使いこなせますよ。
• Bootstrap5のブレークポイントを理解して実装する【図解たっぷりBootstrap5入門】

  ユーザーはWebサイトを閲覧する時、大きなPCで見ていたり、iPadなどのタブレットだったり、スマートフォンだったりと様々です。そんな時に役立つのがこのブレークポイントを使用したレイアウトになります。どんなユーザー環境で閲覧されても適切なレイアウトを実現します。
• Bootstrap5のレイアウト方法をマスターしよう【図解たっぷりBootstrap5入門】

  Bootstrapを使用すればクオリティの高いWebページの作成が可能です。Bootstrapのレイアウト方法をたっぷりの図解つきで簡単に説明します。各パーツ別に実装方法を紹介していますので、少し慣れてきたら本レッスンで紹介するComponentや、独自CSSクラスを組み合わせて使用してみてください。デザイン性がぐっと高まります。
• Bootstrap5のナビゲーションを理解する【図解たっぷりBootstrap5入門】

  Botstrapを使えば、ナビゲーションバーやドロップダウンリストなども簡単に組み込むことができます。Bootstrapのナビゲーションをたっぷりの図解つきで、できるだけ簡単に説明します。かんたんなコードを書くだけでプロ並みのナビゲーションを作成することができます
• Bootstrapのユーティリティを理解する【図解たっぷりBootstrap入門】

  Bootstrapのユーティリティを使うと、CSSを利用しなくても文字サイズやページレイアウトを簡単に整えることができます。かんたんなコードを書くだけでプロ並みのユーティリティを作成する方法を、たっぷりの図解つきで、できるだけ簡単に説明します。
• ［よくある質問］d-flexとrowの違いって？

  Bootstrapでよくご質問頂く「d-flex」と「row」クラスの違い、使い分けについて解説します。
• Bootstrap5のフォームを理解する【図解たっぷりBootstrap5入門】

  Bootstrapを使えば、フォームを簡単に組み込むことができます。
  フォームタグを書くだけでは味気ないデザインですが、Bootstrapで書くととてもきれいでバリエーションも豊富ですよ。Bootstrapのフォームをたっぷりの図解つきで、できるだけ簡単に説明します。
• Bootstrap5のボタンを理解する【図解たっぷりBootstrap5入門】

  Bootstraには見た目もとても美しく、Call to Actionにも即役立つボタンが用意されています。
• Bootstrap5のカルーセルを理解する【図解たっぷりBootstrap5入門】

  トップページで画像が変わっていくところありますよね。あれをカルーセルと言うのですが、Bootstrapならかんたんなコードを書くだけ作成することが出来ます。Bootstrapのカルーセルをたっぷり図解つきで簡単に説明します。
• Bootstrap5のタイポグラフィを理解する【図解たっぷりBootstrap5入門】

  Bootstrapの仕様に従って文字を設定するだけで美しい文字組み（タイポグラフィ）が実現できます。Bootstrapのタイポグラフィをたっぷりの図解つきで、できるだけ簡単に説明します。かんたんなコードを書くだけでプロ並みのタイポグラフィを作成することができます。
• Bootstapアイコンの使用方法を理解する【図解たっぷりBootstrap5入門】

  Bootstrapのサイトにアイコンを加える方法をたっぷりの図解つきで、できるだけ簡単に説明します。アイコンを使うとページがぐっとしまります。何か足りなかったようなものを埋めてくれるような感じですね。プロっぽさも作ってくれるのでアイコンはとても大切です。
• [ 補足 ] 外部Webアイコンサービス（fontawesome）の使用方法

  Bootstrapアイコン以外にも、Web上には手軽にアイコンを表示することができるサービスがいくつもあります。今回は、そのうちの１つ「Font Awesome」の登録方法から使い方までを紹介します。
• Bootstrap5のアラートを理解して実装する【図解たっぷりBootstrap5入門】

  Webサイト、特にWebアプリケーションではユーザーに情報を与えることは重要です。例えば「ログインに成功しました」などの情報がないとユーザーは困ってしまいますよね。そんなときに役立つ、Bootstrapのアラートの使い方をたっぷりの図解つきで簡単に説明します。
• Bootstrap5のモーダルを理解して実装する【図解たっぷりBootstrap5入門】

  ポップアップが表示されるモーダル機能を取り入れて、ページのクオリティをアップさせてみましょう。Bootstrapのモーダルをたっぷりの図解つきで簡単に説明します。どんなユーザー環境で閲覧されても適切なレイアウトを実現します。
• 総合実習：LPを作ってみよう【図解たっぷりBootstrap5入門】

  Bootstrap5を使ったランディングページ（LP）の制作課題です。 本講座のおさらいとして作ってみて下さい。 完成後に『Bootstrap5のレイアウト方法をマスターしよう』で作ったページと見比べてみると、コーディングのレベルアップが感じられますよ。
もっと見る