ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changes between Version 2 and Version 3 of pne-xhtmlcss/parts


Ignore:
Timestamp:
Feb 23, 2008, 5:42:22 PM (14 years ago)
Author:
kiwa
Comment:

【XHTMLCSS化】パーツリストページ作成

Legend:

Unmodified
Added
Removed
Modified
  • pne-xhtmlcss/parts

    v2 v3  
    1 [[TOC]]
    2 = 9面パズル =
     1[[TOC(heading=pne-xhtmlcss, pne-xhtmlcss)]]
     2= XHTML+CSS化プロジェクト パーツリスト =
     3以下のパーツ名直後に(****)とあるものは、class属性値 もしくは id属性値
    34
    4 == 表示例 ==
    5 === f_home フレンドリスト ===
    6 [[Image(http://partslist.xhtmlcss.dazai.pne.jp/group_OpenPNE_Components2/NxM_table/f_home_(04).png)]]
    7 
    8 == マークアップ ==
    9 
    10 === html ===
    11 {{{
    12 <div class="section table3x">
    13 <table><tr>
    14 <th class="heading" colspan="3">(ここにパネル名を記載)</th>
    15 </tr>
    16 
    17 <!-- ↓必要な段分繰り返す-->
    18 <tr>
    19 <td>
    20 <p class="photo">(写真表示領域)</p>
    21 <p class="text">(名前)</p>
    22 </td>
    23 <td>
    24 <p class="photo">(写真表示領域)</p>
    25 <p class="text">(名前)</p>
    26 </td>
    27 <td>
    28 <p class="photo">(写真表示領域)</p>
    29 <p class="text">(名前)</p>
    30 </td>
    31 </tr>
    32 <!--↑必要な段分繰り返す-->
    33 
    34 <td class="footer" colspan="3">
    35 <ul class="moreInfo">
    36 <li>(「もっと見る」など)</li>
    37 </ul>
    38 </td>
    39 </tr></table>
    40 </div>
    41 }}}
    42 
    43 === template ===
    44 
    45 === CSS ===
    46 
    47 【style.css】
    48 {{{
    49 /*==============================================================================
    50  * フレンドリストなどの 9面(3xN)テーブル(.table3x) に対する指定
    51  *----------------------------------------------------------------------------*/
    52 .table3x {
    53         margin-top: 6px; /* これはパーツ共通のマージンなのでセレクタを変えるかもしれません */
    54 }
    55 .table3x table {
    56         width: 100%;
    57         border: 2px solid #cccccc;
    58 }
    59 .table3x td {
    60         border: 1px solid #cccccc;
    61         vertical-align: top;
    62 }
    63 .table3x p {
    64         text-align: center;
    65 }
    66 .table3x p.photo {
    67         height: 76px;
    68         padding: 2px;
    69         border-bottom: 1px solid #cccccc;
    70 }
    71 .table3x p.text {
    72         margin: 2px;
    73         overflow: auto;
    74 }
    75 }}}
    76 == 関連情報 ==
    77 
    78  * チケット: #1909
    79  * リビジョン: r5177, r5178
    80  * [wiki:pne-xhtmlcss XHTML+CSS化プロジェクト]
     5 * [wiki:pne-xhtmlcss/parts/0 0.h系、f系、c系ナビメニュー(localNav)]
     6 * [wiki:pne-xhtmlcss/parts/1 1.ホームの写真表示領域(homePhoto)]
     7 * [wiki:pne-xhtmlcss/parts/2 2.9面パズル(table3x)]
     8 * [wiki:pne-xhtmlcss/parts/3 3.検索結果一覧系(searchResultList)]
     9 * [wiki:pne-xhtmlcss/parts/4 4.案内ボックス(infoBox)]
     10 * [wiki:pne-xhtmlcss/parts/5 5.Infomation 欄(infomationArea)]
     11 * [wiki:pne-xhtmlcss/parts/6 6.説明ボックス(descriptionBox)]
     12 * [wiki:pne-xhtmlcss/parts/7 7.書き込み作成ページ案内ボックス(forwardInsertBox)]
     13 * [wiki:pne-xhtmlcss/parts/8 8.確認ボックス(confirmBox)]
     14 * [wiki:pne-xhtmlcss/parts/9 9.書き込み検索フォーム(searchEntryFormBox)]
     15 * [wiki:pne-xhtmlcss/parts/10 10.あしあと一覧(ashiatoList)]
     16 * [wiki:pne-xhtmlcss/parts/11 11.おすすめレビュー(memberReviewList)]
     17 * [wiki:pne-xhtmlcss/parts/12 12.ランキング(rankingList)]
     18 * [wiki:pne-xhtmlcss/parts/13 13.検索ボックス(searchBox)]
     19 * [wiki:pne-xhtmlcss/parts/14 14.「~トップへ」リンク系(forwardTopLink)]
     20 * [wiki:pne-xhtmlcss/parts/15 15.「前の日記」・「次の日記」リンク(forwardPrevNextLink)]
     21 * [wiki:pne-xhtmlcss/parts/16 16.日記系・メッセージ系サイドメニュー(diaryMessageSideMenu)]
     22 * [wiki:pne-xhtmlcss/parts/17 17.ランキングサイドメニュー(rankingSideMenu)]
     23 * [wiki:pne-xhtmlcss/parts/18 18.週間スケジュール(schedule)]
     24 * [wiki:pne-xhtmlcss/parts/19 19.写真リスト(tablePhotoList)]
     25 * [wiki:pne-xhtmlcss/parts/20 20.ホーム系センターメニュー(centerMenuHome)]
     26 * [wiki:pne-xhtmlcss/parts/21 21.トピック本文表示ボックス(topicBodyBox)]
     27 * [wiki:pne-xhtmlcss/parts/22 22.日記本文表示ボックス(diaryBodyBox)]
     28 * [wiki:pne-xhtmlcss/parts/23 23.コメント・書き込み一覧(commentsList)]
     29 * [wiki:pne-xhtmlcss/parts/24 24.レビュー一覧(reviewsList)]
     30 * [wiki:pne-xhtmlcss/parts/25 25.紹介文一覧(introList)]
     31 * [wiki:pne-xhtmlcss/parts/26 26.検索項目の一覧(searchCategoryList)]
     32 * [wiki:pne-xhtmlcss/parts/27 27.書き込み・設定フォーム(writeList)]
     33 * [wiki:pne-xhtmlcss/parts/28 28.カテゴリありの書き込み検索フォーム(searchWithCategoryForm)]
     34 * [wiki:pne-xhtmlcss/parts/29 29.~を紹介・~を追加用メッセージ入力フォーム(messageToAddForm)]
     35 * [wiki:pne-xhtmlcss/parts/30 30.最新書き込み一覧(recentList)]
     36 * [wiki:pne-xhtmlcss/parts/31 31.メッセージボックス(messageList)]
     37 * [wiki:pne-xhtmlcss/parts/32 32.イベント本文表示ボックス(eventBodyBox)]
     38 * [wiki:pne-xhtmlcss/parts/33 33.マイフレンド管理リスト(manageFriendList)]
     39 * [wiki:pne-xhtmlcss/parts/34 34.お気に入り追加確認ボックス(confirmBookmarkList)]
     40 * [wiki:pne-xhtmlcss/parts/35 35.月別カレンダー(monthlyCalendar)]