テンプレどん

テンプレートについて

スマホ対応・日本語にも合わせやすいHTMLテンプレートです。骨組みとして使用するためシンプルなものが多いですが、ファイルが軽量なのでそのまま使用したり、カスタマイズ・デザインを追加していくには最適です。

数ページほどの小規模なWEBサイト制作を想定しています。ご自由にダウンロードしてお使いください。

2024.10.23 テンプレートのバグ修正をしました。2022.8.17：色変更にCSS変数を設定しました。style.css上部rootにまとめているので楽に色変更ができます。

テンプレート

１ページのシンプルなテンプレートです。ランディングページなどの制作にお使いください。

デモ　ダウンロード

シンプルな骨組みのみのテンプレートです。コーポレートやお店のサイトなどに向いています。

デモ　ダウンロード

スタンダードなビジネス用のテンプレートです。コーポレートサイトなどに向いています。

デモ　ダウンロード

写真の掲載などに向いているシンプルなテンプレートです。

デモ　ダウンロード

テンプレートプロ版

ブロック機能の追加やアニメーションを加えたプロ版のテンプレートもご提供を始めました。ご使用は無料ですのでお気軽にお使いください。商用利用や二次使用も可能です。

メールフォームについて

メールフォームは別となりますので、必要な場合は他サイトで配布されているPHPなどのフォームを導入いただく形になります。簡単なものはGoogleフォームやフォームズなどで作成してリンクを貼る、ページ内に埋め込むと導入が楽です。

使い方

ブロックを追加したい場合は、下記のようにcontainer内のコードをまるごとコピペしてください。ポイントは横幅が全部で１２の数字になるようにレイアウトしていきます。このテンプレートはCSSフレームワークを元に作成しています。

という具合に、１つのコンテンツが全部で１２の数字になるようにレイアウトを組んでいけばOKです。Bootstrapなどを使い慣れているかたは取っ付きやすいと思います。

このように「row」を並べて表示させることもできます。初めてご覧になるかたは呪文のようですが、とりあえずこれだけ覚えておけば、カスタマイズは可能です。

CSSフレームワーク自体には独自のclassなどはほとんど付けていないので、最低限の装飾のみ行なっています。CSSフォルダ内の「grid.css」ファイルに格納、各種デザインは「style.css」ファイルに上書きしています。

メニューボタンは、なるべくコーディングが楽に済むように画像で作成しています。imgフォルダをご覧ください。

色変更はstyle.css上部のroot一覧にまとめているのでカラーコードを変更してください。IE非対応です。

HTML・CSSについて詳しく学びたいという方向けのオススメ参考書です。なるべく初めてでも分かりやすい内容を選んでみました。

デザインの学校　これからはじめる HTML&CSSの本［改訂第3版］

新品価格￥2,156から(2025/7/28 14:42時点)

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座［第2版］

新品価格￥2,326から(2024/11/14 11:28時点)

現場で使える Webデザインアイデアレシピ (Compass Web Development)

新品価格￥3,058から(2024/11/14 11:29時点)

利用規約

商用・個人のサイト作成問わず無料でお使いいただけます。著作権表示のコピーライトも削除していただいて構いませんが、著作権は放棄しておりません。制作会社の方が二次創作してクライアント様へ納品していただくことも可能です。ご自身がテンプレート自体を制作したように公開するなどの再配布はご遠慮くださいませ。

ご利用の際、制作者へのご連絡も不要です。カスタマイズ等は自由ですが、自己責任でお願いします。

公序良俗に反するサイト・違法サイトの制作でのご利用はご遠慮願います。

同封している画像も再配布可能なフリー素材のみ使用しておりますので、そのままお使い頂いてもかまいません。

jQueryやress.cssファイルはMITライセンスに準拠します。

動作保証ブラウザは、Windows、Mac共にGoogle Chrome、Firefox、Microsoft Edge最新版です。

推奨エディタは「Visual Studio Code」です。一部のエディタで文字化けが発生する場合は、文字エンコーディングを指定してください。

テンプレートによって何らかの不利益、損害が生じても一切の責任を負いません。自己責任の下でご使用ください。

制作代行

当テンプレートを使用した制作代行も承っております。標準のカスタマイズをお得なパックにしました。データでのお渡しとなります。標準パックの範囲を超えるカスタマイズについては、お見積りいたします。

• 1ページカスタマイズ
• テキストの置き換え／画像の置き換え（ご用意ください）
• メニューの置き換え
• 配色の変更
• フォントの変更
• レイアウトの最小限の変更

原型が分からないくらいのデザイン装飾も可能です。コンテンツ数や作業量によって変わりますので、詳しくはお見積もりさせていただきます。制作物の知的財産権及び著作権の譲渡は行なっておりませんのでご了承くださいませ。

内容を分かりやすく伝えるWEBデザイン、SEOに強いコーディング、グラフィック、チラシや名刺などの印刷物やイラストの制作、写真撮影。制作時や納品以降も初めての方でも分かりやすい丁寧なアフターサポートなどのWEBトータルサポート。１人１人に合わせて意図やご要望を汲み取りながら、コンテンツ作成や集客までのご提案・総合的なサポートを得意としています。

難易度の高い複雑なプログラミングはお請けできかねます。HTMLサイトをWordpressへテーマ化、カスタマイズは行なっていますが、プログラミングを得意とされている方々にはとてもかなわないので、基本的には「できない」とお伝えしています。必要な場合は外注対応させていただきます。現在プログラマーの方は求人募集しておりません。

サポートについて

日々制作業務を行なっておりますので、使い方、設置、カスタマイズ方法などの無料サポートは設けておりません。誠に申し訳ございませんが、ご了承くださいますようお願い致します。

HTML、CSS、ドメイン・サーバーの設置、ご使用方法、カスタマイズ等に関するサポートは有料にてお見積もりいたします。