スペースを使用して視認性を高める

CSSソース

p.note {
     font-size: 100%;
     color: red;
}
 
p.memo > span {
     font-size: 90%;
     color: blue;
}

インデントを使用して視認性を高める

CSSソース

p.note {
     font-size: 100%;
     width: 50%;
     }
 
@media print {
     p.note {
          font-size: 120%;
          width: 100%;
     }
}

改行も上手に使用して視認性を高める

CSSソース

/* 悪い例 */
p.note,ul.menu,ol.rank {font-size:100%;font-weight:normal;color:black;}
 
/* 良い例 */
p.note,
ul.menu,
ol.rank {
     font-size: 100%;
     font-weight: normal;
     color: black;
}

• 第2章 CSSの基本法則