超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

文字の太さを変える

では、文字の太さを変えてみましょう!

まず<例題11>で作ったファイルに<スポンジのつくり方>の文字を追加しましょう。

<例題12>
<!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">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}

.sell {
text-align:center;
}

-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>

<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>

<div align="center">
<table width="350" border="1">
<tr>
<td colspan="2" class="sell"><材料>(例)18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">3個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>

<p>
<スポンジのつくり方>

</div>

</body>
</html>

まず、 <p> で行を変えて、次に <スポンジの作り方> の文字を書きます。
<スポンジの作り方>の「<」および「>」は半角ではなく、必ず全角で書いてください。
半角で書くと「タグ」とみなされ正しく表示できなくなります。

<スポンジの作り方>の文字を太くしてみましょう。

文字を太くするには スタイルシートに文字を太くするスタイル

.strong {
font-weight: bold;
}

を追加します。

そのあと、太くしたい文字を文字の属性を変える <span class"strong"> </span> ではさみます。

<例題13>
<!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">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

.blue {
color:#0000FF;
font-size:120%;
margin-bottom:20px;
}

.sell {
text-align:center;
}

.strong {
font-weight: bold;
}

-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>

<p>
<img src="cake.jpg">
<p>
<span class="blue" >スポンジのつくり方</span>
</div>

<div align="center">
<table width="350" border="1">
<tr>
<td colspan="2" class="sell"><材料>(例)18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td class="sell">3個</td>
</tr>
<tr>
<td>砂糖</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td class="sell">90g</td>
</tr>
<tr>
<td>バター</td>
<td class="sell">25g</td>
</tr>
</table>

<p>
<span class="strong"><スポンジのつくり方></span>

</div>

</body>
</html>

ブラウザで表示させると下の画像のようになります。

うまく表示できましたか?

▲このページのトップに戻るTop