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

テンプレートについて

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

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

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

テンプレート

LP

LPテンプレート

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

 


SimpleCorp

シンプルコーポレート

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

 


BasicCorp

ベーシックコーポレート

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

 


Portfolio

ポートフォリオ

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

 



テンプレートプロ版

テンプレどんプロ

テンプレどんプロ

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



メールフォームについて

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

使い方

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

ブロックを追加したい場合は、下記のように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」を並べて表示させることもできます。初めてご覧になるかたは呪文のようですが、とりあえずこれだけ覚えておけば、カスタマイズは可能です。

その他の装飾について

CSSファイルの説明

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

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

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

HTML・CSS参考書

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

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

新品価格
¥2,178から
(2022/5/6 10:04時点)

HTML・CSSって何?とにかく簡単に知りたいという方向けの本です。この本ならまず挫折しないです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

新品価格
¥2,237から
(2022/5/6 10:03時点)

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

HTML5 & CSS3 デザインレシピ集

新品価格
¥2,933から
(2022/5/6 10:02時点)

WEBサイトに装飾したいなど、自分がやりたいことがしたい時に逆引きで検索できるレシピ本です。

利用規約

ご利用について

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

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

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

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

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

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

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

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

制作代行

カスタマイズパック

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

¥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、ドメイン・サーバーの設置、ご使用方法、カスタマイズ等に関するサポートは有料にてお見積もりいたします。

▲TOP