制作者が作ったウェブ文書とスタイルシートのテンプレート・第一弾です。
最近、制作者は小中学生が作ったサイトを見る機会が多くなりました。
彼女たちのサイトの多くは、<iframe>要素を中央に置いて、そこにコンテンツを埋め込むようなHTMLテンプレートを利用してサイトを作っております。
制作者にはどうもそれが気になったのです。
ここではHTMLの理念については論じない事にします。
ですが、理念などを考えなくても、かなり身近なところに好ましくない理由が見えるものです。
<iframe>要素を表示出来ない環境の事を全く考えていないのです。
また、CSSのサポートが中途半端な環境の事も全然考えておりません。
制作者が幾つか見た限りでは、大半のテンプレートはオペラ 6.xやネットスケープ 4.x以前での閲覧が不可能になります。
また、最近では携帯電話でも次世代機ならそれなりにフル規格ウェブの閲覧が可能にはなっているものの、<iframe>要素の所為で閲覧が不可能になってしまっております。
小中学生たちは、しばしばサイトの模様替えを行います。
しかし、HTML文書内に背景画像や色などの情報を埋め込んでいるため、新たなテンプレートに文書を埋め込まなければならなくなります。
もっと効率の良い方法があるのですがねえ。
そこで、制作者はCSSで実現するテンプレートを思い立ったのです。
よく見かけるテンプレートをCSSだけで実現出来るようにしておけば、あとはスタイルシート内で指定している画像のURIや色情報を書き換えるだけで、全ての文書が一気に模様替え出来るようになります。
気に入ったイラストや写真を背景にするなどする事で、サイトのリニューアルはすぐに完了するのです。
また、素材配布を行っている方にもより簡単に独自のデザインを配布出来るようになるでしょう。
制作者が今回作ったテンプレートは以下のようになります。
インターネットエクスプローラ 6.xまでではposition: fixedプロパティを使えないため、PCではメインコンテンツをスクロールさせるようにします。
このため、メインコンテンツは<div>要素でマークアップします。
また、携帯端末などでのアクセスを考慮して、以下の隠しアンカーを設けました。
テンプレートではaccesskey属性を用いて、
それぞれジャンプするようにしております。
基本となるのはやはり中央の部分をスクロールするものでしょう。
これを実現するため、CSSのoverflowプロパティを活用して擬似インラインフレームを実現します。
但し、オペラ 6.xではoverflowプロパティで内部をスクロール可能にする事は出来ないので、media属性と@media規則をある条件で利用を利用する事で、オペラ 6.xがプロパティを認識できなくなるバグを逆用して擬似インラインフレームにならないようにします。
コンテンツやメニューなどの配置はCSSのpositionプロパティを用いますが、これもオペラ 6.xでは閲覧の妨げになるので、オペラ 6.xでは認識しないようにしております。
尚、サンプルではCSSで活用出来る画像素材の例として、マーガレットをフィーチャーした以下の素材を利用出来るようにしております。
<ul>要素直下の<li>要素に付けるマーカ用の16ピクセル四方の透過GIF画像
<hr>要素用の透過GIF画像
但し、ご用意した画像はあくまでもサンプルです。
実際に素材として配布する場合、スタイルシートで指定された色や画像を変更する事で多彩なテンプレートが実現出来るようになります。
シェア第一位のドコモが未だにスタイルシートファイルをサポートしていないのは残念ですが、KDDI, ソフトバンク第三世代機, ウィルコムの現行機種などでは効果が出ます。
海外のモバイルサイトの多くは、トップページの冒頭に大きめの画像をタイトルに使用する事が流行っているようですので、そのようにしてみました。
また、PC版と同様に、<ul>要素直下の<li>要素に付けるマーカを画像にしております。
実際にこのテンプレートを使う方は、
のいずれかとなるでしょう。
になります。
HTML文書には<title>要素などに適切な題名を入れます。
また、本文は指定された区間に正しくマークアップしたものを入れておきます。
実際には指定された区間は<div>要素の内容なので、インラインを直接書いても文法違反にはなりません。しかしながら、やはりテキストは正しくマークアップすべきでしょう。
メニューは<dl>要素で表現するものとします。
具体的には、
それぞれ記述すると良いでしょう。
フッタには<address>要素内にサイト制作者のクレジットを入れられるようにしております。
この他に注意する事は以下の通りです。
堀北真希うさぎ：昔のボシュロム製品『オプティマ』のCMを真似たソフトコンタクトレンズ装着場面を含んだ仮想CM動画<… />として下さい。HTML文書のテンプレートは XHTML 1.0 トランジッショナルの文書型としております。
HTML 4.01に変更する場合には、
タグの末尾の>の直前にある斜線を取り除いて下さい。
再配布者は素材として利用する画像のファイル名や色を所定の箇所を書き換える事で指定出来ます。
但し、PC向けスタイルシートの前半の指定されている区間はCSSの知識が充分でない方は変更しないようにして下さい。
PC向けスタイルシートの後半部は各要素のスタイル定義です。
お好みに合わせて適切なスタイルを定義して下さい。
実際のところ、CSSを全面的に書き換えれば小窓で無い形の表示も出来ます。
このテンプレートは、無償サーヴァでの広告を一番下に表示するようにしております。
このため、FC2のような最下部に一行広告を出す仕様でない場合には規約違反になる恐れがあります。
制作者はHTML文書テンプレート及びスタイルシートテンプレートに関しては著作権を主張しません。
従いまして見本として添付している画像を一切利用せずに他の画像に差替え(適宜修正し)て再配布する場合には、制作者に一切断り無くご利用になれます。
但し、ご利用になった結果に関しましては、免責とさせて頂きます。
尚、見本として添付している画像に関しては一応著作権を主張しておきます。
HTML文書・スタイルシートテンプレートは
からダウンロードして下さい。
西暦1997年(平成 9年)にHTML 4.0が策定されて以来、文書と見映えの分離が進められてきております。
文書と見映えを分離する事で、表示環境の制限が取り払われて、あらゆる環境で閲覧出来るようになるからです。
特に日本では携帯電話の高性能化でフル規格のウェブコンテンツの閲覧がフルブラウザでなくても可能になりつつあり、その結果「PC以外の環境での閲覧」が現実に成され得るものとなりつつあります。
しかし、その一方で、未だに特定の環境しか想定していないマークアップを行う人は依然多く、そのようなウェブコンテンツは旧型のブラウザや携帯端末で明らかに問題が生じております。
本来ウェブコンテンツから見映えを分離するために勧告された筈のCSSも、物理マークアップを強化するアイテムとして受容れられている面もあります。
文書と見映えの分離と言う思想は突き詰めれば必ずストリクトなマークアップと言う考えに辿り着くものですが、一般人はその考えはまず受容れないでしょう。
このため、あらゆる環境で閲覧出来るようにするには、なるべくストリクトな思想を表に出さず、利用する側が最低限の修正で対応出来るようにするのが現実的な方法と考えられます。
そのような思いを込めて、出来得る限り問題のあるマークアップをしなくても良いようなテンプレートを考えた次第です。
