W3.CSS 引用

❮ 前章へ 次章へ ❯

引用の表示

引用は、多くの場合、背景が灰色で、左ボーダーが棒状のもので、イタリック体のフォントスタイルで表示されます:

"Make it as simple as possible, but not simpler."

Albert Einstein

w3-panel クラスは、引用を表示するのに最適なクラスです:

<div class="w3-panel w3-leftbar w3-light-grey">
  <p>
    <i>"Make it as simple as possible, but not simpler."</i>
  </p>
  <p>Albert Einstein</p>
</div>

Try It Yourself ❯


大きな引用

大きな引用は、大抵の場合、インターネット上で使用されます:

"Make it as simple as possible, but not simpler."

Albert Einstein

<div class="w3-panel w3-leftbar w3-sand">
  <p class="w3-xxlarge w3-serif">
    <i>"Make it as simple as possible, but not simpler."</i>
  </p>
  <p>Albert Einstein</p>
</div>

Try It Yourself ❯


Blockquotes

HTML の <blockquote> を使用する場合、HTML は特別な左マージンを追加することを覚えておいてください:

"Make it as simple as possible, but not simpler."

Albert Einstein

<blockquote class="w3-panel w3-leftbar w3-light-grey">
  <p>
    <i>"Make it as simple as possible, but not simpler."</i>
  </p>
  <p>Albert Einstein</p>
</blockquote>

Try It Yourself ❯


自分用の引用をデザイン

You can use standard HTML symbols instead of ampherstans(?):

Code Symbol
#8810
#9986
#10077
#10078
#10080
#10004

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

<div class="w3-panel w3-light-grey">
  <span style="font-size:150px;line-height:0.6em;opacity:0.2">&#10077;</span>
  <p class="w3-xlarge" style="margin-top:-40px">
  <i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
  <p>Albert Einstein</p>
</div>

Try It Yourself ❯


Font Awesome アイコン:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

<div class="w3-panel w3-leftbar">
<p>
  <i class="fa fa-quote-right w3-xxlarge"></i><br>
  <i class="w3-serif w3-xlarge">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>

</div>

Try It Yourself ❯

色と不透明度を変更できます:

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

<div class="w3-panel w3-sand">
  <p>
  <i class="fa fa-quote-right w3-xxlarge w3-opacity"></i>
  <span class="w3-serif w3-xlarge">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span>
  </p>
</div>

Try It Yourself ❯

黒の引用:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

<div class="w3-panel w3-black" style="width:50%">

<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>

</div>

Try It Yourself ❯


カードのような引用


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">

<p class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>

</div>

Try It Yourself ❯


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

<div class="w3-panel w3-center" style="width:50%">

<span style="font-size:100px">&#10077;</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>

</div>

Try It Yourself ❯


❮ 前章へ 次章へ ❯