頭ん中 HTML に q という要素がありますね。
Quotation の Q ですか。
<q> について
文書内で引用をしたいとき、
ブロック要素を含むような場合には <blockquote> ですが
一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。q 自体がデフォルトでインライン要素だしね。
こんなぐあい。
<q>ここは引用ですよー。</q>
多くのブラウザでは、この <q> で括った部分が
ダブルクォーテーションで挟まれて表示されます。
上記の例だとこう。
“ここは引用ですよー。”
カギ括弧になってた
「表示されます」って書いたんだけど、
本当は「と思ってました」でした。
こないだふと気づいたら、
日本語のページではこれがこうなってました。
「ここは引用ですよー。」
クォーテーションマークじゃなくてカギ括弧になってる。
知らんかった。いつの間に。<q> を初めて使ったときは何も出てなかったし、
最初出るようになったのは確かにクォーテーションマークでした。
カギ括弧になる条件
もちろんあらゆる文書でカギ括弧になるんじゃなくて、
こうなるのは次の条件と環境のときみたいです。
そのウェブページが日本語であること
手元で確認した限りでは、HTML5 のページで
<html lang="ja">
と宣言されている場合に発動しました。
本文が日本語でも、こうやって日本語ですよと宣言してないと " になる。
【追記】こうすれば HTML 文書の地の文が日本語ですよと宣言されるということであって、lang 属性は html 要素だけのものではないので、文書中の他の要素で個別に指定することもできますね。
ブラウザが対応していること
まあ当たり前ですけど、ブラウザが対応してないとこうはなりません。
手元にあったブラウザで確認したところ、対応してるのは
- Google Chrome 39
- Safari 8
- Internet Explorer 11
で、Firefox 33 は対応してませんでした。
【追記】
これもリストに挙げたブラウザのデフォルトスタイルがこうなっているというだけで、CSS で自由に変えられるものでした。
具体的には、デフォルトでこういうスタイルがあたっているということで
:lang(ja) > q {
quotes: '「' '」' '『' '』';
}
これで言語と引用符を指定すれば自由自在。
ご指摘ありがとうございました。
では実際にご覧ください
←この引用符が <q> のスタイル→
いかがですかね。
カギ括弧になってますか。
二重にしてみる
二重にするというかネストするというか、<q> タグの中で、さらに <q> を使うとこうなります。
ここが→
内側
←です
英語でも「」になる
<html lang="ja"> のページでは
英語が囲まれていてもカギ括弧になります。
Hello, world!
【追記】これも上記のとおり、この部分にだけ lang="en" を記述すれば英語のスタイルになります。
他の言語
英語は " で日本語は「」だけど
他の引用符が使われる言語もありますね。
せっかくだからやってみた。
フランス語 (lang="fr")
«Bonjour le monde!»
ドイツ語 (lang="de")
„Hallo Welt!“
他にもいっぱいあるみたいだけど、
ブラウザのデフォルト設定で確認できたのはこのあたりでした。
他にも対応してる言語があったら教えてください。
ついでに
lang 属性を変えられるボタンを置いてみます。
うまくいくかな。
引用符 変わるかな
