| Version 59 (modified by , 15 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化において、何を完成形とするか。
- 2008年1月時点では、XHTML+CSS化でなく改善を目標とした。
- これは、idやclassの振り分け、目的適合性の評価をあまり厳密にしないという意味である。
- どうしても2重線が必要なら div で包含するなど、マークアップに関して妥協が許される。
- 各ページがどうなっていればいいのか、仕様書（設計書）に相当するものが欲しい。
- それが存在しないので、現状の結果を見て何がどうなっていればいいのかを確認している。
- 曖昧な部分の設計（理想形）について、具体的に示して欲しい。
- 項目を「パーツの設計について」にある程度示した。
- HTML文書としてのワイヤーフレームの情報が欲しい（id名の参考のため）。
- XHTML+CSS化する上で勝手に決めてしまっていいのか。
- 命名規則（書式）について。
- クラス名など空白類文字を含むことのできない単語をどう表記するか。
- キャメルケース : (LCC) openpneFormat, (UCC) OpenpneFormat
- ハイフン : OpenPNE-Format
- アンダースコア : OpenPNE_Format
- ハイフン、アンダースコアでは単語の区切りが明確になる（単語の大文字小文字に依存しない）。
- Java言語のように、変数の構造的意味によって表記を分けるか。
- クラス名など空白類文字を含むことのできない単語をどう表記するか。
- 2008年1月時点では、XHTML+CSS化でなく改善を目標とした。
- XHTML+CSS化より上位の設計に関する内容について。
- header.tpl をインクルードしたページから、header.tpl に値を渡せるのか。
- title要素の内容をページごとに表示したい。
- CSSは複数のファイルで設計するのか（マルチシートアプローチか）。
- 保守性を考えてもワンシートアプローチの方が扱いやすいと思う。
- header.tpl をインクルードしたページから、header.tpl に値を渡せるのか。
- そもそも、現状のOpenPNEと示しているのは http://sns.openpne.jp でいいのか。
- 現状を知るために盛り上がっているOpenPNEの最新安定版として公式SNSを基にしたが問題はないか。
- 今後の作業形態について。
- 複数人で作業するとなるとガイドラインを作る必要がある。
- ガイドラインの内容の策定をするために、ここに書いた内容を吟味する必要がある。
- 個人で作業するにしても、一定のルール（ガイドライン）をまとめる必要がある。
- 個人の場合は暗黙的に認識していればよいが、複数人の場合は明示的にする必要がありその分の手間がかかる。
- 複数人で作業するとなるとガイドラインを作る必要がある。
パーツの設計について
▼ 考慮すべき内容
- (#)パーツの段落的構造（h2要素による区切り、上位のワイヤーフレーム）はどうするか。
- ターゲットブラウザは何か。
- 管理画面からカスタマイズ可能な箇所はどこか（事実上でなく設計的に）
- マイページなどを3カラムにする可能性は考慮するのか。
- 余白など改善した方がよさそうな部分が多く見られるが、どこまで変えていいのか。
- CSS, JSが無効な状態で閲覧された場合への考慮はどうするか。
- 印刷に対応するか。
▼ パーツのチェックポイント
- (x-x)は、その内容を持つパーツのひとつ。
- サイズ
- 各パーツのサイズ width, height は何ピクセルか。
- ボーダー
- 背景色
- 見出しの背景色は #36b3d1 (54,179,209) でいいのか。
- (1-1) 背景色がついている部分は本当に色が必要か。
- テキスト
- レイアウト
- 装飾
- 余白
まえがき
用語
語は文脈によって意味を変えることがあります。XHTML+CSSプロジェクトに於いて登場する文章の誤解を避けるために予め用語を確認しておきます。
- CSS
-
- Cascading Style Sheets (CSS) を意味します。
- CSS云々といった場合、CSSのバージョン（レベル）は限定せず、一般的に利用されている全てを意味します。
- HTML
-
- HyperText Markup Language (HTML) を意味します。
- ここでは、暗黙的に HTML 4.01 を意味します。
- 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
- 小文字で（htmlと）表記している場合には次のものを指す場合があります。
- html要素（HTML要素の一つ、ルート要素）
- 拡張子 html
- HTML構造
-
- HTML要素によってマークアップされた一部、あるいは全部の構造のことを意味します。
- HTML要素
-
- ここでは、(X)HTMLで定義されている要素、及び利用され得る要素（ブラウザの独自要素）を意味します。
- OpenPNEテンプレート
-
- このプロジェクトで扱う（テンプレート）ファイル、またはその内容を指します。
- OpenPNEテンプレートを(X)HTML+CSS化することが、このプロジェクトの目的です。
- XHTML
-
- Extensible HyperText Markup Language (XHTML) を意味します。
- ここでは、暗黙的に XHTML 1.0 を意味します。
- 全てのマークアップ規則 (Strict / Transitional / Frameset) を総括的に指します。
- (X)HTML
-
- HTMLとXHTMLを総称した表現です。
- XHTML+CSS化
-
- 「XHTML+CSS化とは」を参照してください。
- クロスブラウザ
-
- 一般的には、DHTML(Dynamic HTML)に関する語ですが、ここでは、(X)HTML+CSSに関して使います。
- 異なるプラットフォーム（環境）でも、同様の結果（表示）が実現できることを意味します。
- 特に、ここでは、同一の結果でなく同様の結果（理想的な結果の範疇）であればよいことを意味します。
- コンポーネント (Components)
-
- パーツのことです。パーツを参照してください。
- ベース（基盤）レイアウトを司るボックスをコンテナ(Container)と呼んだものに対してコンポーネントと名付けました。
- コンポーネントというと別の分野で語弊が生じる可能性があるので、パーツという語を積極的に利用します。
- スタイルシート
-
- ここでは、CSSのことを指します。
- スタイル指定
-
- ここでは、CSS（で定義されているプロパティ）を用いて、(X)HTML要素へスタイルを指定することを意味します。
- パーツ
-
- OpenPNEに存在する「最新情報」や「マイフレンドリスト」などの内容の一塊を指します。
- 「最新日記・レビュー」はパーツですが、その中の「最新日記」や「最新レビュー」をそれぞれパーツと見做すかは曖昧です。
- ブラウザ
-
- ここでは、ウェブブラウザのことを指します。
- モダンブラウザとレガシーブラウザという区別もあります。
- モダンブラウザとは、最近のブラウザでCSSへの準拠がある程度満たされているブラウザの総称です。
- レガシーブラウザとは、モダンブラウザに対してCSSへの準拠があまり満たされていないブラウザの総称です。
- 同じ種類のブラウザでも、バージョンによって区別されます。
- これらは厳密に区分されておらず、文脈や状況によって区分が異なるブラウザもあります。
- ここで用いるブラウザの名称（略称）を以下に示します。
- IE (Internet Explorer)
- Fx (Firefox)
- Opera (Opera)
- NN / Netscape (Netscape Navigator)
- Safari (Safari)
- ボックス
-
- あるブロックレベル要素の一塊を指します。
- HTMLレベルのワイヤーフレームの各部位がそれぞれ一つのボックスといえるかもしれません。
- ブロックレベル要素で包含されていない部位も、他と区別して認識可能な一塊であればボックスと表現することがあります。
- 内容
-
- 一般的な意味での "内容" を指す場合と、HTMLとしての内容を指す場合があります。
- ここでいうHTMLとしての内容とは、ある要素に対して、その要素開始タグとその要素終了タグに含まれた中身を指します。
- <p><strong>XHTML+CSS化</strong>とは</p> というHTML記述に関して、"<strong>XHTML+CSS化</strong>とは" はp要素の内容で、"XHTML+CSS化"はstrong要素の内容です。
- 妥当性
-
- (X)HTMLに関して、(X)HTMLの適正さで示した構文適合性を意味します。
- (X)HTMLが妥当であるとは、構文適合性を満足していることを意味します。
- 要素
-
- 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でするには妥当性はもちろん、目的適合性を十分考慮する必要があります。 ある内容をどうマークアップすればいいか、あるいは画像として埋め込むかといったことを判断しなければなりません。 妥当性は文法違反の有無が判断基準であるため検証プログラムによって評価できますが、目的適合性は製作者（人間）にしか評価できません。 また、目的適合性に関しては判断基準が一意でなく、適切であると思われる方法が複数存在することがしばしばあります。 その複数の方法の中から最も適切であるものを決めることも効率的なマークアップをするためには必要です。
ある内容に対して適切であると思われるマークアップの方法が複数あるとき、そのページ全体の中でその内容がどうなっていればよいかを考えることが最適なマークアップを決定するための判断材料になります。 「見出し」と「（見出しに対する）内容」という組み合わせと見做せる内容があったとき、これを「hn要素」と「p要素（あるいは、リスト要素など）」とするか、「dt要素」と「dd要素」とするか、あるいは別の要素を用いるのが適しているのかは状況によって異なります。 適切と思われる方法が複数考えられるときは、他の要因（そのページ内の他の記述）との関係性などを考慮して判断できます。 また、実装不備に対応するためのCSSのスタイル指定でHTML構造に依存せざるを得ない場合もあるため、スタイル指定がしやすいマークアップに決定することもあります。 念を押しますが、見栄えのためのマークアップは（悪い意味で）逆説的であり不適切です。
OpenPNEテンプレートをXHTML+CSS化する
XHTML+CSS化とは
一般的に、XHTML+CSS化という言葉は意味が定められていませんが、ここでは、適正なXHTMLとCSSによって対象物を設計することを指すことにします。 しかしながら、(X)HTMLとCSSを広い意味で改善することを意味する場合があるかもしれません。
XHTML+CSS化の方針
- 現状のOpenPNEの構造を明確にする。
- OpenPNEテンプレートの構造（includeの規則など）を把握する。
- 完成形はどうなっているべきかを現状から読み取る。
- 各ページがどんなパーツを持つか、ページごとの構造を明確にする。
- スタイル指定を考慮して、パーツの共通点を抜き出しグルーピングする。
- 目的適合性を考慮して、パーツをXHTML+CSSで書き直す（XHTML+CSS化を行う）。
- 改善に関して、パーツのマークアップ（アプローチ）を決定する。
- パーツになくてはならない固有のデザインがないかなどを確認する。
- ガイドラインを作成しつつ、公開に向けたパーツのマークアップを行う。
- パーツ以外（headerやfooterなど）の部分のマークアップを行う。
OpenPNEの各ページ、各パーツに関する仕様書（設計書）が存在しないため、どこがどうなっているべきかという設計を現状から読み取る必要があります。 設計書自体を作る必要はありませんが、目的適合性やスタイル指定の効率化を考慮すると設計書の内容と同等の情報が必要になります。 このため、どんなパーツがあるか（方針3）を調べた後に、パーツがどうなっていればいいかという認識を併せてパーツのグルーピング（方針4）を行う必要があります。
パーツの区分ができれば、その分類と実際のパーツの差異を確認しつつパーツの設計（XHTML+CSS化）を行います。 ある分類（パーツグループ）の設計がテンプレート化（形式化）できれば、全てのパーツをそのテンプレートに併せてマークアップします。 CSSを適用した結果、各パーツが理想的な表示になれば完了となります。
ただし、あるグループのパーツがターゲットブラウザで理想的な表示になるかを逐次確認する必要があります。 XHTML+CSSによるページの製作者は、場合によっては実装不備に対してスタイル指定だけで対応できず、HTML構造を変更する可能性があることを十分承知しておくべきです。 クロスブラウザを実現するためには、ターゲットブラウザ全ての実装不備を考慮する必要があります。
これまでの作業内容
- 2007/12/12
- 基本方針の考案
- （方針1） 現状のOpenPNEテンプレートの構造の認識
- 2007/12/17 - 12/18
- ベースレイアウト（コンテナ）のテンプレートの考察（以下3種に絞った）
- 2カラム （マイホーム、マイページ確認、フレンドトップ、コミュニティトップ）
- サイドバー付 1カラム （日記、メッセージ、ランキング、…）
- 1カラム （フレンドリスト、コミュニティリスト、コミュニティメンバー、…）
- SNS(OpenPNE)ログイン後にユーザとしてアクセスできるページのリストアップ
- リストアップしたページにある全てのコンポーネントを画像として保存
- 作業にはWinshotを利用して png 形式で保存
- ベースレイアウト（コンテナ）のテンプレートの考察（以下3種に絞った）
- 2007/12/25 - 12/26
- （方針3） 「ページAには、これだけのパーツがあり、そのパーツはグループPである」という分類のパーツリスト作成 ページ別パーツ一覧
- （方針2） いくつかのパーツの現状（tableの乱用）の設計を認識
- 2008/01/16
- （方針4） 「このグループには、これらのパーツがあり、そのパーツはページXにある」という分類のパーツリスト作成 グループ別パーツ一覧
- パーツのマークアップについて議論し、方針を(X)HTML+CSSによる改善と改め直した。
- 2008/01/22 - 01/23
- （方針2, 5） パーツのマークアップ例を作成 (X)HTML+CSSによる設計