- テキスト中心用103式雛形（2004.9.10修正）
- 写真中心用202式雛形（2004.9.7修正）
- テキスト中心用102式雛形（2004.9.10修正）
- テキスト中心用101式雛形（2004.9.10修正）
- テキスト中心用211式雛形（2003.10.18）
- 写真中心用201式雛形
- 利用規程
- セレクタについて
- 使い回しがしやすいよう、サンプルのセレクタはclassを基本にしています。文書の構造に合わせて、適宜idに置き換えると良いでしょう。
このページではnobuhito.comよりリンクを作成しているコンテンツで使用しているページデザインのサンプルを公開しています。説明をしやすいように色の設定などは変えていますので、実際に使用しているものとはいくらか異なっています。
使用にあたってHTMLの基礎的な知識は必要になります。「人柱」（初心者）の評価では理解できるまでに半日程度かかるとのことです。
どのサンプルもValidなHTML、CSSにはなっています。できあがったらThe W3C MarkUp Validation Serviceでチェックするとよいでしょう。サンプルなので空にしてあるリンクを指定してやれば、Another HTML-lintでもそれなりの点数を取ることができます。
参考書、ツール
- サイト制作の参考書
- Web配色事典 Webセーフカラー編
- Web配色事典―フルカラー編
- これからはじめる HTML＆スタイルシートの本
- Web標準XHTML+CSSデザイン
- Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻
- ドメイン管理とサーバー
- 弊サイトで利用している ： VALUE DOMAIN
テキスト中心用103式雛形
- 103式雛形の特徴
- 103式雛形の問題点
- 103式雛形のダウンロード
- 103式雛形（ナス）をとりあえず見てみる
- 103式雛形（ピーマン）をとりあえず見てみる
- 103式雛形（トマト）をとりあえず見てみる
- 103式雛形（グレイ）をとりあえず見てみる
特徴
- 青系（ナス）、緑系（ピーマン）、赤系（トマト）、グレイの4色用意するという殊勝な心がけ。
- クリックや選択のしやすい右寄せナビゲーション。
- いちいち表示されるナビゲーションにより、訪問者が迷いにくい。
- 論文など長い文章を一覧させる用途に向いている。
- 外部スタイルシートを利用した横着設計でサイト管理を省力化。
- ページレイアウトにテーブルを使用していない。
- ネットスケープの古いブラウザでもそれなりにレイアウトが崩れない。
- 文字は大きめ、リンクは青字に下線。来てしまった高齢社会に対応したわかりやすい作り。
- 一応、HTML4.01 Strict相当である。
- しっかり作ればWAIのAA水準を確保できる。
問題点
- いちいち表示されるナビゲーションの分、ファイルサイズが大きくなる。
- Windows® 以外のOSでの動作検証は不十分である。
- 素っ気ない。
ほかにもいろいろあるだろうが...。
ダウンロード
- 103blue.zip（zip形式書庫）
- 103green.zip（zip形式書庫）
- 103red.zip（zip形式書庫）
- 103gray.zip（zip形式書庫）
- 窓の杜ライブラリ（解凍専用ソフト）
ファイルを解凍し「index.html」を参照のこと。
写真中心用202式雛形
103式雛形と組み合わせ、写真を放り込んでおくページに使うといいかもしれないし、良くないかもしれない。何色か用意しようと思ったのですが、億劫なのでやめました。あとはセルフサービスでどうぞ。
特徴
- 写真に説明やコメントを付けるコンテンツに向く。
- 「写真中心用」としてはいるが、テキストもそれなりに収容できる。
- 外部スタイルシートを利用した横着設計でサイト管理を省力化。
- ページレイアウトにテーブルを使用していない。
- ネットスケープの古いブラウザでもそれなりにレイアウトが崩れない。
問題点
- Windows® 以外のOSでの動作検証は不十分である。
- 素っ気ない。
- 見出しの装飾がいい加減ですな。
ほかにもいろいろあるだろうが...。
ダウンロード
- 202gray.zip（zip形式書庫）
- 窓の杜ライブラリ（解凍専用ソフト）
ファイルを解凍し「index.html」を参照のこと。
テキスト中心用102式雛形
特徴
- クリックや選択のしやすい右寄せナビゲーション。
- いちいち表示されるナビゲーションにより、訪問者が迷いにくい。
- ナビゲーション部分を極力上部に配置。
- 論文など長い文章を一覧させる用途に向いている。
- 外部スタイルシートを利用した横着設計でサイト管理を省力化。
- ページレイアウトにテーブルを使用していない。
- ネットスケープの古いブラウザでもそれなりにレイアウトが崩れない。
- 文字は大きめ、リンクは青字に下線。来てしまった高齢社会に対応したわかりやすい作り。
- 一応、HTML4.01 Strict相当である。
- しっかり作ればWAIのAA水準を確保できる。
問題点
- いちいち表示されるナビゲーションの分、ファイルサイズが大きくなる。
- Windows® 以外のOSでの動作検証は不十分である。
- 素っ気ない。
ほかにもいろいろあるだろうが...。
ダウンロード
ファイルを解凍し「index.html」を参照のこと。
テキスト中心用101式雛形
103式雛形とクラス名を揃えました。
特徴
- クリックや選択のしやすい右寄せナビゲーション。
- いちいち表示されるナビゲーションにより、訪問者が迷いにくい。
- 論文など長い文章を一覧させる用途に向いている。
- 外部スタイルシートを利用した横着設計でサイト管理を省力化。
- ページレイアウトにテーブルを使用していない。
- ネットスケープの古いブラウザでもそれなりにレイアウトが崩れない。
- 文字は大きめ、リンクは青字に下線。来てしまった高齢社会に対応したわかりやすい作り。
問題点
- いちいち表示されるナビゲーションの分、ファイルサイズが大きくなる。
- ページの幅が固定されている。このことを極度に嫌う向きも中にはいる。
- Microsoft® Internet Explorer 5.xでは、本文記載部分とナビゲーション部分の間に妙な隙間ができるが気にするな。どうしても嫌なら背景色を同色にするとか、いろいろ方法はあるが各自研究して欲しい。
- Windows® 以外のOSでの動作検証は不十分である。
- HTML4.01準拠を意識しているが、必ずしも仕様書どおりではない。
- 素っ気ない。
ほかにもいろいろあるだろうが...。
ダウンロード
ファイルを解凍し「index.html」を参照のこと。
テキスト中心用211式雛形
特徴
- テキストはそれなりに収容できるが、ナビゲーション部分は小さいので、1万字程度までが適当か。
- 文字は大きめ、リンクは青字に下線。来てしまった高齢社会に対応したわかりやすい作り。
- 外部スタイルシートを利用した横着設計でサイト管理を省力化。
- ページレイアウトにテーブルを使用していない。
- ネットスケープの古いブラウザでもそれなりにレイアウトが崩れない。
- 一応、HTML4.01 Strict相当である。
問題点
- コンテンツ部分の幅が固定されている。このことを極度に嫌う向きも中にはいる。
- Windows® 以外のOSでの動作検証は不十分である。
- 素っ気ない。
ほかにもいろいろあるだろうが...。
ダウンロード
ファイルを解凍し「index.html」を参照のこと。
写真中心用201式雛形
特徴
- 写真に説明やコメントを付けるコンテンツに向く。
- 「写真中心用」としてはいるが、テキストもそれなりに収容できる。
- 外部スタイルシートを利用した横着設計でサイト管理を省力化。
- ページレイアウトにテーブルを使用していない。
- ネットスケープの古いブラウザでもそれなりにレイアウトが崩れない。
問題点
- コンテンツ部分の幅が固定されている。このことを極度に嫌う向きも中にはいる。
- フォント・サイズの初期値がやや小さめ（段落は90%）。
- Windows® 以外のOSでの動作検証は不十分である。
- HTML4.01準拠を意識しているが、必ずしも仕様書どおりではない。
- 見出しは<h1>～<h3>までしか定義していないのであしからず。
- 素っ気ない。
ほかにもいろいろあるだろうが...。
ダウンロード
ファイルを解凍し「index.html」を参照のこと。
利用規程
- 旅行記など業務用途ではないWebページの素材としてならば、無償でお使いいただけます。このサイトの制作者もさまざまなWWWリソースを参考にさせていただいており、それに対する互酬的な関係に基づくものです。
- 個人的な範囲での利用も自由です。
- 改変は自由です。
- サポートはしません。
- これらのファイルを利用したことにより生じたいかなる損害についても、作者は一切の責任を負いません。
- 著作権は作者が有しています、と一応書いておきますが、作成されたページに表記したりする必要はありません。
- ただ、閲覧者に「パクり」の疑いをかけられて嫌な思いをしたくない場合、ファイルの出所をコメントで書いておくと良いかも知れません。
ぼそぼそ...
お配りするようなものでもないんですが、コンテンツ用に公開しているファイルをブラウザから保存して「改造」される方がときどきいらっしゃいます。
参考にしていただくのは嬉しいのですが、ファイルのパスなどを書き換えきっていない方がこれまで何人かいました。よそ様のサイトでこのサイトの広告が表示されてしまったりするとまずいことになるので、こうして配布してるわけです。
制作やカスタマイズも希望があれば応じていますが、さすがにこういうのはタダではできませんので、メールで相談してください。
