結果を表示する
元にもどす
<html lang="ja"> <meta charset="utf-8"> <style> :root{display:flex; font-size:30px; --カラー:#eeeeee; --バリアブル_カラー_1:#007f6f; --バリアブル_カラー_2:#ff00ff; --バリアブル_カラー_3:#facebc; --バリアブル_カラー_4:#abcdef; --バリアブル_カラー_5:#ffffaa;} .セクション_1{color:var(--バリアブル_カラー_1); background-color:var(--カラー);} .セクション_2{color:var(--バリアブル_カラー_2); background-color:var(--バリアブル_カラー_4);} .セクション_3{color:var(--バリアブル_カラー_3); background-color:var(--バリアブル_カラー_5);} .セクション_4{color:var(--バリアブル_カラー_4); background-color:var(--カラー);} .セクション_5{color:var(--バリアブル_カラー_5); background-color:var(--バリアブル_カラー_3);} </style> <div class="セクション_1">セクション_1</div> <div class="セクション_2">セクション_2</div> <div class="セクション_3">セクション_3</div> <div class="セクション_4">セクション_4</div> <div class="セクション_5">セクション_5</div> </html>