トップページ>>HTML>>書き方>>タグその1>>タグその2>>タグその3

リンクを張ってみよう

ホームページに欠かす事の出来ないもの。
それは、他のページへのリンクです。
他人のページにリンクさせるのも必要ですし、
自分の作った別ページにリンクするのも必要です。

リンクを張る時に必要なタグをご紹介いたしましょう。 <a></a> <a>タグです。
このように使います。 <a href="reidai.html">ここ</a>がリンクです。 ここがリンクです。 <a>タグで囲んだテキストに、リンクが張られました。
hrefプロパティは、リンクをする時にそのページがどこにあるかを指定する物です。
 先ほどの画像のリンク(パスと言います)と同じように、
同じフォルダ内ならファイルの指定だけで良く、
別のフォルダなら、そのフォルダへの道筋も指定してあげなくてはなりません。

 テキストにしかリンクを付けられない訳では無く、
画像にもリンクを付けてあげる事も出来ます。
<a href="reidai.html"><img src="../gazou/reidai01.gif" alt="例の絵"></a> 例の絵
 自分のウェブサイトならば、このやり方でリンクを張って、
色々なページを見せる事が出来るでしょう。
では、他人の作ったページをリンクさせたい場合はどうすれば良いでしょうか?
<a href="http://www.apple.com/jp/">ここ</a>がリンクです。 ここがリンクです。  さぁ。アップルのページに行きましたか?
そうです。ブラウザの上の方にあるURLをそのままコピー&ペーストすれば良いのです。
たったそれだけの事です。簡単な事ですね。

 ちなみに、先の指定の仕方を「相対パスでの指定」
後の指定の仕方を「絶対パスでの指定」と言います。
ページの上へ

リストを作ってみよう

リストなんて一体何に使うんだ?
そんな事を考えていませんか?
私も初めてこのタグに触れた時、使い道が浮かばないなぁ。と思っていました。

 しかし、実際にホームページを作ってみると、良く使う事に気がつきました。
そうです。普通に使うだけでは、そんなに価値のない物かも知れませんが、
CSSとの連携などで、考えて使うと、便利な物になり得る物なのです。
そんなリストを作るタグをご紹介いたします。 <ul><li></li></ul>
<ol><li></li></ol> <ul>タグ<ol>タグです。

 まず、<ul>タグは、行頭記号付きリストと言います。
つまり、行頭が記号だと言う事です。
 そして、<ol>タグは、行頭数字付きリストと言います。
つまり、行頭が数字だと言う事です。

二つに共通する物が、<li>タグです。
この中に入った物が、リスト化されると言う事です。
 実際にやってみましょう。 <ul>
<li>犬</li>
<li>猫</li>
<li>馬</li>
<li>鹿</li>
</ul>
<ol>
<li>犬</li>
<li>猫</li>
<li>馬</li>
<li>鹿</li>
</ol>
  • 鹿
  1. 鹿

 このように、<ul>では序列がありませんが、
<ol>では序列があります。
役員名簿などを作った時に、<ol>を使ってしまうと、
後々大変な事になってしまいそうな気がしますので、
気をつけてください。

枠組みを作ってみよう

効果の見えづらいタグですが、レイアウトを作る上で非常に重要なタグをご紹介いたします。
<div><div> <div>タグです。
これは何かの物をブロック要素にまとめると言うタグです。
 意味が分かりませんね。
それでは、使い方を見てみましょう。 <div>今日は晴れだ!</div><div>明日は雨だ!</div>
今日は晴れだ!
明日は雨だ!
 改行をしていないのに、改行されましたね。
これは、間の物をブロック要素にしているからなのです。
<div>今日は晴れだ!明日は雨だ!</div> こうしてみます。すると
今日は晴れだ!明日は雨だ!
こうなります。
ブロック要素と言うのは、横幅いっぱいまで効果が続きます。
なので二つの<div>があると、
一つ目の<div>が横幅をいっぱいまで使うため、
次の行に二つ目が表示されると言う事です。

インライン要素としてくくりたい場合はどうしましょう。
そんな時はこれ。 <span></span> <span>タグです。
<span>今日は晴れだ!</span>明日は雨だ! 今日は晴れだ!明日は雨だ!  何の効果もありません。
しかし、CSSを使う事によって、
この二つは、強大な力を得る事になります。
そんな所で、そろそろCSSを学んで行きたいと思います。

 HTMLのタグはこれしか無いと思っているのでしたら、
それは違いますが、おおよそこれくらいの物だと思います。
ここで紹介しなかったタグも、
よそ様のサイトでは丁寧に解説されていると思いますので、
興味があったり、解らない事があったら、探してみてください。
このサイトでは、基礎的な事しか扱っておりませんので、
ご自分で書籍を購入し、自ら学ぶ事も大切だと思います。

 それではCSSへと進んで行きましょう!

<<前へ 次へ>> ページの上へ