HOME > pne-xhtmlcss [main][note][edit]

  1. XHTML+CSS化プロジェクトとは
    1. 改善に際しての方針
    2. OpenPNE2.12時の具体的な作業方針
  2. XHTML+CSS化プロジェクトの成果
  3. 関連ページ

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

XHTML+CSS化プロジェクト

PC版のテンプレートのHTMLとCSSを見直し、PC版テンプレートの改善をはかります。

XHTML+CSSプロジェクトコミュニティはこちらです（OpenPNE公式SNS内）

XHTML+CSS化プロジェクトとは

OpenPNEのPC版テンプレート（HTML構造）及びスタイルシート（CSS）を改善することが目的です。

OpenPNE2.10のソースコードを改善するという方針で進めています。

改善に際しての方針

OpenPNE2.10（従来）の見栄えや内容はそのままで、ソースコードをきれいにするという考えの改善を行っています。

  • 従来の設計（管理画面からの「スキン画像変更」や「ナビゲーション変更」など）に対応する
  • 従来の見栄えや内容が同じように表示される

改善した結果、見栄えを統一したために従来と多少異なること（2pxの線が1pxになっているなど）はありますが、基本的には今の設計のままHTML（テンプレート）及びCSSのソースコードをきれいにすることを主眼に置いています。

また、現在利用されていると考えられる次のようなモダンブラウザを対象ブラウザとして想定しています。

Windows

  • Microsoft Internet Explorer 6.0以上
  • Mozilla Firefox 1.5以上
  • Opera 9.25以上
Mac OS X
  • Apple Safari 3.0以上
  • Mozilla Firefox 1.5以上
  • Opera 9.25以上

ソースコードをきれいにする上で意識しているのは次の点です。

  • 次のような埋め込みによって実現されている見栄え（スタイル指定）をスタイルシートで行う
    • style属性などの属性による見栄えの指定
    • table要素（の入れ子）による枠線や余白
    • ダミー画像による余白
    • br要素（の連続）による余白
    • img要素で表示されているマーカー画像
  • 文書構造上の意味に合ったマークアップ、ID名、クラス名の付与を施す
    • CSSでスタイル指定できるように、適切な範囲で詳細にマークアップする
    • クラス名に関しても <span class="bold"> ではなく <span class="caution"> のように意味付けをする

『見栄えはスタイルシートで』『HTMLでは構造上の意味を』というHTMLの基本理念に則ってソースコードを見直すことが理想ですが、HTMLの仕様やブラウザの実情を考えると難しいところがあります。

実情を考慮した上でHTML+CSSをきれいにすることがこのプロジェクトの主軸になります。

OpenPNE2.12時の具体的な作業方針

従来の見栄えや内容を大きく変えないように改善するため、従来のレイアウトや内容（パーツ）を調査しています。

  1. どのような内容（パーツ）が存在しているのかを調べます（パーツリストにまとめています）
  2. 従来のSNSを見て内容（文章）を確認しながら、パーツごとにマークアップを施します
    • パーツ間で共通する部分には同じクラス名を与えます
  3. 従来のSNSを見て見栄えを確認しながら、マークアップしたパーツに対してスタイルを記述します
    • パーツ間で共通する部分は区別せずに同じスタイルを適用させます
  4. ページごとに、含まれるパーツを全て記述して見栄えを確認します

この作業を経て、OpenPNE2.12ではXHTML+CSS化を実現しています。

しかしながら、OpenPNE2.12では改善を行ったもののXHTML+CSS化に関して改善できる点がまだ残っています。 OpenPNE2.12以降も、改善可能な部分の改善や不具合修正、管理画面等も含めた発展的な改善を行っていく予定です。

XHTML+CSS化プロジェクトの成果

OpenPNE2.12でPC版テンプレートの全面的な見直しを行い、全てのテンプレート・CSSを1から書き直しを行いました。

関連ページ