はじめに
「Adminartist」というサイトがあります。これ、実は私が8年前に作ったものです。
当時はBootstrapが出始めたばかりで、私も手探り状態。でも勢いで「テンプレートキット」として公開していました。
そして今年、久しぶりにこのサイトを開いてみたら…フッターが崩れてる。Adobe Fontsのリンクは切れてる。
ちょうど良いタイミング！これをポートフォリオサイトとして再活用したい！
そう思って最新化に取り組む中で、「あれ、Bootstrap、Flexbox、CSS Grid…結局何が違うの？」という疑問が湧いてきたので記録します。
この記事では、私のサイト再生プロジェクトを通じて、これらの技術の違いを初心者の方にもわかりやすく解説します。
8年前のコードを見てみる
まず、当時のHTMLの<head>部分を見てください：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Theme Adminartist | People Meet Heart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/prettyPhoto.css" />
<link rel="stylesheet" href="css/custom-style.css">
<link rel="stylesheet" href="css/style-ie.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->
<link rel="stylesheet" href="https://use.typekit.net/iny6pfu.css">
</head>特徴的なポイント：
- 5つものCSSファイル – ローカルにダウンロードして管理
- IE対応コード – 古いInternet Explorer用の特別処理
- bootstrap-responsive.css – レスポンシブ対応のための別ファイル
- Adobe Fonts（旧Typekit） – これが今回リンク切れになってた
2025年現在、何が変わった？
1. CDNの登場で激変した世界
CDNって何？
CDN（Content Delivery Network）は、簡単に言うと**「世界中にあるファイル置き場」**です。
昔の方法（私がやってたこと）：
- Bootstrapの公式サイトからファイルをダウンロード
cssフォルダに保存- HTMLで読み込む
<link rel="stylesheet" href="css/bootstrap.css">今の方法：
- リンク1行をコピー
- HTMLに貼り付ける
- 完了！
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">CDNのメリット：
- ✅ ファイルのダウンロード・管理が不要
- ✅ 世界中のサーバーから高速配信
- ✅ バージョン管理が簡単
- ✅ 自分のサーバー容量を節約
イメージで言うと：
- 昔 = 本を買って家に保管
- 今 = 図書館（CDN）にある本を借りる
これだけで、私の5つのCSSファイルが1行になりました。
2. IE対応が不要に
<!--[if lt IE 9]>
古いIE用のコード
<![endif]-->このコードはInternet Explorer用のため、今は完全に不要です。サポートも2022年に終了しています。
3. レスポンシブが標準化
bootstrap-responsive.cssという別ファイルを読み込んでいましたが、現在のBootstrap 5では標準で全部レスポンシブです。
Bootstrap、Flexbox、CSS Gridって何が違うの？
サイトを最新化する中で、「これらの技術、どう違うんだろう？」と疑問に思いました。
調べてわかったのは、それぞれ役割が違うということ。
関係性を一言で表すと
- Bootstrap
-
= 道具箱（Flexboxという技術を使って作られている）
- Flexbox
-
= 1列に並べる技術
- CSS Grid
-
= マス目で配置する技術
具体的に見ていきましょう
私のサイトは3カラムレイアウト（左サイドバー・メインコンテンツ・右サイドバー）です。
これを3つの方法で作るとこうなります：
1. Bootstrap（Flexboxを内部で使用）
<!-- wp:code -->
<pre class="wp-block-code"><code><div class="container">
<div class="row">
<div class="col-md-3">左サイドバー</div>
<div class="col-md-6">メインコンテンツ</div>
<div class="col-md-3">右サイドバー</div>
</div>
</div>
</code></pre>
<!-- /wp:code -->特徴（Bootstrap+Flexbox）
- クラス名を付けるだけ！
- 12分割のグリッドシステム（3+6+3=12）
- 初心者に優しい（目的や用途によるかも知れません）
2. 純粋なFlexbox
<div style="display: flex; gap: 20px;">
<div style="flex: 1;">左サイドバー</div>
<div style="flex: 2;">メインコンテンツ</div>
<div style="flex: 1;">右サイドバー</div>
</div>特徴（Flexboxのみ）
- Bootstrapより自由度が高い
- 1:2:1の比率を直接指定できる
- 1次元（横並び or 縦並び）が得意
3. CSS Grid
<div style="display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px;">
<div>左サイドバー</div>
<div>メインコンテンツ</div>
<div>右サイドバー</div>
</div>特徴（CSS Grid)
- より複雑なレイアウトに対応
- 2次元（縦横同時）が得意
- モダンな設計
実はBootstrapの中身はFlexbox！
重要なポイント：Bootstrap 4以降は内部でFlexboxを使っています。
Bootstrap 3（私が使ってた時代）はfloatベースでしたが、Bootstrap 4/5は完全にFlexboxベースに変わりました。
つまり：
Bootstrap = Flexboxを簡単に使えるようにしたツールだから「Bootstrapとは関係ない」わけではなく、Bootstrapの中にFlexboxが入っているんです。
実際の最新化作業
Before（8年前）
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/prettyPhoto.css" />
<link rel="stylesheet" href="css/custom-style.css">
<link rel="stylesheet" href="css/style-ie.css">
<!--[if lt IE 9]>...<![endif]-->
</head>After（2025年）
<head>
<!-- Bootstrap 5（CDN） -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- カスタムスタイル（必要なら） -->
<link rel="stylesheet" href="css/custom-style.css">
</head>変更点：
- 5つのファイル → 1つのCDNリンク
- IE対応コード削除
- Adobe Fontsのリンク切れ対応（削除 or 新しいプロジェクト作成）
バージョンアップに伴いクラス名が変わっている
Bootstrap 3 → 5で一部のクラス名が変更されています：
| Bootstrap 3 | Bootstrap 5 |
|---|---|
btn-default | btn-secondary |
hidden-xs | d-none d-sm-block |
pull-right | float-end |
既存のテンプレートを使う場合は、一部調整が必要です。
どれを選ぶべき？初心者へのアドバイス
こんな人にはBootstrapがおすすめ
- Web制作を始めたばかり
- 素早くサイトを作りたい
- レスポンシブ対応を簡単にしたい
こんな人にはFlexbox
- もっと自由にレイアウトしたい
- Bootstrapのクラス名に縛られたくない
- シンプルな1列・2列配置が多い
こんな人にはCSS Grid
- 複雑なレイアウトを作りたい
- 雑誌のような凝ったデザインにしたい
- 縦横を同時にコントロールしたい
結論： 最初はBootstrapで慣れて、必要に応じてFlexboxやCSS Gridを組み合わせるのがベストです。
なぜなら、多くの会社でBootstrapは使用されていて、量産し易くてコスパが良いのです。
実際、Bootstrapを使いながら一部だけFlexboxで細かく調整する、というハイブリッドな使い方もできます。
これからポートフォリオサイトとして
現在、このAdminartistを再び動かしています：
👉 https://yukyco-design.netlify.app/
8年前に手探りで作ったサイトが、2025年の生成AI技術でより良くなっていくのは楽しいですね…！
当時は公開して配布までしていたテンプレート。今度こそ、本当に使えるポートフォリオサイトとして完成させたいと思います。
まとめ
- CDNの登場でファイル管理が劇的に楽になった
- BootstrapはFlexboxを内包している（道具箱と技術の関係）
- Flexboxは1次元、CSS Gridは2次元のレイアウト技術
- 初心者はBootstrapから始めて、徐々に他の技術を学ぶのがおすすめ
- 古いコードも、基本を理解すれば最新化できる
Web技術は常に進化していますが、基本的な考え方は変わっていないことがわかり安心。
バックアップとして大事に保存していたサイトが、新しい知識を加えることで生まれ変わります。
もしあなたも昔作ったサイトがあるなら、ぜひ開いてみてください。きっと新しい発見があります。
最後までお読み下さりありがとうございました。
コメント