Chapter5：すこーし息抜き

いろいろなバリエーションでドレスアップしてみよう

■最初に

ここではいろいろなタグの中からよく使われる物の一部を紹介します。今まで紹介してきた書き方を元にいろいろ組み合わせて試してみて下さいね。こういったタグを使って遊んでいるうちにいろいろ覚えられると思います。ただ紹介している中にはW3Cでは現在推奨されていない物も含まれています事を事前にご了承下さい。

■基本構造

いろいろなタグを使って試してみる前にHTMLファイルの構成を整理しておきましょう。

■偽テキストエディタ
ファイル(F)　編集(E)　書式(O)　ヘルプ(H)　
<html>-----これはhtmlファイルが始まりますよという事を宣言します。
    <head>-----ヘッダ部の開始：タイトル等が間に入ります。
        <title>タイトル</title>-----タイトルです。
    </head>-----ヘッダ終了部：ヘッダ部の終了を宣言します。
    <body>-----ここから表示される本文が始まります。
 
        本文：表示される内容を記述する所です。
        内容はこのbodyというタグの間に記述します。
        bodyタグやhtmlタグの外には本文は書けません。
 
    </body>-----ここで表示される本文が終わります。
</html>-----htmlファイルが終わりましたよと言う事を宣言します。

上の図を見ればわかると思いますが本文を書く事ができるのは特殊な場合を除けば原則として<body>から</body>の間だけです。これを間違わないように注意しましょう。このルールさえ守っていれば<body>から</body>の本文部分が10行になっても100行になってもきちんと表示されます。ただ内容の書き方を間違った場合は当然表示されなくななったりへんてこりんになる事があります。では楽しんでみてください。

早速いろいろチャレンジしてみましょう。タグを覚える時のコツは嫌々ではなくて（考えながらも）いろいろ工夫して自分なりに楽しむ事です。そうしないと息切れしちゃいます。きっと。

■テキストレベルエレメント

テキストレベルエレメント（インラインエレメント）はテキストと同じ扱いです。難しく考えなくても普通にテキストを書く時と同じ様に「指定しない限り改行しない要素」の事です。

■文字の大きさを変えてみる

<font size="+1">この文字は「基準サイズ+1」の大きさです。</font>

この文字は「基準サイズ+1」の大きさです。

このサイズは-2から+4の7段階で相対指定となります。また1から7（デフォルトは3）の数字で直接指定する事もできます。

■更に文字の色を変えてみる

<font size="+1" color="red">
  この文字はサイズ+1に加えて色が赤になります。
</font>

この文字はサイズ+1に加えて色が赤になります。

色は「red」の部分を変えることによっていろんな色が指定できます。

■文字を太くしてみる

<b>これは太字です。</b>

これは太字です。

■斜体にしてみる

<i>これは斜体です。</i>

これは斜体です。

■下線を引いてみる

<u>下線をつけます。</u>

下線をつけます。

■いろいろ組み合わせてみましょう

<p>
  <font size="3">
    いろいろ
      <font color="green">
        あれこれ
          <i>
            組み合わせ
          </i>
        たりして
      </font>
    遊んでみると
      <b>
        <font color="blue">
          <u>
            面白い
          </u>
          かも
        </font>
      </b>
    ですよ。
  </font>
</p>

上の例みたいに組み合わせると下みたいに表示されます。
いろいろあれこれ組み合わせたりして遊んでみると面白いかもですよ。
 
とゆう感じでいろいろできますが今回の例のようにあまりやりすぎるとごてごてして見づらくなり逆効果です。かなり。

■小技：メールをもらおう
メールをもらう為にページにメールアドレスを記述する際は以下のように記述すると自動的に宛先が書き込まれた状態でメッセージ画面が起動されますので（例外もありますけど）少し便利です。
<a href="mailto:your@email.add">愛のメール屋さん</a>
リンクと同じ要領ですね。違うのは属性値（今まではファイル名を書いていた所）に"mailto:あなたのEmailアドレス"という記述をする事です。これだけでこのリンク（またはボタン）をクリックすると自動的に送信先アドレスを設定したメーラー(記入したアドレス向けのメール画面)が起動するようになります。

■ブロックレベルエレメント

ブロックレベルエレメントはテキストレベルエレメントと逆で特別に指定しない限りその前後に改行を伴います。改行した時の見栄え等はブラウザによって異なる場合が多くあります。

■中央に寄せたい場合

<center>これは中央表示です</center> このタグで囲まれたブロックは画面(ブラウザの)中央に表示されます。

■文書内での見出し

<h1>見出し</h1>

「h＊」は見出しを表します。h1からh6まで6つの段階で表せます。段階によって文字の大きさが変わりますがこれは見出しのレベルを表すものなので間違って文字の大きさを変える為には使わないようにしましょうね。

■段落

<p>これは段落の意味で使います。</p>

今までも使いましたね。 意味合いは以前書きましたので省略します。

■少し難しいけど覚えられると便利なタグ

■リストを作る

<ul>
  <li>りぼん</li>
  <li>まーがれっと</li>
</ul>

中にある「li」はいくつでも増やせます。 「li」の終了タグは省略可能とされていますがきちんと付ける事をお勧めします。

■テーブルを使う

<table cellspacing="2" cellpadding="4" border="2" width="200">
  <tr>
      <td width="50%">
          まりも
      </td>
      <td width="50%">
          もぐら
      </td>
  </tr>
  <tr>
      <td width="50%">
          水中
      </td>
      <td width="50%">
          地中
      </td>
  </tr>
</table>
まりも もぐら
水中 地中

表示する内容は<td>から</td>の間に書きます。<td>は<tr>の中にサンドイッチする形で書きます。同じように<tr>は<table>の中に入ります。今までより少しややこしいですね。

少し詳しいテーブルの解説はこちらです。

■その他の良く使われるタグ

■水平線

<hr>

水平方向に線を引いてくれます。 長い文章をセパレートしたり項目を区切ったりアクセントに使ったりといろいろ役立ちます。 初心者にこの横線を教えた時によく聞かれるので先に書いておきますけど。縦線はありませんので。

■強制改行

<br>

文章の途中で強制的に改行させたい場合に使用するタグです。 また何らかの回り込みを解除したい場合にも属性を付加して用います。 間違っても広告を下げたり隠したりというふざけた行為の為のタグではありません。

ということで。こちらではとりあえずこの位にしておきましょう。

■最後に

このように簡単なところから入って仕組みを少しずつ覚えていけば意外となんとかなりそうでしょ。以前にも書いたかもしれませんがここは簡単なhtmlの雰囲気を感じてもらえればそれで十分かなと思っています。そうなので本当にはしょった書き方で通しました。書きたい事を全部書いていたらコンセプト自体がずれてきそうですしきりがありませんもの。でも書いてある事をきちんと理解すればこれだけでもかなりいろいろな事が実現できるはずですし応用も利くと思います。

もしこれで興味が湧いてきたらもっと詳しく解説しているサイトへ旅立ってみましょう。ここまで順番にクリアしてきた方々ならばもう他の講座を見てもある程度理解できるようになっていると思います。あなたのこれからの健闘を祈っています。

表紙へ
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送