スタイルシート
レベルアップでは、スタイルシートについて説明しています。基本的なことが理解できたところで、HTMLコードのソースを使いやすくしていきましょう。
スタイルシートは、レイアウトを適用させるために定義します。
ソースがゴチャゴチャしていると修正するもの一苦労です。スタイルシートを利用すると、ソースを綺麗にまとめることができます。
レベルアップは、実際に作成してみた方がわかりやすいので、HTMLコードNo3をコピー、「 index.html 」に名前を変更してみてください。
※ 「 index.html 」は他の名前よりも特別な扱いになります。新規フォルダを作成したら「 index.html 」から名前をつけることをオススメします。
次のページからレベルアップの解説をしていきます。準備が整った方は、スタイルシートを参考にしてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<link rel="stylesheet" href="../css/style.css" type="text/css">
<style type="text/css">
<!--
body { text-align: center }
a:link { color: #0000cd }
a:visited { color: #800080 }
a:hover { color: #fffacd; background-color: #8fbc8f }
a:active { color: #ffffff }
div.a { width: 700px;}
p.b { background-color: #228b22; padding: 5px 0px 5px 1em; text-align: left }
div.c { border: #006400 5px dotted; width: 550px; padding: 10px; text-align: left }
-->
</style>
</head>
<body>
<div class="a">
<h1><img src="../images/" width="468" height="60" alt="画像"></h1>
<p class="b"><a href="../index.html" title="トップページへ">Home</a> ｜ Menu ｜ <a href="mailto:～">Mail</a> ｜</p>
<div class="c">
<p>1</p>
<p>2</p>
<p>解説は https://www.syousai.com/txt/css.html を参考にしてください。</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
<br>
<hr>
<address>Copyright(C) ～.All rights reserved.</address>
</div>
</body>
</html>