引用表示HTML&CSS

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

• 薄暗い納屋の中、時が経つのを忘れ一心不乱に探し続けた。通気口からは西日が入り込み、背丈ほどある姿見に反射して奥の壁を照らした。錆びがこびりついた金庫と壁の隙間に、何やら細長い巻物のような筒状の物が挟まっている。之が曾祖父の話していた呪詛の書だろうか。恐る恐る掴み取ろうと手を伸ばした時、強い力で物置の戸が引かれた。「おい、そこで何をしている？」

  引用元：柴俣 慧「禁扉」 - text

HTMLコード

• • <blockquote title="引用元のタイトル" cite="引用元のアドレス"><p>
  • 引用文
  • </p><p>
  • 引用元：<cite><a href="https://">引用元サイトのタイトル等</a></cite>
  • </p></blockquote>

CSSコード

• • blockquote{
  • position:relative;margin:4px;padding:16px;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);background-color:rgb(249,249,249);
  • }
  • blockquote::before{
  • content:"";position:absolute;display:inline-block;top:-1px;left:-1px;width:16px;height:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB1SURBVEhL7ZXBDQAhCAQPe6H/gijmLhhjjAfZ/fBjHsYH6wqKyrNQ1XdNQ8xsx54g3fABBWUwulG5uDMzqESinWT1PmF1vwyYxSMyXXmJ2gDSBpByg7CTb6ImYnVUBuzDduO6PmRIG0DKDWYDoXue/VZYZ/IBt+QrU+K2TywAAAAASUVORK5CYII=");background-position:left top;background-repeat:no-repeat;background-size:16px 16px;
  • }
  • blockquote::after{
  • content:"";position:absolute;display:inline-block;bottom:-1px;right:-1px;width:16px;height:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABlSURBVEhLY2QAAlVV1f8gGhe4ffs2WB06IEYfIyFFMIBuCbH6mKA0zcCoBQTBqAUEAROuTEQIEKsPpyL0jESsgej6RiOZIBi1gCAYphYQW1uhA2z6RkiVSUmBSNACSgxnYGBgAABlnSq/fRzmfgAAAABJRU5ErkJggg==");background-position:left top;background-repeat:no-repeat;background-size:16px 16px;
  • }
  • blockquote p{
  • margin:0;padding:0;background-color:inherit;line-height:1.6;
  • }
  • blockquote p:last-child{
  • margin:8px 0 0 0;padding:8px 0 0 0;border-top:solid 1px rgb(199,199,199);font-size:small;
  • }
  • blockquote p:last-child a{
  • font-size:medium;font-weight:bold;text-decoration:none;
  • }
  • blockquote p:last-child a::after{
  • content:attr(href)"";display:block;margin:4px 0 0 4em;text-indent:0;color:rgb(37,37,37);font-size:small;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:0.9;
  • }
  • blockquote cite{
  • font-style:normal;
  • }