「文字」のCSSを指定 colorやfont-size
テキスト部分のCSSは、colorやfont-sizeなどを使い、文字の色や大きさを指定しましょう。
例えば、段落分けのpタグ内での文字の表示を指定するには以下のように記述します。
【例：pタグ内の文字の表示を指定】
p {
color:#000000;
font-size:14px;
font-weight:bold;
line-height:150%;
font-family:"ＭＳ Ｐゴシック",Meiryo,sans-serif;
text-align:left;
}
color:文字の色;
font-size:文字の大きさ;
font-weight:文字の太さ;
line-height:行間;
font-family:フォントスタイル;
text-align:左詰め、右詰め;
これらは全て指定する必要はなく、CSSで何も指定しなかったデフォルトの状態では、文字サイズが16px、左詰めで色が黒（#000000）になります。
省略できるものは指定せず、最低限の記述をするようにしましょう。
■text-align → 左詰め、右詰め
text-align:left;はデフォルトで左詰めになりますので、右詰めやセンタリンクの必要がなければ記述しなくてもよいでしょう。右詰めにする際はtext-align:right;を指定し、センタリングする場合はtext-align:center;を指定します。
■font-size → 文字の大きさ
文字の大きさの指定方法には、font-size:100%;などの相対的な指定方法もありますが、ブラウザによって表示のされ方が違いますし、親要素の文字の大きさとの相対指定になりますので、pxで文字サイズを決め打ちした方が簡単かと思われます。
また、通常のフォントサイズはデフォルトの状態で16pxですが、h1やh2などの見出しタグについては大きく表示されます。当サイトの場合は小さめの14pxですが、一般的なニュースメディアの場合はデフォルトの16pxや15pxで指定されているケースが多いです。
このfont-sizeと１行の文字数から、コンテンツ部分のwidth幅を計算すると文章の右端がガタガタにならずに表示させることができます。
font-sizeに合わせた最適なwidth幅
■font-family → フォントの種類
フォントファミリーについては、デフォルトでの表示がIEやFirefox、Chromeなどのブラウザによって違いがあり、またバージョンや使用しているOSによっても違いがあります。
IE 11やchoromeならメイリオ、windowsでのFirefoxならMS Pゴシックなどとなっていますので、表示のされ方を統一したいときに使うとよいでしょう。
複数を指定する際は優先させたい順にカンマ（,）で指定しますが、「ＭＳ Ｐゴシック」などのように、空白が含まれる場合には(")で囲い、「"ＭＳ Ｐゴシック"」や「"Hiragino Kaku Gothic Pro"」のように書きます。 また、「"メイリオ"」など全角文字が含まれる場合も（"）で囲っておくとよいでしょう。
ちなみに、このダブルクォーテーション(")は、キーボードの「shift＋2」の位置にある点々のことです。
■color → 文字の色彩
「color」を指定すると文字の色彩の指定になりますが、「background-color」とした場合には背景色の指定になります。font-colorではなく、単に「color」とだけ書きますので注意しましょう。
当サイトではデフォルトの状態で何も指定してませんので、まっ黒の#000000で表示されていますが、サイトによっては#111111や#333333など、多少、薄めの黒で指定しているケースも多いようです。
■font-weight → 文字の太さ
何も記述しない場合、文字の太さは通常のfont-weight: normal;です。この場合はデフォルトの状態ですので、特に記述する必要がありません。太くしたい際にfont-weight: bold;と指定するとよいでしょう。
■line-height → 行間
行と行の間の間隔を指定するにはline-height:で指定します。当サイトの場合は150%で指定していますが、この場合、行の高さ（line height）を１文字の１．５倍で指定することにより、上下の行との間に間隔が空く形になります。
ちなみに、letter-spacingを指定した際には、行と行の間隔ではなく、右の文字と左の文字との文字間隔の指定になりますが、こちらは特に指定しなくてもよいと思います。
letter-spacingで文字詰めまでをきっちり指定する際は、photoshopなどを使用して画像でテキストを表示させるとよいでしょう。
■記述を省略させるのがポイント
色彩や文字サイズなどはサイト全体の親要素に１回だけ記述するようにし、できるだけ個別で指定するのは避け、サイト内での統一感を出すようにしましょう。
①必要のないCSSは記述しない
②共通のものは親要素に指定する
例えば、以下のようなデフォルトのCSSと合致する際はあえて記述する必要はありません。
.text {
color:#000000;
font-size:16px;
text-align:left;
font-weight:normal;
}
ただ、line-height:の行間などはデフォルトの状態ではびっちり詰められていますし、h1やh2の見出しタグの大きさもかなり大き目に表示されますので調整した方がよいでしょう。
一番効率的な方法は、何も指定しないデフォルトの状態で表示させ、変更したい箇所があった際には、サイト全体に共通する親要素から順に指定していくのがおすすめです。親要素の記述内容は子要素にも継承されますので、個別に指定するのはできるだけ避けた方がよいでしょう。