文字のサイズ（フォントサイズ）を指定する--人気ホームページが作れる簡単作成講座

トップページ　＞　初心者講座　＞　

文字のサイズ（フォントサイズ）を指定する

５－１　文字のサイズ（フォントサイズ）を指定する

XHTML/HTML タグはそれぞれ固有の文字サイズがある

ずいぶんホームページらしくなってきましたが、現在はこんな感じです。

注目してほしいのが文字サイズです。

まだ、文字サイズの指定をしていないにも関わらず、文字の大きさがそれぞれ違います。これは、XHTML（HTML)タグにはそれぞれ初期設定の文字サイズがあり、特に<h1>や<h2>はとても大きな文字サイズが設定されています。

このままでは、大きすぎてデザインに支障が出てしまいますので、CSS(スタイルシート）を使って、文字サイズ（フォントサイズ）を指定してみましょう。

CSS（スタイルシート）の3つの指定方法を比べてみてください。

特定のタグに指定する

h1 { font-size : 20px ; }

<h1>へ直接CSS（スタイルシート）で文字の大きさを指定すると、<h1>の大きさをコントロールできます。

id属性で指定する

#c-box { font-size : 12px ; }

スタイルシートの「#c-box { } 」へフォントサイズを指定するだけで、
「c-box」でid指定されたタグ内のフォントサイズを指定できます。

class属性（クラス）で指定する

.category { font-size : 14px ; }

スタイルシートの「.category { } 」へフォントサイズを指定するだけで、「category」でclass指定されたタグ内のフォントサイズを指定できます。

ホームページソース

文字サイズを指定しただけで、なんだかスッキリでしょ！

XHTML

<div id="a-box">

<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト

</div>

<div id="b-box">

<h2>h2 ページタイトル</h2>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

</div>

<div id="c-box">

<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>

<div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>

</body>

</html>

CSS（スタイルシート）

#site-box {
width : 750px;
border: 1px solid #FF9900;
}

#a-box {
border-bottom: 1px solid #FF9900;
background-image: url('img/header.gif');
}

#b-box {
float: left;
width: 500px;
}

#c-box {
          float: right;
          width: 250px;
          font-size: 12px;
}

#d-box {
          clear: both;
          width: 750px;
          background-color: #FFFF99;
          font-size: 12px;
}

h1 {
          font-size: 22px;
}

h2 {
          font-size: 17px;
}

h3 {
          font-size: 15px;
}

p {
          font-size: 14px;
}

.category {
          font-size: 14px;
}

＜＜前のページ　　次のページ＞＞

このページをブックマークする→　