五行×陰陽＝10色の統一パレット
命理学の最も古い骨格である 五行・陰陽・十干・十二支 を、
色相と明度という"視覚の言語"に翻訳した 世界初の UI 仕様 です。
陰陽五行カラーCSS v1.3 は、命理学の基礎構造をそのまま保持したまま、 「表示レイヤーだけ」を現代のUI規格へ翻訳した CSS パレットです。
四柱推命の世界には、五行・陰陽・十干・十二支という確立した理論体系があります。 しかし、これらを 視覚的に統一ルールで扱う規格 は存在しませんでした。
行っているのは "UI(見た目)の標準化" です。
理論とUIを無理に噛み合わせるのではなく、
理論そのものを"色の構造"へ忠実にマッピングした結果生まれたCSS──
それが本パレットの本質です。
これにより、十干も十二支も、命式も、流年も、 すべてが同じ1つの表示規格で可視化可能になります。
文章を読む前に、命理の構造そのものが 色だけで自然に立ち上がる
その体験を可能にしたのが、このCSSパレットです
四柱推命や命理を学んでいると、「五行の流れを追う」のに思った以上の負荷がかかります。
命式でも、鑑定文でも、教材でも、五行・陰陽・十干・十二支を 毎回すべて"頭の中で変換" する必要があるからです。
本CSSは、専門用語で言えば「CSS」「UIデザイン」といった言葉が登場しますが、
占い師目線では "色で表示を統一するための仕組み" と言った方が正確です。
難しい技術を使った新しい占いではなく、
"見た目の工夫で、五行や陰陽を読みやすくする方法"
これがこのCSSの正体です。
癸丑
乙酉
庚辰
※白黒文字だけの従来表示
文章を読む前に、五行の判別に脳のリソースを消費してしまう
癸丑
乙酉
庚辰
※色付きで五行が一目瞭然
視覚だけで自動判別（脳内変換ゼロ）
知識のせいで難しいのではなく、表示のせいで難しくなっている
👁️🗨️ 視覚化するだけで、"命理の難しさ"が半分消える
陰陽五行カラーCSS v1.3 の色づけは、 「五行本来のイメージ」をそのまま視覚に置き換えたものです。
陰陽五行カラーCSS v1.3 の真価が現れるのは、 「実際の文章に色が入ったとき」です。
年運遷移の視覚化：
ライトブルー×ライトグリーン → フォレストグリーン×ダークブラウン → ライトグリーン×ソフトレッド → ストロングレッド×ストロングレッド の遷移が色だけで一目瞭然
このセクションは実践編のため、少しWEB技術者向けの内容です。
占い師の方で技術的な実装をされない場合は、Web制作者・デザイナーの方と連携して導入していただくことを推奨します。 ただし、どのような仕組みかを理解することで、発注時の説明や効果的な活用方法の検討に役立ちます。
陰陽五行カラーCSS v1.3 は、そのままHTMLに読み込むだけで色のパターンが起動する設計になっています。
技術的な部分はWeb制作者にお任せして、以下の点を重視してください：
占術の理解があるWEB制作者との連携をご希望の場合、
「ガチ占い師が在籍するリノベ屋」という選択肢もあります：
※占術の本質を理解したうえでのWEB制作・システム構築が可能な制作チーム
※Web制作者向け：HTMLの <head> 内に以下を追加
※Web制作者向け：天干にクラスを適用する方法
↓ 実際の表示結果
※Web制作者向け：地支にクラスを適用する方法
↓ 実際の表示結果
これらの効果を実感していただき、サイトのどの部分に適用するかをご検討ください。
陰陽五行カラーCSS v1.3 は、どの占術サイト・ブログ・教材にも自由に組み込める オープン仕様のカラー・パレット（UI補完パッチ）です。
これだけで、十干・十二支に色が付く "五行視覚OS" が起動します
陰陽五行カラーCSS v1.3 は、四柱推命や東洋占術そのものを変えるためのツールではありません。 やっていることは、あくまで 「元の理論はそのままに、見え方だけを整える」 という UIレイヤーの補完 です。
このCSSパレットの思想・規格・実装は、AI魔晄炉（ai-makouro.com）にて考案されました。
本CSSは、その中で行われた長期運用・実験の結果、v1.0 → v1.3 までブラッシュアップされた実戦用パレットです。
本CSSは 無料で利用・改変・再配布可能です。商用利用も制限はありません。
※ 引用時は「陰陽五行カラーCSS v1.3（by AI魔晄炉）」と明記していただけると助かります。
陰陽五行カラーCSS v1.3 は、新しい占いを作るためのものではありません。 ずっと昔から存在していた五行・陰陽・十干・十二支 という骨格に、 ただ静かに 「色」という見え方」を足しただけ の道具です。
五行＝色相 / 陰陽＝明度
このルールさえ守れば、あなたのどんな文章も、表も、レポートも、 同じ "五行の地図" の上に載ることができます。
| No | 干支 | 天干（class） | 地支（class） | HTML例 |
|---|---|---|---|---|
| 1 | 甲子 | stem-kyou | branch-ne | <span class="stem-kyou">甲</span><span class="branch-ne">子</span> |
| 2 | 乙丑 | stem-otsu | branch-ushi | <span class="stem-otsu">乙</span><span class="branch-ushi">丑</span> |
| 3 | 丙寅 | stem-hei | branch-tora | <span class="stem-hei">丙</span><span class="branch-tora">寅</span> |
| 4 | 丁卯 | stem-tei | branch-u | <span class="stem-tei">丁</span><span class="branch-u">卯</span> |
| 5 | 戊辰 | stem-bo | branch-tatsu | <span class="stem-bo">戊</span><span class="branch-tatsu">辰</span> |
| 6 | 己巳 | stem-ki | branch-mi | <span class="stem-ki">己</span><span class="branch-mi">巳</span> |
| 7 | 庚午 | stem-kou | branch-uma | <span class="stem-kou">庚</span><span class="branch-uma">午</span> |
| 8 | 辛未 | stem-shin | branch-hitsuji | <span class="stem-shin">辛</span><span class="branch-hitsuji">未</span> |
| 9 | 壬申 | stem-jin | branch-saru | <span class="stem-jin">壬</span><span class="branch-saru">申</span> |
| 10 | 癸酉 | stem-kai | branch-tori | <span class="stem-kai">癸</span><span class="branch-tori">酉</span> |
| ...（以下50干支省略）... | ||||
| 43 | 丙午 | stem-hei | branch-uma | <span class="stem-hei">丙</span><span class="branch-uma">午</span> |
| 60 | 癸亥 | stem-kai | branch-i | <span class="stem-kai">癸</span><span class="branch-i">亥</span> |