概要
コンプリメンタリーカラースキーム
詳細
コンプリメンタリーカラースキームとは主色相を決め、その補色となる
色相でレイアウトを組み合わせるレイアウト手法。
コンプリメンタリー=complementary=補足的な、の意。
補色=>色彩環で向かいに位置する色。
この組み合わせはちらつきを生む場合があるため、グレー等の無色系の色を
間に取り入れることでちらつきを中和出来ます。
css3
css3ではhslで色相を指定出来るため、カラースキームの指定がわかりやすいです。
ちょうど、180度ずれるように指定します。
サンプル
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { border-style: solid; } th { background-color:hsl(90,50%,50%); } tr.even td { background-color:hsl(270,50%,75%); } tr.odd td { background-color:hsl(270,75%,90%); } </style> </head> <body style="background-color:hsl(270,25%,270%);"> <div style="background-color:hsl(270,50%,75%);"><h1>Title</h1></div> <div style="background-color:hsl(270,75%,75%);"><h2>Summary</h2></div> <table> <tr> <th>header1</th> <th>header2</th> <th>header3</th> <th>header4</th> </tr> <tr class="odd"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> <tr class="even"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> <tr class="odd"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> <tr class="even"> <td>column1</td> <td>column2</td> <td>column3</td> <td>column4</td> </tr> </table> </body> </html>