写真ブロガーのためのHTML入門 Vol.2

写真ブロガーのためのHTML入門の第2弾です。
今日は引用タグとリストタグについて説明します。

まず最初は引用タグである「blockquote」です。

blockquoteタグ（ブロッククオートタグ）

引用タグってどういうときに使うのか、よく分からない方もいらっしゃると思います。
簡潔にいうと、他のブログや本などから一部分を引用して自分のブログに引用したいときに使うと思っていただければいいです。

具体的にはこんな感じでかきます。

<blockquote>
見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している・・・
</blockquote>

このように引用箇所を blockquote で囲んで使用します。
このように書くと、ブラウザのデフォルトのデザインでは、blockquoteで囲んだ箇所が少し字下げされて表示されます。
引用箇所のデザインはCSSを使うことで自由にデザインを変更することができます。

ちなみに余談ですが、1990年代のWEB制作の世界では、文章を字下げするという目的でblockquoteが使われていました。本来、blockquoteは引用を表すタグだったのですが、実際には時下げというデザインを表現するために使われていたんですね。これは本来の使い方ではないということで、当時はかなり熱い議論が巻き起こっていました。現在は数多くのブラウザが一般的なCSSに対応しているため、時下げというデザインはCSSで容易にできるようになりました。というわけで、今はちゃんと引用のためにblockquoteが使われています。

ulタグ、olタグ、liタグ（リストタグ）

続きましてリストタグです。
これは箇条書きを実現するために使われるタグです。
リストタグは他のタグと違って少し複雑ですよ。

実際にどのように使われるのか紹介します。

<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>メロン</li>
<li>オレンジ</li>
</ul>

このように使います。
ulというタグと、liというタグの2種類がでてきました。
このHTMLの見方は、まず、<ul>と書くことで、これからリストが始まりますよ～、という合図を表現しています。
次に続く、<li>から実際にリストとして表現したい要素を記述していきまます。
それぞれのリストの要素を<li>から</li>までの間に書いていき、要素の数だけ繰り返します。
最後に、</ul>とかき、リストがここで終わります、ということをお知らせする、という感じです。

さて、このリストですが、このような書き方もあります。

<ol>
<li>リンゴ</li>
<li>バナナ</li>
<li>メロン</li>
<li>オレンジ</li>
</ol>

ulは「Unrdered List」、olは「Ordered List」の略語です。
タグの書き方で、ただの箇条書きと番号付きのリストと使い分けることができるんです。

た・だ・し。これも実はCSSでデザインを設定することで、どうにでもできちゃうんですよね～。
olタグのリストなのに、ただのリストのようにデザインできるし、ulタグのリストで番号を表示させることもできちゃいます！ しかし、実際にHTMLを書くときは、記述した文章の構造をしっかり考えてマークアップすることを心がけましょう。

今日はここまでにします。
おつかれさまでした！