HTML5+CSS3無料テンプレート 商用利用も可能

テンプレートについて

テンプレどん」のプロ版、スマホ対応のHTML・LPテンプレートです。カスタマイズのしやすさを重視しているためシンプルなデザインが多いですが、どの業種にも合うように色変更やレイアウトの追加ができます。

既成のテンプレートによくある、この項目はいらない、ここにもう少し追加できたらいいのにという時になるべくコードを読まなくて済むよう、自在にカスタマイズがしやすいテンプレートを目指しました。

主に1ページから10ページ以下の小規模WEBサイト制作を想定しています。ご使用は無料ですのでお気軽にダウンロードしてお使いください。


2024.03.01 ポートフォリオテンプレートを公開しました。
2023.09.20 インボイス制度導入に伴い、コピーライト削除費を2,000円→2,200円に見直しました。

テンプレート

Simplelp

シンプルテンプレート

アニメーションの動きをつけたシンプルなテンプレートです。コーポレート・ランディングページなどの制作にお使いください。

 


コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。

¥2,200円(税込)
コピーライト削除ご注文


Cafelp

カフェテンプレート

スライドショーやフルスクリーン画像のテンプレートです。カフェ以外にもお店や企業のサイトなどにも使えます。

 


コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。

¥2,200円(税込)
コピーライト削除ご注文


Cafelp

マルチテンプレート

ページ数を多めに作るシンプルなテンプレートです。コーポレート・ランディングページなどの制作にお使いください。

 


コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。

¥2,200円(税込)
コピーライト削除ご注文


Cafelp

ナノテンプレート

最小構成で作ったテンプレートです。写真を掲載するギャラリーサイト・コーポレートなどの制作にお使いください。

 


コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。

¥2,200円(税込)
コピーライト削除ご注文


portfolio-lp

ポートフォリオテンプレート

イラストや写真を掲載するポートフォリオサイト・コーポレートなどの制作にお使いください。

 


コピーライト削除をご希望のかたは以下からご注文ください。カラーマニュアルとデータ特典有。

¥2,200円(税込)
コピーライト削除ご注文



コピーライトの削除について

プロ版の著作権表示のコピーライトは無断削除・改変禁止です。必要なかたは削除ご注文ボタンからご購入ください。ライセンスは1サイトごとにご使用いただけます。複数サイトをご希望の場合は都度ご注文ください。

お支払い方法はクレジットカード決済です。大手企業でも使用されているStripeを導入しています。手数料はかかりません。決済後にコピーライト削除のご案内をいたします。 決済はカード会社に委託し、カード情報は当方では受け取りませんのでご安心ください。
銀行振込をご希望のかたはお問い合わせください。



メールフォームについて

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

以下のCMSもご用意していますが、簡易的なメールフォームのみで使用するには大がかりなので、上記の方法をお勧めしています。

NewsCMS

NewsCMS

お知らせなどの新着情報の更新に使えるプログラムです。お知らせとお問い合わせフォームだけを入れたい時にHTMLサイトと分けて設置できます。

使い方

装飾について

CSSファイルの説明

テンプレート自体は最低限の装飾のみ行なっています。本体はCSSフォルダ内の「grid.css」ファイルに格納、各種デザインは「style.css」ファイルに上書きしています。なるべくコードが肥大化して読むのがウンザリしないよう、少なくしています。その他は外部ファイルです。

メニューボタンは、コーディングが楽に済むように画像で作成しています。もしデザインを変えたい場合は、imgフォルダをご覧ください。

カラーや画像の変更

カラーコードの説明
画像ファイルの説明

色変更は「style.css」上部のroot一覧にまとめているのでカラーコードを変更してください。カラーコードとimgフォルダ内の画像を変えるだけで、別業種のサイトにイメチェンできます。テキストはサイトの内容に合わせてindex.htmlの文言を変更してください。テキストを変更するだけで差し替えられます。
合うカラーリングがよく分からない!という時は、たとえば青系なら青一色でまとめて、薄い水色を背景色やリンクカラーにするだけで印象がまとまります。

■カラーリング変更前

カラー変更前

■カラーリング変更後

カラー変更後

レイアウトをカスタマイズするには

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

<div class="container">
<div class="row">
        <div class="col span-12">
           <p>12分割。ここに画像やテキストを入れていきます。</p>
        </div>
        </div>
    </div>
12カラム

例えばブロックを2分割したい場合

<div class="container">
<div class="row">
        <div class="col span-6">
           <p>6分割</p>
        </div>
        <div class="col span-6">
           <p>6分割</p>
        </div>
        </div>
    </div>
6カラム

ブロックを4対8で表示する場合

<div class="container">
<div class="row">
        <div class="col span-4">
           <p>4分割</p>
        </div>
        <div class="col span-8">
           <p>8分割</p>
        </div>
        </div>
    </div> 
4-8カラム

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

1つのコンテンツ内ですぐ下に別のブロックを入れたい場合

<div class="container">
<div class="row">
        <div class="col span-7">
           <p>7分割</p>
        </div>
        <div class="col span-5">
           <p>5分割</p>
        </div>
        </div>
		
<div class="row">
        <div class="col span-2">
           <p>2分割</p>
        </div>
        <div class="col span-10">
           <p>10分割</p>
        </div>
        </div>
    </div> 
カラム連結

このように「row」を並べて表示させることもできます。テンプレートによって細かい装飾タグが入っていることもありますが、レイアウトを囲んでいるのはほとんど上記のタグなので、とりあえずこれだけ覚えておけばカスタマイズは可能です。

幅ごとにカラムの数を変えたい

<div class="container">
                 <div class="row">
                    <div class="col span-4 span-12-md">
                        <p>4分割 12分割-md</p>
                    </div>
                    <div class="col span-4 span-6-md">
                        <p>4分割 6分割-md</p>
                    </div>
                    <div class="col span-4 span-6-md">
                    <p>4分割 6分割-md</p>
                </div>
                </div>
    </div>
カラムmd版

横幅が980px以上表示のときの-mdオプションを付けています。通常のspanは768px以上の表示です。幅を指定するカラムの数を変えたい用途があればお使いください。使わなければ無視してください。

HTML・CSSおすすめ参考書

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

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

新品価格
¥2,455から
(2022/9/23 11:17時点)

タイトルの通り1冊でHTML・CSSの作り方の全体が学べます。Flexboxのレイアウトもわかりやすく載っています。

(サンプルコードDL特典付き)できるポケット Web制作必携 HTML&CSS全事典 改訂3版

新品価格
¥2,068から
(2022/9/23 11:18時点)

HTML・CSSの逆引き辞典です。分からないところだけをすぐに開いて読むことができるので便利です。

デザインのネタ帳 コピペで使える動くWebデザインパーツ

新品価格
¥2,926から
(2022/9/23 11:08時点)

最近のWEBサイトに多い、もっと動きをつけたい時にコピペで使えるデザインネタ帳です。

利用規約

ご利用について

テンプレート対象者はHTML・CSSが少しわかる人、デザインやコーディングの手間を減らしたい人です。

商用・個人のサイト、制作会社の二次使用も無料でお使いいただけます。再配布は不可です。プロ版テンプレートの著作権表示のコピーライトは無断削除・改変禁止です。著作権表記リンク削除をご希望のかたはライセンスをご購入ください。

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

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

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

外部のjQueryやCSSファイルはそれぞれのライセンスに準拠します。

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

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

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

制作代行

カスタマイズパック

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

¥22,000円(税込)
含まれる内容は右記の通りです
  • 1ページカスタマイズ
  • テキストの置き換え/画像の置き換え(ご用意ください)
  • メニューの置き換え
  • 配色の変更
  • フォントの変更
  • レイアウトの最小限の変更

その他料金一覧表

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

企画構成・進行管理・設計 ¥55,000円(税込)〜
ドメイン・サーバー設置代行・独自SSL導入 ¥16,500円(税込)
トップページデザイン(スマホ対応) ¥55,000円(税込)〜(コーディング含む)
下層ページデザイン(1P/スマホ対応) ¥8,800円(税込)〜(原稿貼り付けのみ/1枚)
¥22,000円(税込)〜(A4サイズ2枚程度)
追加デザイン制作 ¥22,000円(税込)〜
お問い合わせフォーム設置 ¥12,000円(税込)〜
LPページ作成 ¥110,000円(税込)〜(コーディング含む)
LPデザインオプション費 ¥55,000円(税込)〜
バナーデザイン ¥5,500円(税込)〜
ホームページ相談通話サポート(60分) ¥6,600円(税込)

できること

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

できないこと

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

サポートについて

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

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