Context Navigation

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

Version 27 (modified by siena, 12 years ago) (diff)
--

TOC(titleindex,heading=リンク,pne)?

XHTML+CSS

XHTML+CSS 関連の仕様を中心にして、OpenPNEのPC版の改善を行います。

http://openpne.jp/img/png/w180_h180/img_cache_c_405_1177146766_png.png

プロジェクトチケット

component=pne-xhtmlcss

#566: HTML文法チェック
#1036: PCスタイルシートの分離配送
#1073: 入力値の上限を設け、レイアウト崩れを防ぐ
#1179: 文字符号化方法の記述方法
#1347: h_homeだけborder_07,container(=bg_13)が効かない
#1557: PC版のXHTML+CSS化（テーブルレイアウトからの脱却）
#1576: テンプレートのCSS整備
#1812: あしあとページの配色設定が2.11系だと適用されない
#1844: c_topic_listやc_event_listのトピック（イベント）リンクの選択部分にラベルを入れてほしい
#1907: 0. h系、f系、c系ナビメニュー（localNav）のXHTML+CSS化
#1908: 11. homePhotoBox（ホーム写真ボックス）のXHTML+CSS化
#1909: 28. homeNineTable（ホーム9面テーブル）のXHTML+CSS化
#1910: 18. searchResultList（検索結果リスト）のXHTML+CSS化
#1924: 4. infoBox（案内ボックス）をXHTML+CSS化
#1925: 12. homeInfoBox（ホームインフォメーションボックス）をXHTML+CSS化
#1926: 2. descriptionBox（説明ボックス）をXHTML+CSS化
#1927: 5. infoButtonBox（ボタン付き案内ボックス）をXHTML+CSS化
#1928: 書き込み作成ページ案内ボックス（forwardInsertBox）をXHTML+CSS化
#1929: 確認ボックス（confirmBox）をXHTML+CSS化
#1930: 書き込み作成ページ案内ボックス（forwardInsertBox）をXHTML+CSS化
#1931: 6. yesNoButtonBox（はい、いいえボタン付きボックス）をXHTML+CSS化
#1932: 7. searchFormBox（検索フォームボックス）をXHTML+CSS化
#1933: 26. ashiatoList（あしあとリスト）をXHTML+CSS化
#1934: 検索結果一覧系（searchResultList）をXHTML+CSS化
#1935: 【廃止】19. commuReviewList（コミュニティレビューリスト）をXHTML+CSS化
#1936: 27. rankingList（ランキングリスト）をXHTML+CSS化
#1937: ホームの写真表示領域（homePhoto）をXHTML+CSS化
#1938: 14. searchFormLine（検索フォームライン）をXHTML+CSS化
#1939: 15. linkLine（リンクライン）をXHTML+CSS化
#1940: 16. prevNextLinkLine（前次リンクライン）をXHTML+CSS化
#1941: 34. sideNav（サイドナビ）をXHTML+CSS化
#1942: 35. rankingSideNav（ランキングサイドナビ）をXHTML+CSS化
#1943: 32. weeklyCalendarTable（週間カレンダーテーブル）をXHTML+CSS化
#1944: 29. photoTable（写真テーブル）をXHTML+CSS化
#1945: 30. homeMainTable（ホームメインテーブル）をXHTML+CSS化
#1946: 9. topicDetailBox（トピック詳細ボックス）をXHTML+CSS化
#1947: 8. diaryDetailBox（日記詳細ボックス）をXHTML+CSS化
#1948: 17. commentList（コメントリスト）をXHTML+CSS化
#1949: 20. reviewList（レビューリスト）をXHTML+CSS化
#1950: 22. friendIntroList（フレンド紹介文リスト）をXHTML+CSS化
#1951: 24. searchCategoryList（検索項目リスト）をXHTML+CSS化
#1952: 31. formTable（入力フォームテーブル）をXHTML+CSS化
#1953: 28. カテゴリありの書き込み検索フォーム（searchWithCategoryForm）をXHTML+CSS化
#1954: 29. ～を紹介・～を追加用メッセージ入力フォーム（messageToAddForm）をXHTML+CSS化
#1955: 21. recentList（最新書き込みリスト）をXHTML+CSS化
#1956: 25. messageList（メッセージリスト）をXHTML+CSS化
#1957: 10. eventDetailBox（イベント詳細ボックス）をXHTML+CSS化
#1958: 23. manageList（管理リスト）をXHTML+CSS化
#1959: 34. お気に入り追加確認ボックス（confirmBookmarkList）をXHTML+CSS化
#1970: 33. monthlyCalendarTable（月間カレンダーテーブル）をXHTML+CSS化
#1971: 各テンプレートの行頭に ({* unknown *}) というコメントをつける
#1973: テンプレート行頭の ({* unknown *}) をパーツのチケット番号に変える。
#1974: fh_review_list_memberでの、レビューが無い状態での「まだレビューがありません。」と表示されているパーツの対応を考える。
#1981: パーツリストのWiki化
#1982: inc_header_xhtml.tpl や fetch_inc_navi_xhtml などの変更点を元々のファイルに取りこむ
#1983: 「日記公開範囲の一括設定」を27.inputFormTableに変更
#1984: Wikiのパーツリストページの修正
#1985: 1. simpleBox（シンプルボックス）をXHTML+CSS化
#1986: 3. alertBox（アラートボックス）をXHTML+CSS化
#1987: 13. photoUploadFormBox（プロフィール写真アップロードフォームボックス）をXHTML+CSS化
#2013: o_regist_introでの、ボタンのみのパーツの対応を考える
#2015: h_messageでの「メッセージの詳細」パーツの対応を考える
#2020: h_err_fh_diaryで枠が付いていないメッセージのパーツの対応を考える
#2036: 36. buttonLine（ボタンライン）をXHTML+CSS化
#2037: 37. messageDetailBox（メッセージ詳細ボックス）をXHTML+CSS化
#2095: マージ用にOpenPNEディレクトリの作りなおし
#2122: 2008年3月24日までのXHTML+CSS化プロジェクトの成果物（途中）を取り込む
#2136: h_com_add_confirm.tplでの、確認内容つきの「はい、いいえボタン付きボックス」パーツの対応を考える
#2139: 2.11.5でカスタムCSSが反映されない
#2141: imgタグのaltに絵文字が入るとaltの中に絵文字のimgタグが入ってしまう
#2144: 古いMozillaブラウザによるページ内容の閲覧ができない
#2184: inc_header/inc_footerをlayoutに移動する
#2186: BIZのXHTML+CSS化
#2195: bizの各テンプレートの行頭に ({* unknown *}) というコメントをつける
#2196: bizのテンプレート行頭の ({* unknown *}) をパーツのチケット番号に変える
#2197: s_listのXHTML+CSS化
#2198: bizSideScheduleList（BIZサイド用スケジュールリスト）のXHTML+CSS化
#2199: inc_biz_stateでの「名前変更」パーツの対応を考える
#2200: bizWeeklyCalendarTable（BIZ用週間カレンダーテーブル）のXHTML+CSS化
#2201: inc_biz_schedule_week_timeでの「日時」パーツのXHTML+CSS化
#2202: bizSideTodoList（BIZサイド用Todoリスト）のXHTML+CSS化
#2203: inc_alert_boxでの「アラートボックス」パーツをまとめたパーツの対応を考える
#2204: 配色設定の項目が一部反映されていない
#2244: pager部分をcaptureを使って共通化
#2246: 写真編集画面で、メイン写真の操作リンクの閉じ括弧が二重になっている
#2247: アルバム機能のテンプレートをXHTML+CSS化
#2252: フリーページのレイアウトが自動的にCenterになっている
#2255: フォトアルバムモジュールの各テンプレートの行頭に ({* unknown *}) というコメントをつける
#2256: フォトアルバムモジュールのテンプレート行頭の ({* unknown *}) をパーツのチケット番号に変える
#2258: albumDetailBox（アルバム詳細ボックス）のXHTML+CSS化
#2259: albumImageList（アルバム写真リスト）のXHTML+CSS化
#2260: albumList（アルバムリスト）のXHTML+CSS化
#2261: albumImageBox（アルバム画像詳細ボックス）のXHTML+CSS化
#2273: 旧スタイルを削除
#2295: WinXP,IE6でお気に入りPNE日記とBlogの一覧が型崩れする
#2340: メニューロールオーバーの使用設定が反映されない
#2344: 土曜日に祝日が重なったときに赤字で表示されない
#2388: マイホーム・日記カレンダーなどがMacで表示するとレイアウトが崩れる
#2390: ログイン前ヘッダの表示領域がデフォルトスキンのログイン前ヘッダ画像の縦幅より狭い
#2401: pc_page_o_login を XHTML+CSS化
#2402: pc_page_h_album_insert_dialog を XHTML+CSS化
#2403: pc_page_h_album_image_insert_dialog を XHTML+CSS化
#2404: アルバム小窓のXHTML+CSS化
#2405: アルバム画像小窓のXHTML+CSS化
#2428: 2.12のサイドバナーの表示が2.10までと違うため、バージョンアップすると表示が崩れる
#2444: 対応ブラウザをリストアップする
#2502: 未確認スタイルの確認
#2527: diaryDetailBoxの「前の日記」「次の日記」のナビが右寄せになっている
#2535: IE6でプロフィールのテキスト（長）のテキストボックスの右ラインが切れている
#2538: WinXP/IEで日記作成・日記編集画面のフォームとフッタの間に余白がない
#2539: Safari3でBIZモードの週間カレンダーの写真やフォームが一部切れる
#2549: XHTML+CSS化されたテンプレートを新規に作成する際のドキュメントを作成
#2553: IE6でfirst-child擬似クラスが使えないためにレイアウトが崩れる箇所がある
#2591: xhtml_style.phpの配色設定項目が開発中の古い分類になっている
#2668: BIZ:ToDoリストの重要度を表す左側の線がなくなっている
#2669: リストアイコンの２・３が表示されない
#2687: IEで日記コメント投稿者の表示がずれる
#2720: WinXP/IE6:日記コメントの日付表示部分のレイアウトが崩れる
#2793: XHTML+CSS化プロジェクトの説明ページを作成する
#2837: 日記のコメント削除画面の名前とコメント部分に線がない
#2844: 推奨ブラウザ以外のブラウザでPC版の利用に支障をきたすものがある
#2873: IE6で韓国語が正しく表示されない
#2875: searchResultListのボタン横の縦線が途切れている
#2876: IEで日記の見出し部にある公開範囲が下にくっついている
#2939: 「マイフレンド」の名称が長い場合、日記詳細の「～の日記」と公開範囲の「マイフレンドまで公開」の文字がかぶる
#2942: メッセージボックスの「前を表示」「件数」「次を表示」の間隔がない
#2958: 2.12.x以降のCSS、clearfix手法を見直す
#2979: ヘッダー部分とフッダー部分が２つ表示される
#2980: 副管理者要請確認画面にナビバーが表示されない
#2981: フッタの上部の余白が多すぎる
#2983: フッタの位置が上にずれてしまう
#2990: formTableのcheckListの文字列が、Netscape7.x，Mozilla1.xで表示されない
#2994: 【2.12.3のCSSを修正】positionをfloatにする
#2997: formTableの公開レベル選択が隠れている
#3013: xhtml_style.phpのCSS中のzoomプロパティが必要な箇所を特定する
#3016: IE：「マイフレンド」の名称が長い場合、公開範囲変更のプルダウンメニューで「マイフレンドまで公開」が途中で見切れてしまう
#3064: コミュニティの強制退会・副管理者降格の確認画面のレイアウトが崩れている
#3096: IE6で連続した「!」を表示するとレイアウトが崩れる部分がある
#3120: フレンドリンクを要請や管理コミュニティに参加を希望の画面のレイアウトが崩れている
#3121: 承認待ちリストの「承認」ボタン横にある縦線が切れている
#3780: IE7&8でマイホームのレイアウトがずれてしまう
#4112: IEでdescriptionBoxのレイアウト崩れ
#4363: 誕生日バナーの右側が切れる

開発時のテンプレート作成・編集指針

UIの新規追加時や変更を行う際に、意識しておくべき項目です。

レイアウト崩れを防ぐための課題

入力値の上限を設け、レイアウト崩れを防ぐ

→ これは HTML+CSS で扱う問題ではないのでは?

スタイルはCSSファイルに

HTMLインラインでスタイルを定義するのはやめる。残っているとしたらCSS側にはき出す。

※style=xxxxなどのインライン表現は使わない。

妥当 (valid) であること

テンプレートを修正してコミットする際には、常にHTML Validにしておく

編集時ターゲットのHTMLバージョンは【※バージョン決定待ち】

現行バージョンは HTML 4.01 Transitional
テンプレート新規開発時には XHTML 1.0 Transitional で可能な限り Strict の範囲で (未確定)

閉じタグは省略しない

必須要素はブラウザが文句言わなくても省略しない

ターゲット環境

IE6 IE7 FireFox2をターゲット環境としてリリース前チェックを行う

【決定待ち】ボーダー

tdで書くのかそれともboder_01などのClass指定にするのか？

ブラウザ依存タグは使わない

※詳細情報希望

※参考: XHTML 1.1 で定義されている要素一覧 (XHTML 1.0 Strict を微修正したもの)

Forma Mutatioコミュニティからの課題

Forma Mutatioコミュニティで上がったトピックを指針として掲載します。

Download in other formats:

Plain Text

OpenPNE