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

Version 11 (modified by tejimaa, 12 years ago) (diff)

--

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
リストアイコンの2・3が表示されない
#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
ヘッダー部分とフッダー部分が2つ表示される
#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の新規追加時や変更を行う際に、意識しておくべき項目です。

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

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

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

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

スペーサー画像は廃止しCSSへ

<img src="./skin/dummy.gif" style="width:7px;height:7px;" class="dummy">

 tableレイアウトに付き物の、上記のような透明画像を用いた位置調節を多用していますが、img要素にはalt属性が付物です。視覚障害者向けの読み上げブラウザやテキストブラウザなどでは、alt属性の値を表示したり読み上げます。なので、必須属性となっています。

 このスペイサー用のタグも、肥大部分ですね。CSSでmarginやpaddingにpositionなどで何とかなるケースが多いので、検討してみる価値はあります。配置に関してtableと組み合わせて多重構造にしているケースも多いのですが、これも要検討です。クロスブラウザ的な問題から tableレイアウトにしていると思いますが、レガシーブラウザのどの当りまでをフォローしないといけないのか、メリットとデメリットを秤にかけ直してもよいかと。