TOC

17. commentList（コメントリスト）

パーツリストに戻る

表示例

ソース

html

<div class="dparts"><div class="parts commentsList">
<h3>パーツタイトル</h3>
<div class="partsInfo top">
<p class="number">195件中 1件～20件を表示</p>
<p class="moreInfo"><a href="">次を表示</a></p>
</div>
<!-- ここからループ -->
<dl>
<dt>02月14日<br />15:13</dt>
<dd>
<div class="header">
<p class="heading">記事タイトル</p>
<p class="public">（全員に公開）</p>
</div>
<div class="body"><p>
記事本文
</p></div>
<div class="footer"><p>
<a href="">コメント(0)</a>
 | <a href="">もっと読む</a>
 | <a href="">編集</a>
</p></div>
</dd>
</dl>
<!-- ここまでループ -->
<div class="partsInfo bottom">
<p class="number">195件中 1件～20件を表示</p>
<p class="moreInfo"><a href="">次を表示</a></p>
</div>
</div></div>

template

CSS

/*==============================================================================
 * 23. コメント・書き込み一覧（commentsList）
 *----------------------------------------------------------------------------*/
div.commentsList div.top {
        border-bottom: 0;
}
.commentsList dl {
        width: 100%;
}
.commentsList dt {
        float: left;
        width: 60px;
        padding: 4px 3px;
        border-top: 1px solid #cccccc;
        text-align: center;
}
.commentsList dd {
        float: right;
        width: 456px;
}
.commentsList dd div {
        padding: 4px 3px;
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: #cccccc;
}
.commentsList dd div.header {
        position: relative;
}
.commentsList dd div.header p.heading {
        margin-right: 140px;
}
.commentsList dd div.header p.public {
        position: absolute;
        top: 4px;
        right: 4px;
}
.commentsList dd div.footer p {
        text-align: right;
}

関連情報

• チケット：#1948
• XHTML+CSS化プロジェクト