5. Advanced
5-A.デザイン済HTMLサイト
２カラム・共通メニュー方式の万能テンプレート
サイト作成時に勉強も兼ねて簡単に使えるテンプレートがあった方がいい、と思ったので
ベーシックな２カラムのデザインのものを用意してみました。クリックしてサンプル表示
２カラムというのは、メニュー部分とコンテンツ部分が左右２つに分かれているタイプのレイアウトをいいます。 (これに対し、左、中央、右と３つに分かれているレイアウトは３カラムといいます)
このテンプレートの特徴は、メニューなどの共通部分にインラインフレームを使っていることです。
そうすることによって、サイトが大きくなり階層構造が複雑化してもメニュー類をHTML形式一本化することができ、 更新管理が非常にラクになります。
注１※インラインフレームを使わない方法としてはjavascritを用いる方法もありますが、 説明がややこしくなるので今回は実施していません。
注２※編集のしやすさを考えて、XHTMLではなくHTMLで記述してあります。ちゃんと文書型宣言を してあるので、表示に問題はありません。
コメント付きなので誰でも意味が分かる
このテンプレート最大のイイトコロは、ほとんどすべてのHTMLおよびCSSの記述に もれなくコメント(注釈)がつけてあることです。なので、ビギナーの方でも簡単にソースコードを読むことができます。
もちろんメモ帳でも読むことができますが、できればterapad等の「色分け表示」をしてくれる エディタで開いてみてください。こんな感じになってます↓
※灰色の部分はすべてコメントです!!!! 見れば絶対に意味がわかります。
後は内容を書き換えるだけ！
というわけで、この万能テンプレートはどなたでもダウンロードして いじくり倒していただいて結構です。HTML論理構造はかなりシンプルになっていますので、 配色や画像などを変更することによって、簡単にオリジナルデザインのウェブサイトが作れます。
階層構造も含めて複数のファイル・フォルダがありますので、zip形式で圧縮してあります。 ダウンロード後、ご自分のPCで解凍してお使いください。
万能テンプレートをダウンロード！ (わずか344KB)