テンプレートの試作

はじめに

HTML5について

このテンプレートはHTML5を使って書かれている。しかし、HTML5は古いブラウザー(今回はSafari1.3、Firefox2.0、Camino1.6およびOpera11)では認識されない。IE8以下もHTML5を認識しないようだ。そのため、古いブラウザーにhtml5を認識させるhtml5.jsというJavaScriptが準備されている。これを使うと、Safari1.3とOpera11では最低限のレイアウトが適用された。ただし、これでもFirefox2.0とCaminoでは正しく表示されなかった。念のために導入しておくとよいかもしれない。

今回試作したテンプレート

固定長プルダウン

横幅固定長でプルダウンメニュー付き。すべてのブラウザーで使えるが、画面が小さいブラウザー(例えば携帯電話など)には対応しない。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
×

可変長プルダウン/jQuery

jQueryを使った二回層型メニュー。二回層目が出し入れされる。Safari1.3とOpera11ではメニューは正しく表示されるがjQueryは利かない。Firefox3とCamino1.6はメニューが正しく表示されないがjQueryは利く。

さらに、jQueryのプラグインを使ってサイドメニューを付けた。画面が狭くなるとコンテンツエリアに横スクロールバーが出てくるので、可変長型に変える必要があった。サイドメニューはjQueryの利かないブラウザーでは消えてくれず、ボトムに表示されるので、それなりにデザインしておく必要がある。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
××

可変長プルダウンなしFacebook風

難しいヘッダーを使わずタブレットなどで使いやすい大きめのリンクメニューを少しだけ加えたもの。CSS3を多用してシャドーやボタンなどのエフェクトに凝った。古いブラウザーはCSS3こそ使えないが、レイアウトがクラッシックなので特段のレイアウト崩れなどは見られない。Safari1.3だけはボタンが四角に変わらなかった。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
×

固定長プルダウンなし

折りたたみメニューを諦めて、ナビゲーションを二段組み(グランドとセクション)表示をさせたもの。GQのサイトで採用されていたものをヒントに作成した。

読み込まれるまでメニューの数がいくつあるか分からないので、読み込んでからJavaScriptでリストの幅を変えている。このため、古いブラウザーでは正しく表示されない。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
××

可変長プルダウン

横幅固定長でプルダウンメニュー付き。プルダウンにはJavascriptを使い、携帯用の折り畳みメニューにはmeanmenu.jsを使った。画面幅に合わせてCSSを変えているので、一定幅以下になると、二段表示を一段表示にする機能がついている。

古いブラウザーではレイアウトの崩れが見られた。Opera11ではプルダウンメニューが利かなかった。Safari1.3ではリストタグをinline-block表示させることができなかった。

古いブラウザーは画面幅に合わせてCSSを調整することができない。

meanmenu.js

携帯電話用のプルダウンメニューを自動で作ってくれるプラグインを使うとこのような仕上がりになる。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
××

可変長プルダウンなし

古いブラウザーでも問題なく表示されるようにメニューにリストタグを使わなかったもの。画面幅を変更すると一定幅以降で画面幅に合わせてカラム幅が変わる。

あいにく古いブラウザーはCSSの画面による切り替えができないので、あまり意味はないかもしれないが、古いブラウザーでも最低限度は意図したように動く。

携帯用折り畳みメニューはないが、スマホ用には使えそう。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末

タイルフォト1

jQueryのプラグインmasonry.jsを使って、画像をタイル上に並べたもの。今回はディレクトリの中にあるファイルをすべてPHP読み込んで自動で使うようにした。画面の横幅を変えると、その度に位置が自動的に修正される。写真ではなくdivタグを並べているので、文字にも使える。もちろん、古いブラウザーでは動かない。Opera11でも動かなかった。

メニューは一行にまとめた。h1タグをインライン表示するとこのように並べることができるらしい。リスト表示がinline(inline-blockではなく)なので、Safari1.3でもリストを使ったメニューが表示できた。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
×××

タイルフォト2

レイヤーとjQueryの勉強のために手作業で作った。9枚の写真を並べて背景で大きく表示するようにしたもの。DIESELのサイトを真似したのだが、思うようには作れなかった。古いブラウザーは最初から考慮に入れていない。携帯端末では読み込めるはず。

サンプルを見る

サファリ5.0Opera 11古いブラウザー携帯端末
××