FREE HTML & CSS TEMPLATES

HTMLとCSSで作る
無料ホームページテンプレート

初心者は文字・画像・色を変えるだけ。
慣れてきたら、レイアウトも自由にカスタマイズ。 「どこを書き換えるの？」が分かるコード解説付きテンプレートを無料で配布します。

テンプレートを見る 使い方を学ぶ
✓ 商用利用OK ✓ レスポンシブ対応 ✓ HTML・CSS ✓ JS
WHY THIS SITE?

使うだけで、HTMLとCSSが少しずつ分かる。

単なる配布サイトではなく、「変更する場所」と「変更した結果」が分かる設計にしています。

01

コードの中に説明がある

HTMLとCSSに初心者向けコメントを入れ、タイトル・色・画像・リンクなどの変更場所がひと目で分かります。

02

そのままでも高品質

企業・店舗・ポートフォリオなどに使いやすい、余白・文字組み・スマホ表示まで整えたデザインを用意します。

03

初心者から上級者まで

初心者は色や文章の変更から、中級者はレイアウト調整、上級者はCMSやJavaScript連携へ発展できます。

FREE TEMPLATES

無料ホームページテンプレート

デザインを見て選び、デモで確認。気に入ったらZIPをダウンロードして編集できます。

Template 001 Template 001 Simple Business のサムネイル
企業・事業者★★☆

Simple Business

清潔感のある企業・個人事業向け。会社案内、サービス紹介、問い合わせへの導線を備えた定番構成。

6ページスマホ対応商用OK
デモを見る 詳細を見る
Template 002 Template 002 Natural Cafe のサムネイル
カフェ・飲食店★☆☆

Natural Cafe

やわらかな配色と写真を主役にした店舗向けデザイン。メニュー・営業時間・アクセスを見やすく掲載できます。

7ページ写真重視色変更簡単
デモを見る 詳細を見る
Template 003 Template 003 Japanese Heritage のサムネイル
神社・お寺・和風★★☆

Japanese Heritage

落ち着いた和モダンデザイン。神社・寺院・旅館・和食店など、日本らしい雰囲気を大切にしたサイト向け。

7ページ和モダン伝統色
デモを見る 詳細を見る
Template 004 Template 004 Minimal Salon のサムネイル
美容室・サロン★★☆

Minimal Salon

白・グレージュ・ベージュを基調に、写真と余白を大きく使う美容系デザイン。スタッフ紹介・ギャラリー・予約導線も収録。

7ページ写真主役予約導線
デモを見る 詳細を見る
Template 005 Template 005 Pastel Pop のサムネイル
カラフル・かわいい★☆☆

Pastel Pop

5色のパステルカラーと丸いカードを使った、明るく楽しいデザイン。教室・雑貨・スイーツ・ハンドメイドなどに。

7ページパステル初心者向け
デモを見る 詳細を見る
Template 006 Template 006 Creative Portfolio のサムネイル
ポートフォリオ・クリエイター★★☆

Creative Portfolio

大胆な文字組みと作品グリッドで見せる、写真家・デザイナー・Web制作者向けテンプレート。

7ページ作品詳細モノトーン
デモを見る 詳細を見る
Template 007 Template 007 Green Loop のサムネイル
リサイクル・環境サービス★★☆

Green Loop

爽やかなグリーンで信頼感を伝える、リユース・リサイクル・不用品回収・環境サービス向けテンプレート。

6ページ実績・FAQスマホ対応
デモを見る 詳細を見る
すべてのテンプレートを見る
BEGINNER GUIDE

初めてでも、順番どおりに進めれば大丈夫。

HTMLやCSSを触ったことがなくても、まずは「文字」「画像」「色」の3つを変えるだけで、自分のサイトにできます。

初心者ガイドを見る
STEP 1

文字を変更する

会社名・見出し・本文などを自分の内容にします。

STEP 2

画像を変更する

imagesフォルダのサンプル写真を差し替えます。

STEP 3

色を変更する

CSSの初心者編集エリアから配色を変更します。

STEP 4

メニューを変更する

項目名・リンク先・順番を調整します。

STEP 5

ページを追加・削除する

必要なページだけにサイト構成を整えます。

STEP 6

サーバーへ公開する

完成したファイルをアップロードして公開します。

CUSTOMIZE

「ここを変えたい」に答えるカスタマイズ講座

テンプレートを自分好みに変えるための操作を、実際のコード例付きで解説します。

↔

横幅を変更する

サイト全体やコンテンツの最大幅を調整する

→ Aa

文字サイズを変更する

本文・見出し・ボタン文字を読みやすく整える

→ ↕

余白を変更する

padding・margin・gapで窮屈さを調整する

→ ▭

ボタンを変更する

色・角丸・サイズ・枠線・hoverを変更する

→ H2

見出しを変更する

文字サイズ・色・線で情報のメリハリを作る

→ ▦

カードを増やす・列数変更

2列・3列・4列とスマホ1列を使い分ける

→
カスタマイズ講座をすべて見る →
LEARN BY EDITING

初心者は「ここだけ」変更すればOK。

配布するCSSでは、最初に初心者向け編集エリアをまとめます。複雑なレイアウト部分を触らずに、配色や幅を変更できます。

  • メインカラー
  • 背景色
  • 文字色
  • サイト最大幅
  • 角丸・余白
style.css
/* ★初心者の方は、まずここだけ変更 */
:root {
  /* サイトのメインカラー */
  --main-color: #5b6cff;

  /* 背景色 */
  --background-color: #f7f8fc;

  /* 通常の文字色 */
  --text-color: #202433;

  /* サイトの最大横幅 */
  --site-width: 1180px;
}
3 LEVELS

自分のレベルに合わせて使えます。

LEVEL 1

初心者

文字・画像・色だけ変更して、自分のホームページとして公開。

  • HTMLの文字変更
  • 画像の差し替え
  • CSS変数で色変更
LEVEL 2

中級者

セクション追加やレイアウト変更を行い、オリジナル性を高める。

  • Flexbox / Grid
  • レスポンシブ調整
  • カード・見出し追加
LEVEL 3

上級者

テンプレートを土台に、JavaScript・CGI・CMSなどへ発展。

  • JavaScript連携
  • フォーム・CGI
  • CMS・SEO強化
NEED PROFESSIONAL HELP?

「自分で作るのは難しい」と感じたら、制作をプロに任せる選択も。

無料テンプレートは自分でホームページを作りたい方向けです。デザイン調整やページ制作までまとめて依頼したい方は、MACHIKA WEB のホームページ制作代行をご覧ください。

MACHIKA WEBを見る ↗
FAQ

よくある質問

HTMLやCSSをまったく知らなくても使えますか？

はい。最初はサイト名・文章・画像・色など、指定された場所だけを書き換えれば使える構成を目指しています。

商用ホームページにも利用できますか？

はい。商用ホームページにもご利用いただけます。クレジット表記や再配布などの条件については、利用規約をご確認ください。

スマートフォンにも対応していますか？

はい。配布テンプレートは原則としてレスポンシブデザインに対応し、PC・タブレット・スマートフォンで見やすく設計しています。

START YOUR WEBSITE

まずは、好きなデザインを選ぶところから。

コードを知らなくても、ホームページは作れます。慣れてきたら少しずつ自分だけのデザインに育てていきましょう。

無料テンプレートを見る