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

Version 46 (modified by takai, 12 years ago) (diff)

--

TOC

http://sc.pne.jp/h100/200801011709.png

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
リストアイコンの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
誕生日バナーの右側が切れる

ノート

既存レイアウトの構造

レイアウト構造をそれぞれ設計していき、IDの付け方やテンプレート設計方針を検討します。

  • 全テンプレート共通部分
    • ヘッダー
    • 共通ナビバー
    • フッター
  • 土台部分
    • 1ペインログイン画面
    • 1ペイン一般
    • 2ペイン看板(h_home等の9面表示)
    • 2ペインその他(メッセージボックスなど)
  • 各パーツ
    • ナビバー
    • インフォメーション欄
    • 自分顔
    • フレンドリスト
    • 最新情報リスト
    • ダイアログ

まえがき

用語

語は文脈によって意味を変えることがあります。XHTML+CSSプロジェクトに於いて登場する文章の誤解を避けるために予め用語を確認しておきます。

CSS
  • Cascading Style Sheets (CSS) を意味します。
  • CSS云々といった場合、CSSのバージョン(レベル)は限定せず、一般的に利用されている全てを意味します。
HTML
  • HyperText !Markup Language (HTML) を意味します。
  • ここでは、暗黙的に HTML 4.01 を意味します。
  • 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
OpenPNEテンプレート
  • このプロジェクトで扱う(テンプレート)ファイル、またはその内容を指します。
  • OpenPNEテンプレートを(X)HTML+CSS化することが、このプロジェクトの目的です。
XHTML
  • Extensible HyperText Markup Language (XHTML) を意味します。
  • ここでは、暗黙的に XHTML 1.0 を意味します。
  • 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
(X)HTML
  • HTMLとXHTMLを総称した表現です。
スタイルシート
  • ここでは、CSSのことを指します。
スタイル指定
  • ここでは、CSS(で定義されているプロパティ)を用いて、(X)HTML要素へスタイルを指定することを意味します。
ブラウザ
  • ここでは、ウェブブラウザのことを指します。
  • モダンブラウザとレガシーブラウザという区別もあります。
    • モダンブラウザとは、最近のブラウザでCSSへの準拠がある程度満たされているブラウザの総称です。
    • レガシーブラウザとは、モダンブラウザに対してCSSへの準拠があまり満たされていないブラウザの総称です。
    • 同じ種類のブラウザでも、バージョンによって区別されます。
    • これらは厳密に区分されておらず、文脈や状況によって区分が異なるブラウザもあります。
  • ここで用いるブラウザの名称(略称)を以下に示します。
妥当性
  • (X)HTMLに関して、(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, Netscape, Safari といったブラウザの比較的新しいバージョンが一般的に利用されています。 ブラウザは(X)HTMLやCSSなどの仕様を基にパーサが実装されていますが、その実装はブラウザによって異なる部分があり、場合によっては適切に実装されていないことがあります。 (X)HTML+CSSに関する作業で問題となるのは、この実装差異、実装不備にどう対応するかということです。 特に、現在日本で利用者が最も多いブラウザは Windows OS と併せて利用されている IE(version 6, 7) ですが、IEが実装不備を多く抱えていることが大きな障害となっています。

(X)HTML+CSSによる文書

(X)HTMLの仕様、CSSの仕様、一般的なブラウザの実装状況を知った上でないと、ある程度適切なウェブページを作ることは困難です。 さらに、ブラウザの実装差異や実装不備に対応するには、各種ブラウザのバグを認識し、効率的なバグへの対策を知る必要もあります。 適正さに欠けるウェブページが氾濫しているのは、言語の仕様を学習するだけでは理想の結果を得られないことからの妥協策が一般化してしまった背景があります。 しかしながら、本来の(X)HTMLの目的を意識し、正しいマークアップ及び効率的なスタイル指定により製作していくことが保守性や柔軟性の向上、トラフィックの削減といったメリットのためにも重要です。

XHTML+CSS化の方針

XHTML+CSS化とは

一般的に、XHTML+CSS化という言葉は意味が定められていませんが、ここでは、適正なXHTMLとCSSによって対象物を設計することを指すことにします。 しかしながら、(X)HTML+CSSとして広い意味で改善することを意味する場合があるかもしれません。

XHTML+CSS化をするには

OpenPNEテンプレートをXHTML+CSS化でするには、妥当性はもちろん、目的適合性を十分考慮する必要があります。 ある内容をどうマークアップすればいいか、あるいは画像として埋め込むかといったことを判断しなければなりません。 妥当性は文法違反の有無が判断基準であるため検証プログラムによって評価できますが、目的適合性は製作者(人間)にしか評価できません。 また、目的適合性に関しては判断基準が一意でなく、適切であると思われる方法が複数存在することがしばしばあります。 その複数の方法の中から最も適切であるものを決めることも、目的適合性を判断するために必要な

WikiInclude(DIRECTORYNAVI)?