| Version 44 (modified by , 12 years ago) (diff) |
|---|
XHTML+CSS
XHTML+CSS 関連の仕様を中心にして、OpenPNEのPC版の改善を行います。
サブページ
TOC(titleindex,inline,xhtmlcss-)?
関連コミュニティ
プロジェクトチケット
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
- 誕生日バナーの右側が切れる
ノート
既存レイアウトの構造
レイアウト構造をそれぞれ設計していき、IDの付け方やテンプレート設計方針を検討します。
- 全テンプレート共通部分
- ヘッダー
- 共通ナビバー
- フッター
- 土台部分
- １ペインログイン画面
- １ペイン一般
- ２ペイン看板（h_home等の９面表示）
- ２ペインその他（メッセージボックスなど）
- 各パーツ
- ナビバー
- インフォメーション欄
- 自分顔
- フレンドリスト
- 最新情報リスト
- ダイアログ
まえがき
用語
語は文脈によって意味を変えることがあります。XHTML+CSSプロジェクトに於いて登場する文章の誤解を避けるために予め用語を確認しておきます。
- CSS
-
- Cascading Style Sheets (CSS) を意味します。
- CSS云々といった場合、CSSのバージョン（レベル）は限定せず、一般的に利用されている全てを意味します。
- HTML
-
- HyperText !Markup Language (HTML) を意味します。
- ここでは、暗黙的に HTML 4.01 を意味します。
- 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
- XHTML
-
- Extensible HyperText Markup Language (XHTML) を意味します。
- ここでは、暗黙的に XHTML 1.0 を意味します。
- 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
- (X)HTML
-
- HTMLとXHTMLを総称した表現です。
- スタイルシート
-
- ここでは、CSSのことを指します。
- スタイル指定
-
- ここでは、CSS（で定義されているプロパティ）を用いて、(X)HTML要素へスタイルを指定することを意味します。
- ブラウザ
-
- ここでは、ウェブブラウザのことを指します。
- モダンブラウザとレガシーブラウザという区別もあります。
- モダンブラウザとは、最近のブラウザでCSSへの準拠がある程度満たされているブラウザの総称です。
- レガシーブラウザとは、モダンブラウザに対してCSSへの準拠があまり満たされていないブラウザの総称です。
- 同じ種類のブラウザでも、バージョンによって区別されます。
- これらは厳密に区分されておらず、文脈や状況によって区分が異なるブラウザもあります。
- ここで用いるブラウザの名称（略称）を以下に示します。
- IE (Internet Explorer)
- Fx (Firefox)
- Opera (Opera)
- Safari (Safari)
- 妥当性
-
- (X)HTMLに関して、以下に示した構文適合性を意味します。
- (X)HTMLが妥当であるとは、構文適合性を満足していることを意味します。
(X)HTMLの目的
Webリソースの形式として(X)HTMLが広く採用されているのはマークアップ言語としての目的が大きな理由です。 マークアップ言語はプレーンテキスト（テキストファイル）として扱われます。 そのため、テキスト（HTML文書）を解釈できるパーサ（ブラウザ）があれば環境に依存せずリソースを利用することができます。 しかしながら、どんな環境でもコンテンツの内容を理解するには内容が適切にマークアップされていることが必要です。 一部の環境での表示結果さえ良ければいいというのであれば画像やFlashを用いた方が効率的です。 Webリソースの形式としての(X)HTMLの利点を生かすには、その特性を理解し、できる限り適切に扱うことが求められます。
(X)HTMLの適正さ
(X)HTMLはプレーンテキストであるため、自身の情報もテキストとして記述します。 (X)HTMLのバージョンは文書型定義(Document Type Definition)として明示され、この記述をDTD宣言（あるいは、文書型宣言）といいます。 製作者は、ある文書型の仕様に基づいて(X)HTMLを作成し、その文書型を宣言します。 つまり、(X)HTMLの仕様を違反していないかという基準が一つの適正さの判断基準になります。 (X)HTMLの仕様に対する違反（文法違反）を評価する基準として構文適合性 (Validity)という語があります。
構文適合性を良くすることは重要ですが、それだけでは適正さに欠ける部分があります。 (X)HTMLとしての記述（HTML要素など）の使い方が本来の目的に合っているか、仕様に対して不適切でないかという基準があります。 目的が適切かを評価する基準として目的適合性 (relevance)という語があります。
(X)HTML+CSSによる文書をみたとき、構文適合性と目的適合性がきちんと考慮されていれば(X)HTMLに関しては適正であるといえます。
なお、構文適合性を検証するためのツールが提供されています。
CSS対応の実態
PCブラウザに関して言えば、2008年現在、IE, Firefox, Opera, Safari といったブラウザの比較的新しいバージョンが一般的に利用されています。 ブラウザは(X)HTMLやCSSなどの仕様を基にパーサが実装されていますが、その実装はブラウザによって異なる部分があり、場合によっては適切に実装されていないことがあります。 (X)HTML+CSSに関する作業で問題となるのは、この実装差異、実装不備にどう対応するかということです。 特に、現在日本で利用者が最も多いブラウザは Windows OS と併せて利用されている IE(version 6, 7) ですが、IEが実装不備を多く抱えていることが大きな障害となっています。
(X)HTML+CSSによる文書
(X)HTMLの仕様、CSSの仕様、一般的なブラウザの実装状況を知った上でないと、ある程度適切なウェブページを作ることは困難です。 さらに、ブラウザの実装差異や実装不備に対応するには、各種ブラウザのバグを認識し、効率的なバグへの対策を知る必要もあります。 適正さに欠けるウェブページが氾濫しているのは、言語の仕様を学習するだけでは理想の結果を得られないことからの妥協策が一般化してしまった背景があります。 しかしながら、本来の(X)HTMLの目的を意識し、正しいマークアップ及び効率的なスタイル指定により製作していくことが保守性や柔軟性の向上、トラフィックの削減といったメリットのためにも重要です。