無料HTMLテンプレート
ホームページ形式・シンプル・2列
会社・お店・教室などを紹介する、公式サイト向けのテンプレートです。白地に黒の文字、細い罫線だけで組んだ、飽きのこないデザインです。
このデザインについて
形式：ホームページ形式
会社・お店・教室などを紹介する、公式サイト向けのテンプレートです。メインビジュアルとお問い合わせへの導線、事業内容、選ばれる理由、お知らせ、よくある質問をトップにまとめています。下層ページとして、会社概要の表・沿革・アクセスを載せたページが付いています。
スタイル：シンプル
白地に黒の文字、細い罫線だけで組んだ、飽きのこないデザインです。装飾を控えているので、写真や文章そのものを引き立てたいときに向いています。色は変数にまとめてあるので、差し色を1つ変えるだけで印象を変えられます。
カラム：2列
本文とサイドバーを横に並べるレイアウトです。画面の幅が768px以上では本文とサイドバーが横に並び、それより狭い画面ではサイドバーが本文の下へ回ります。
入っているページと部品
- メインビジュアルとお問い合わせへの導線ボタン
- 事業内容・選ばれる理由・お知らせ・よくある質問
- 会社概要の表・沿革・アクセスを載せた下層ページ
- スマートフォンでは、メニューをボタンで開閉する形に切り替わります
- ページの先頭へ戻るボタン
ファイルの構成
homepage-simple-2col/
├── index.html トップ
├── about.html 会社概要
├── css/
│ └── style.css スタイルシート
├── js/
│ └── main.js 動き（メニューの開閉など）
├── images/ 仮の画像（6点）
└── README.txt 使い方の説明使い方
- 「ZIPをダウンロード」を押して、ファイルを保存します。
- ZIPファイルを展開（解凍）し、中の
index.htmlをブラウザで開くと、見た目を確かめられます。 - テキストエディタで HTML を開き、文章・画像・リンク先をご自分のサイトの内容に書き換えます。
- 色や文字の形は、
css/style.cssの先頭にある「色・文字・形の設定」でまとめて変えられます。 - 公開するときは、各ページの
<head>にページの説明（meta description）などを足してください。
