キリウ君が読まないノート HTML5で <blockquote> の引用元をどう表現すればいいのか
個人的には、<blockquote> 自体を <figure> で囲ったうえで、<figcaption> で表現するのがしっくりきました。
前書き
突然ですが、河童の腹には袋があるという話を聞いたことがありますか？
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに腹に袋を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
芥川龍之介の『河童』を読んでいて、あまりにも当然のようにそう書いてあったので、河童ってそういうもんなのかと思ってました。でも、この作品以外で河童の腹に袋があるという説は見たことないです。
作中にしても、べつに河童の腹に袋があるからといって、ストーリーが左右されたりしません。ただ、河童が腹の袋から取り出したハンカチで顔を拭ったりしてるだけです。
もしかして芥川龍之介のオリジナルなんでしょうか。なんか面白いので、個人的には好きな設定です。
河童は頭の上の皿によくオムライスを乗せられる
ブログ書いたりサイト作ったりしてて、HTMLで引用部分を表す <blockquote> 使うたびに疑問だったのですが、これって引用元の情報をどうやって表現すればいいんでしょうか。
<blockquote> には cite という属性がありますが、cite はURLしか指定できないらしいです。ていうか、属性なので目に見えません。大切なものだから目に見えないのかもしれません。
それじゃあ、ネット上以外の文章を引用する場合、HTML的には <blockquote> と引用元の情報を結びつける書き方は無いのだろうかとずっと思ってました。本とかゲームとかどうすんだってずっと思ってました。
と思って探してたら、普通にHTML5の仕様書にサンプルが載ってました。あれー
次のサイトで日本語訳が読めます。
blockquote要素：HTML Living Standard各要素別メモ
以下、載ってる例からざっくり抜粋します。
<blockquote> の近くに <cite> で書く
これで済むならこれでいいですよね。って、これじゃ <blockquote> とそれとの明示的な結びつきを表現できないからモヤモヤしてるんじゃないか。
<p> 河童の腹には袋があるという説があります。</p>
<p> これは芥川龍之介の『<cite>河童</cite>』に出てくる説です。</p>
<blockquote>
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに<em>腹に袋</em>を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
</blockquote><blockquotee> の内側に <footer> か <cite> で書く
<blockquote> の内側っていいの？と思ったけど、<footer> か <cite> なら良いらしいです。<cite> は作品名または著者、<footer> は著作権情報などを表せる要素です。
しかし <footer> って名前的に、引用文の前には書きにくいかなあ。普通は前には書かないんだろうけど。
<blockquote>
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに<em>腹に袋</em>を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
<footer><cite>芥川龍之介 河童</cite></footer>
</blockquote><blockquote>
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに<em>腹に袋</em>を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
- <cite>芥川龍之介 河童</cite>
</blockquote><blockquote> を <figure> で囲って <footer> か <figcaption> で書く
画像以外に <figure> を使う発想がまったく無かったんですけど、確かに文法的にはぜんぜん問題ありませんでした。
見慣れてくると、個人的にはこれの <figcaption> のパターンが一番しっくり来るかもです。なんか図表的な使い方をしたいんですよね。
<figure>
<blockquote>
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに<em>腹に袋</em>を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
</blockquote>
<footer><cite>芥川龍之介 河童</cite></footer>
</figure><figure>
<blockquote>
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに<em>腹に袋</em>を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
</blockquote>
<figcaption><cite>芥川龍之介 河童</cite></figcaption>
</figure>このブログでは
というわけで、記事冒頭の引用部のHTMLは以下のようになりました。URLは青空文庫です。
<figure class="quote">
<figcaption><a href="https://www.aozora.gr.jp/cards/000879/files/45761_39095.html" target="_blank"><cite>芥川龍之介 河童</cite></a></figcaption>
<blockquote cite="https://www.aozora.gr.jp/cards/000879/files/45761_39095.html">
しかも河童は皮膚の下に余程厚い脂肪を持つてゐると見え、この地下の国の温度は比較的低いのにも関らず、（平均華氏五十度前後です。）着物と云ふものを知らずにゐるのです。勿論どの河童も目金をかけたり、巻煙草の箱を携へたり、金入れを持つたりはしてゐるのでせう。しかし河童はカンガルウのやうに<em>腹に袋</em>を持つてゐますから、それ等のものをしまふ時にも格別不便はしないのです。
</blockquote>
</figure>引用元が上に書いてあるのはあんまり多数派ではないような気はする。。。