3カラムの商用可能なHPテンプレート集 +IFD+

[スポンサード リンク]

2カラムテンプレート NO.29

XHTML1.0+CSS zipファイル

モノトーンベース

1カラムのHPテンプレートで使っていたドクロとギターの画像をカスタマイズして3カラム化したものです。ロックな雰囲気が強く出ているテンプレートです。商用サイトでも使えるかな・・?サムネイル画像が2カラムのものと共有になっているためにサンプルサイトとサムネイル画像の雰囲気が違っていますがダウンロードファイルはサンプルHPと同じものです。タイトルを入力する部分が縦に小さいため、レイアウトが崩れやすい恐れがありますが、とりあえずIEやFirefoxの文字サイズの変更や拡大機能でも許容範囲に収まったことを確認しています。

3カラムのサンプル  3カラムのダウンロード

3カラムテンプレートNO.24〜NO.27

XHTML1.0+CSS zipファイル

暗色系ベース

天体観測風、時間の経過とともに何種類かの惑星やら隕石やらが流れてくるHPテンプレートです。まるで宇宙に浮かんでいるような感じですね。特に最後の茶系の隕石のような画像がかなりリアルに出来た気がします。

月のような惑星はもっと大胆に動かしたりしたかったのですが、画像が汚くなったりするので断念。もっとテクニックが上がれば出来るようになるのかもしれませんが。

前作と同じく2パターンずつの3カラムレイアウトを作成しました。

両サイドメニューのサンプル
 両サイドメニューのダウンロード

右サイドメニューのサンプル
 右サイドメニューのダウンロード

以下は、作成後日さらにFLASH部分をカスタマイズしまして、マウスオンで星がきらめくようにしたものです。ちょっとスムーズにいかなかった気がしますが大体綺麗に出来たので公開致します。FC2ブログのテンプレート素材に移植する予定です。

両サイドメニューのサンプル
 両サイドメニューのダウンロード

右サイドメニューのサンプル
 右サイドメニューのダウンロード

3カラムテンプレート NO.22〜NO.23

XHTML1.0+CSS zipファイル

暗色系ベース

昔作成した惑星の画像を取っておいたので、それを利用して作成したHPテンプレートです。初めてFLASHを実装したHPテンプレートでもあります。上部のFLASH部分が時間の経過とともに光ったり、星があらわれたり消えていったりと、激しい動きは無いものの綺麗な感じが出ています。これもサムネイル画像が2カラムと共有なので2カラムの画像が表示されていますが、リンク先は3カラムの内容になっています。通常の3カラムレイアウトと右サイドにメニューがあるタイプの2パターンあります。HPによって使い分け御願いします。右サイドメニューのテンプレートも商用サイトなどでは使いやすい場合があります。

両サイドメニューのサンプル
 両サイドメニューのダウンロード

右サイドメニューのサンプル
 右サイドメニューのダウンロード

3カラムテンプレートNO.20〜NO.21

XHTML1.0+CSS zipファイル

黒と赤ベース

黒と赤を使用した配色はかっこいいと思っていたのですが、何故かそういったHPテンプレートをあまり作っていなかったので作成したものです。クールに奥行き感のある画像と配色が相まってロック風な雰囲気を出しています。上部にメニューバーがあり、マウスオーバーの機能が付いています。クリアで半透明の感じが綺麗に表現できたと思います。画像が2カラムのものと共有のため2カラムのサムネイルとなっていますがサンプルやダウンロードリンク先は3カラムのHPテンプレートとなっています。

3カラムのサンプル
3カラムのダウンロード

こちらは赤色のものを青色に作り変えたものです。マウスオーバーの機能などはそのまま付いています。意外と音楽関係の商用サイトなどでも使えそうな気もします。カラー以外は赤のバージョンと同じなのでサンプルは省略させていただきます。

3カラムのダウンロード

3カラムテンプレート NO.16〜NO.19

XHTML1.0+CSS zipファイル

3カラム左・中央サイドコンテンツ、右サイドメニュー

商用のIT系などで使えそうな、地球のような球体の画像を使ったHPテンプレートです。左二つの部分がコンテンツ、右にメニューという構成になっています。上部にもメニューバーが付いています。シンプルで、これは結構カスタマイズに向いていると思います。勿論そのまま使っても結構違和感ありません。右側のメニュー部分はちょっと遊びを加えて、上の欄外にはみ出しています。バグやレイアウトミスではありません。笑

水色サンプル  水色ダウンロード

 

カラーバリエーションです。IT系などの商用サイトでの使用を考えて、全体的に落ち着いた雰囲気の、淡色や黒、それに紺などを使用しています。ビジネスカラー、って感じですね。

灰色サンプル  灰色ダウンロード
黒サンプル  黒ダウンロード
紺色サンプル  紺色ダウンロード

3カラムテンプレート NO.14

XHTML1.0+CSS zipファイル

黒と寒色ベース

黒と寒色を使用して構成した、オーロラのような綺麗な3カラムのHPテンプレートです。商用サイトなどでよくある、上部にマウスオーバーで画像が変化するメニューバーを実装しています。結構気に入っている作品でもあります。他のページでは3カラムのほかに2カラムなどもありますので興味がある方は利用してみてください。番号順だと52番くらいだったと思います。

サンプル

ダウンロード

こちらは白背景バージョンです。レイアウトは変わりません。文字が見やすいのでこちらの方が商用サイトなどには向いていると思います。見出しの部分はHTMLタグで増やしたり減らしたりすることができます。

サンプル ダウンロード

ホームページ素材の検索&サイト作成役立ちサイト

3カラムテンプレート NO.15

XHTML1.0+CSS zipファイル

暗色系ベース

惑星を大きく背景画像に設置した大胆な雰囲気のするHPテンプレートです。幻想的&SF的です。商用サイトにはすこし向かないかなと思います。左右のメニューに加えて右上にメニューバーがありますが、こちらはあまり文字数が多く入りません。TOPだとかMAILといったリンクを設置するのに向いています。

3カラムサンプル  3カラムダウンロード

デザインテンプレートNO.28

XHTML1.0+CSS zipファイル

茶と白ベース

眠っている猫の画像を使用したテンプレートです。文字が表示される箇所はコルクボードの背景に、紙が貼り付けてあるような作りになっています。FLASH付き。猫クリックしすぎて眠りを妨げると少し怒ります。なお、スクロールバーがたくさん表示されるような作りになっていますがフレームタグは使用せずに、CSSで実装していますので、検索エンジンがインデックス作業に来たときなどにも問題ないと思います。また、HTMLファイルも一つで済みます。よーくみると所々イラストに粗がありますがご了承を(汗

両サイドメニューのサンプル
両サイドメニューのダウンロード

3カラムテンプレート NO.9〜NO.13

 

 

XHTML1.0+CSS zipファイル

左サイドメニュー

3カラムとしても2カラムとしても利用できるHPテンプレートです。サンプルのように3カラムと2カラムを混合させたものとして使うことも出来ます。メニューの部分なども含めて全体的にグラデーションで構成されています。メニューはボタン形式のようなタイプで構成されています。必要に応じて数を増やしたり減らしたりしてください。5色展開ですので一番気に入ったカラーのものをりようすることができます。

青サンプル 赤サンプル 黒サンプル
緑サンプル 水色サンプル

青ダウンロード 赤ダウンロード
黒ダウンロード 緑ダウンロード
水色ダウンロード

3カラムテンプレートNO.8

HTML4.01+CSS zipファイル
黒と寒色ベース 両サイドメニュー
サイバーの雰囲気の奥行きのあるテンプレートです。全体的に青く輝いている感じです。微妙に枠線も光っています。こちらも前作同様上部に海外の商用サイトで見かける分割コンテンツがあります。文面などは適宜変更したりしてHPの内容に合わせてください。

サンプル  ダウンロード

3カラムテンプレートNO.7

HTML4.01+CSS zipファイル
赤と黒ベース 両サイドメニュー
ロック調のバナー画像を使ったテンプレートです。上部に2つに分かれたコンテンツ部分があります。不要であれば適宜削除して利用御願いします。リンク色なども雰囲気に合わせて赤系統を使用しています。

サンプル  ダウンロード

3カラムテンプレート NO.6

HTML4.01+CSS zipファイル
白と青ベース 両サイドメニュー
クリアな状態のトランプの画像を使用した変わった雰囲気の綺麗なHPテンプレートです。ハートやダイヤ、クラブやスペードなどの画像がトップバナー以外にもメインコンテンツの上やメニューの下などに配置してあります。リンクの色や、メニュータイトル部分の枠線の色なども合わせて統一してあります。

サンプル  ダウンロード

3カラムテンプレートNO.5

HTML4.01+CSS zipファイル
黒と寒色ベース 両サイドメニュー
主張の強いバナー画像をしようした寒色系を使用したHPテンプレートです。同じような雰囲気の丸い画像を使用してアクセントとしています。ベースの部分はNO1の3カラムテンプレートと同じになっています。カスタマイズにはあまり向いていないと思います。

サンプル  ダウンロード

3カラムテンプレートNO4

HTML4.01+CSS zipファイル
黒と青ベース 両サイドメニュー
こちらもグラデーションを使用したテンプレートです。トップバナー部分のグラデーションのかかったドット画像がクールでスタイリッシュな雰囲気です。音楽関係のHPなどにも結構応用が利くと思います。メニュータイトル部分にも画像を使用してあります。

サンプル  ダウンロード

3カラムテンプレートNO3

HTML4.01+CSS zipファイル
クールな雰囲気の画像を使用した3カラムのHPテンプレートです。左から右へ、青から黒へとグラデーションがかかっています。文字が見えなくならないように配慮しています。奥行きの感じられる涼しげなトップバナー画像を使用しています。

サンプル  ダウンロード

3カラムテンプレート NO2

HTML4.01+CSS zipファイル
白と赤ベース 両サイドメニュー
淡い雰囲気の幻想的な雰囲気のテンプレートです。淡色の中に赤があってアクセントが効いていると思います。ベースの3カラムをカスタマイズしたものです。

サンプル  ダウンロード

3カラムテンプレートNO.1

HTML4.01+CSS zipファイル
白ベース 両サイドメニュー
基本的な3カラムテンプレートです。カスタマイズを前提にHPテンプレートを作成したい方におすすめです。通販サイトとかにしたいときでもタイトルバナーを入れれば結構商用サイトっぽい雰囲気が出るかと。メニュー部分は文字位置が中央揃えになっています。

サンプル  ダウンロード

ホームページ素材集のIFDのトップページへ