現在多く使われているCSS2に関して、プロパティのまとめ書きについてまとめてみました。
まずは、フォント(Font)周りから。
まとめ書きの前にそれぞれの個別のプロパティを解説しておきます。
実際よく使われる書き方で解説します。
font-size:14px;
フォントのサイズを指定します。上記はフォントのサイズを14pxにする場合の例。
他に%やキーワード(xx-small、medium、x-large等)で指定することもできます。
font-weight:bold;
フォントを太くしたい場合、上記のように書きます。他に数値(100〜900で100刻み)で指定することも可能です。
font-style:italic;
フォントをイタリック体(斜体)にしたい場合、上記のように書きます。font-variant:small-caps;
フォントをスモールキャップス(small caps)にしたい場合、上記のように書きます。ただし、日本語では余り使うことはありません。
font-family:"MS Pゴシック","MS PGothic",Osaka,sans-serif;
フォントの書体を設定したい場合、上記のように書きます。フォント名かキーワード(sans-serif、serif等)を順に「,」で区切って書くと左から優先的にある書体を表示します。
フォント名にスペースが入る場合はクォーテーションで囲む必要があります。
「sans-serif」はゴシック系のフォント。「serif」は明朝系のフォントから適当なフォントを選んで表示してくれます。
line-height:1.5;
DTP業界では行送りと呼ばれる行と行の間のスペースを設定します。上記の表記の場合は文字のサイズの1.5倍(行間は0.5倍)を行送りとして設定しています。
数値+単位で設定(20px等)することも可能です。
で、それぞれのプロパティをfontプロパティを使って半角スペースで区切ることでまとめて書くことができるんですが、記入するプロパティの順番と、必ず設定しなければならない必須プロパティを気にしないといけません。
基本的な書き方はこんな感じになります。(上記同様の設定をまとめて書いてみます。)
font:bold italic small-caps 14px/1.5 "MS Pゴシック","MS PGothic",Osaka,sans-serif;
順番を注意すべき点は font-size(14px)→line-height(1.5)→font-family("MS Pゴシック","MS PGothic",Osaka,sans-serif)。この前にfont-style(italic)、 font-weight(bold)、 font-variant(small-caps)が入りますがこちらは順不同でも構いません。
つまり、
font:small-caps italic bold 14px/1.5 "MS Pゴシック","MS PGothic",Osaka,sans-serif;
でもいいわけです。それと、font-size、font-familyは省略することができません。
したがって
font:bold 14px "MS Pゴシック","MS PGothic",Osaka,sans-serif;
はOKですが、まとめます。(プロパティ名にて表記)
font:[font-style font-weight font-variant] font-size/line-height font-family;
大括弧([])内順不同可、赤字必須。