Bootstrap世代とはどんな前提を持っているか

Bootstrapで育ってきた開発者は、
無意識のうちに、いくつかの前提を共有していることが多いです。

• レイアウトはHTML構造で把握する
• ブレークポイントはクラス名で判断する
• CSSは「調整」に使うもの

たとえば、BootstrapのグリッドはHTMLを見るだけで、
「どの幅で何カラムか」がすぐ分かる、という感覚はありませんか。

<div class="row g-3">
  <div class="col-12 col-md-6">
    <div class="p-3 border rounded">A</div>
  </div>
  <div class="col-12 col-md-6">
    <div class="p-3 border rounded">B</div>
  </div>
</div>

col-12 col-md-6 を見れば、
「スマホは1カラム、md以上で2カラム」と読めます。

これはスキルが低いという話ではなく、
実務で通用する共通言語を身につけてきた結果です。

モダンCSSが前提としている考え方

一方、CSS GridやTailwindなどのモダンCSSは、
別の前提で設計されています。

• レイアウトはCSS側で完結させる
• HTMLは意味構造に集中させる
• クラスは「役割」ではなく「状態」や「ルール」を表す

Gridの典型例だと、HTMLはかなりシンプルになります。

<div class="cards">
  <article class="card">A</article>
  <article class="card">B</article>
  <article class="card">C</article>
</div>

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
</style>

HTMLからは「3カラム」だと読み取れず、
レイアウトの意図はCSS側に寄ります。

Tailwindの場合は、意図がCSSファイルではなく「クラス列」に寄ります。

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="p-4 border rounded">A</div>
  <div class="p-4 border rounded">B</div>
  <div class="p-4 border rounded">C</div>
</div>

どちらも合理的ですが、
Bootstrap世代が慣れてきた思考とは、起点が違うと感じることはないでしょうか。

「書ける」と「判断できる」の間にある壁

多くの場合、つまずきは「書けない」ではなく、
判断が止まるタイミングで起きます。

たとえば、Bootstrapのユーティリティで揃えたいのか、
それともGridを導入してCSS側に責務を寄せたいのか。
ここが曖昧だと、コードが混ざりやすくなります。

<div class="row g-3">
  <div class="col-md-4">
    <div class="card p-3" style="display:grid; gap:12px;">
      <h3 class="h5 mb-0">タイトル</h3>
      <p class="mb-0">本文</p>
      <a class="btn btn-primary" href="#">CTA</a>
    </div>
  </div>
</div>

こういうコードを見ると、
「Bootstrapで組むのか？Gridで閉じるのか？どっちで直す？」
と迷いが発生しやすくなります。

これは知識不足というより、
これまで意識せずに済んでいた判断が、表に出てきた状態だと考えると整理しやすくなります。

生成AIがその壁をさらに見えにくくする

生成AIは、GridでもFlexboxでもTailwindでも、
見た目が成立するコードをすぐ出してくれます。

ただ、指示が曖昧なときほど、
前提が混ざった「それっぽい正解」が出やすくなります。

<!-- 生成AIが混ぜがちな例（Bootstrap + 独自CSS + Grid） -->
<div class="container my-4">
  <div class="row">
    <div class="col-md-6">
      <div class="feature-box d-grid p-3 shadow-sm">
        <h3 class="h5">機能A</h3>
        <p class="mb-0">説明文</p>
      </div>
    </div>
  </div>
</div>

見た目は崩れていなくても、
「どの思想で直すのか」を決めにくい状態になりがちです。

AIは「正しそうな答え」を出しますが、
「どの前提で選ばれたか」までは保証してくれません。
ここを人が拾い上げる必要があります。

Bootstrap世代がモダンCSSと向き合う整理軸

壁を越えるために必要なのは、
新しい構文を覚えることというより、判断の軸を持つことです。

たとえば、次の問いがあるだけで迷いが減ります。

• これは構造の話か、見た目の話か
• HTMLで意図を見せたいのか、CSSで閉じたいのか
• この判断は、誰が後から触るのか

「構造」と「見た目」を分けるイメージだと、こうです。

<!-- 構造（意味）をHTMLで表し、レイアウトはCSSで閉じる例 -->
<section class="features">
  <h2 class="features__title">特長</h2>
  <div class="features__list">
    <article class="feature">A</article>
    <article class="feature">B</article>
    <article class="feature">C</article>
  </div>
</section>

ここで「features__listはGridで閉じる」「featureは見た目だけ」など、
責務が分かれていると、修正時に手が止まりにくくなります。

Bootstrapで積み上げてきた「意図を構造で伝える感覚」は、
モダンCSSでも十分に活かせます。
ただ、その置き場所が変わっただけなのかもしれません。

まとめ｜壁の正体はスキルではなく前提

Bootstrap世代が感じるモダンCSSの壁は、
スキル不足ではないことがほとんどです。

それは、これまで共有されていた前提が変わったことによる違和感ではないでしょうか。

生成AIを使う時代だからこそ、
「何を書くか」よりも「どの前提で書くか」を、
人が意識的に選ぶ必要があります。

Bootstrapで積み上げてきた経験は、
モダンCSSでも確実に武器になります。

壁を越えるために必要なのは、
新しい技術ではなく、前提を言語化することなのかもしれません。