krzm.jp
黒住浩司 Webサイト

krzm.jpの制作ポリシー

内容

基本ポリシー

当サイトは、HTML、CSS、そしてJavaScriptを使用して、制作を行っています。もちろん、サイト全体はWordPressのPHPスクリプトによって構成されていますが、これは主としてWordPressタグ(関数)を組み合わせているだけで、PHPそのもののプログラミングは行っていません。
こうした、HTML、CSS、JavaScriptでコーディングを行うに当たっては、次の点に留意しています。

  • HTMLは、HTML5の標準に準拠し、文書構造の明確化に努める
  • CSSは、CSS2の標準に準拠しつつ、CSS3の効果を積極的に取り入れる
  • JavaScriptは、「ライブラリ」を使わず、なるべく自分で作る

これらのうち、HTMLについては、サイトがブログということもあり、article要素で各記事の定義を行っています。また、header、hgroup、footerの各要素で記事内部を定義し、aside、nav要素も、なるべくHTML5の仕様うに沿う形で取り入れるように心がけています。

CSSについては、スタイルシートの理念である、「文書構造とデザイン要素の分離」を推し進めています。その上で、CSS3のbox-shadow、border-radius、opacityプロパティを主として活用することで、デザイン表現を行っています。

昨今のJavaScriptを巡っては、jQueryのようなライブラリを使ってデザイン表現を強化する傾向が強くなっています。そうした表現の追求には賛同するものの、さほどプログラミングの知識が無い私にとって、ライブラリのソースコードは事実上のブラックボックスです。そうした、意味の分からないものを使うよりも、できることは自分でやる、という考えに則り、JavaScriptは自分でゼロから作ることにしています。トップページのスライドショーや、記事内画像のポップアップ表示などは、表現が結果するHTML/CSSを想定し、そこからを処理内容を考えて、スクリプトを作りました。

互換性対策

様々な新しい機能を含む、HTML5に基づいたHTML/CSS/Javascriptでコーディングし、それらを先取りしていくことを、当サイトも追求しています。

しかし、HTML5の新要素は、Internet Explorer 8以下では、正しく処理されません。また、CSS3も、Internet Explorer 9では部分的な対応にとどまります。JavaScriptでも、たとえば「イベントリスナー」を使おうとしても、やはりIE8以下が対応していません。

かといって、Internet Explorerを無碍に扱うことは、私には人としてできません。そこで、最大限のデザイン表現はIE 10以上で再現されるようにしているものの、IE 9でも、text-shadow、背景グラデーションを除き、ほぼ同等の表現になるように努めました。

IE9の表示
IE9で表示したkrzm.jp

また、IE 8以下では、大きく見え方は異なるものの、基本的なレイアウト構成は再現されるようにしています。さすがにIE 4以下では、正しく表示されないので、IE 6以上での閲覧が、最低条件になります。

IE8での表示
IE8で表示したkrzm.jp

もちろん、開発元のMicrosoftですら過去の遺物として葬り去ろうとしているIE 6ですから、8までを含め、「過去の表現」と「現在の表現」を明確に分けることは、私は必要だと考えています。そのうえで、最大限の互換性も追求している次第です。

その他のブラウザは、私としてはどうでもいいのですが、いちおう最新版であればIE 10と同じデザイン/レイアウトになることを確認しています。