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

q要素について知りたい人

q要素について知りたいな!

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

この記事でお話すること

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

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

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

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

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

q要素の評価

頻出度

(3.0)

重要度

(3.0)

総合評価

(3.0)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

q:before {
 content: '「'; 
} 

q:after { 
 content: '」';
}

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

リンク

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント