ミニマルなCSSフレームワークMilligramの基本から実践的な使い方まで、グリッドシステム、レスポンシブデザイン、カスタマイズ方法、そして実装例を含む包括的なガイド

1. Milligramの概要と特徴

Milligramは最小限のスタイル設定を提供する、非常に軽量なCSSフレームワークです。たった2kB（gzip圧縮後）というサイズながら、モダンなWebサイト構築に必要な基本的なスタイルを提供します。

Milligramの主な特徴

軽量: たった2kB（gzip圧縮後）のサイズで、高速なロードと低いオーバーヘッドを実現
モダン: CSS Flexible Box Layout Moduleを採用したグリッドシステム
シンプル: 過剰な装飾を排除し、必要最小限のスタイルのみを提供
レスポンシブ: モバイルファーストの設計思想に基づいたレスポンシブレイアウト
クリーン: 見やすく、保守性の高いスタイリング

Note: Milligramは「UIフレームワーク」ではなく、スタイルのスタート地点として機能するよう設計されています。複雑なUIコンポーネントよりも、シンプルで拡張性のあるベースを提供することに重点を置いています。

Bootstrapなどの大型フレームワークとの違い

BootstrapやFoundationなどの大型フレームワークと比較すると、Milligramは以下の点で異なります：

比較項目	Milligram	Bootstrap
ファイルサイズ	~2kB (gzipped)	~60kB (gzipped)
コンポーネント数	最小限 (基本的なものだけ)	多数 (アコーディオン、カルーセルなど)
カスタマイズ性	高い (最小限のスタイルが基盤)	中程度 (上書きが必要な場合がある)
学習曲線	低い (シンプルな構造)	やや高い (多くのクラスとコンポーネント)
グリッドシステム	FlexBoxベース	FlexBox/グリッドベース (バージョンによる)

2. インストールと基本的な使い方

インストール方法

Milligramには複数のインストール方法があります。プロジェクトのニーズに合わせて最適な方法を選びましょう。

CDNを使用する方法

最も簡単な方法は、HTMLファイルのhead内にCDNリンクを追加することです。Milligramが正しく動作するためには、normalize.cssも一緒に読み込む必要があります。

<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">

<!-- CSS Reset (normalize.css) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/milligram@1.4.1/dist/milligram.min.css">

パッケージマネージャーを使用する方法

npmを使用する場合:

$ npm install milligram

Yarnを使用する場合:

$ yarn add milligram

Bowerを使用する場合:

$ bower install milligram

ダウンロードしてローカルに配置する方法

公式サイトからダウンロードしたファイルを解凍すると、次のようなファイル構成になっています：

milligram/
 dist/
    milligram.css
    milligram.min.css
 example.html
 license
 readme.md

基本的な使い方

Milligramは最小限のHTMLマークアップで美しいスタイルを提供します。以下は基本的なHTML構造の例です：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Milligramサンプル</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/milligram@1.4.1/dist/milligram.min.css">
</head>
<body>
    <div class="container">
        <h1>Milligramを使ったページ</h1>
        <p>シンプルで美しいWebページを簡単に作成できます。</p>
        
        <div class="row">
            <div class="column">
                <h2>第1カラム</h2>
                <p>これはFlexboxベースのグリッドシステムを使用したカラムです。</p>
            </div>
            <div class="column">
                <h2>第2カラム</h2>
                <p>Milligramはレスポンシブなデザインをサポートしています。</p>
            </div>
        </div>
        
        <button>標準ボタン</button>
        <button class="button button-outline">アウトラインボタン</button>
    </div>
</body>
</html>

基本的なMilligramページの表示例

Milligramを使ったページ

シンプルで美しいWebページを簡単に作成できます。

第1カラム

これはFlexboxベースのグリッドシステムを使用したカラムです。

第2カラム

Milligramはレスポンシブなデザインをサポートしています。

3. グリッドシステムの活用

Milligramのグリッドシステムは、CSS Flexible Box Layout Module（FlexBox）を使用しており、レスポンシブで柔軟なレイアウトを簡単に作成できます。

グリッドシステムの基本

Milligramのグリッドシステムは次のような特徴を持っています：

最大幅は112.0rem（1120px）で、小さい画面サイズでは自動的に縮小する流動的なシステム
CSSの1行を変更するだけで最大幅を変更でき、それに応じてすべての列が自動的にリサイズされる
CSS Flexible Box Layout Moduleを使用しているため、シンプルで機能的なコードを実現

グリッドの基本的な使い方

Milligramのグリッドシステムはcontainer, row, columnクラスを組み合わせて使用します。

<div class="container">
    <div class="row">
        <div class="column">カラム1</div>
        <div class="column">カラム2</div>
        <div class="column">カラム3</div>
    </div>
</div>

カラム1

カラム2

カラム3

行に配置したいカラム数を追加するだけで、利用可能なスペースが均等に分配されます。3つのカラムが必要なら3つ追加し、5つ必要なら5つ追加します。カラム数に制限はありませんが、グリッドシステムのデザインパターンに従うことをお勧めします。

カラム幅の指定

特定の列幅を指定したい場合は、column-{size}クラスを使用します。サイズは次のように10%単位で指定できます：

column-10: 10%幅
column-20: 20%幅
column-25: 25%幅
column-33: 33.3%幅
column-40: 40%幅
column-50: 50%幅
column-60: 60%幅
column-67: 66.7%幅
column-75: 75%幅
column-80: 80%幅
column-90: 90%幅
column-100: 100%幅（フル幅）

<div class="row">
    <div class="column column-25">25%</div>
    <div class="column column-50">50%</div>
    <div class="column column-25">25%</div>
</div>

25%

50%

25%

カラムのオフセット

カラムをオフセット（ずらす）するには、column-offset-{size}クラスを使用します。

<div class="row">
    <div class="column column-50 column-offset-25">50% (25%オフセット)</div>
</div>

50% (25%オフセット)

ネストしたグリッド

グリッドはネストすることもできます。カラム内に新しい行とカラムを配置するだけです。

<div class="row">
    <div class="column">
        親カラム
        <div class="row">
            <div class="column">ネストされたカラム1</div>
            <div class="column">ネストされたカラム2</div>
        </div>
    </div>
    <div class="column">親カラム2</div>
</div>

親カラム1

ネストされたカラム1

ネストされたカラム2

親カラム2

4. コンポーネントの使用方法

Milligramは様々なコンポーネントを提供しており、それぞれ最小限のHTMLマークアップで美しく機能的なUIを作成できます。

4.1 タイポグラフィ

MilligramはGoogle Fontsから提供されるRobotoフォントを使用します。フォントサイズの基準は1.6rem（16px）、行間は1.6（24px）となっています。remは「root em」の略で、HTML要素のフォントサイズに対する相対的な値です。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

<p>通常のテキスト段落は1.6rem (16px)のサイズで、行間は1.6 (24px)です。</p>

<p><a href="#">リンクテキスト</a></p>

<p><em>強調テキスト</em></p>

<p><strong>強い強調テキスト</strong></p>

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

通常のテキスト段落は1.6rem (16px)のサイズで、行間は1.6 (24px)です。

リンクテキスト

強調テキスト

強い強調テキスト

4.2 ボタン

Milligramには3つの基本的なボタンスタイルがあります：

button要素: デフォルトでフラットなカラー
.button-outlineクラス: シンプルな枠線のみ
.button-clearクラス: 完全に透明

<!-- デフォルトボタン -->
<button>デフォルトボタン</button>

<!-- アウトラインボタン -->
<button class="button button-outline">アウトラインボタン</button>

<!-- クリアボタン -->
<button class="button button-clear">クリアボタン</button>

<!-- アンカー要素にもボタンスタイルを適用可能 -->
<a class="button" href="#">リンクボタン</a>

リンクボタン

4.3 フォーム

Milligramはシンプルで美しいフォームスタイルを提供します。追加のクラスを指定せずに、HTML標準の入力フィールドを使用するだけで適切にスタイル設定されます。

<form>
    <fieldset>
        <label for="nameField">名前</label>
        <input type="text" id="nameField" placeholder="山田太郎">
        
        <label for="emailField">メールアドレス</label>
        <input type="email" id="emailField" placeholder="example@domain.com">
        
        <label for="commentField">メッセージ</label>
        <textarea id="commentField" placeholder="ここにメッセージを入力してください..."></textarea>
        
        <div class="row">
            <div class="column">
                <input type="checkbox" id="confirmField">
                <label class="label-inline" for="confirmField">利用規約に同意します</label>
            </div>
        </div>
        
        <input class="button-primary" type="submit" value="送信">
    </fieldset>
</form>

セレクトボックス

<label for="selectExample">選択肢</label>
<select id="selectExample">
    <option value="Option 1">オプション1</option>
    <option value="Option 2">オプション2</option>
    <option value="Option 3">オプション3</option>
</select>

選択肢

ラジオボタン

<div class="row">
    <div class="column">
        <input type="radio" id="radioOne" name="radio" checked>
        <label class="label-inline" for="radioOne">ラジオ1</label>
    </div>
    <div class="column">
        <input type="radio" id="radioTwo" name="radio">
        <label class="label-inline" for="radioTwo">ラジオ2</label>
    </div>
</div>

ラジオ1

ラジオ2

4.4 テーブル

Milligramはテーブル要素に対してもシンプルで読みやすいスタイルを提供します。theadとtbodyを使用して適切なフォーマットを行うことを推奨しています。

<table>
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>職業</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>山田太郎</td>
            <td>28</td>
            <td>Webデザイナー</td>
        </tr>
        <tr>
            <td>佐藤花子</td>
            <td>32</td>
            <td>プログラマー</td>
        </tr>
        <tr>
            <td>鈴木一郎</td>
            <td>45</td>
            <td>マーケター</td>
        </tr>
    </tbody>
</table>

名前	年齢	職業
山田太郎	28	Webデザイナー
佐藤花子	32	プログラマー
鈴木一郎	45	マーケター

4.5 リスト

Milligramは3種類のリストをサポートしています：

順序なしリスト（ul）：アウトライン円でマークされる
順序付きリスト（ol）：数字でマークされる
説明リスト（dl）：用語とその説明を対にして表示

<!-- 順序なしリスト -->
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<!-- 順序付きリスト -->
<ol>
    <li>最初の項目</li>
    <li>2番目の項目</li>
    <li>3番目の項目</li>
</ol>

<!-- 説明リスト -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

順序なしリスト

項目1
項目2
項目3

順序付きリスト

最初の項目
2番目の項目
3番目の項目

説明リスト

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

4.6 コード

Milligramはコードブロックのスタイリングもサポートしています。インラインコードには<code>タグを、ブロックレベルのコードには<pre>タグを使用します。

<!-- インラインコード -->
<p>CSS変数を使用するには<code>var(--primary-color)</code>のように記述します。</p>

<!-- コードブロック -->
<pre><code>.container {
  max-width: 112.0rem;
  margin: 0 auto;
  padding: 0 2.0rem;
  position: relative;
  width: 100%;
}</code></pre>

CSS変数を使用するにはvar(--primary-color)のように記述します。

.container {
  max-width: 112.0rem;
  margin: 0 auto;
  padding: 0 2.0rem;
  position: relative;
  width: 100%;
}

5. レスポンシブデザインの実装

Milligramはモバイルファースト設計を採用しており、レスポンシブデザインを簡単に実装できます。

モバイルファースト設計

モバイルファーストとは、スマートフォンやタブレットなどのモバイルデバイスの開発を優先する設計戦略です。メディアクエリの外側のすべてのスタイルはすべてのデバイスに適用され、大きな画面サイズには拡張用のスタイルをメディアクエリで追加します。これにより、小さなデバイスが大量の未使用CSSを解析する必要がなくなります。

Milligramのブレークポイント

Milligramは次のようなブレークポイントを使用しています：

モバイルより大きい画面: 40.0rem (640px)
タブレットより大きい画面: 80.0rem (1280px)
デスクトップより大きい画面: 120.0rem (1920px)

/* モバイルファーストのメディアクエリ */

/* ベーススタイル - すべてのデバイスに適用 */
{ ... }

/* モバイルより大きい画面 */
@media (min-width: 40.0rem) { ... }

/* タブレットより大きい画面 */
@media (min-width: 80.0rem) { ... }

/* デスクトップより大きい画面 */
@media (min-width: 120.0rem) { ... }

レスポンシブなグリッドの例

モバイルではカラムが縦に積み重なり、大きな画面では横に並ぶレスポンシブなレイアウトを作成できます。

<div class="row">
    <div class="column">1つ目の列（小さな画面では全幅）</div>
    <div class="column">2つ目の列（小さな画面では全幅）</div>
    <div class="column">3つ目の列（小さな画面では全幅）</div>
</div>

画面サイズを変更すると、この要素の背景色が変わります。
モバイル: グレー / タブレット: 青 / デスクトップ: 緑

1つ目の列（小さな画面では全幅）

2つ目の列（小さな画面では全幅）

3つ目の列（小さな画面では全幅）

特定のブレークポイントでの列幅の変更

列幅を特定のブレークポイントで変更するには、独自のCSSを追加する必要があります。

/* スマホでは1列、タブレット以上では3列のレイアウト */
.my-responsive-column {
    width: 100%;
}

@media (min-width: 40.0rem) {
    .my-responsive-column {
        width: 33.3333%;
    }
}

6. カスタマイズと拡張

Milligramは最小限のスタイルを提供するため、カスタマイズや拡張が容易です。

カラーカスタマイズ

デフォルトのカラースキームを変更するには、CSSの継承を利用してオーバーライドします。

/* Milligramのカラーをオーバーライド */
:root {
    --milligram-color-primary: #1e88e5;  /* プライマリカラーの変更 */
    --milligram-color-secondary: #26a69a;  /* セカンダリカラーの変更 */
    --milligram-color-dark: #333;  /* ダークカラーの変更 */
}

/* または個別要素のスタイルをオーバーライド */
a, .button.button-outline {
    color: #1e88e5;
}

.button {
    border-color: #1e88e5;
    background-color: #1e88e5;
}

.button.button-outline:focus, .button.button-outline:hover {
    border-color: #1e88e5;
    color: #1e88e5;
}

/* フォームフィールドのカスタマイズ */
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
    border-color: #1e88e5;
}

ボタンのカスタマイズ例

ボタンサイズや色を変更する例です：

/* ボタンサイズのバリエーション */
.button-small {
    font-size: 0.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1.5rem;
}

.button-large {
    font-size: 1.4rem;
    height: 4.5rem;
    line-height: 4.5rem;
    padding: 0 2rem;
}

/* ボタンカラーのバリエーション */
.button-success {
    background-color: #4caf50;
    border-color: #4caf50;
}

.button-success.button-outline {
    color: #4caf50;
}

.button-danger {
    background-color: #f44336;
    border-color: #f44336;
}

.button-danger.button-outline {
    color: #f44336;
}

グリッドシステムの拡張

より柔軟なグリッドシステムが必要な場合は、独自のグリッドクラスを追加できます。

/* 特定のブレークポイント用の列幅クラス */
@media (min-width: 40.0rem) {
    .column-xs-10 { flex: 0 0 10%; max-width: 10%; }
    .column-xs-20 { flex: 0 0 20%; max-width: 20%; }
    .column-xs-30 { flex: 0 0 30%; max-width: 30%; }
    /* ... 他の幅 ... */
}

@media (min-width: 80.0rem) {
    .column-md-10 { flex: 0 0 10%; max-width: 10%; }
    .column-md-20 { flex: 0 0 20%; max-width: 20%; }
    .column-md-30 { flex: 0 0 30%; max-width: 30%; }
    /* ... 他の幅 ... */
}

テーマの作成

テーマを作成する場合は、Milligram-themesプロジェクトを参考にすることができます。テーマは通常、基本的なカラースキームとタイポグラフィを変更するCSSファイルです。

/* ダークテーマの例 */
:root {
    --background-color: #272727;
    --text-color: #f5f5f5;
    --button-color: #9b4dca;
    --border-color: #444;
    --heading-color: #f0f0f0;
    --link-color: #9b4dca;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

a {
    color: var(--link-color);
}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
select {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

table td, table th {
    border-color: var(--border-color);
}

7. 実践的なサンプル

以下に、Milligramを使用した実践的なサンプルを紹介します。

シンプルなランディングページ

ナビゲーション、ヒーローセクション、フィーチャーセクション、問い合わせフォームを備えたランディングページの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Milligramサンプルランディングページ</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/milligram@1.4.1/dist/milligram.min.css">
    <style>
        .navigation {
            background-color: #f4f5f6;
            border-bottom: .1rem solid #d1d1d1;
            height: 5.2rem;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .navigation .container {
            padding-top: 1rem;
        }
        .hero {
            background-color: #f4f5f6;
            padding: 10rem 0 7rem;
            text-align: center;
            margin-bottom: 4rem;
        }
        .features {
            margin-bottom: 4rem;
        }
        .feature {
            margin-bottom: 2rem;
        }
        .contact {
            background-color: #f4f5f6;
            padding: 4rem 0;
            margin-top: 4rem;
        }
        .footer {
            padding: 4rem 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- ナビゲーション -->
    <nav class="navigation">
        <div class="container">
            <div class="row">
                <div class="column">
                    <a href="#" class="button button-clear" style="font-size: 1.6rem; padding: 0;">ロゴ</a>
                </div>
                <div class="column" style="text-align: right;">
                    <a href="#features" class="button button-clear">機能</a>
                    <a href="#contact" class="button button-clear">お問い合わせ</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- ヒーローセクション -->
    <section class="hero">
        <div class="container">
            <h1>シンプルで美しいデザイン</h1>
            <p>Milligramを使って素早く効率的にWebサイトを構築しましょう</p>
            <a href="#features" class="button">詳細を見る</a>
        </div>
    </section>

    <!-- 特徴セクション -->
    <section id="features" class="features">
        <div class="container">
            <h2>主な機能</h2>
            <div class="row">
                <div class="column feature">
                    <h4>軽量</h4>
                    <p>わずか2kB (gzipped) のサイズで、高速なローディングを実現します。</p>
                </div>
                <div class="column feature">
                    <h4>レスポンシブ</h4>
                    <p>モバイルファーストの設計で、あらゆるデバイスに最適化されています。</p>
                </div>
                <div class="column feature">
                    <h4>モダン</h4>
                    <p>FlexBoxベースのグリッドシステムを採用し、柔軟なレイアウトを実現します。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 問い合わせセクション -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>お問い合わせ</h2>
            <form>
                <fieldset>
                    <div class="row">
                        <div class="column">
                            <label for="nameField">お名前</label>
                            <input type="text" id="nameField" placeholder="お名前">
                        </div>
                        <div class="column">
                            <label for="emailField">メールアドレス</label>
                            <input type="email" id="emailField" placeholder="メールアドレス">
                        </div>
                    </div>
                    <label for="messageField">メッセージ</label>
                    <textarea id="messageField" placeholder="メッセージを入力してください"></textarea>
                    <input class="button-primary" type="submit" value="送信">
                </fieldset>
            </form>
        </div>
    </section>

    <!-- フッター -->
    <footer class="footer">
        <div class="container">
            <p>© 2025 Milligramサンプル. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

ロゴ

機能
お問い合わせ

シンプルで美しいデザイン

Milligramを使って素早く効率的にWebサイトを構築しましょう

詳細を見る

主な機能

軽量

わずか2kB (gzipped) のサイズで、高速なローディングを実現します。

レスポンシブ

モバイルファーストの設計で、あらゆるデバイスに最適化されています。

※ デモはスペースの都合上、実際のコードの一部のみを表示しています。

8. 他のフレームワークとの比較

Milligramと他の主要なCSSフレームワークの比較です。

機能	Milligram	Bootstrap	Bulma	Tailwind CSS
サイズ	~2kB	~60kB	~24kB	10kB+
グリッドシステム	FlexBox	FlexBox & Grid	FlexBox	FlexBox & Grid
アプローチ	コンポーネント	コンポーネント	コンポーネント	ユーティリティ
JavaScriptの依存	なし	あり	なし	なし
コンポーネント数	少ない	多い	中程度	カスタム
学習曲線	低い	中程度	低い	中程度
カスタマイズ性	高い	中程度	中程度	非常に高い

Milligramが適しているプロジェクト

軽量で速いロードが必要なサイト
ミニマルなデザインを好む
カスタマイズを多く行いたい
シンプルなUIが必要なプロジェクト
単純なランディングページやブログ
複雑なJavaScriptコンポーネントを必要としないプロジェクト

9. まとめと参考リソース

Milligramは軽量でミニマルなスタイリングを提供することに特化したCSSフレームワークです。複雑なコンポーネントではなく、シンプルで拡張性の高いベースを提供することで、カスタマイズの自由度が高いのが特徴です。

Milligramを選ぶ主な理由は以下の通りです：

ミニマルなデザインを好む
わずか2kBという軽量さが魅力的
複雑なUIコンポーネントよりもシンプルさを優先する
自由にカスタマイズする余地が欲しい
最新のCSS技術（FlexBox）を使いたい

参考リソース

Milligram公式サイト – 公式ドキュメントとサンプル
Milligram GitHub リポジトリ – ソースコードとイシュートラッカー
Awesome Milligram – Milligramリソースのキュレーションリスト
Milligram Themes – Milligramのテーマ集

Milligramを使用したサイト例

Airform – フロントエンド開発者向けの機能的なHTMLフォーム
QEdu – データを使用して教育を変革するサイト
Phoenix Framework – 速度や保守性を犠牲にしない生産的なWebフレームワーク
BEM – 再利用可能なコンポーネントの作成を支援する手法

Milligramを用いたWeb制作実践ガイド

投稿者: ocha 投稿日: 2025年4月20日2025年4月20日