wiki:pne-xhtmlcss/parts
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 1 (modified by kiwa, 12 years ago) (diff)

【XHTMLCSS化】パーツリストサンプルページ作成

TOC

9面パズル

9面パズル例

f_home フレンドリスト

http://partslist.xhtmlcss.dazai.pne.jp/group_OpenPNE_Components2/NxM_table/f_home_(04).png

マークアップ

template

9面パネルを作成するにはテンプレートに以下のような記述を行います。

<div class="section table3x">
<table><tr>
<th class="heading" colspan="3">ここにパネル名を記載</th>
</tr>

<!-- ↓必要な段分繰り返す-->
<tr>
<td>
<p class="photo">写真表示領域</p>
<p class="text">名前</p>
</td>
<td>
<p class="photo">写真表示領域</p>
<p class="text">名前</p>
</td>
<td>
<p class="photo">写真表示領域</p>
<p class="text">名前</p>
</td>
</tr>
<!--↑必要な段分繰り返す-->

<td class="footer" colspan="3">
<ul class="moreInfo">
<li>その他ナビゲーション(「もっと見る」など)</li>
</ul>
</td>
</tr></table>
</div>

CSS

9面パネルのデザインをカスタマイズするにはCSSの以下の部分を変更します。

【style.css】

/*==============================================================================
 * フレンドリストなどの 9面(3xN)テーブル(.table3x) に対する指定
 *----------------------------------------------------------------------------*/
.table3x {
        margin-top: 6px; /* これはパーツ共通のマージンなのでセレクタを変えるかもしれません */
}
.table3x table {
        width: 100%;
        border: 2px solid #cccccc;
}
.table3x td {
        border: 1px solid #cccccc;
        vertical-align: top;
}
.table3x p {
        text-align: center;
}
.table3x p.photo {
        height: 76px;
        padding: 2px;
        border-bottom: 1px solid #cccccc;
}
.table3x p.text {
        margin: 2px;
        overflow: auto;
}

関連情報