« HTML Form Tips | メイン | 本日の体操 »

2005年01月30日

[技術] 引用

引用<blockquote>タグを使ったときに実線で引用部分が囲まれるように
スタイルシートに以下のように追加したがどうしても上の線が引かれない現象が
発生した。以下の点に気をつけないと表示がおかしくなるようだ。

  • <blockquote>タグの前に改行をいれる
  • <blockquote>タグの内は<p>タグで囲む
  • ただし、タイトル(<div class="qtitle">～</div>)の後から始める
  • 改行は<br/>タグを使う

    • .content blockquote {
    position: relative;
    padding: 2em;
    border: 1px solid #399;
    color:#399;
    }

    .content blockquote div.qtitle{
    display: block;
    position: absolute;
    top: -0.5em;
    left: 1em;
    z-index: 1;
    padding: 0 0.5em;
    background-color: #FFF;
    color:#399;
    font-size: small;
    font-weight:bolder;
    }

    タイトル

    引用

    ちなみに地獄変００さんのブログにあるようにfieldsetタグなら以下のようになる。

    地獄変00地獄変00(ダブルオー)が世界の覇者となるまでの軌跡

    投稿者 nekobara : 2005年01月30日 22:49


    トラックバック

    このエントリーのトラックバックURL:
    http://www.ishihara.ne.jp/mt/mt-tb.cgi/17

    コメント