icebergの配色で記事HTMLのテンプレートを作った

2026-10-03 iceberg HTML CSS

はじめに

社内のブログを、プレーンテキストではなく HTML で投稿することが増えた。 原稿を生成 AI に渡して HTML にしてもらうと、その場で CSS まで書かれてしまい、記事ごとに色も余白も変わる。 デザインの決まりがないので、再現性がなく、自分の色も残らない。

vim で使っている iceberg の配色が好きなので、その色を記事のテンプレートに固定することにした。 以前、ターミナルに iceberg を入れたときの記録は カラースキームであるICEBERGを使ってみた に残してある。

環境

  • macOS 26.7

  • Node.js（HTML の検証と、スタイルの展開に使う）

投稿先の社内ブログは、<style> が使える場合と、要素の style 属性しか残らない場合のどちらもある。 SVG は描画されない。

方針

色と余白は CSS に書き、生成 AI には原稿を決まった部品へ割り当てることだけを頼む。 AI が知らない class を書いたり、<svg> や style 属性を足したりしたら、スクリプトがエラーで止める。

部品の class は ib- で始め、スタイルは .ib-article の中だけに閉じた。 記事自身が背景色を持つので、白い画面の上に貼っても配色が透けない。 ダークとライトの両方を用意し、OS の設定に追従する。 data-theme="light" か data-theme="dark" を付けると、どちらかに固定できる。

成果物

ブログのリポジトリに iceberg-article-kit/ を置いた。

iceberg-article-kit/
├── iceberg.css      配色と部品のスタイル
├── template.html    使える部品の一覧
├── prompt.md        HTML 化を頼むときのプロンプト
├── build.mjs        検証と、投稿用 HTML の生成
├── samples/sample.html
└── README.md

template.html には、見出し、まとめ、コールアウト、コード、差分、表、引用、図、手順、比較カード、文字の矢印で書く流れ図を入れた。 図は png / jpg / gif / webp だけを使い、SVG は部品に含めていない。

samples/sample.html は、2020 年の iceberg の記事をこの型に当てはめた見本である。

配色

枠線、面、差分の背景は iceberg の色をそのまま使った。 文字として読む色のうち、背景とのコントラストが 4.5:1 に届かなかったものだけ、同じ色相のまま濃さを変えた。

用途 モード iceberg の色 文字に使う色

補助テキスト

ライト

#8389a3

#5c6072

補助テキスト

ダーク

#6b7089

#9094a7

文字列・情報

ライト

#3f83a6

#326985

推奨

ライト

#668e3d

#4d6b2e

タイトル・注意

ライト

#c57339

#8f5329

危険

ライト

#cc517a

#a34162

定数

ライト

#7759b4

#7053a9

ダークの青、緑、橙、赤、紫は元の色のまま基準を満たすので、変えていない。 コードの色分けは iceberg の対応に合わせ、予約語・関数・型は青、文字列は水色、数値は紫、コメントは補助テキストにした。

使い方

原稿と prompt.md を AI に渡し、<article class="ib-article"> だけの HTML を出してもらう。 部品の構造は template.html を一緒に渡すと安定する。 出力をファイルに保存して、次を実行する。

cd iceberg-article-kit
npm install
npm run build

dist/ に 3 ファイルが出る。

  • *.style.html は <style> に CSS を埋め込んだ版で、OS のダークとライトに追従する。<style> を置ける投稿先向け。

  • .inline.light.html と .inline.dark.html は、色を要素の style 属性に展開した版である。<style> が消される投稿先では、この中の article を貼る。画面が白ならライトを選ぶ。

インライン版では、OS に追従する切替、ホバー、選択範囲の色は使えない。 リンクは下線だけで判別できる。

ほかのやり方と比べて

毎回 AI に HTML と CSS を書かせる方法は、準備がいらない。 その代わり、色も余白も記事ごとに変わり、SVG や <style> が消える制約を毎回説明する必要がある。

今回のテンプレートは、揺れを部品の選び方だけに狭める。 存在しない class は build.mjs が止める。 残る揺れは、本文を要約しすぎることと、コードの色分けを span で手作業する部分である。 部品を増やすたびに、CSS とカタログとプロンプトと許可リストを揃えて直す必要がある。

再現性をさらに上げるなら、AI には Markdown を書かせ、HTML 化は変換ツールに任せる方が確実である。 コードの色分けもハイライタに渡せる。 今回の class と CSS は、その変換先としてそのまま使える。

投稿先の Markdown だけで書く方法は、テンプレートの保守がいらない。 iceberg の色は出ない。

最初はテンプレートで部品を固め、モデルの揺れが問題になったら Markdown からの変換に移るのがよいと思っている。

参考