こんにちは、Ryuseiです！
今回も個人プロフィールサイト作りの備忘録として、学んだことをまとめていきます！
今回は Bootstrap を学習しました。
HTMLやCSSを自分で書くのも楽しいけど、Bootstrapを使うと簡単におしゃれなサイトが作れるし、レスポンシブ対応もラクにできる！
今回は、よく使うBootstrapのクラスや基本的な使い方をまとめてみたので、これから勉強する人にも役立てば嬉しいです！
💡 Bootstrapでよく使う便利なクラスまとめ
| クラス名（プロパティ） | 効果・内容 | 例（適用例） |
|---|---|---|
container / container-fluid | レイアウトの中央寄せ・幅制限 / 全幅 | <div class="container"> |
row / col | グリッドシステムの行・列でレイアウト分割 | <div class="row"><div class="col"> |
m-*, p-* | マージン（m）、パディング（p）の指定 | mt-3, p-2, mx-auto |
text-* | テキストの位置や色を制御 | text-center, text-danger |
bg-* | 背景色の設定 | bg-light, bg-primary |
d-* | 表示制御（block, flexなど） | d-none, d-flex |
flex-*, justify-*, align-* | フレックスボックスの方向・位置制御 | d-flex justify-content-center |
w-*, h-* | 幅・高さの割合指定 | w-50, h-100 |
btn, btn-* | ボタンのスタイル指定 | btn btn-primary |
form-control | 入力フォームのスタイル | <input class="form-control"> |
card, card-body | カードデザインの基本構造 | <div class="card"><div class="card-body"> |
alert alert-* | アラート表示 | alert alert-success |
navbar, navbar-* | ナビゲーションバーのレイアウトや色 | navbar navbar-dark bg-dark |
rounded, rounded-* | 角丸の設定 | rounded, rounded-circle |
shadow-* | シャドウ効果 | shadow, shadow-lg |
position-* | 配置の指定 | position-relative |
z-* | z-indexの設定 | z-3 |
overflow-* | 要素のはみ出し処理 | overflow-auto |
visually-hidden | 画面上は非表示、スクリーンリーダーで読み上げ | <span class="visually-hidden"> |
特に text-center で中央寄せ、d-flex と justify-content-between の組み合わせで左右配置、fixed-top をつけると 固定ヘッダー も簡単に作れるのが便利でした！
Bootstrapってすごい！
🌿 レスポンシブ対応の基本テク
lg,smなどをクラス名に追加して、画面サイズごとのスタイルを調整できる
例:col-lg-6は大きい画面で半分の幅order-*で要素の順番を変更できる
例:order-1,order-2で小要素の表示順を変更
- 自分で書いたCSSとBootstrapのスタイルって、どっちが優先されるの？
-
基本的には自作CSSが優先されます
セレクタの強さは、以下の順で強くなります：
id > class > 要素名
!importantを使うと強制的に優先度を上げられますが、乱用はNG（後で自分が困るので注意！
✍️ 学習の感想
HTMLやCSSを地道に書くのも大事だけど、Bootstrapをうまく活用すると「サクッと形にする」力がつくなと実感しました！
ただ、命名規則や親子関係を意識しないと、どの要素がどこにあるか分かりにくくなるので注意が必要だと感じました。
次回からはさらに詳しくレスポンシブ対応について学んでいきます。最近ではパソコンやタブレットよりもスマホでWeb検索をする人が圧倒的に多いのでしっかりと身につけていきたいと思います。
最後まで読んでいただきありがとうございました！
引き続き、個人プロフィールサイトの作成に挑戦していくので、また進捗を書いていきますね！