暇人のHTML講座

友情出演？：ルベド
注：実際のルベドはこんな口調じゃありません

1 HTMLとは

どうもこんにちは〜。このたｂ
ルベド：「貴様のことはどうでもいいからとっとと教えれ」
はい・・・

HTMLとは、Hyper Text Markup Languageの略です
ルベド：「英語の勉強はN○VAでやるんで勘弁してください（　ﾉД`」
日本語訳すればすごい文章を書く言語ってところでしょうか
ルベド：「なんか難しそうなんで辞退します（´・ω・｀）」
そんなことはないです！
基本はものすごく簡単です
日本語に比べたら簡単簡単
やる気出てきましたか？
難しく考えちゃだめですよ

2 準備

要りませんといいたいところですが、
このページを見るにはマイクロソフト社のInternet Explorerを奨めます
ダウンロードはIE(Microsoft)から行ってください
大丈夫、安心してください。無料です
とりあえず、Internet Explorer（以降IE）とWindows付属のメモ帳があれば大丈夫です
ルベド：「メモ帳？文房具屋に買いにいかないと･･･」
わ〜、ちょっと待ってください！
メモ帳っていうのはテキストエディタのことです
Windows XPの場合、
スタートメニュー→すべてのプログラム→アクセサリ
でメモ帳っていうのがあるはずです・・・というかあります
これを使います
ルベド：「何じゃこりゃ　低機能やのぉ」
そういうあなたはTeraPadをお奨めします。
TeraPadもエディタソフトのひとつです
TeraPadは高機能なのにフリーソフト（無料）なのです
ダウンロードはTeraPadから行ってください
ルベド：「なんかダウンロードしたファイルが開けないんだけど・・・」
あ、忘れてました・・・
このタイプのファイルを開くには解凍と呼ばれる作業をしなくてはならないのです
ルベド：「ハァ？（´ω`ﾉﾉ）凍ってないし（´ω`」
いや・・・
・・・・・・
・・・とりあえず解凍ソフトは+Lhacaで入手してください
適当なフォルダにダウンロードしたあと、ダウンロードしたファイルをクリックしてインストールしてください
インストールが完了したら、+Lhacaのショートカットをデスクトップ上に作成してください
ルベド：「なんでやねん」
その方が便利だからです
ルベド：「へぇそうですか（棒読み」

そしたら先ほどダウンロードしたTeraPadをデスクトップ上の+Lhacaのアイコンの上にドラッグアンドドロップしてください
ルベド：「薬と飴？意味不明です奥さん」
ぅ・・・
え、えぇーっと・・・
用語集？を参考にしてください
ルベド：「手抜きめ」
ぅぅ・・・
と、とりあえずこれでTeraPadは使えるようになったと思います

3 タグ ∬初めに∬

この章からタグの説明に入っていこうと思います
ルベド：「やっとできるのか」
遅くて悪うござんしたね！
ルベド：「あぁ、悪いとも」
・・・・・・
ルベド：「いいからとっととやれって」
・・・はい

それではエディタを起動してください。
とりあえず書かなければならないことがあります

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
  本文
  </body>
</html>
ルベド：「うお〜〜！英文字がぁぁ！！」
ちょ、ちょっと待ってください
一箇所ずつ見ていきましょう

<html>



</html>
まずこれを書かなければなりません
この<html>というのは、
これからHTMLを書きますというのをコンピューターに伝えるために書きます
ルベド：「書かないとコンピューターは認識しないのか？」
はい　コンピューターは我々人間と違い、融通が利きません
それと、</html>というのは
ここでHTMLを書き終えますというのをコンピューターに伝えるために書きます
なお、HTMLではこの終えるためのタグを閉じタグと呼んでいます
HTMLではこの閉じタグは殆どのタグでつけなければなりません
ルベド：「あ〜・・・ってことは</head>とか</body>も閉じタグなんだな」
そうです　

<head>
  <title>タイトル</title>
</head>
<head></head>間にはそのページの情報などを記入します
ここでは<title></title>というタグを記入しています
このタグは、ブラウザのタイトルバー（このページの"暇人のHTML - Microsoft Internet Explorer"に相当する）に、ページのタイトルを記入するためのタグです

<body>

</body>
ここにはブラウザで表示される本文部分を書きます
ルベド：「早く教えないと銃殺刑を命じまふよ？（´ω`」
まぁまぁ、それはまた次の章に・・・

上記タグの表示サンプル

4 タグ ∬段落タグ<p>と改行タグ<br>∬

ルベド：「おらおらぁ　とっとと教えろやぁ（ρ´ω`）つυﾟ）」
ごふっ・・・
お、教えるから待ってください・・・

文章を書くには段落がありますよね？
その段落を形成するためのタグが<p>です 

<html>
  <head>
    <title>テストその1</title>
  </head>
  <body>
    <p>て〜すと</p>
    <p>1つ分の改行が入ります</p>
  </body>
</html>
これをエディタに書いて保存してみましょう

て〜すと

1つ分の改行が入ります

こうなるはずです
ルベド：「おい！ごらぁ！ならねーぞ！」

<html>
  <head>
    <title>テストその1</title>
  </head>
  <body>
    <p>て〜すと</p>
    <p>1つ分の改行が入ります</p>
  </body>
</html>
ルベド：「こうなるじゃねーか！」
ぇ？
・・・
ぇ・・・？
あぁ、そうか
大事なこと忘れてました
ルベド：「貴様！またか！」
す、すみません・・・
え、えっとですね・・・
エディタに書いて保存するときに、
ファイル名をtest1.htmlにしてください
で、ファイルを開いてみてください
そうすれば

て〜すと

1つ分の改行が入ります

こうなります　サンプル
ルベド：「ほぉ」
ルベド：「で、1つ分の改行が入りますってどういう意味だ？」
それはですね、<p>の前後に1つ分の改行が入るんです
ルベド：「段落内で改行するにはどうするんだ？」
えっとですね〜<br>というタグを使います

<html>
  <head>
    <title>テストその2</title>
  </head>
  <body>
    <p>てすとその2<br>
       これで普通の改行です<br>
    </p>
  </body>
</html>

てすとその2
これで普通の改行です

こんな感じです　サンプル

5 タグ ∬見出しタグ<h>∬

ルベド：「見出しってなんじゃい」
新聞などで重要なところが大きくなってますよね？
それのことです

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>
<h6></h6>
見出しタグの<h>には1〜6まであり、重要性によって使い分けます
ここで注意しなければならないことは、<h1>が一番重要で<h6>が一番重要でない（謎）ということです

6 タグ ∬文字装飾<b>と<i>∬

ルベド：「なんかさぁ〜」
ん？
ルベド：「文字太くとかしたいんだけど」
なら、<b>で太くなります
あと、<strong>でも同様に太くなります(ホントは意味がちょっと違うんだけどネ)
ルベド：「斜めもできる？」
斜めは<i>です

<html>
 <head>
   <title>テストその3</title>
  </head>
  <body>
    <p>
      <b>太字になります</b><br>
     <i>イタリック（斜め）になります</i>
    </p>
 </body>
</html>

太字になります
イタリック（斜め）になります

サンプル
また、組み合わせることも可能です

<html>
  <head>
    <title>テストその4</title>
  </head>
  <body>
   <p>
      <b><i>太くて斜めです</i></b>
    </p>
  </body>
</html>
サンプル

太くて斜めです

他には<u>、<s>があります


<html>
  <head>
    <title>テストその5</title>
  </head>
  <body>
    <p>
      <u>アンダーバー</u><br>
      <s>取り消し線</s>
    </p>
  </body>
</html>

アンダーバー
取り消し線

サンプル

7 タグ ∬水平線<hr>∬

ルベド：「だー！まだ読みにくいぃ！」
ん〜？
ルベド：「段落ごとの区切りがわかんねーよー！」
あ〜、そういうときは<hr>で水平線を入れましょう

<html>
  <head>
    <title>テストその6</title>
  </head>
  <body>
    <p>
      段落その1
    </p>
    <hr>
    <p>
      段落その2
    </p>
  </body>
</html>

段落その1

段落その2

これで大きな段落ごとの区切りが解りやすくなります　サンプル

8 タグ ∬フォント弄り<font>∬

ルベド：「フォントの形とか色とか単調でつまんねーよー」
だったら<font>でいろいろ変えてみましょう
この<font>は今までのタグに比べると少し複雑です
<font>は、属性というのが必要になります
ルベド：「属性？電気とか水とか地面とか？」
ポケモンのタイプじゃありません・・・
ルベド：「じゃぁ闇とか光とか雷とか？」
ファイアーエムブレムでもありません・・・
ルベド：「何なんだよ！」
・・・
<font>はこれだけでは効果がありません（CSS使ってたら別ですけども）
<font>で文字の形や色を変えるために、<font>の<fontと>の間に半角でスペースをひとつ入れたあとに色を変えるならcolor="カラーコード/ネーム"を、字体をかえるならface="字体名"を入れます
もちろんcolorとfaceを組み合わせることもできます
カラーネーム/コードについてはこちらを、字体についてはこちらを参考にしてください 

<html>
  <head>
    <title>テストその7</title>
  </head>
  <body>
   <p>
     <font color="red">赤色フォント</font><br>
     <font face="祥南行書体">祥南行書体</font><br>
     <font color="#0000ff" face="ＭＳ ゴシック">緑ゴシック</font>
   </p>
  </body>
</html>
赤色フォント
祥南行書体
緑ゴシック
どうでしょうか？
サンプル

9 タグ ∬リンク<a>∬

ルベド：「なーなー」
なんですか？
ルベド：「違うページに飛べるようにしたいんだけど」
それなら<a>を使いましょう
基本形は<a href="URI"></a>です
たとえばヤフーに飛ぶようにするとします
その場合、ヤフーのURIはhttp://www.yahoo.co.jp/なので
<a href="http://www.yahoo.co.jp/">ヤフー</a>
と書きます
ちなみに<a href="http://www.yahoo.co.jp/">ヤフー</a>のヤフーの部分はなんでもいいです 

<html>
  <head>
    <title>テストその8</title>
  </head>
  <body>
    <p>
      <a href="http://www.yahoo.co.jp/">ヤフーに飛ぶよ〜ん</a><br>
      <a href="http://www.google.co.jp/">グーグルに飛ぶですぅ〜</a>
    </p>
  </body>
</html>
サンプル

それと<a>にはもうひとつの使い方(というより指定方法)があります
自分のサイト内でほかのページにリンクするときにも使うのですが、
さきほどのようにhttp://からアドレスを書くのを絶対指定といいます
ちなみにhttp://...のことを絶対パスと言います
自サイト内でも絶対指定を使ってもいいのですが、同じアドレスを何回も書くのは面倒ですよね？
それで主に自サイト内で使われているのが相対指定というものです
この概念はちょっと難しいのですが、現在のURLを基準にしてリンクするというものです
たとえば、現在のURLをhttp://www.ait.to/~aitelu/html/index.htmlとして、http://www.ait.to/~aitelu/html/top.htmlを指定するには、
<a href="./top.html">
と書くだけでいいのです
早い話がhttp://www.ait.to/~aitelu/html/の部分を省略したと考えていいでしょう
ルベド：「<a href="./top.html">の./は何か意味あるの？」
これはhttp://www.ait.to/~aitelu/html/のディレクトリの後のファイルを指定するという意味があります
ルベド：「ディレクトリ？」
ディレクトリとはWindowsで言うところのフォルダです
なお、上のディレクトリへアクセスする場合は
<a href="../index.html">暇人のためのサイトへ</a>
という風に../にします

10 タグ ∬リスト作成<ul><ol><li>∬

ルベド：「箇条書きとかって作るの面倒くさそうだなぁ」
たとえば？
ルベド：「だからぁ・・・」

<html>
  <head>
    <title>だめテスト</title>
  </head>
  <body>
    <p>動物の種類</p>
    <p>
      ・犬<br>・猫<br>・ウサギ
    </p>
    <p>動物の行動</p>
    <p>
      ・寝る<br>・食う<br>・攻撃
    </p>
  </body>
</html>
ルベド：「こんな感じ？」
えぇーっと・・・

動物の種類

・犬
・猫
・ウサギ

動物の行動

・寝る
・食う
・攻撃

こう表示したいわけですか？
ルベド：「まぁ・・・うん」
う〜ん・・・
こういう書き方はよくないなぁ
ルベド：「ぇ？じゃぁ、どうしろと・・・」
んーと・・・

<html>
  <head>
    <title>テストその9</title>
  </head>
  <body>
    <p>動物の種類</p>
      <ul>
        <li>犬</li>
        <li>猫</li>
        <li>ウサギ</li>
      </ul>
    <p>動物の行動</p>
      <ul>
        <li>寝る</li>
        <li>食う</li>
        <li>攻撃</li>
      </ul>
  </body>
</html>
こうやってみてください
ルベド：「ん・・・」

動物の種類

動物の行動

　　

サンプル
ルベド：「ほーぅ」
他にもですね
番号つきでリストを作成するときとかは

<html>
  <head>
    <title>テストその10</title>
  </head>
  <body>
    <p>動物の種類</p>
      <ol>
        <li>犬</li>
        <li>猫</li>
        <li>ウサギ</li>
      </ol>
    <p>動物の行動</p>
      <ol>
        <li>寝る</li>
        <li>食う</li>
        <li>攻撃</li>
      </ol>
  </body>
</html>
と変更しますと・・・

動物の種類

  1. 犬
  2. 猫
  3. ウサギ

動物の行動

  1. 寝る
  2. 食う
  3. 攻撃
という風になるんです
サンプル