Bootstrap5のテキスト整列を完全解説！初心者でもわかる.text-start/.text-center/.text-endのレスポンシブ指定
生徒
「Bootstrapで文字を中央にそろえたいんですが、どうやるんですか？」
先生
「Bootstrapには、文字の位置をそろえるための便利なクラスが用意されています。」
生徒
「スマホとパソコンで、文字の位置を変えることもできますか？」
先生
「できます。画面サイズごとに指定する方法も含めて、順番に見ていきましょう。」
1. テキスト整列とは？Bootstrapでできること
テキスト整列とは、文字を左・中央・右のどこに配置するかを決めることです。Bootstrap5では、難しいCSSを書かなくても、クラスを指定するだけで文字の位置を簡単に整えられます。プログラミング未経験の方でも、決まった名前を付けるだけで使えるのが特徴です。
2. .text-startで文字を左寄せにする方法
.text-startは、文字を左側にそろえるためのBootstrapクラスです。日本語の文章では、基本的に左寄せが読みやすいため、よく使われます。特別な設定は不要で、HTMLタグにそのまま書くだけで反映されます。
<p class="text-start">この文章は左寄せで表示されます。</p>
3. .text-centerで文字を中央にそろえる方法
.text-centerは、文字を中央に配置するためのクラスです。タイトルや見出し、強調したいメッセージなどでよく使われます。中央に文字が集まることで、視線を引き付ける効果があります。
<h3 class="text-center">中央に表示される見出し</h3>
<p class="text-center">この文章は中央揃えです。</p>
4. .text-endで文字を右寄せにする方法
.text-endは、文字を右側にそろえるためのクラスです。日付や補足情報、署名など、メインではない情報を配置するときによく使われます。右寄せにすることで、文章の役割を視覚的に分けることができます。
<p class="text-end">2026年1月23日</p>
<p class="text-end">管理者より</p>
5. レスポンシブ指定とは？画面サイズで変える考え方
レスポンシブ指定とは、画面の大きさに応じて表示を切り替えることです。Bootstrap5では、スマートフォン・タブレット・パソコンなど、使う機器ごとに文字の位置を変えられます。これにより、小さい画面では中央、大きい画面では左寄せといった調整が可能になります。
6. 画面サイズごとの.text-center指定の例
Bootstrapでは、smやmdといった決まった区切りがあります。例えば、スマホでは中央、パソコンでは左寄せにしたい場合は、クラスを組み合わせて指定します。難しい計算は不要で、名前を覚えるだけで使えます。
<p class="text-center text-md-start">
スマホでは中央、パソコンでは左寄せになります。
</p>
7. 複数のテキスト整列を組み合わせる注意点
テキスト整列のクラスは、後ろに書いた指定が優先されます。そのため、どの画面サイズでどう表示したいのかを意識して順番を考えることが大切です。初心者のうちは、スマホとパソコンの2段階だけを意識すると混乱しにくくなります。
8. 実際のWebページでの使われ方イメージ
実際のWebサイトでは、見出しは中央、本文は左寄せ、補足情報は右寄せといった使い分けがよく行われます。Bootstrap5の.text-start、.text-center、.text-endを使うことで、CSSを深く理解していなくても、読みやすく整ったページを作ることができます。
<h2 class="text-center">サービスのご案内</h2>
<p class="text-start">このサービスは初心者向けに作られています。</p>
<p class="text-end">※画像はイメージです</p>
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
