XHTML+CSSのコーディングのやり方

ういっす、小堤です。

さて、最近はPHPの解析&修正業務をちょこちょこやったり・・・新規開発もがりがりやったりそしてWhiteCoreやxFrameworokPX2.5リリースへ向けての準備、それから事業の促進・・・おまけに最近SilverlightやFlashCS3、それから久々にC#やC++やりたいなぁなんて思っています。

全部やってたら寝ないでも時間が足りない!!HELP ME・・・。

さて、XHTML+CSSについてです。xFrameworkPX2.5のサイトのデザインもあがっている話は先日書きましたが、コーディングの仕方を社として定形化していきたいなぁ。というかした方がより高品質なものをお客さんに提供できるなぁ。と思っているわけです。そこでまずやったのがCSSのコーディング規約です。WEB上のいくつかのコーディング規約を参考に、社としてのCSSコーディング規約の策定を行いました。これはかなりよいのではないかと自負しています。(ぉぃ

そしてXHTML。
xFrameworkPX2.5のサイトをまずは実験的にコーディングして、CSSとXHTMLの書き方を決めていっています。サイトはよく使い回すフッターヘッダーなどが存在すると思いますが、そういった部分はxFrameworkをいれてSmartyの機能を利用してカバーしています。(include使ってます)

また、サイトの固定的な、文言についてはXMLに記述して簡単なアクションをグローバルアクションに設定してSmartyで埋め込んでいるため、サイト全体の固定文言変更(例えば、キーワードや概要やタイトルなど)は非常に容易です。

んじゃ、早速コーディング!なのですが、ここで注意したい点があります。まずはリニアライズされた状態で、サイト全体の要素をマークアップするということです。リニアライズとは、CSSをOFFにした状態のことです。つまり、要素をマークアップする際にレイアウトは関係ないわけです。

これをやってから、さぁ!レイアウトだ!CSSかくどー!っとやっておかないと、あとでCSSハックの嵐になる可能性が大!

きちんとサイト全体にどのような要素が存在して、そのCSS定義はどのファイルに記述をするのかを明確にしておくかで、その後のCSSの管理が非常に便利になります。BLOGシステムのように1つのテンプレート、要素を書き出してデザインしてしまうだけではないのが、実際のホームページやWEBシステムです。だからこそ、CSSの管理やマークアップの仕方は非常に重要なのです。

まだ途中ですが、リニアライズした状態の表示です。

 

 

 

 

 

こいつをCSSでレイアウトしていくと・・・・

な感じになっていきます。(現在つくってる最中なので・・・)まぁブログのネタも何回かに分けることでいろいろかけるとおもうので(ぉ

今後は具体的な書き方でもメモっていきます。

ちなみに、XHTML1.1 Strictが最新なのかな?(XHTML2.0もまだ策定中??)ですが、実際しっかりしたマークアップ+現実的なものはXHTML 1.0 Strictだと思います。なので、うちではXHTML1.0 Strictでのコーディングをしばらく進めていきます。
理由は、MS IE7がXHTML1.1に対応していないということ。えぇ~!って思いましたが、していないものは仕方ない。UTF-8でXHTML1.1で記述してみてください。文字化けしますから(笑)理由はXHTML.1.1に

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

が記述できないから。

いや、XHTML.1.1ならいらんだろ・・・とおもってたんですが、IE7はこれがないとXHTMLがUTF-8だと自動認識しないんですね。

まぁだから現実的なのがXHTML1.1だというわけです。
また、これからXHTML+CSSについて、僕は下記のブラウザを対象にしていきます。(予定・・・)

  • IE6/7
  • FireFox(Win/Mac)
  • Opera(Win/Mac)
  • Safari(Win/Max)

※Win Safariは先日出たベータ版を使用、今日だっけかleopard(MacOS10.5)が発売だから、そろそろ正式版でるんじゃないのかな・・・?

ってことで、ねるっ!死んじゃうから。

XHTML+CSSのコーディングのやり方