HTML・CSS：引用・転載であることを示す・引用先のリンクをするblockquoteタグ、qタグ、作品名の引用をするciteタグ、用語を定義するdfnタグ、略語を表すためのタグabbrタグ、写真、挿絵、図表、コードなどのまとまりを作るfigureタグ、写真などの説明を足すfigcaptionタグ

<blockquote>タグとは

<blockquote>タグ（ブロッククウォート）とは、（長文の）引用・転載であることを示す・引用先のリンクをするためのタグです。ちょっと何言ってっかわかんねぇって感じですよね。実物を見るとわかると思います。これです。

引用をすると、左上と右下に「”」マークがつくと思います。これによって、「ああこの内容はどこかから引っ張ってきた内容なのね」と伝えることが出来ると思います。
これは見ている人だけに伝えるのではなく、検索エンジン側にも「パクったわけではありません！」と伝えることが出来ます。SEO対策にもつながります。（他人の記事のコピペだとかはエンジン側にすぐバレます。そうなるとページ自体の評価が下がることにつながるため、きっちり引用であることを示しておきましょう。）

<blockquote>タグの使い方

<blockquote>タグを使う方法は簡単です。まず、<blockquote>と</blockquote>の間に引用したい内容をコピペしましょう。
また、引用先のURLを指定したい人はcite属性を使うことによってそれも可能になります。ただこのURLは見ることが出来るわけではなく、検索エンジンに伝えるためなので見た目だけでは変化はありません。

<blockquote>これは引用です</blockquote>

これが通常の<blockquote>タグ。URL指定はこうです。↓

<blockquote cite="http://111111monji.com/htmlcss/">これは引用です</blockquote>

cite=”この中に引用先のURLを書いてあげましょう。”

<q>タグと<blockquote>タグとの違い

<q>タグ（quotationの略）も後ほどご紹介するのですが、こちらのタグもまた引用・転載であることを示す・引用先のリンクをするためのタグです。一体何が違うのかと言いますと、引用できる文章の長さが異なります。

長文はわかりますよね、例えばこんな感じの引用です。↓

これが長文の引用（<blockquote>タグ）です。では次は短文の引用を見てみましょう。

このDon’t think. feel！の部分を<q>タグで囲っています。<q>タグで囲っているのですが、自然と「」がついています。コードはこうです。

<p>一文字は言った。<br>
「ええ、私の作品は何を伝えたいのかを考えているわけではない作品が多いです。つまり…ええ。そうですね。<q>Don’t think. feel！</q>敢えて言うならそんな感じです。だから脳が退化するのだろうって？ふっ…まったくその通りですね。」</p>

ご覧の通り、<q>タグとセリフしか書いていないのに、「」がついて強調させられていますね。
というわけで、<q>タグは短い単語の時に使用しましょう。

引用マークのデザインを変更したいときのCSS

いちもんじのHPにはWordpressのcocoonという無料テーマを使っています。それを使うと引用のマークが非常に見にくいんですね。”が白くなってしまい、「え？なにこれ視力検査？」って事態になってしまいます。なのでこのページだけ”この引用マークを黒くしています。そのCSSはこちら。

blockquote:before{
    color: #000000;
    top:10%;
    font-size: 60px;
}

blockquote:after{
    color: #000000;
    top:100%;
    font-size: 60px;
}

blockquote:beforeが引用の前の方（左上）に表示される”マークのことです。逆にblockquote:afterは引用の後の方（右下）に表示されるマーク”のことです。色を黒にして位置とサイズを調整しています。位置は●●pxなどの数値で指定してしまうと、右下のマークの場合行数が変わったときに位置がずれてしまうので％で指定しました。

<q>タグとは

↑の項目でさんざんお話はしているのですが、<q>タグ（quotationの略）とは引用・転載であることを示す・引用先のリンクをするためのタグです。<blockquote>タグもまた同じ機能がありますが、引用する長さによって使い分けることをご紹介いたしました。<q>タグは短い単語やセリフなどを引用するときに使用します。
また、このタグも「引用したよ」ってことを検索エンジンに伝える仕事をしますので、SEO対策的にも役に立ちます。（パクリではないと証明する必要がある）

<q>タグの使い方

<q>タグの使い方はとても簡単で、引用したい箇所を<q>と</q>の間に挟むだけです。

<q>人がゴミのようだ</q>

こうすると、こう表示されます↓

「」を付けた記憶はありませんが、こうやって引用であることを伝えてくれています。（なんか見た感じただのセリフみたいですけど…）
また、引用先のURLを指定したい人はcite属性を使うことによってそれも可能になります。ただこのURLは見ることが出来るわけではなく、検索エンジンに伝えるためなので見た目だけでは変化はありません。（使いまわし長文）使い方としてはこうです。↓

<q cite="https://www.ghibli.jp/">人がゴミのようだ</q>

cite=”この中に引用先のURLを書いてあげましょう。”
（ちゃんとスタジオジブリのHPをリンクしてます）
このURLは誰かに見せるものではなく、検索エンジン側に伝える意味を持っています。なので画面上に表示がされることはありません。

<cite>タグとは

<cite>タグ（サイト）とは、作品名を引用をするためのタグです。作品名ってなんぞ？って感じですね。たとえばいちもんじのゲーム「罪と罰」など、誰かの何かの作品のタイトル（映画なり本なり）を引用してますという意味を持たせるためのタグになります。
また<cite>タグで引用したものは検索エンジン側にも「引用である」ということを伝えてくれるため、実際に引用したものであればこちらのタグを使用しましょう。

<cite>タグの使い方

<cite>タグでは、まず<cite>と</cite>の中に引用したい作品名を書きます。

<cite>罪と罰</cite>

<cite>タグの中に入れられるものはゲーム名だけではありません。使えるものとしては、こんなものがあります。

<dfn>タグとは

<dfn>タグとは、用語を定義するタグです。用語を定義？何？どゆこと？と思われるかもしれません。例えばですが、こういうHTMLを紹介するような記事を書いているときに<dfn>タグという単語を繰り返し紹介することになります。wikiペディアなんかも、単語が登録されていてその説明がずらりと書き連ねられていますが、この<dfn>タグを使って用語を登録してあるかも知れません。
用語は何度も使用されますが、（例えば「りんご」について説明してあるページでは「りんご」を何度も使用）最初に使用します。（繰り返し使うときの一番最初に使う）

<dfn>タグの使い方

<dfn>タグの使い方は簡単で、用語として定義したい単語を<dfn>と</dfn>の間に書くだけでOKです。↓

<dfn>dfn element.</dfn>

こうするとこのように表示されます↓

用語として登録した単語はこのように斜体で表示されます。ただこのHPのデフォに設定しているメイリオは斜体がないので日本語で登録しても斜体にはなりません。わかりづらいんだなぁ。

正式名称を登録するtitle属性

<dfn>dfn element.</dfn>

この例で言うと、用語として登録されているのはdfn element.になります。
もしも定義している単語が略語等の場合はtitle属性の中に正式な名称を入れ込みましょう。↓

<dfn title="dfn">dfnタグを登録していますよ</dfn>

このtitle属性に記入するのは正式名称になります。例えばHTMLだったら、HyperText Markup Languageをtitle=”ここに書く”ことになります。

<dfn title="HyperText Markup Language">HTML</dfn>

<abbr>タグとは

<abbr>タグとは、略語を表すためのタグです。例えばHTML（HyperText Markup Language）も略語ですね。マウスポインタをあてた際に正式名称が表示されるようになります。

下に破線がついて、マウスポインタをあてると正式名称が表示されるようになりました。

<abbr>タグの使い方

<abbr>タグの使い方は、略語を<abbr>と</abbr>の間に挟むように書くだけでOKです。

<abbr>HTML</abbr>

マウスをあてたときに正式名称が表示されるようにするにはtitle属性を使用します。

<abbr title="HyperText Markup Language">HTML</abbr>

<dfn>タグと組み合わせて使う

<dfn>タグは正式名称として定義をするタグでした。これと組み合わせると、用語も定義して、略語も作って、正式名称も表示できる完璧な組み合わせとすることが出来ます。

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>

これを表示させるとこうなります↓

<figure>タグとは

<figure>タグとは、写真、挿絵、図表、コードなどのまとまりを作るタグになります。検索エンジン側に、これは絵とか写真なんだなって認識させる機能もあるらしいです。自己完結型となっていて、それだけ見ても意味が通るようにしておく必要があります。

<figure>タグの注意点

たとえば1番目の写真と２番目の写真が何か関連を持ったものだとします。１番目に<figure>タグを付けて、２番目にも<figure>タグをつけるというのは別々のコンテンツになっているので×です。例を示すとこうです。↓

<figure>
<img src="ex-a.png" alt="１つ目の画像です">
<figcaption>１つ目の画像です</figcaption>
 </figure>

<figure><video src="ex-b.mov"></video>
<figcaption>１つ目の画像の映像版です</figcaption>
</figure>

<figcaption>タグについてはこの後説明いたしますが、<figure>タグで指定した画像や写真なんかのキャプションを付けるためのタグだと思ってください。
この場合関連している２つのコンテンツを別々に分けているのでよくありません。正しく記載するにはこうしましょう。

<figure>
<img src="ex-a.png" alt="１つ目の画像です">
<figcaption>１つ目の画像です</figcaption>

　<figure><video src="ex-b.mov"></video>
　<figcaption>１つ目の画像の映像版です</figcaption>
　</figure>
</figure>

お分かりだろうか…。（なぜかホラー風）<figure>タグの中に<figure>タグを入れ子にしています。
こうすることによって、１つ目の画像と１つ目の画像の映像版が関連するものだということになるんですね。

<figcaption>タグとは

<figcaption>タグとは、キャプションまたは凡例を付けるタグのことです。<figure>タグと一緒に使用されます。

<figure>タグと<figcaption>タグの使い方

<figure>タグは単独でも使用可能ですが基本的には<figcaption>タグと一緒に使う方が親切だと思います。
まず、<figure>タグで画像を使っていたり写真を使うためのブロックを作ります。そして<figure>タグの中に「コード」だったり「写真」だったり「動画」だったりを配置し、<figcaption>と</figcaption>の中にその画像や写真などの詳細な情報を記載します。

 <figure>
 <img src="画像のありか" alt="画像についてのキャプション。読み上げ機能で読み上げられるだけで実際に表示されるわけではありません">
  <figcaption>その写真についての詳細な情報</figcaption>
 </figure>

例として実際にコードを書いてみます。↓

<figure>
<img src="http://111111monji.com/wp-content/uploads/2023/10/AA.png" alt="AA">
<figcaption>これはアスキーアートと言います。</figcaption>
</figure>

これを実際に表示させるとこうなります↓

画像の下の方に注釈のような形で詳細情報が入りました。