HTML

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

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

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

blockquoteタグ(ブロッククオートタグ)

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

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

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

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

ulタグ、olタグ、liタグ(リストタグ)

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

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

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

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

ulがolに変わりました。
こうすると、箇条書きのリストから、順序付きリストへと変更することができます。
どういうことか! 実際にブラウザで見てみると良いでしょう!

<ul>で書いた場合。

See the Pen 箇条書きリスト by jugedred (@jugedred) on CodePen.

<ol>で書いた場合。

See the Pen 順序付きリスト by jugedred (@jugedred) on CodePen.

このようにolで書くとリストの項目に1から順に番号が振られていきます。これ順序つきリストです。

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

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

スポンサーリンク

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

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA