[blockquoteとの違いは?] htmlのq要素の意味は? 使い方・読み方も解説!

この記事は上記のような疑問を解消するものとなっています。

q要素は引用された文章であることを示すためのものです。

q要素は段落が必要のない短い引用に用います。

頻繁に使われることがないので、HTMLを学び始めた初心者の方はq要素を理解できていない人も多いかと思います。

そこでこの記事ではq要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.q要素とは? 読み方は?

q要素はquotationの略で、引用されたテキストを表します。

cite属性を使用すると、引用元のURLを示すことができます。

読み方は「クォートヨウソ」です。

q要素は改行がなく、比較的短い文を引用する際に使われます。

一方、段落ごとや長い文を引用する場合、blockquote要素を使いましょう。

使用できる属性

↓↓↓↓ cite要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年12月21日htmlのciteタグとは? 使い方・斜体にならない場合の方法も解説!

2.q要素の使い方

q要素は短い引用文であることを示すものになります。

q要素を使用する場合、自動的にカッコや引用符が付けられます。

通常の文字の太さや引用符をCSSで変更が可能となっています。

また、cite属性を使用すると、引用元のURLを示すことができます。

その場合、「<q cite=”引用元のURL”>~</q>」となります。

引用元のURLは検索エンジン向けのもので、ユーザーの目にはふれません。

それではq要素の使い方をみていきましょう。

<p>ジムロジャースは<q>大好きなことに情熱のすべてを注ぎなさい</q>と言いました。</p>

主要なブラウザでは、デフォルトでq要素の前後に引用符がつくようになっています。

引用符はCSSで簡単に上書きできます。

例えば代わりにカッコを使う場合には、以下のようなCSSを指定します。

q:before {
 content: '「'; 
} 

q:after { 
 content: '」';
}

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?