A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/blockquote below:

<blockquote>: ブãƒãƒƒã‚¯å¼•ç”¨è¦ç´ - HTML | MDN

<blockquote>: ブロック引用要素

Baseline Widely available

<blockquote> は HTML 要素で、内包する要素のテキストが引用文であることを示します。通常、字下げして表示されます（整形方法については注意の項を参照してください）。引用元の URL は cite 属性により与えることができ、引用元のテキスト表現は <cite> 要素を用いて与えることができます。

試してみましょう 
<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they’ll go through
      anything. You read and you’re pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>

div:has(> blockquote) {
  background-color: #ededed;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}
属性

この要素にはグローバル属性があります。

cite

引用元の文書の URL、または引用元の情報に関するメッセージを示します。この属性は、引用文の背景や出典についての説明を指し示すためのものです。

使用上の注意

仕様書によると、引用文の出典がある場合は、 <blockquote> 要素の外側に配置しなければなりません。

引用された文字列に適用される字下げを変更するには、 CSS の margin-left や margin-right プロパティ、または一括指定の margin プロパティを使用してください。

独立したブロックというより行内の短い引用を行うには、 <q> (Quotation) 要素を使用してください。

例

この例は RFC 1149, A Standard for the Transmission of IP Datagrams on Avian Carriers からの文言を引用するために <blockquote> 要素を使用する例です。

<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside early spring. This
    is because of the 3D ether space available to the carriers, in contrast to
    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

以下のように出力されます。

技術的概要 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4