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

Version 61 (modified by takai, 11 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ペインその他(メッセージボックスなど)
  • 各パーツ
    • ナビバー
    • インフォメーション欄
    • 自分顔
    • フレンドリスト
    • 最新情報リスト
    • ダイアログ

確認しておくべきこと

  1. XHTML+CSS化において、何を完成形とするか。
    1. 2008年1月時点では、XHTML+CSS化でなく改善を目標とした。
      • これは、idやclassの振り分け、目的適合性の評価をあまり厳密にしないという意味である。
      • どうしても2重線が必要なら div で包含するなど、マークアップに関して妥協が許される。
    2. 各ページがどうなっていればいいのか、仕様書(設計書)に相当するものが欲しい。
      • それが存在しないので、現状の結果を見て何がどうなっていればいいのかを確認している。
      • 曖昧な部分の設計(理想形)について、具体的に示して欲しい。
    3. HTML文書としてのワイヤーフレームの情報が欲しい(id名の参考のため)。
      • XHTML+CSS化する上で勝手に決めてしまっていいのか。
    4. 命名規則(書式)について。
      • クラス名など空白類文字を含むことのできない単語をどう表記するか。
        • キャメルケース : (LCC) openpneFormat, (UCC) OpenpneFormat
        • ハイフン : OpenPNE-Format
        • アンダースコア : OpenPNE_Format
      • ハイフン、アンダースコアでは単語の区切りが明確になる(単語の大文字小文字に依存しない)。
      • Java言語のように、変数の構造的意味によって表記を分けるか。
  2. XHTML+CSS化より上位の設計に関する内容について。
    1. header.tpl をインクルードしたページから、header.tpl に値を渡せるのか。
      • title要素の内容をページごとに表示したい。
    2. CSSは複数のファイルで設計するのか(マルチシートアプローチか)。
      • 保守性を考えてもワンシートアプローチの方が扱いやすいと思う。
  3. そもそも、現状のOpenPNEと示しているのは http://sns.openpne.jp でいいのか。
    1. 現状を知るために盛り上がっているOpenPNEの最新安定版として公式SNSを基にしたが問題はないか。
  4. 今後の作業形態について。
    1. 複数人で作業するとなるとガイドラインを作る必要がある。
      • ガイドラインの内容の策定をするために、ここに書いた内容を吟味する必要がある。
    2. 個人で作業するにしても、一定のルール(ガイドライン)をまとめる必要がある。
    3. 個人の場合は暗黙的に認識していればよいが、複数人の場合は明示的にする必要がありその分の手間がかかる。

パーツの設計について

▼ 考慮すべき内容

  • (#)パーツの段落的構造(h2要素による区切り、上位のワイヤーフレーム)はどうするか。
  • ターゲットブラウザは何か。
  • 管理画面からカスタマイズ可能な箇所はどこか(事実上でなく設計的に)
  • マイページなどを3カラムにする可能性は考慮するのか。
  • 余白など改善した方がよさそうな部分が多く見られるが、どこまで変えていいのか。
  • CSS, JSが無効な状態で閲覧された場合への考慮はどうするか。
  • 印刷に対応するか。

▼ パーツのチェックポイント

  • (x-x)は、その内容を持つパーツのひとつ。
  • サイズ
    • 各パーツのサイズ width, height は何ピクセルか。
  • ボーダー
    • 外枠は2重である必要があるか。
    • 2重線の間隔は何ピクセルか。
    • 外枠の色は #ccc (204,204,204) でいいのか。
    • (2-4) 内部の枠線は必要か。
    • (3-8) 1pxと2pxのボーダーの違いは必要か。
  • 背景色
    • 見出しの背景色は #36b3d1 (54,179,209) でいいのか。
    • (1-1) 背景色がついている部分は本当に色が必要か。
  • テキスト
    • 行の高さ line-height は変えてもいいのか。
    • (2-9) (3-3) (3-7) 折り返し位置を変えてもいいのか。
    • (1-2) 太字にする部分は見出し以外に決まっているのか。
    • (2-13) "※" は必要か。
  • レイアウト
    • (1-1) 2列でなく2段にしてもいいのか。
    • (2-11) フォームの配置を変えてもいいのか。
    • (3-1) 「他のメンバーの~」リンクテキストの位置を変えてもいいのか。
    • (3-4) ボタンの位置を変えてもいいのか。
  • 装飾
    • (2-16) フォームにある矢印画像は必要か。
    • (3-7) 1位と2位以下の見栄えの違いは何か。
    • 角丸ボックスにする可能性はあるか。
  • 余白
    • ボックスの padding (特に上下)の値は何ピクセルか。
    • (2-15) テキストの左余白は何ピクセルか。
    • (8-9) 日記などのテキスト表示欄の padding は何ピクセルか。
    • (8-12) 画像と文字の間隔は無くていいのか。
    • (8-19) マイフレンド管理の見栄えは今のままでいいのか。
    • (9-4) 下部文章の左右余白は今のままでいいのか。
    • (9-5) 写真のURIを入力するテキストフィールドの長さは今のままでいいのか。
    • (9-8) テキストエリアの padding は何ピクセルか。
    • フォーム関連要素の padding は付けるか。

まえがき

用語

語は文脈によって意味を変えることがあります。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化
クロスブラウザ
  • 一般的には、DHTML(Dynamic HTML)に関する語ですが、ここでは、(X)HTML+CSSに関して使います。
  • 異なるプラットフォーム(環境)でも、同様の結果(表示)が実現できることを意味します。
  • 特に、ここでは、同一の結果でなく同様の結果(理想的な結果の範疇)であればよいことを意味します。
コンポーネント (Components)
  • パーツのことです。パーツを参照してください。
  • ベース(基盤)レイアウトを司るボックスをコンテナ(Container)と呼んだものに対してコンポーネントと名付けました。
  • コンポーネントというと別の分野で語弊が生じる可能性があるので、パーツという語を積極的に利用します。
スタイルシート
  • ここでは、CSSのことを指します。
スタイル指定
  • ここでは、CSS(で定義されているプロパティ)を用いて、(X)HTML要素へスタイルを指定することを意味します。
パーツ
  • OpenPNEに存在する「最新情報」や「マイフレンドリスト」などの内容の一塊を指します。
  • 「最新日記・レビュー」はパーツですが、その中の「最新日記」や「最新レビュー」をそれぞれパーツと見做すかは曖昧です。
ブラウザ
  • ここでは、ウェブブラウザのことを指します。
  • モダンブラウザとレガシーブラウザという区別もあります。
    • モダンブラウザとは、最近のブラウザでCSSへの準拠がある程度満たされているブラウザの総称です。
    • レガシーブラウザとは、モダンブラウザに対してCSSへの準拠があまり満たされていないブラウザの総称です。
    • 同じ種類のブラウザでも、バージョンによって区別されます。
    • これらは厳密に区分されておらず、文脈や状況によって区分が異なるブラウザもあります。
  • ここで用いるブラウザの名称(略称)を以下に示します。
ボックス
  • あるブロックレベル要素の一塊を指します。
  • 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化の方針

  1. 現状のOpenPNEの構造を明確にする。
    • OpenPNEテンプレートの構造(includeの規則など)を把握する。
  2. 完成形はどうなっているべきかを現状から読み取る。
  3. 各ページがどんなパーツを持つか、ページごとの構造を明確にする。
  4. スタイル指定を考慮して、パーツの共通点を抜き出しグルーピングする。
  5. 目的適合性を考慮して、パーツをXHTML+CSSで書き直す(XHTML+CSS化を行う)。
  6. 改善に関して、パーツのマークアップ(アプローチ)を決定する。
    • パーツになくてはならない固有のデザインがないかなどを確認する。
  7. ガイドラインを作成しつつ、公開に向けたパーツのマークアップを行う。
    1. http://takai.sns.dazai.pne.jp/ からHTMLソースを保存
    2. tracにSVNで差分を取りながらそのページをXHTML+CSS化
    3. XHTML+CSS化した結果(差分)を見ながらOpenPNEテンプレート書き換え
  8. パーツ以外(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 形式で保存
  • 2007/12/25 - 12/26
    • (方針3) 「ページAには、これだけのパーツがあり、そのパーツはグループPである」という分類のパーツリスト作成 ページ別パーツ一覧
    • (方針2) いくつかのパーツの現状(tableの乱用)の設計を認識
  • 2008/01/16
    • (方針4) 「このグループには、これらのパーツがあり、そのパーツはページXにある」という分類のパーツリスト作成 グループ別パーツ一覧
    • パーツのマークアップについて議論し、方針を(X)HTML+CSSによる改善と改め直した。
  • 2008/01/22 - 01/23
  • 2008/01/28
    • (方針6) パーツの設計について議論
      • 作業しつつ随時チャットで確認していく形にすることに決まった。
    • OpenPNE2.12.0で反映させることが前提なので、更に(X)HTML+CSS化のレベルを下げて速度重視で設計することを目標とした。
      • table要素の乱用を省き、簡単にマークアップを改める程度を想定
      • パーツごとにidを振る予定だが、期限的な問題でstyle属性を利用する可能性もある。
    • OpenPNEテンプレートファイルを実際に書き換えるための準備(インクルードの仕方などの認識)
  • 2008/01/31
    • (方針6) パーツの設計について確認
    • 書き換えたソースでの表示結果を確認するためのOpenPNEを http://takai.sns.dazai.pne.jp/ に用意
    • (方針7) XHTML+CSS化とOpenPNEテンプレートの書き換えを分業することにした。

WikiInclude(DIRECTORYNAVI)?