![]() |
|||
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
Style Sheet
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
文字の大きさと色を変える
文字の大きさを変えるにはスタイルシートに「fontのスタイル」を記述します。
<例題6>
「fontのスタイル」には、文字の大きさを変えたり、色を変えたり、文字の太さやHTMLでは出来なかった行間の指定をすることができます。
(例) では、先ほどのページにサブタイトルをつけて文字の大きさと色を変えてみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>MY HOMEPAGE</title> <style type="text/css"> .center { <body> <div class="center"> </body>
まず上のように、サブタイトルを追加します。
<例題7>
するとこのようになります。 次にサブタイトルの色と大きさを変更します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>MY HOMEPAGE</title> <style type="text/css"> .center {
.blue { --> <body> <div class="center"> </body>
まず、スタイルシートの部分に「.blue」というクラスセレクタを記述します。
ここではわかりやすくblueというセレクタ名にしていますが他の名前でも結構です。 次に color:#0000FF; で色を青にしていします。 そして、フォントのサイズを font-size:120%; で指定します。 フォントのサイズはなるべく大きさを変更できるように固定しないようにしましょう。 そして最後に margin-bottom:20px; で文字の下に20pxの間隔をあけるように指定しました。 この間隔は指定しなくても結構です。 色の指定は「red」「blue」など一部の色は英語表記でも指定できますが、色はできればコンピュータがわかるように「#0000FF」のような16進数で記述した方がいいです。 0000FFのような色の指定にはコードの前に必ず「#」をつけます。 では、先ほどのファイルを上書き保存して、ブラウザで確認してみましょう。 このように文字が青色で表示されましたか? このように色や大きさを変えたい部分に「span class」で指定するとその部分に色をつけたり大きさを変えることができます。 |