- HOME
- > BLOG CATEGORY
- 【HTML】q要素の使い方、短い引用文であることを示す要素!

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
HTML
について学びたい方へ前回は、blockquote
について解説しました。
blockquoteとは、引用文(まとまっと量の文章)であることを示す要素になります。
qとは、短い引用文であることを示す要素になります。
引用文であることを示す要素、また使う理由、cite属性の使い方についての解説
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
q
要素とは、テキストが短い引用文であることを示します。
また、q要素を使用する場合は、自動的に括弧「」や引用符 “” が付けられます。
cite
属性を使用すると、引用元のURLを示すことができます。
書き方は以下のようになります。
q要素について
引用する文章:赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
引用する文章:<q cite="引用元URL">赤色とは、....</q>
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
q要素を使用する場合、通常の文字の太さ、引用符をCSSで変更など可能にもなります。
書き方は以下のようになります。
CSSで整える
赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告
引用する文章:<q cite="引用元URL">赤色とは、情熱・強さ・生命力・活動・祝福・派手・刺激・警告</q>
目立つ、熱を感じる、興奮させると行った心理効果を持っています。
/*--CSS--*/
q {
font-weight: bold; /*--文字を太字--*/
}
q:before {
content: '「'; /*--qの直線に 「 を追加--*/
color: #1ece50;
}
q:after {
content: '」'; /*--qの直後に 」 を追加--*/
color: #1ece50;
}
上記のように、擬似クラス「before、after」を使用することで、引用符の変更が可能になりました。
blockquote | 【HTML】blockquote要素の使い方、引用文であることを示す要素! |
---|
今回はこれで以上です。
q
要素は、テキストが短い引用文であることを示します。blockquote
要素は、まとまった量の文章を引用したい場合に使用します。cite
要素は、引用元のURLを記述します。![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
2021.07.27
2021.07.09
2021.07.06
2021.07.02
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog