HTML・CSS講座

写真ブロガーのための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を書くときは、記述した文章の構造をしっかり考えてマークアップすることを心がけましょう。

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

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO対策・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:Webライティング実務士・ウェブ解析士・SEO検定1級・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

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

CAPTCHA