「引用」を意味する blockquote要素 そしてその中に入れ子される p要素 などについてです。
今回すごく小難しい内容になりますので、その気が有る方だけお読みください ^^;
この記事の目的
弊テンプレートでは引用が一目でそれとわかるようにスタイリングを行っています。で、問題になるのは 引用文がp要素で囲われているかいないか です。ここをどうするかで場合によっては見た目が変わります。また見た目がどうなるかは他にも複雑な要因がありますので、そちらの説明も。それにはまずblockquote要素自体の事情を理解する必要があります。
あとは私個人の制作的な事情も説明したいと思います。
blockquoteの事情
blockquote要素内の引用文はp要素でマークアップすべきか
これは実は YES です。htmlには syntax(シンタックス, 構造) と semantics(セマンティクス, 意味論) ２つの観点があるよ、というのを前提に。
問題解決能力とは「理解力」と「意識力」と「実行力」
タイトルの日本語が正しいかどうか不明 ← ブログを運営しているとときに問題にぶつかることがあります。私の分野は コーディング(htmlを書く) と デザイン なのでその観点からの話です。なので「ブログのネタが無い」「著作権のことがよくわからない」といった類の「問題」はここでの議題ではありません。...
html4.01やxhtmlでは blockquoteの直下にインラインテキストを置いてはいけない というsyntaxルールです。
<blockquote>
この文章は引用です。
</blockquote>
<blockquote>
<p>この文章は引用です。</p>
</blockquote>直下がブロックでなければいけない、というのは要するに文章が div要素 や p要素 になっている必要がある、という意味です。FC2ブログの旧投稿画面はhtml4.01準拠ですから、引用タグを出力させる Q アイコンをクリックすると
<blockquote><p></p></blockquote>と出てきますよね。
html5でもこのルールは変わりません。html4.01時代からそういうルールだったんだよ、という説明を付けたかっただけです。けれども実際にはp要素を用いずに書いている方というのはたくさんいてですね、厳密には間違いなんだろうけれども、htmlを学ぶのに便利な W3School.com でも堂々とp要素なしblockquoteをサンプルに出しています。
HTML <blockquote> Tag Definition and Usagewww.w3schools.com
で、日本のサイトでもp要素なしというサンプルが結構出てきますので、もしかするとこういう書き方をしているFC2ブロガーさんは少なくないかもしれない。でも私個人としては それでも別に良い と思っています。そんなにギチギチに構える必要ない (´・ω・｀)
この件は厳密には間違った記述と言えますが、少なくともvalidatorで「syntaxエラーですよ！」と指摘を受けることはない。blockquote要素については割とそういう感じです。読み進めるとその事情も垣間見えるかと思います。
cite要素はどこに書くのか
これもまた難しいですが。たぶん正解に近い形はこうだろうな、と思うものが以下です。
①
<blockquote cite="引用元URL">
<p>この文章は引用です。</p>
</blockquote>
<p><cite>著作物または著作者名など</cite></p>著作物または著作者名などこの文章は引用です。
WHATWG(ワットダブリュジー) の living standard (現在では実質この団体がhtmlのweb標準を定めており、その仕様書がliving〜) に従っていくとこんな形になります。ですからsyntax的にもsemantics的にも正解に「近い」
でも私個人としては これが良いとは思わない んです。何故なら 読み手が求めているものではないから です。
引用文が「引用である」と視覚的に最もわかりやすいのは以下のような感じではないかと。
②
<blockquote>
<p>この文章は引用です。</p>
<cite><a>著作物または著作者名など</a></cite>
</blockquote>この文章は引用です。
著作物または著作者名など
cite要素 はliving standardを解釈していくと blockquote要素 の 中ではなく外 ではないかと思います。そして リンクの有無は特に定めていない んですね。
ブログの性質を考えると、引用されやすいのは出版されている本や著名人の名言などに加え webページ上の第三者の言及 も少なくありません。となるとリンク先が欲しいですし、そのリンク先は同じ装飾の中に収まっているのが最も直感的です。いわゆる「グループ化」というやつです。
で、実際cite要素がblockquote要素「内」に収まっているとしてもエラー判定は行われません。html4.01の場合はダメです。著作物名や著作者名やリンクは「引用文なわけではない」のでblockquote内に収めてはいけない、と定められています。言われてみれば確かに、という感じではあります(笑)
figure要素を利用する
cite要素が「外」にある場合に関連性がわかりにくくなる、見た目に於いてもそうですよね。以下のような書き方もあります。
<figure>
<blockquote>
<p>この文章は引用です。</p>
</blockquote>
<figcaption>
<cite><a href="引用元URL">著作物または著作者名など</a></cite>
</figcaption>
</figure>figure要素 としてひとつにまとまっており、cite要素自体はblockquoteの外ですが親のfigureに付帯する figcaption要素 によって紐付いています。これが一番合理的・理想的かもしれませんね。この場合はblckquoteへの装飾ではなくfigure要素への装飾、という形を取ることになるのかな、と。
といってもfigure要素は他にも色々な使いみちがあり、blockquote専用にするわけにいきませんし、正直通常のブログ運営で ここまではやってられない と思います。
ここまでのまとめ
blockquote要素だけではないんですが、要素の使い方、より正しいマークアップの仕方というのは常に議論が交わされています。それが「草案」になり、最終的には「勧告」という形です。blockquoteは個人的に非常に振り幅の大きい要素だと思っています。
マークアップの仕方による見た目
私が推奨しているマークアップは以下の通りです。
<blockquote cite="①">
<p></p>
<cite><a href="②"></a></cite>
</blockquote>①は cite属性 です。ここに記載できるのはURL(URI)だけです。著作名などを記すためのものではありません。そしてこの部位に記載したURLがリンクとして表に出ることはありません。内部的な処理(ロボット向け)です。
②は cite要素 です。ここには著作物名・著作者名・参照できるURLなどを記載できます。視覚に現れますので、リンク先が存在するならば入れておくと読み手に親切かと思います。
例) 名言
<blockquote>
<p>Whatever is begun in anger ends in shame.</p>
<cite>Benjamin Franklin</cite>
</blockquote>例) webページ上の文章
<blockquote cite="https://vanillaice000.blog.fc2.com/blog-entry-992.html">
<p>セキュリティ面の脅威を回避する最も効果的な方法は ブラウザをアップデートすること なんですね</p>
<cite><a href="https://vanillaice000.blog.fc2.com/blog-entry-992.html">The other way round</a></cite>
</blockquote>で、ここから見た目についてなんですが、みなさんご存知の通り p要素のデフォルトスタイルは上下にmarginが付いている んですよね。ここをどう処理したら良いのか、という点について。
初期スタイル
cite要素は省いています。user agent stylesheet (各ブラウザのデフォルトスタイル) にもよりますが、概ね以下のような見た目です。
<blockquote>
<p>Whatever is begun in anger ends in shame.</p>
</blockquote>Whatever is begun in anger ends in shame.
ちょっとわかりにくいですね。文頭を下げることで「引用である」ことを示唆しています。とはいえわかりづれぇ。
blockquoteだけでなく中に入れ子されているp要素も当然初期スタイルを持っていますので、双方が初期スタイルの場合には上記のような見た目になります。
ところがFC2テンプレートの多くはデザイナーが引用であることをもっとわかりやすくする目的で、スタイルを上書きしていることが多いです。例えば以下のように。
Whatever is begun in anger ends in shame.
ブログ運営で「あれ？」と思うときの多くは blockquote要素の中のp要素の上下margin ではないかと思います。視覚的な「あれ？」です。
blockquote要素の初期スタイル
blockquote {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}p要素の初期スタイル
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
}-start -end -inline-start -inline-end などは見慣れないプロパティかもしれませんが、これらは logical properties (ロジカル プロパティ, 論理プロパティ) と呼ばれるものです。
余談になってしまいますが一応説明しますと、通常は要素の例えば左右にmarginをつけようと思えば margin-left margin-right と記しますよね。ところが「left 左」「right 右」で指定すると ペルシア語など右から書き出す言語にとって都合が悪い わけです。
「文頭」にmarginを付けたい場合、英語圏では margin-left ですが、ペルシア語圏では「文頭」ではなく「文末」になってしまいますよね。右や左という方向は絶対的に変わらない性質です。
例えば汎く利用されているテンプレートがあるとして、右から書く言語の方がそれを利用したいと思ったとすると、leftとrightを総入れ替えしなければいけなくなります。これは合理的ではありません。
ということで、start end を利用し、使用言語の「始まり」と「終わり」で指定する。そうすれば start は英語圏では「左」、ペルシア語圏では「右」と判断されて非常に都合が良い、と。そういうのが論理プロパティです。対義語は physical properties (フィジカル プロパティ, 物理プロパティ)
今後は徐々に物理から論理に移行していくのではないかな、と思います。flexレイアウトなんかは元が論理プロパティですしね。ただショートハンドなどの草案がまだ追いついていないので実際に使用できるのはまだ先の話かなぁ、と思います。
話を戻しまして、ここで問題になるのは p要素 の方です。margin-block-start: 1em margin-block-end: 1em ということで、これは 上に1em、下に1em の余白ができることを意味します。
p要素のmarginはリセットされている場合が多い
リセット というのは「無かった(無い)ことにする」というCSSの手法のひとつです。
例えばFC2ブログでの例を出すと、多くのユーザーさんは記事を書く際にp要素でマークアップすることがありません。投稿画面を開いてそのまま日本語の文章を打ち始める、という方が大半です。
① p要素なし
これからブログ記事を書こうと思います。② p要素あり
<p>これからブログ記事を書こうと思います。</p>大半が①の「p要素なし」で書いているはずです。つまり普段からp要素を使っていない、そして p要素の上下には余白ができることを知らない という方も少なくありません。そういう方がどこかのサイトから装飾を拾ってきて掲載したときに、思わぬ混乱を招くことがあります。「何故か勝手に余白ができる」「なんか知らんけど行間が空いてしまう」など。そのため多くのFC2デザイナーはp要素に対し
p {
margin: 0;
}こうしてあらかじめ余白を取っておくことが多いです。私も当初はそうしていました。けれどもマークアップに気を使うユーザーさんも増えてきまして、そうなると今度は「p要素を用いて出来るはずの上下余白が無い」「余白が無いので段落間がわかりづらい」といった逆の問題が発生します。
で、個人的にも初期値というのは過度に取り除くと中〜上級者さんにとって困る、と思いまして、現在では記事内でp要素が利用された場合には上下に余白を設けるようにスタイリングしてあります。
すると今後は余白に振り回されることがあるんです。
この文章は引用です。
この文章は引用です。
見た目が違いますよね。下の方がボックスの高さが大きい。これはp要素の上下marginによるものです。じゃあこれが邪魔だということで
blockquote p {
margin: 0;
}と、「blockquote内のp要素の場合はmarginを付けない」という指定をしたとします。すると今度は 複数のp要素を含んだ時の余白に困る ことになります。
この文章は引用1段落目です。
この文章は引用2段落目です。
この文章は引用3段落目です。
この文章は引用1段落目です。
この文章は引用2段落目です。
この文章は引用3段落目です。
複数の段落をblockquoteにすることがあるかどうかが疑問と言えば疑問ですが。ともかくこういうパターンがあるとする。今度はmarginが有ったほうが良い、無いと困るじゃないか、と。要するに 一番上と一番下の余白だけが邪魔 というわけです。その場合は
blockquote p:first-of-type {
margin: 0 0 1em;
}
blockquote p:last-of-type {
margin: 0;
}と指定すると良いと思います。
p要素が1つだけの場合そのp要素は last-of-type ですから上下に余白はできません。
p要素が2つの時は1つ目のp要素は first-of-type ですから下に余白ができます。
2つ目のp要素は last-of-type ですから上下に余白はありませんが、上にある1つ目のp要素の下marginによってp要素間には余白ができます。
p要素が3つの時は1つ目のp要素は first-of-type ですから下に余白ができます。
2つ目は初期スタイル(あるいはテンプレート指定)に従い上下に余白ができますが、先行・後続要素と同じ位置にmarginが付いている場合は offset (オフセット, 相殺) といって大きい方が小さい方を吸収しますので、
1em(1つ目の下) + 1em(2つ目の上) = 2em
にはならず、1つ目と2つ目の間にある余白は 1em です。
3つ目は上下ともに余白を作りませんが、先行の2つ目の「下」に1em付いていますので「最初と最後のmarginが要らない」を実現できます。
スタイリングには「基準」が必要
blockquote要素については今後もテンプレートのスタイルシートに装飾を指定するつもりでは居ますが、果たしてユーザーさんがどのような記述をするのか。ここまで説明したようにblockquoteの書き方というのは一定ではありません。ざっと挙げても以下のような差異があります。
- blockquote要素内にp要素があるか
- cite要素は含んでいるか、含む場合は文章よりも「上」か「下」か
- figure要素で包含されているか、包含される場合はfigcaption要素があるか、あるならば文章よりも「上」か「下」か
などなど。「上か下か」とあるものは要するに「上でも下でも構文的には正しい」という意味でもありますので、ここは書き手の自由です。
簡単なのは単純に「囲うだけ」という装飾ですよね。まぁそれでも良いのかな、と思いますがつまらないと言えばつまらない。
この件についてはどうしようもないので、今後も各DEMOページの説明をご覧頂いて、「基本形のサンプル」という形でコード掲載したいと思います。それしかないもので ^^;
最後に同じく引用を意味する q要素 との違いを簡単に。q要素は一行の場合 blockquote要素は複数行の場合 という感じで捉えれば良いと思います。一行というのは日本語では「句点まで」でしょうかね。
There are no comments yet.