制作者より
前回ブログっぽいのテンプレートを公開しましたが、そのタイプでより商用利用できそうなデザインにしてみました。
完全幅固定タイプです。全体的な横幅は800pxで、左右にそれぞれ10pxの余白を設けています。
プログレッシブ エンハンスメントという考え
ホームページは、どの環境のユーザでも不具合なく閲覧できる事が最も望ましい事であります。しかし、ブラウザによって対応しているCSSやJavaScriptが異なっており、全てのブラウザで全く同じ動作をするということが非常に困難です。そのため、ハックなどを使い、古い技術でしかホームページを作るしかできませんでした。
しかしそれでは、膨大な作業工数になってしまい、製作者は非常に負担が増えてしまいます。そこで、「プログレッシブ エンハンスメント」という考え方です。
「プログレッシブ エンハンスメント」とは、どのブラウザでも情報が欠けることなく参照できるが、最新のブラウザであればよりリッチに見ることが出来、古いブラウザでもデザイン的に劣っても情報が欠けることなく参照できるようにする、という考えです。
つまりは、これまでの「全てのブラウザで全く同じに見えないといけない」という考えではなく、「必要な情報が提供できれば、ブラウザごとに見た目が変わってもよいじゃない」という考えです。
このCSSテンプレートでも実験的に「プログレッシブ エンハンスメント」を取り入れてみました。まずは、上部のメニューはブラウザによってカーソルを合わせたときに少し見た目が変わります。そして、ページへ戻るリンクはJavaScriptを用い、スムースに上部へ戻るようになっています。
各種コンテンツについて
各種コンテンツの制作も賜っております。
画像について
写真は足成様[観覧車 (写真素材 足成)][青空 (写真素材 足成)]からお借りしました。
人物のベクター画像はBusiness People様からお借りしています。
JavaScriptについて
ページ上部への戻りがスムースに動くJavaScriptはKyosuke.jp（yuga.js）様からお借りしています。このライブラリはその他に、メニューのロールオーバーやタブ、テーブルやリストの偶数と奇数の行の色を変える、などWebページで非常によく使う手法が満載なので是非活用してみてください。
サンプルについて
以下、サンプルタグになります。
INFORMATION
- 2009-12-11
-
休業のお知らせ。誠に勝手ながら12月18日から1月4日まで長期休暇日とさせていただきます。ご了承ください。
- 2009-12-01
-
サイトを公開しました。
タグサンプル
h3タグ
h4タグ
h5タグ
h6タグ
強調（em）
より強い強調（strong）
追加（ins）
削除（del）
テキストアンカー
リスト
普通のリスト
- 普通のリスト1
- 普通のリスト2
- 普通のリスト3
番号付きリスト
- 番号付きリスト1
- 番号付きリスト2
- 番号付きリスト3
li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。
定義リスト
- 定義リスト1
- 定義した用語の説明
- 定義リスト2
- 定義した用語の説明
- 定義リスト3
- 定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。
