レベルアップ

スタイルシート

レベルアップでは、スタイルシートについて説明しています。基本的なことが理解できたところで、ホームページを使いやすくしていきましょう。

ソースを綺麗にまとめる

ソースがゴチャゴチャしていると修正するもの一苦労です。スタイルシートを利用すると、ソースを綺麗にまとめることができます。

実際に作成してみた方がわかりやすいので、HTMLコードNo3をコピー、「 index.html 」に名前を変更してみてください。

※ 「 index.html 」は他の名前よりも特別な扱いになります。新規フォルダを作成したら「 index.html 」から名前をつけることをオススメします。

HTMLコードNo3

<!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>解説は http://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>

ページTopヘ

全体の流れ

レベルアップ、スタイルシート。パソコン付属のテキストエディタを利用した、初心者向け無料ホームページ作成方法の解説。無料hp作成の参考に!

Top >> 無料 ホームページ作成

Access Ranking!

  1. 無料 求人 派遣 土日のみ 単発
  2. 無料 海外旅行保険 クレジットカード 傷害
  3. 無料 アンケート
  4. 無料 クレジットカード 審査 甘い
  5. 無料 ホームページ作成 無料hp作成
  6. 無料 クレジットカード 初心者
  7. 無料 オリックスカード 審査
Copyright©2008 www.syousai.com.All rights reserved. XTML, CSS,