画像の上にカーソルを載せると、サンプルを表示するか、ダウンロードするかが選択できます。ただし、このページはIE6以前には対応しておりません。最新のブラウザで閲覧してください。
画像の上にカーソルを載せると、サンプルを表示するか、ダウンロードするかが選択できます。ただし、このページはIE6以前には対応しておりません。最新のブラウザで閲覧してください。
画像の上にカーソルを載せると、サンプルを表示するか、ダウンロードするかが選択できます。ただし、このページはIE6以前には対応しておりません。最新のブラウザで閲覧してください。
画像の上にカーソルを載せると、サンプルを表示するか、ダウンロードするかが選択できます。ただし、このページはIE6以前には対応しておりません。最新のブラウザで閲覧してください。
画像の上にカーソルを載せると、サンプルを表示するか、ダウンロードするかが選択できます。ただし、このページはIE6以前には対応しておりません。最新のブラウザで閲覧してください。
ご利用は無料、著作権表示もなし、報告もなしです。詳細は利用規約をお読みください。
ホームページ制作が初心者の方にもわかりやすい簡単なソースコードです。
XHTMLとCSSで構成されているため、デザインの柔軟性に優れ、カスタマイズやメンテナンスも容易にできます。
DLする際は利用規約をよくお読みください。
| No.1 | |
|---|---|
 |
|
| No.2 | |
|---|---|
 |
|
| No.3 | |
|---|---|
 |
|
| No.4 | |
|---|---|
 |
|
| No.5 | |
|---|---|
 |
|
| No.6 | |
|---|---|
 |
|
| No.7 | |
|---|---|
 |
|
| No.8 | |
|---|---|
 |
|
| No.9 | |
|---|---|
 |
|
| No.10 | |
|---|---|
 |
|
| No.11 | |
|---|---|
 |
|
| No.12 | |
|---|---|
 |
|
| No.13 | |
|---|---|
 |
|
| No.14 3番人気 | |
|---|---|
 |
|
| No.15 | |
|---|---|
 |
|
| No.16 | |
|---|---|
 |
|
| No.17 | |
|---|---|
 |
|
| No.18 | |
|---|---|
 |
|
| No.19 1番人気 | |
|---|---|
 |
|
| No.20 | |
|---|---|
 |
|
| No.21 | |
|---|---|
 |
|
| No.22 | |
|---|---|
 |
|
| No.23 2番人気 | |
|---|---|
 |
|
ダウンロード数のランキングは、ここ最近一ヶ月のデータを集計しています。
ご希望のCSSデザインテンプレートは見つかりましたか？
もし見つからなかったら、こちらもご参考ください。
世の中にはとても嬉しいことに、商用サイトでも無料で利用できる写真配布サイトがあります。
Webサイトにはアイキャッチ画像などの写真が非常に重要ですが、当サイトのCSSデザインテンプレートに、その写真配布サイトの画像を組み込んでしまうと、再配布という形になり、利用規約に抵触してしまうため、そのようなことができません。
ただし、個別に写真配布サイトから写真をダウンロードしていだければ、当サイトのCSSテンプレートに写真を組み込むことは可能です。
お勧めの写真・イラスト配布サイトをご紹介します。ご利用の際は、リンク先の利用規約をお読みの上、必ず規約をお守りください。
ご利用は無料、著作権表示もなし、報告もなしです。詳細は利用規約をお読みください。
ホームページ制作が初心者の方にもわかりやすい簡単なソースコードです。
XHTMLとCSSで構成されているため、デザインの柔軟性に優れ、カスタマイズやメンテナンスも容易にできます。
DLする際は利用規約をよくお読みください。
 |
No.1 |
|---|---|
| 2006/11/11 公開 | |
| イラスト：ふわふわ。り | |
| Windows IE6 / Firefox2 | |
| サンプル | |
| ダウンロード |
 |
No.2 |
|---|---|
| 2006/11/11 公開 | |
| イラスト：ふわふわ。り | |
| Windows IE6 / Firefox2 | |
| サンプル | |
| ダウンロード |
 |
No.3 |
|---|---|
| 2007/3/25 公開 | |
| イラスト：CoolWebWindow | |
| Windows IE6 / Firefox2 / Opera9.1 / NN7.1 | |
| サンプル | |
| ダウンロード |
 |
No.4 |
|---|---|
| 2007/11/6 公開 | |
| イラスト：CoolWebWindow | |
| Windows IE6 / Firefox2.0.0.9 / Opera9.24 / NN7.1 | |
| サンプル | |
| ダウンロード |
ご希望のCSSデザインテンプレートは見つかりましたか？
もし見つからなかったら、こちらもご参考ください。
世の中にはとても嬉しいことに、商用サイトでも無料で利用できる写真配布サイトがあります。
Webサイトにはアイキャッチ画像などの写真が非常に重要ですが、当サイトのCSSデザインテンプレートに、その写真配布サイトの画像を組み込んでしまうと、再配布という形になり、利用規約に抵触してしまうため、そのようなことができません。
ただし、個別に写真配布サイトから写真をダウンロードしていだければ、当サイトのCSSテンプレートに写真を組み込むことは可能です。
お勧めの写真・イラスト配布サイトをご紹介します。ご利用の際は、リンク先の利用規約をお読みの上、必ず規約をお守りください。
ご利用の前に、利用規約をお読みください。
| No.001 | |
|---|---|
 |
|
| No.002 | |
|---|---|
 |
|
| No.003 | |
|---|---|
 |
|
| No.004 | |
|---|---|
 |
|
| No.005 | |
|---|---|
 |
|
ご希望のCSSデザインテンプレートは見つかりましたか？
もし見つからなかったら、こちらもご参考ください。
※1：ここで言うライセンスフリーとは、シンプルCSSテンプレートを著作権者の使用許諾を得ることなく自由な利用（再配布等含む）ができることであって、著作権そのものを放棄・譲渡するものではありません。ただし、CSSテンプレートを特定のWebページにカスタマイズ（編集）した場合は、それは二次的著作物との扱いになり、カスタマイズ（編集）されたWebページは、編集者に著作権があるものとします。
※2：別カテゴリの「個人向けCSSデザインテンプレート」および「商用向けCSSデザインテンプレート」は再配布はできません。
（策定：2011/12/27）
（最終改定：2011/12/30）
世の中にはとても嬉しいことに、商用サイトでも無料で利用できる写真配布サイトがあります。
Webサイトにはアイキャッチ画像などの写真が非常に重要ですが、当サイトのCSSデザインテンプレートに、その写真配布サイトの画像を組み込んでしまうと、再配布という形になり、利用規約に抵触してしまうため、そのようなことができません。
ただし、個別に写真配布サイトから写真をダウンロードしていだければ、当サイトのCSSテンプレートに写真を組み込むことは可能です。
お勧めの写真・イラスト配布サイトをご紹介します。ご利用の際は、リンク先の利用規約をお読みの上、必ず規約をお守りください。
実行環境は、
OS：Windows7
ブラウザ：Firefox9.0.1
エディタ：EmEditor
です。
商用サイト向けCSSテンプレートのページを開いて、「ダウンロード」のテキストをクリックします。
zip形式に圧縮されたファイルのダウンロード先が聞かれますので、「ファイルを保存する」を選択し、「OK」をクリックします。場合によっては、その次にダウンロード先を選択します。とりあえずはデスクトップなどわかりやすいところに保存しておいたほうが良いでしょう。
ファイルを解凍します。解凍するにはソフトが必要です。Lhaplusがお勧めです。ダウンロードしたファイルを解凍ソフトにドラッグアンドドロップすると解凍されます。
ちなみに、Windows7であればダブルクリックするだけで解凍されたファイルが生成され、解凍ソフトは不要です。
元の圧縮されたzipファイルは今後不要になりますので、ゴミ箱に入れておいてください。
まずは解凍されたファイルのindex.htmlファイルをブラウザで開いてみましょう。解凍されたフォルダを見てみると、
というようになっていますので、「src」のフォルダをクリックします。
というようになっていますので、「index.html」を右クリックして「プログラム」＞「Internet Explorer」をクリックします。別にInternet Explorerでなくても構いません。私はFirefoxというブラウザを使用しています。
ちなみに、各フォルダ・ファイルですが、
今度はindex.htmlファイルをエディタで開いて編集してみましょう。
お手持ちのHTMLエディタからindex.htmlを開いてください。その際、CSSのテンプレートは「UTF-8」という文字コードで保存されているので、文字化けしてしまう場合は、エディタの文字コードをUTF-8にしてからindex.htmlファイルを開いてください。
まずは、headタグ内を変更していきます。
上記の画像の、赤丸で数字が振ってあるところを編集します。
①はサイトの説明です。検索エンジンでも表示されるところであり、SEOでも重要な部分なので十分に考慮して内容を考えましょう。
②はサイトのキーワードです。サイトに関連するキーワードを入れます。
③はサイトのタイトルです。ブラウザのタブのところに表示されるだけでなく、検索エンジンでも表示されるところですので、サイト名だけでなくサイトのキーワードも絡めておくと効果的です。
編集すると以下のようになります。
次は、本文中のヘッダー部分を修正します。このCSSのテンプレートでは、サイト名とサイトの説明文を記述する箇所があります。
修正すると以下のようになります。
メニューを編集してみます。index.htmlの24行目～33行目がメニュー部分になります。
修正すると以下のようになります。
ここで一旦index.htmlファイルを保存して、ブラウザを見てみると以下のように変更されているのがわかります。
このようにして、テンプレートを編集していってください。
編集をしていて、よくわからなことがありましたら、お問い合わせいただければアドバイスできるかと思います。お問い合わせについては以下のページをご参考ください。
今回はここまでですが、時間があるときに公開手順などまでご説明できればと思います。
]]>何かわからないことがありましたら、遠慮なくお問い合わせください。
出来る限りHTMLやCSSをご理解いただきたいので、質問内容によってはすぐに解答を出さず、アドバイスに留めることもあります。ご了承ください。
こちらでHTMLやCSSのソースコードチェックを全面で行ったり、ページを作成することはありません。その場合、有償になります。
基本的に、サポート範囲に関してはあまり気にせず、わからないことがありましたら遠慮なくお問い合わせいただければと思います。
レイアウト崩れなどを起こしてしまった場合にお問い合わせされる際には、その前にソースコードのチェックを行なってみてください。大抵、HTMLやCSSの記述ミスによるものが多く見受けられます。
またこちらの記事もご参考ください。
ホームページを編集していて、レイアウト崩れが起こったときの対処法 « 7日間でできるCSSベースのホームページの作り方
ソースコードチェッカーの使い方がわからない場合はお問い合わせください。
お手持ちのメールツールにて以下のメールアドレスにお問い合わせください。
info@coolwebwindow.com
別に何でも構いませんが、テンプレートの質問であることがわかる件名にしてください。無題の場合などスパムメールと判断して削除する場合がありますので。
ハンドルネーム（ネット上で用いる別名）で構いませんので、名前を教えてください。特に本名を明かす必要はありません。
できるだけ問題点を｢客観的｣に書いてください。｢○○をしたら△△になった｣など、問題が起こった手順と問題内容を詳しくお聞かせください。
レイアウト崩れを起こしたり、画像が表示されないといった問題を抱えている場合は、必ず、編集中のファイル全てを、圧縮してメールに添付して送ってください。
圧縮するソフトをお持ちでない方は、LhaplusをPCにインストールしてください。
尚、添付できるメールの容量はメール本文を含めて10MBになります。それ以上の容量になる場合は、ファイル転送サービス（例えば、データ便）をご利用ください。どのファイル転送サービスをご利用されても構いません。ファイル転送サービスでファイルをお送りになる場合は、別にメールにてその旨をお知らせいただければ幸いです。
また、以下のサイトもご参考ください。当サイトのCSSに関するblogです。
おかげさまで、お礼のメールを頂く事も多々あります。しかし、サポートメールが多く、緊急を要しないメールには返信を差し上げておりません。頂いたメールは大切に読んでいますし、すごくモチベーションが上がります。返信できないことは心苦しいですが、今後とも、CoolWebWindowを宜しくおねがいいたします。
]]>想像していた以上に、初心者の方（ホームページを作るのが初めての方）にご利用いただいていることを知りました。
よく質問を頂く内容と対策を一覧にしました。一読してくださると助かりますが、どんどん質問受付中なので、わからないことがありましたら、遠慮なくご質問くださいね。
ホームページビルダーの初期設定では、DOCTYPEを勝手に書き換えてしまうようです。 DOCTYPE宣言（HTMLファイルの1行目）を以下のように書き換えてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
また、ホームページビルダーの設定を変更してください。 上部メニューの｢ツール｣＞｢オプション｣＞｢ファイル｣を開き、｢DOCTYPEを出力する｣のチェックマークを外します。
※当方、ホームページビルダーを持っていないので、ホームページビルダーを使用しての編集方法はサポート外になります。ご了承ください。
お使いのエディタは何ですか？当サイトのテンプレートのHTMLファイルおよびCSSファイルの文字エンコーディングはUTF-8（BOMなし）です。お使いのエディタによっては｢自動で文字コードを認識してくれない｣あるいは、｢UTF-8が使用できない｣場合があります。
あと、Windows付属のメモ帳は使用しないでください。UTF-8は使用できるのですが、UTF-8（BOMあり）にしか保存できないので。
パスミスで表示されないことが多いようです。CSSで画像を指定する場合、CSSファイルからのパスで記述してください。CSSファイルをCSS専用のフォルダに入れたときなど、記述の書き換えが必要ですので注意です。
｢テンプレートに関するお問い合わせについて｣をよくお読みいただいて、ご質問ください。
]]>当サイトのテンプレートは、個人サイト向けテンプレートと商用/ビジネスサイト向けテンプレート、シンプルCSSテンプレートの3種類があり、それぞれご利用範囲が異なります。
シンプルCSSテンプレートの利用規約はこちらをご覧ください。
配布しているCSSテンプレートそのものの著作権は放棄しておりません。
ただし、CSSテンプレートを特定のWebページにカスタマイズ（編集）した場合は、それは二次的著作物との扱いになり、カスタマイズ（編集）されたWebページは、編集者に著作権があるものとします。
当サイトの著作権表示をテンプレートの見えるところやあるいはソースコードに記述する必要は一切ありません。
個人サイト向けのCSSテンプレートでは、他サイト様の素材をお借りしているものもあります。他サイト様のリンクおよび表示がすでにCSSテンプレートに埋め込まれているものは削除しないでください。
当サイトのリンクは任意（自由）としております。しかしながらしていただくと、がぜん管理人の励みになります。していただける方は以下の内容でお願いいたします。
サイト名：CoolWebWindow
URL：http://www.coolwebwindow.com
バナーを使ってくださる方は、別途用意しておりますのでそちらを必ずDLしてお使いください。直リンクは禁止しております。
個人サイト向けおよび商用サイト向けテンプレートはすべて無料でご利用いただけます。
個別カスタマイズや特別に素材など提供してほしい場合は有償にて対応いたします。その際はご連絡ください。
ソースのカスタマイズ、画像の再加工はご自由になさってください。
ただし、お借りした素材等一部できない場合があります。
その場合は各デザインテンプレートのサンプルに明記してあります。
ソースのおよび画像の再配布は禁止です。
ここでいう再配布とは、自分が制作したものと偽ってソースコードそのままを第3者に無償有償問わず提供することです。
例えば、当サイトで配布しているCSSテンプレートを、当サイト以外でダウンロードさせるようなことは禁止しています。
ただし、シンプルCSSテンプレートは、再配布が可能です。
Webデザイナーさんなどが第3者のサイトを制作するのにはお使いいただけます。詳しくは、｢当テンプレートを利用してWeb制作業をされる方へ｣をお読みください。
DLに関して報告は一切不要です。
当サイトのテンプレートを利用したことによりいかなる損害があったとしても、当サイトは全ての事項に対し責任を取りません。
ただし、当サイトに不手際がある場合（例えばコーディングのミス等）は対応いたします。
デザインテンプレートは3種類あります。
お好きなほうをお使いください。
→個人サイト向けテンプレートはこちらから
→商用サイト向けテンプレートはこちらから
→シンプルCSSテンプレートはこちらから
（策定：2009/5/20）
（最終改定：2011/12/27）
テンプレート制作時の各ブラウザの最新バージョンで確認しています。テンプレートごとに異なるので、詳細は配布ページをご覧になってください。
IE8およびIE7の動作確認は、IETester Browser Sandboxというサービスを利用しております。（スタンドアローン版になりますので、実環境とは若干異なる場合があるかもしれません。）
現在、IE9の動作確認は行っておりません。（2011年冬くらいに新しいPC買おうとは思っているのですが・・・。）
FirefoxとGoogle Chromeは2011年現在、メジャーバージョンのリリースの頻度が激しいので、とりあえず、CSSテンプレートを作成した時点での最新バージョンで動作確認を行っております。
MacOS Xでの動作確認は現在しておりませんのでご了承ください。
当サイトで作成しているHTMLのDTD※（Document Type Definition:文書型定義）のバージョンはXHTML1.0 Transitionalです。
※DTDが違うと、使用できるHTMLタグが異なったり、同じソースコードを書いても表示の仕方（見た目）が異なります。詳しくはインターネットで調べてください。
本来、XHTMLではXML宣言を文書の先頭（DOCTYPE宣言の前）に記述しなければなりません。
しかし、IE6ではXML宣言を理解できず、DOCTYPE宣言の前に不正なものがあると判断し、互換モードで表示されてしまうという欠点があります。
それが、デザインくずれが発生してしまう要因となるのです。
よって、web標準に準拠するため、あえてXML宣言を記述していません。
文字エンコーディングがUTF-8の場合、XML宣言を省略できることが仕様で定義されていますので、文字エンコーディングをUTF-8にしています。
デザインテンプレートを配布する際には、W3CのHTML ValidatorおよびCSS Validatorにて、コードのチェックを行っています。
Another HTML-lint gatewayでもたまにチェックしていますが、満点になることは狙っていません。
CSSハックなどを使用している場合があるので、CSSがVaildではないテンプレートもあります。
HTMLファイルおよびCSSファイルは｢Shift-JIS｣あるいは「UTF-8」で保存しています。他の文字エンコーディングを使用される方は、適宜環境にあった文字エンコードでファイルを再保存してください。
当サイトのテンプレートはzip形式あるいはlzh形式で圧縮しています。
解凍するには専用の解凍ツールが必要となります。
Lhaplusは無料で配布されているものですので、お持ちでない方はインストールしてみてください。
少しでも疑問を持たれたら必ず、｢info＠coolwebwindow.com｣までお問い合わせください。
2010/7/17 策定
]]>1.2
2011年07月18日
XHTML＋CSS
XHTMLはDOCTYPE宣言なしです。
文字エンコードは、UTF-8です。
個人でも商用でも無料でご自由にお使いください。
ソースコード等に当サイトの著作権表示をする必要はありません。
ただし、同梱しているjQueryそのものはMIT、BSDおよびGPLライセンスなので、利用規約を守ってお使いください。
当サイトのテンプレートを利用したことによりいかなる損害があったとしても、当サイトは全ての事項に対し責任を取りません。
ただし、当サイトに不手際がある場合（例えばコーディングのミス等）は対応いたします。
src
│
│─index.html
│
└─common
│
├─css
│ common.css
│ reset.css
│
├─img
│ │ menu1.gif
│ │ menu1_on.gif
│ │ menu2.gif
│ │ menu2_on.gif
│ │ menu3.gif
│ │ menu3_on.gif
│ │ menu4.gif
│ │ menu4_on.gif
│ │ menu5.gif
│ │ menu5_on.gif
│ │ menu6.gif
│ │ menu6_on.gif
│ │
│ └─images
│
└─js
common.js
ga.js
jquery.js
基本は、ヘッダー、コンテンツ、フッターから成り立ちますが、グローバルメニューやトピックパス（パンくずリスト）、ページトップへの戻りをこれらのどこに入れるかは、デザインによって異なってきます。
とりあえずは、一応今回これらは全て独立したワイヤーフレームにしています。
基本的に、Webサイト全体で使うものに関しては、｢common｣という名前のディレクトリに入れて管理しています。
CSSは共通のものに関しては、common.cssで指定しています。
CSSのリセット用は、YahooのYUI 2: Reset CSSをreset.cssで記述しています。
JavaScriptにはjQueryを利用しています。
JavaScriptはノンプログラマーには敷居が高いのですが、jQueryであれば、CSSがわかる方ならすんなり理解できますし、ライブラリ（プラグイン）もかなり豊富で、自分でコードをほとんど書くことなく、リッチな動きを実装できます。
デフォルトの画像とロールオーバー用の画像を用意してください。
ロールオーバー用の画像の名前は、デフォルトの画像に｢_on｣をつけたものにしてください。
（例）
デフォルトの画像名：image.gif
ロールオーバー用の画像：image_on.gif
メニュー以外にもバナーなどの画像もロールオーバーにできます。
例えば、ロールオーバーしたい画像に、｢.rollover｣というクラスをつけます。
<img src="common/images/img.gif" alt="画像" class="rollover" />common/js/common.jsファイルの46行目を以下のように書き換えてください。
// 画像をロールオーバーする箇所を指定
$(function() {
$('#menu img').rollover();
$('form input:image').rollover();
$('.rollover').rollover();
});
ページのトップへ戻るリンク先を、とすれば、スルスルっとスクロールします。
ページ内リンクも同様の動きをします。
特に変更する箇所はありません。
もし、WebサイトをGoogle Analyticsで解析する場合、common/js/ga.jsファイルの7行目の｢UA-XXXXX-X｣をご自身のウェブ プロパティ IDに上書きしてください。