双極くんの学び

双極くんが学んだことをご紹介します。

コツコツゆっくりプログラミング学習part7【HTML】引用blockquote・q・cite属性

はい、どうもこんにちは。双極くんです。

今回ですけども…。

HTMLの引用について学んで行きたいと思います。

 

引用には大きく2種類あります。まとめてブロック全体(文章の長いもの)を引用するパターンと、一部(一言)を引用するパターンです。

それによって書き方も異なって来ますので順番に整理していきたいと思います。

そして、最後にその引用元はどのように書けばいいのか、ということも確認していきましょう。

f:id:kazufumitan:20220402171607j:plain

 

HTMLの引用について

まとめて引用するとき

まず最初にブロック全体をまとめて引用するという場合には

  • blockquote

ブロッククォートというタグを使用します。(quoteには引用という意味があります)

 

このタグによってブロックごと引用していますよと示す事が出来ます。

一部を引用するとき

blockquoteに対し、一部を引用している事を示すためにはquoteを省略した

  • q

というタグを使用します。

これを使用して一部を引用していますよという事を示す事が出来ます。

 

引用元を表記する

blockquoteqの引用元を表記する時には、それぞれのタグに

  • cite属性

を追加する事になります。

書き方はcite="URL"と書くことが出来ます。

実際にやってみましょう

今回はこのようなファイルを用意しておきました。

 

f:id:kazufumitan:20220402182207p:plain

このファイルを開くと、このようになっています。

f:id:kazufumitan:20220402185804p:plain

 

ファイルの1つ目にはa~zまでの文字と、.(ドット)と,(カンマ)の2つが出て来るという、よくフォントの表示のチェックに使われる文章を用意してみました。

 

そして2つ目には「ある人は言った 我思う故に我あり」という名言を引用した文章があります。

文章全体がまとめて引用であることを示す

まず、最初のThe quick brown …という文章全体が引用である事を示してみたいと思います。

このpタグの外側に<blockqoute>と書いて

pタグのインデントを1つ字下げて、</blockqoute>と閉じてあげます。

f:id:kazufumitan:20220402184545p:plain

 

これによってこの<p>~</p>の中身全部がblockqoute(文章全体をまとめて引用)であることを示す事が出来ました。

 

では、これを保存して更新します。

するとこのようになりました。

f:id:kazufumitan:20220402222658p:plain

このようにインデントされました。

これによって他の文章とスタートの位置が変わりこの部分が何か違うものである、今回の場合はこの文章全体が引用であるということを伝えることが出来るようになりました。

文章の一部が引用である事を示す

では、一部の引用を示してみましょう。

今回は、我思う故に我ありと言う言葉が引用です。

という訳で、これをqタグで囲むように表記してみます。

f:id:kazufumitan:20220402230204p:plain

保存して更新します。

 

するとこのようになりました。

f:id:kazufumitan:20220402230227p:plain

qタグによって「 」(鍵括弧)が追加されました。【テックアカデミーの動画では” ”(ダブルクォーテーション)となっています】

この鍵括弧によって、これは引用されたものであるいう事を表示してくれています。

 

引用元を表記する

では、引用元を表現してみましょう。

blockquoteのタグのなかにcite属性を追加します。

今回は<blockquote cite="http://www.example.com/story.html">と書きます。

(この" "ダブルクォーテーションの中は必ずURLでなければなりません)

 

同様にしてqタグにもcite属性を追加することが出来ます。

今回は<q cite="http://www.example.com/philosophy.html">と書きます。

 

実際のファイルは次のようになります。

f:id:kazufumitan:20220402234235p:plain

 

このファイルを保存して更新しても、URLが実在するものでは無いので、見た目は何も変わりませんでした。

 

ただ、必要であればこれを見ている人はこの情報をたどることが出来る、そして文書の構造として、これはどこから引用されたのかを示す事が出来るようになっています。

 

まとめ

今回の学習では

  • brockquote(文章をまとめて引用するタグ)
  • q(文章の一部を引用するタグ)
  • cite属性(brockquoteタグにもqタグにも追加出来ます。どちらもURLを書かなければなりません)

について学ぶことが出来ました。

今回citeの記述が実際には表示されなかったので、のちほどの学習で実際に存在するURLで記述した場合にどうなるか確認したいな、と思いました。

学び

耳を傾けて賢い人たちの言葉を聞け。

格言22:17