文字の大きさや色など、テキストのデザインを指定する
Webサイトのフォント（文字の字体や大きさ）は、指定していない場合は訪問者が使っているブラウザのデフォルト（初期設定）の表示になります。
サイト作成をする際に意識したいこととして、誰がどんなブラウザで見ても同じ（もしくはかなり近い）フォントで見られるように作る、ということが挙げられます。
そのためにはブラウザのデフォルトに頼らず、CSSでフォント指定をしてあげることが必要です。
目次 Table of Contents
CSSでフォントを指定する
font-family プロパティに値を指定することで「書体」、font-style プロパティに値を指定することで「字体」、が選べます。
○○ {
font-family: sans-serif;
font-style: normal;
}
font-familyプロパティの値
serif（主に明朝体）：
sans-serif（主にゴシック体）：
こんにちは／Hallo
fantasy（装飾文字）：
こんにちは／Hallo
font-familyの値には、フォントファミリー名を半角カンマで区切って複数指定します。（日本語フォントやフォントファミリー名にスペースが含まれるときだけは"○○"で囲みます。）
ただ、訪問者のブラウザの問題などで指定したフォントファミリーが適用できない場合があるので、最後に「総称ファミリー」という親玉フォント名を指定しておきます。
よってCSSでの理想の形は↓のようになります。最後尾のsans-serifが総称ファミリーです。
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
}
いきなり難しい感じですが（笑）、こんなのは覚えなくてよいのでコピーしてお使いください。
そういうことね～とだけわかっていただければ十分です。
font-styleプロパティ
normal（通常の字体）：
こんにちは／Hallo
oblique（斜体フォント）：
こんにちは／Hallo
italic（イタリック－斜めで筆記体調）：
こんにちは／Hallo
通常はnormalを使用します。abliqueやitalicは、他のサイトの引用部分などでけっこう見かけますね。
文字の大きさと太さを変える
CSSで文字の大きさを決めるときはfont-sizeプロパティを使います。
値はlarge、smallといった指定のしかたの他に、○○pxといった絶対的な大きさを決めることもできます。
文字の太さを太くするときはfont-weightプロパティを使い、値はboldを指定します。
○○ {
font-size: 18px;
font-weight: bold;
}
ねぎラーメンニンニク増し増し2つくださ～い！
文字の色を変える
文字の特定の場所だけ色を変えるときはfont-colorプロパティを使い、値にカラーコードを指定します。
○○ {
font-color: #ff0000;
}
カラーコードが分かりにくい場合は、RGBカラーで指定することもできます。
Inkscape（インクスケープ）などのイラストソフトをインストールしていれば、簡単に欲しい色のコードを発見できます。
RGBでの記述は以下のようになります。
○○ {
font-color: rgb(255, 0, 0);
}
古いサイトでは、HTMLで
Webの勉強はあらゆる自己投資のなかで最も<font color="#ff0000">対費用効果が高い</font>投資だと言われます。
のように記述する、と解説しているところもありますが、現在はあまり好ましくありません。
文字の色や大きさは「デザイン」の区分になるので、CSSの役割なんですね。構造はHTML、デザインとレイアウトはCSSという風に役割分担をすることが大切です。
comment closed