概要
モノクロマティックカラースキーム
詳細
モノクロマティックカラースキームとは同一色相で、
彩度と輝度で変化を付けるレイアウト手法。
CSS3サンプル
サンプルhtml+CSS3
<!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(90,50%,75%); } tr.odd td { background-color:hsl(90,75%,90%); } </style> </head> <body style="background-color:hsl(90,25%,90%);"> <div style="background-color:hsl(90,50%,75%);"><h1>Title</h1></div> <div style="background-color:hsl(90,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>