HTMLでの引用：引用、引用、およびブロッククォート

マークアップの引用に使用されている誤ったHTMLを見るのはあまりにも一般的です。この記事では、これらすべてを掘り下げて、さまざまな状況とさまざまなHTMLタグを見て、これらの状況を処理します。

引用に関与する3つの主要なHTML要素があります。

見てみましょう。

ブロッククォート

BlockQuoteタグは、引用されたテキストを残りのコンテンツと区別するために使用されます。私の10年生の英語の先生は、4行以上の引用をこのように区別する必要があるという私の頭にそれを掘り下げました。 HTML仕様にはそのような要件はありませんが、テキストが見積もりであり、周囲のテキストやタグから離れて設定したい限り、ブロッククォートはセマンティックな選択です。

デフォルトでは、ブラウザは両側にマージンを追加してブロッククォートをインデントします。

フロー要素（つまり、「ブロックレベル」要素）として、BlockQuoteはその中に他の要素を含めることができます。たとえば、問題なくそこに段落を削除できます。

 <blockquote>
  <p> </p>
  <p> </p>
</blockquote>

しかし、見出しや秩序のないリストなど、他の要素もあります。

 <blockquote>
    <h2> </h2>
    <ul>
      <li> </li>
      <li> </li>
    </ul>
</blockquote>

BlockQuotesは、デザインの装飾的な要素としてではなく、引用にのみ使用する必要があることに注意することが重要です。また、スクリーンリーダーのユーザーがブロッククォート間でジャンプできるため、これはアクセシビリティも役立ちます。したがって、美学のみに使用されるブロッククロート要素は、それらのユーザーを本当に混乱させる可能性があります。拡張された引用の範囲外にあるもっと装飾的なものが必要な場合は、おそらくクラスのあるDivが行く方法です。

 BlockQuote、
.callout-block {
  / *これらはスタイリングを共有できます */
}

qで引用

Qタグ（）は、インラインの見積もり、または私の10年生の教師が4行未満のものであると言うものです。多くの最新のブラウザは、擬似要素として引用符に引用符を自動的に追加しますが、古いブラウザにはバックアップソリューションが必要になる場合があります。

典型的な引用符は、要素と同じインライン引用符でも有効です。ただし、を使用することの利点は、引用属性、引用符の自動処理、および見積レベルの自動処理が含まれることです。 皮肉には使用してはなりません（「皮肉にはタグを使用しますよね？」）、または空気の引用を持つ単語を意味する（「Awesome」は著者の「正確な」説明です）。しかし、あなたが空気の引用をマークアップする方法を理解できるなら、私に知らせてください。それは「すごい」からです。

引用属性

とBlockQuotesの両方が、引用（Cite）属性を使用できます。この属性は、引用された資料のコンテキストおよび/または参照を提供するURLを保持します。スペックは、URLがスペースに囲まれる可能性があると言うことを強調しています。 （なぜそれが指摘されているのかはわかりませんが、セマンティックコードの神々を怒らせたい場合は、スペースを投げる以上のことをしなければなりません。）

 <p>役員は、<q cite="https://johnrhea.com/summons"> 1月4日に読者の贈収賄の試みで召喚されるように召喚されました。</q> </p>

その引用属性は、デフォルトでユーザーに表示されません。次のデモのように、CSSマジックの振りかけで追加できます。引用をホバーに表示するために、さらにフィドルすることもできます。

これらのオプションはどちらも特に素晴らしいものではありません。ユーザーがそれを見ることができるようにソースを引用する必要がある場合は、HTMLで、おそらく次にカバーする要素でそれを行う必要があります。

引用要素

タグは、引用を言ったり書いたりする人ではなく、創造的な仕事を参照するために使用する必要があります。言い換えれば、それは見積りではありません。スペックの例は次のとおりです。

 <p>私のお気に入りの本は<cite>現実の機能不全</cite>です
ピーター・F・ハミルトン。私のお気に入りのコミックは、前の<cite>真珠です
Stephan PastisによるSwine </cite>。私のお気に入りのトラックは<cite> Jiveです
Cannonball Adderley SextetによるSamba </cite> </p>

別の例があります：

この記事の著者が彼があなたにカップケーキを与えると言った場合、あなたは名前で彼をすること、それは意味的に間違っているでしょう。したがって、カップケーキは手を変えることはありません。彼があなたにカップケーキを提供した記事を引用した場合、それは意味的に正しいでしょうが、著者はそれをしないので、あなたはまだカップケーキを手に入れません。ごめん。

デフォルトでは、ブラウザのイタリック化は引用タグを付け、a または

が引用要素を使用するために存在するという要件はありません。本やその他の創造的な作品を引用したい場合は、引用要素でそれを平手打ちします。セマンティックな神々は、またはの要素を使用しないためにあなたに微笑みます。

しかし、引用要素をどこに置くのでしょうか？内部？外？逆さま？

またはの内側に置くと、引用の一部にします。それはまさにその理由で仕様によって禁じられています。

 
<blockquote>
  記事からのカップケーキの配布についての引用
  <cite>記事</cite>
</blockquote>

外に置くだけで間違っていると感じ、また一緒にスタイリングしたい場合は、

のような囲い要素を持つ必要があります。

 <div>
  <blockquote>
    記事からのカップケーキの配布についての引用
  </blockquote>
  <cite>記事</cite>
</div>

NBこの問題をグーグルで検索すると、ここでレイアウトされているものの多くと矛盾する2013年のHTML5 Doctureの記事に出くわすかもしれません。とはいえ、サポートのためにドキュメントにリンクするたびに、ドキュメントはHTML5の医師記事ではなく、現在読んでいる記事に同意します。ほとんどの場合、その記事が書かれてからドキュメントが変更された可能性があります。

ねえ、フィギュア要素はどうですか？

見積もりをマークアップする1つの方法、およびセマンティックコードの神々を喜ばせる方法で、ブロッククロートをフィギュア要素に入れることです。次に、figcaptionに引用要素とその他の著者または引用情報を入れます。

 
  <blockquote>
    ただし、WebブラウザーはWebサーバーとは異なります。バックエンドのコードが大きくなってゆっくりとゆっくりと実行され始めている場合、サーバーをスケーリングすることで、より多くのコンピューティングパワーを投げることができます。これは、実際に<em>1つの</em>ランタイム環境がないフロントエンドのオプションではありません。エンドユーザーは、コンピューティングパワー<strong>と</strong>ネットワーク接続に関する独自の制約を備えた独自のランタイム環境を持っています。
  </blockquote>
  <figcaption>
    ＆mdash;ジェレミー・キース、<cite>メンタルモデル</cite>
  </figcaption>
図>

これは必要な要素の数を2倍にしますが、いくつかの利点があります。

1. 4つの要素すべてに対して意味的に正しいです。
2. これにより、作品の名前を引用するだけでなく、著者情報を含めてカプセル化することができます。
3. それはあなたに、div、スパン、または惨めさに頼ることなく、引用をスタイリングする簡単な方法を提供します。

これは対話用ではありません

ではありません！これらは、注意を引くモーダルのためです。対話、同様に、話す人や互いに入力する人の間の会話交換。

nor nor は、対話やスピーカー間の同様の交換に使用されません。対話をマークしている場合は、最も理にかなっているものは何でも使用できます。それを行う意味的な方法はありません。とはいえ、スペックは、

タグと句読点をまたはタグを使用して、スピーカーを指定し、タグを指定してステージの方向をマークすることを提案しています。

引用符のアクセシビリティ

私が行った研究から、スクリーンリーダーは、セマンティックディティ承認、、またはタグを理解することに問題を抱えてはなりません。

「引用」へのより多くの「方法」

CSS擬似要素を使用して、

に引用符を追加できます。 要素には引用符が付けられているため、追加する必要はありませんが、擬似要素として追加することは、自動的に追加されない古いブラウザーの回避策になります。これは最新のブラウザが引用符を追加する方法であるため、重複した見積もりを追加する危険はありません。新しいブラウザはデフォルトの擬似要素を上書きし、擬似要素をサポートする古いブラウザが引用符を追加します。

しかし、私がしたように、上記が常にスマートなオープニングとクロージングの見積もりを与えると仮定することはできません。フォントがスマート引用符をサポートしていても、まっすぐな引用が表示される場合があります。安全になるために、引用CSSプロパティを使用して、それらの引用符でintelligence情報を上げる方が良いでしょう。

 blockquote {
  引用： "" "" "" "" "" "" ";
} 

マルチレベルの引用

それでは、見積もりレベルを見てみましょう。 タグは、見積レベルを自動的に調整します。

あなたが単一の引用を使用するという英国の条約を使用している地域にいるとしましょう。 CSS Quotesルールを使用して、リストに最初に単一の引用符を最初に配置できます。これが両方の方法の例です。

ネスティングに制限はありません。これらのネストされた要素は、ブロッククオート内にあるブロッククオート内にある可能性があります。

blockquoteに引用符を追加する場合、blockquoteがA タグのように見積レベルを変更しないことを知ってください。ブロッククォート内に引用符があると予想される場合は、単一の引用レベルでブロッククロート内で要素を開始するために子孫セレクタールールを追加して（または英国の慣習に従う場合は二重引用符）を開始することをお勧めします。

 blockquote q {
  引用： "'" "" "" "" "" ";
}

あなたが投入した最後の見積レベルは、それ以降のレベルの引用を通じて継続します。ダブル、シングル、ダブル、シングル…コンベンションを使用するには、CSS Quotesプロパティにさらにレベルを追加します。

 Q {
  引用： "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ";
}

句読点を掛ける

多くのタイポグラフィの専門家は、BlockQuotesに引用符を掛けることはより良く見える（そして彼らが正しい）と言うでしょう。この場合、句読点は、テキストの文字が垂直に並ぶようにテキストから押し出される引用符です。

CSSの可能性の1つは、テキストインデントプロパティでわずかに負の値を使用することです。正確な負のインデントはフォントによって異なりますので、使用するフォントで間隔を再確認してください。

 blockquote {
  テキストインデント：-0.45em;
}

吊り下げ姿勢CSSプロパティを使用して、これを処理するより良い方法があります。この執筆時点でのみサファリでサポートされているので、次のように強化する必要があります。

 /* 後退する */
blockquote {
  テキストインデント：-0.45em;
}

/ *サポートがある場合は、インデントを消去して代わりにプロパティを使用します */
@supports（hanging-punctuation：first）{
  blockquote {
    テキストインデント：0;
    吊り下げ声：最初。
  }
}

垂れ下がっていると、それがあまり気分が悪いので、より良いです。できる限り機能します。

引用符をアニメーション化できますか？

もちろんできます。

なぜあなたがこれを行う必要があるのか​​、私は完全に確信していませんが、タグの引用マークが追加されているのはUA StyleSheetの擬似要素です。

待ってください、多分私たちは結局のところ、空気の引用の事を解決しました。

以上がHTMLでの引用：引用、引用、およびブロッククォートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。