YAMAMOTO FAMILY
山本家の玄関へ

なごのパソコン教室へ ■
◇ 山本家でもまだなんとかできるホームページの作り方2

はじめに

基本的なタグについては「山本家でもできるホームページの作り方」で説明しましたので、このページでは、 WEBページを華やかにしたり、見やすくしたりするために、そのほかの知っているタグやスタイルシートなどを説明します。

僕がWEBページを最初に作った時は、html4.0で定義されているタグで非推奨のもの(<font>や<center>など) も使っていましたが、使わなくてもページができるのならその方がよいので、最近ではスタイルシートを使うようにしています。 ただし、プラウザによってはスタイルシートが使えなかったり、表示がおかしくなったりするようなので、 作ったソースをプラウザで開いて確認する方が無難です。

このページの後半では、実際にプラウザで比較した時に、スタイルシートを使うと今一つだったり、 プラウザによって表示が違ったりしたケースについて説明しています。

☆目次☆

  1. まだまだたくさんあるタグ
  2. そのほかのスタイルシート
  3. <hr>タグの属性について
  4. <table>タグのbordercolor属性について
  5. スタイルシート「text-align: center」について
  6. そのほか気づいたこと

1.まだまだたくさんあるタグ

<form>タグ関連や<frame>タグ関連などWEBページを充実するために必要なタグはまだまだたくさんあるのですが、 不勉強ですべては覚えていません。 興味のある方は、htmlについて解説した本などで調べてください。 ネット上では、あまりに有名ですが「とほほのWWW入門」というサイトがあります。 ほとんど理解できてませんが、「JavaScript」や「cgi」についての解説もあります。 ちなみに、僕がhtmlを覚えたのはほとんどこのサイトからですし、 ホームページの作り方の作成にあたっても参考にさせていただいてます。

それはさておき、覚えると便利なタグについて説明します。

☆<hr>タグ

水平方向の罫線(横線)です。このページにもたくさん使ってます。(少し上にある見出しの上の部分など)
属性(color,widthなど)も指定できますが、ほとんど非推奨のようです。 代わりにスタイルシートで設定できるようですが、詳しくは「3.<hr>タグの属性について」で説明します。

☆リスト関係のタグ

このページの少し上にある「☆目次☆」のようなナンバー付きリストや、 下のサンプル表示例にある「タグの解説」のような用語解説風のリストを作ることができます。
ナンバーの種類を設定できる属性(type)などがありますが、ほとんど非推奨のようです。 代わりにスタイルシートで設定できるようです。

リスト関係のタグ・サンプル
<div>手製のhtml解説です(公表順)</div>
<ol>
  <li>山本家でもできるホームページの作り方</li>
  <li>山本家でもまだなんとかできるホームページの作り方2</li>
</ol>

<div>手製のhtml解説です</div>
<ul>
  <li>山本家でもできるホームページの作り方</li>
  <li>山本家でもまだなんとかできるホームページの作り方2</li>
</ul>

<h4>タグの解説</h4>
<dl>
  <dt>&lt;ol&gt;〜&lt;/ol&gt;</dt>
    <dd>ナンバー付きのリストになります。
    リストの項目は&lt;li&gt;〜&lt;/li&gt;で設定します。</dd>
  <dt>&lt;ul&gt;〜&lt;/ul&gt;</dt>
    <dd>ナンバーの付かないリストになります。
    リストの項目は&lt;li&gt;〜&lt;/li&gt;で設定します。</dd>
  <dt>&lt;dl&gt;〜&lt;/dl&gt;</dt>
    <dd>用語解説のようなリストになります。用語(タイトル)を&lt;dt&gt;〜&lt;/dt&gt;で、
    解説を&lt;dd&gt;〜&lt;/dd&gt;で設定します。</dd>

リスト関係のタグ・サンプルの表示例
手製のhtml解説です(公表順)
  1. 山本家でもできるホームページの作り方
  2. 山本家でもまだなんとかできるホームページの作り方2
手製のhtml解説です

タグの解説

<ol>〜</ol>
ナンバー付きのリストになります。リストの項目は<li>〜</li>で設定します。
<ul>〜</ul>
ナンバーの付かないリストになります。リストの項目は<li>〜</li>で設定します。
<dl>〜</dl>
用語解説のようなリストになります。用語(タイトル)を<dt>〜</dt>で、 解説を<dd>〜</dd>で設定します。

☆<strong>タグ、<em>タグ

強調したい時に使います。通常、<strong>〜</strong>は太字、<em>〜</em>は斜体になりますが、 プラウザによっては別の方法で強調されることもあるようです。

<strong>タグ、<em>タグの表示例
<strong>太字</strong> → 太字
<em>斜体</em> → 斜体

☆<nobr>タグ、<wbr>タグ

html4.0では定義されていないので僕は涙を飲んで使わないことにしましたが、 改行を禁止する<nobr>タグと特別に改行してもよい<wbr>タグです。 改行したくないテキストとかがある時は、非常に便利なタグです。

Netscapeでは<wbr>タグでは改行しません。

<nobr>タグ、<wbr>タグタグの表示例
それぞれ<table border=1 cellspacing=0 width=100>の表の中に入れてみました。

じゅげむじゅげむごこうのすりきれかいじゃりすいぎょの
じゅげむじゅげむごこうのすりきれかいじゃりすいぎょの

<nobr>じゅげむじゅげむごこうのすりきれかいじゃりすいぎょの</nobr>
じゅげむじゅげむごこうのすりきれかいじゃりすいぎょの

<nobr>じゅげむじゅげむごこうのすりきれ<wbr>かいじゃりすいぎょの</nobr>
じゅげむじゅげむごこうのすりきれかいじゃりすいぎょの

このページのトップへ

2.そのほかのスタイルシート

レイアウト系のスタイルシート

「margin」
指定した要素(開始タグと終了タグとに囲まれた部分)と外側にある要素との幅(枠の外側の余白)を指定します。 「margin-top」,「margin-right」のように個別に指定することもできます。
「padding」
指定した要素とその外側にある枠との幅(枠の内側の余白)を指定します。 「padding-bottom」,「padding-left」のように個別に指定することもできます。
「line-height」
指定した要素のテキストの行間を指定します。
「text-indent」
指定した要素のテキストの最初の1行を字下げします。
4つのスタイルシートを使ったサンプル
<div>スタートです。</div>
<table border=1 cellspacing=0 width=300 style=" margin: 1em ">
<tr><td>
<p style=" padding: 10px; line-height: 150%; text-indent: 1em ">〜説明文〜
</p>/td></tr>
</table>
<div>終了です。</div>

スタイルシートを使ったサンプルの表示例
スタートです。

こちらにはスタイルシートを使っていません。

終了です。

スタートです。

こちらにはスタイルシートを使っています。 枠線の外側は1文字(1em)分、内側は10px分余白を取りました。 行間を150%と広めにし、最初の1行を1文字分字下げしています。

終了です。

☆スタイルシートの便利な使い方

スタイルシートはstyle属性で指定するだけでなく、<head>〜</head>の中に次のように記述し、 タグごとに指定することも、名前をつけて指定することもできます。 さらにスタイルシートを外部ファイルに記述することもできるようです。

<head>〜</head>への記述サンプル
<style type="text/css">       <head>と</head>との間ならどこでもかまいません
<!--
p { padding: 10px; line-height: 150%; text-indent: 1em }  ←<p>〜</p>にスタイルを指定できます
.m1 { margin: 1em }                 ←<body>〜</body>でclass属性(class=m1)を
a:hover { color: yellow }             指定したタグ内の要素にスタイルを指定できます
-->
</style>

上の4つのスタイルシートを使ったサンプルは次のようになります。 何度も使うスタイルは、<style type="text/css">〜</style>にまとめて指定しておくと本文がすっきりします。

もう一つの4つのスタイルシートを使ったサンプル
<div>スタートです。</div>
<table border=1 cellspacing=0 width=300 class=m1>
<tr><td>
<p>〜説明文〜      ←タグごとに指定する必要はありません
</p></td></tr>      すべての<p>〜</p>が同じスタイルになります
</table>
<div>終了です。</div>

最後に、ちょっとおしゃれ?な「a:hover { color: yellow }」について説明します。 上の記述サンプルのように「a:hover { color: yellow }」を指定しておくと リンクを張った文字(<a href="〜">文字</a>)の上にマウスを乗せた時に、 文字の色(yellow)が変わります。右下の「このページのトップへ」にマウスを当ててみてください。

タグもスタイルシートもまだまだたくさんありますが、もう僕にはお手上げです。すみません。

このページのトップへ

3.<hr>タグの属性について

水平方向の罫線<hr>は、属性を指定しないで使うのは大丈夫ですが、色をつけようとすると少し工夫が必要です。

色つきの線を引くことをhtmlで考えますと、次の4つの方法が考えられます。

  1. <hr>タグの(非推奨)属性を使う。
  2. <hr>タグにスタイルシートの「color」を使う。
  3. 線を背景と考え、スタイルシートの「background]を使う。
  4. スタイルシートの「border」を使う。
<hr size=5 color=red>


<hr style=" height: 5px; color: red ">


<div style=" background: red; width: 100%; font-size: 5px "></div>

<div style=" border-top: 5px solid red; padding-top: 10px ">これで終わりです</div>

これで終わりです

Internet Explorerではどれも赤の罫線に見えますが、Netscapeでは赤の罫線に見えるのは4番目だけです。 色つきの横線を引くときは「border」を利用することにしました。

このページのトップへ

4.<table>タグのbordercolor属性について

<table>タグのbordercolor属性はhtml4.0では定義されていないようです。加えてNetscapeでは色の表示がおかしいです。 そこで、スタイルシートの「border-color」を使ってみましたが、Internet Explorer、Netscapeとも色の表示がおかしくなりました。

bordercolor属性
<table border=3 cellspacing=3 cellpadding=5 bordercolor=red>
<tr><th bordercolor=blue>表題</th><th>ああ</th><th>いい</th></tr>
<tr><th>ああ</th><td bordercolor=blue>○</td><td>×</td></tr>
<tr><th>いい</th><td>×</td><td bordercolor=blue>○</td></tr>
</table>
bordercolor属性
表題ああいい
ああ×
いい×
スタイルシート「border-color」
<table border=3 cellspacing=3 cellpadding=5 style=" border-color: red ">
<tr><th style=" border-color: blue ">表題</th><th>ああ</th><th>いい</th></tr>
<tr><th>ああ</th><td style=" border-color: blue ">○</td><td>×</td></tr>
<tr><th>いい</th><td>×</td><td style=" border-color: blue ">○</td></tr>
</table>
スタイルシート「border-color」
表題ああいい
ああ×
いい×

<hr>タグの属性でも使ったスタイルシートの「border」なら色の表示は問題ありません。

<table style=" border: 3px solid red; padding: 5px ">
<tr><th style=" border: 1px solid blue; padding: 5px ">表題</th>
<th style=" border: 1px solid red; padding: 5px ">ああ</th>
<th style=" border: 1px solid red; padding: 5px ">いい</th></tr>
<tr><th style=" border: 1px solid red; padding: 5px ">ああ</th>
<td style=" border: 1px solid blue; padding: 5px ">○</td>
<td style=" border: 1px solid red; padding: 5px ">×</td></tr>
<tr><th style=" border: 1px solid red; padding: 5px ">いい</th>
<td style=" border: 1px solid red; padding: 5px ">×</td>
<td style=" border: 1px solid blue; padding: 5px ">○</td></tr>
</table>
表題 ああいい
ああ ×
いい ×

ただし、この方法だと内枠まで色を使うのはとても面倒なので、 原則として、枠線に色を使うのは外枠(文字を枠囲みするときなど)だけにしようと思っています。

このページのトップへ

5.スタイルシート「text-align: center」について

<center>はhtml4.0では非推奨のタグですが使用すると、Internet Explorer,Netscapeともに 文字、画像、表がセンタリングします。

スタイルシートの「text-align: center」を指定すると、Netscapeでは、文字、画像はセンタリングしますが、 表はセンタリングしません。(Internet Explorerではどれもセンタリングします)

<table>にスタイルシートの「margin-left: auto; margin-right: auto」を指定すると、 Netscapeでは、表だけはセンタリングします。(Internet Explorerではどれもセンタリングしません)

両方のプラウザでセンタリングするように、表については両方のスタイルシートを指定することにしました。

<div style=" text-align: center ">
<table border=3 cellspacing=3 cellpadding=5 style=" margin-left: auto; margin-right: auto ">
<tr><th>表題</th><th>ああ</th><th>いい</th></tr>
<tr><th>ああ</th><td>○</td><td>×</td></tr>
<tr><th>いい</th><td>×</td><td>○</td></tr>
</table>
</div>
表題ああいい
ああ×
いい×

このページのトップへ

6.そのほか気づいたこと

<pre>〜</pre>で囲んだ部分を表の中に入れると、Internet ExplorerとNetscapeとで見ばえが違うようです。 表以外の時は<p>〜</p>と同じように後の要素と1行空くのですが、表の中に入れてNetscapeで見ると1行空きません。 「margin-bottom: 0px」を指定するなど余白を調整してやると見ばえがほぼ同じになります。

マウスを乗せたときにリンクを張った文字の色を変えるスタイルシートは、 Netscapeでは名前付けしたところ(<a name="〜">〜</a>)も色が変わります。

文字に影を付ける「filter:dropshadow()」を使ったのですが、Netscapeでは普通の文字で表示されます。

僕がよくやってしまう失敗例
☆山本家でもまだなんとかできるホームページの作り方2☆
このページのトップへ
Copyright (C) 2004 Nago
初版 : 2004年8月6日
YAMAMOTO FAMILY