記事本文を飾り付けてみよう「（その３０）CSS超入門４」

　今回はCSSを利用して、フォントの種類を変えてみたいと思います。少し分かりにくいかもしれませんが、お許しください。それでは、始めましょう。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては以下のようになります。

font-family:フォント名,フォントの種類;

※フォントの種類とは？
明朝系のフォント　　　　　　→　serif
ゴシック系のフォント　　　　→　sans-serif
筆記体・草書体系のフォント　→　cursive
装飾的なフォント　　　　　　→　fantasy
等幅のフォント　　　　　　　→　monospace

フォントは人それぞれパソコンに入っているものが違います。指定したフォントが無い場合にフォントの種類を指定しておくと、近いフォントを利用して表示するようになります。日本語のフォントはあまり種類を指定できないかもしれませんが、英数字は楽しいフォントがある場合も多いので、指定してみるといいかもしれません。

例えば、以下のように指定します。（よく分からない場合は、このまま指定してみて下さい。）
明朝体の場合　　　　→　font-family:ＭＳ Ｐ明朝,平成明朝,serif;
ゴシック体の場合　　→　font-family:ＭＳ Ｐゴシック,Osaka,sans-serif;

（注１　":"コロンと";"セミコロンの違いに注意！！）
（注２　ＭＳの後ろは本来だと半角スペースなのですが、そのままだと上手く表示されないので、文字コードにしてあります。）

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

■文字を明朝体にする

文法）
||<#ffffff' style=font-size:20;font-family:ＭＳ&#x20;Ｐ明朝,平成明朝,serif; ``こんにちは||

※補足　分かりやすくするために、セルの色は白・文字のサイズ20pxに設定しています。以下も同様。

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字をゴシック体にする

文法）
||<#ffffff' style=font-size:20;font-family:ＭＳ&#x20;Ｐゴシック,Osaka,sans-serif; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

フォントについては、よく分からない部分が多いかもしれません。（私も良く分かっていません。）
その場合には、あまり深く考えずに書いてある通りに指定してみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「おっさん」の記事を参考にさせていただきました。
もしも、参考になりましたら「おっさん」のページにて、ボタンをお願いします。
「おっさん」の研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

転載させてください

[eri*a_h*m*_l*vey]

難しいですね；フォントかえるの･･･。

転載＆傑作させてくださいね＾＾