Template-21、引用元リスト用のfooterタグのCSS

Template-21、引用元リスト用のfooterタグのCSS

記事を書くためにいろいろな記事を参照していますが、記事の中に「引用元:○○サイト、△△ページ、××より引用」と書くと、何となく流れに乗って読めません。学術文献の様に上付きの参照番号だけつけて、記事の最後に参考文献リストをつける方式にできないかと思って調べたら、いい塩梅にfooterタグなるものが存在したので、CSSにて見た目をそれらしく調整してみました。



footer tagのサンプル


引用元リストサンプル

フォントを小さ目にしただけで、ぐっと参考文献リストっぽくなりました。本文の最終文や関連記事リストの文字より小さくしています。footerタグとdl、dt、ddタグを使っています。
※なぜか関連記事のリストが型崩れしているので、そのうち修正します。



footer tagのCSS


.emtry_m footer {
font-size:0.5em;
font-style:normal;
border:1px dotted #99ddff;
margin:0.25em 1em 0.25em 1em;
padding:0.75em;
}



説明付きリストdl、dt、ddのCSS


.reference dt {
font-weight:bold;
margin:0 3em 0 0;
padding:0;
width:100%;
}
.reference dd {
padding: 0 1em 0 3em;
margin: 0 2em 0 0;
width:100%;
}


※普段使いの説明付きリスト(dl、dt、dd)を横並びで書いているので、.referenceというクラスを新設しました。
※説明付きリスト用のタグがなかなかうまく反映しないので、こんな感じで書いていますが、いらない情報もあったりします。



関連個所、HTML


<footer>
引用元;
<dl class="reference">
<dt>引用名</dt>
  <dd>引用サイト情報</dd>
<dt>引用名</dt>
  <dd>引用サイト情報</dd>
<dt>引用名</dt>
  <dd>引用サイト情報</dd>
<dt>引用名</dt>
  <dd>引用サイト情報</dd>
</dl>
</footer>


このタグをテストしてみた関連記事は、「イギリスと言えば、「紋章」



footerタグとゆかいな仲間たち…


footerタグが存在するわけなので、探してみたらありました。headerタグ。
これはheadタグと異なるもののようです。
お仲間に、sectionタグなるものもありました。

そしてそれらの上位階層に、Articleタグなどなども存在し、際限なくいろいろ調べております。
そのうち、試してみます。
そう、そのうち。


スポンサーサイト

Comment

コメントを投稿する
記事: Template-21、引用元リスト用のfooterタグのCSS

お気軽にコメントをどうぞ~。

  非公開 (管理人のみ閲覧可能)
 

Trackback