📚 陰陽五行カラーCSS v1.3 実装サンプル集

このページでは、陰陽五行カラーCSS v1.3の実際の使用例を、コピペ可能なコードと実際の表示結果で紹介します。

🎨 1. 基本の十干・十二支

十干（天干）の表示

<span class="stem-kyou">甲</span> <span class="stem-otsu">乙</span> <span class="stem-hei">丙</span> <span class="stem-tei">丁</span> <span class="stem-bo">戊</span> <span class="stem-ki">己</span> <span class="stem-kou">庚</span> <span class="stem-shin">辛</span> <span class="stem-jin">壬</span> <span class="stem-kai">癸</span>
表示結果：
甲 乙 丙 丁 戊 己 庚 辛 壬 癸

十二支（地支）の表示

<span class="branch-ne">子</span> <span class="branch-ushi">丑</span> <span class="branch-tora">寅</span> <span class="branch-u">卯</span> <span class="branch-tatsu">辰</span> <span class="branch-mi">巳</span> <span class="branch-uma">午</span> <span class="branch-hitsuji">未</span> <span class="branch-saru">申</span> <span class="branch-tori">酉</span> <span class="branch-inu">戌</span> <span class="branch-i">亥</span>
表示結果：
子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥

🐲 2. 干支ペア（年柱・月柱・日柱・時柱）

基本的な干支の組み合わせ

<span class="stem-hei">丙</span><span class="branch-uma">午</span> （ひのえうま） <span class="stem-kai">癸</span><span class="branch-u">卯</span> （みずのとう） <span class="stem-kyou">甲</span><span class="branch-tatsu">辰</span> （きのえたつ） <span class="stem-shin">辛</span><span class="branch-tori">酉</span> （かのととり）
表示結果：
丙午 （ひのえうま）
癸卯 （みずのとう）
甲辰 （きのえたつ）
辛酉 （かのととり）

📈 3. 年運遷移の可視化

2023-2026年の五行遷移

<h4>■ 2023｜<span class="stem-kai">癸</span><span class="branch-u">卯</span>（みずのとう）── 水と木の「芽吹き」</h4> <h4>■ 2024｜<span class="stem-kyou">甲</span><span class="branch-tatsu">辰</span>（きのえたつ）── 木と土の「成長基盤」</h4> <h4>■ 2025｜<span class="stem-otsu">乙</span><span class="branch-mi">巳</span>（きのとみ）── 木と火が交わり、"燃え始める"</h4> <h4>■ 2026｜<span class="stem-hei">丙</span><span class="branch-uma">午</span>（ひのえうま）── 火と火の「最強発火」</h4>

■ 2023｜癸卯（みずのとう）── 水と木の「芽吹き」

■ 2024｜甲辰（きのえたつ）── 木と土の「成長基盤」

■ 2025｜乙巳（きのとみ）── 木と火が交わり、"燃え始める"

■ 2026｜丙午（ひのえうま）── 火と火の「最強発火」

効果： 薄青→濃緑→薄緑→濃赤という色の流れで、年運の五行遷移が一目で理解できます。

🗂️ 4. 命式（四柱推命）

四柱の表示例

<table> <tr> <th>年柱</th> <th>月柱</th> <th>日柱</th> <th>時柱</th> </tr> <tr> <td><span class="stem-hei">丙</span><span class="branch-uma">午</span></td> <td><span class="stem-ki">己</span><span class="branch-mi">巳</span></td> <td><span class="stem-kai">癸</span><span class="branch-ushi">丑</span></td> <td><span class="stem-kyou">甲</span><span class="branch-tora">寅</span></td> </tr> </table>
年柱 月柱 日柱 時柱
丙午 己巳 癸丑 甲寅

⏰ 5. 大運・流年の表示

大運の10年周期

<ul> <li>10-19歳：<span class="stem-kou">庚</span><span class="branch-uma">午</span></li> <li>20-29歳：<span class="stem-shin">辛</span><span class="branch-hitsuji">未</span></li> <li>30-39歳：<span class="stem-jin">壬</span><span class="branch-saru">申</span></li> <li>40-49歳：<span class="stem-kai">癸</span><span class="branch-tori">酉</span></li> </ul>
  • 10-19歳：庚午
  • 20-29歳：辛未
  • 30-39歳：壬申
  • 40-49歳：癸酉

💕 6. 相性・関係性の表示

五行の相生・相克関係

<p><span class="stem-kyou">木</span>が<span class="stem-hei">火</span>を生む（相生）</p> <p><span class="stem-jin">水</span>が<span class="stem-kyou">木</span>を生む（相生）</p> <p><span class="stem-kou">金</span>が<span class="stem-kyou">木</span>を剋す（相克）</p> <p><span class="stem-hei">火</span>が<span class="stem-kou">金</span>を剋す（相克）</p>

木が火を生む（相生）

水が木を生む（相生）

金が木を剋す（相克）

火が金を剋す（相克）

📝 7. 応用：鑑定文への活用

鑑定レポートでの使用例

<h4>あなたの命式分析</h4> <p> 日主<span class="stem-kai">癸</span>は水の陰性で、柔軟で適応力があります。 年干<span class="stem-hei">丙</span>の火が水を温めることで、 温和で人当たりの良い性格を形成しています。 </p> <h4>2024年の運勢</h4> <p> <span class="stem-kyou">甲</span><span class="branch-tatsu">辰</span>年は、 あなたの日主<span class="stem-kai">癸</span>水にとって木を生じる年です。 成長と発展のエネルギーが強く、新しい挑戦に向いています。 </p>

あなたの命式分析

日主癸は水の陰性で、柔軟で適応力があります。 年干丙の火が水を温めることで、 温和で人当たりの良い性格を形成しています。

2024年の運勢

甲辰年は、 あなたの日主癸水にとって木を生じる年です。 成長と発展のエネルギーが強く、新しい挑戦に向いています。

📋 8. クラス名完全一覧

十干（Heavenly Stems）

干クラス名五行
甲stem-kyou木（陽）
乙stem-otsu木（陰）
丙stem-hei火（陽）
丁stem-tei火（陰）
戊stem-bo土（陽）
己stem-ki土（陰）
庚stem-kou金（陽）
辛stem-shin金（陰）
壬stem-jin水（陽）
癸stem-kai水（陰）

十二支（Earthly Branches）

支クラス名五行
子branch-ne水（陽）
丑branch-ushi土（陰）
寅branch-tora木（陽）
卯branch-u木（陰）
辰branch-tatsu土（陽）
巳branch-mi火（陰）
午branch-uma火（陽）
未branch-hitsuji土（陰）
申branch-saru金（陽）
酉branch-tori金（陰）
戌branch-inu土（陽）
亥branch-i水（陰）

🎯 使用時のポイント

💡 効果的な活用方法

⚠️ 注意事項