Web Design Leaves

文字周り（タイポグラフィ）の基本設定

• html 文書全体の font-size, font-family, line-height を記述する。
• ほとんどのブラウザーのフォントサイズは標準で「16px」なので html 文書全体の font-size は100% を指定
• 日本語のテキストでは一般的にフォントサイズの1.5倍が読みやすい行の高さとされている。

html {
    font-family: font-family: "Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif;;
    font-size : 100%;
    line-height: 1.5; 
}

要素を配置するときの高さの基準

上記の CSS を適用すると line-height に1.5を指定したので行の高さは「24px」となり、フォントサイズの「16px」の上下に4pxの余白が付いた状態となる。

この「24px」という1行の高さを、ページにおいて「要素を配置するときの高さの基準」とする。

見出しの指定

見出し要素のサイズや行の高さは、「要素を配置するときの高さの基準」を元にして、一定の間隔で要素が配置されるように指定する。

要素同士の距離に規則性を持たせること（Vertical Rhythm）で読みやすく、バランスが取れたデザインになる。

この例では、h1 要素を「48px」、h2 要素を「36px」、h3 要素を「24px」、h4～h6 要素を「16px」とすると、要素の高さの関係は以下のようになる。

垂直方向のマージンを統一する

マージンの相殺

垂直方向のマージン（margin-bottom, margin-top）はどちらでも指定可能だが、隣接する要素の垂直マージンは大きい値が優先されて適用される。

大きい値が優先される条件

どちらの要素も中身が空でないこと
padding と border が指定されていないこと

こうした条件を毎回考慮するのは大変なので、ブロック要素の垂直方向のマージンは margin-bottom または margin-top のどちらか１つで指定するように統一しておくようにする。

各見出し要素の margin-bottom の値は全て 24px（要素を配置するときの高さの基準）に指定し、1行分の余白を与える。

h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
/* 垂直方向のマージンを統一 */

h1 {
    font-size : 48px; 
    line-height : 1;    
    /* 要素の高さ：48px（要素を配置するときの高さの基準の2倍）*/
}

h2 {
    font-size : 36px;
    line-height : 1.3333;   
    /* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
}
h3 {
    font-size : 24px;
    line-height : 1;    
    /* 要素の高さ：24px（要素を配置するときの高さの基準） */
}
hgroup h2,h4,h5,h6 {
    font-size : 16px; 
    line-height : 1.5;   
    /* 要素の高さ：24px（要素を配置するときの高さの基準） */
}