このテンプレートが向いている方
高い汎用性で、幅広い業種のシングルページサイト立ち上げに対応します。
士業・コンサル・BtoB
誠実さと信頼感を伝える、クリーンで日本のWebサイトに合うレイアウトを求めている事業者様。
教室・地域サービス・小売
特徴、サービス内容、料金目安、FAQ、連絡導線を1ページにコンパクトにまとめたい方。
Web制作会社・開発者
余計なコードが一切入っていない、カスタマイズしやすい制作の土台(叩き台)を探しているプロの方。
BaseOneを使用する4つのメリット
無駄な装飾を削ぎ落としたからこそ生まれる、シンプルな扱いやすさ。
1. 壊れにくいシンプル設計
複雑なCSSフレームワークや重いJavaScriptライブラリを一切使用していません。HTML初心者の方でも、文字や画像を書き換えるだけで表示崩れを起こしにくい頑丈な構造です。
2. 組み替え自由なレスポンシブ設計
パソコンやスマホへの最適化はもちろん、12カラムのグリッドシステムにより、自分で自由にレイアウトを組み立てられます。要素を増やしたり並び替えたりしても、表示が崩れにくいです。
3. ビジネスに必要な内容を追加
特徴・強み、サービス内容、実績事例、代表紹介、料金目安、FAQ、そして連絡しやすいお問い合わせ導線(電話・メール)が最初から一つのパッケージとしてセットになっています。
4. 商用利用も完全無料
個人・法人問わず無料でお使いいただけます。制作会社様がクライアントワークのベースとして使用し、納品することも可能です。フッターの著作権リンク削除(Powered by...)も構いませんが、可能であれば残していただけると幸いです。
仕様上の割り切り
ミスマッチを防ぐため、事前にできないこと・不向きな点をご確認ください。
アニメーションなし
読み込み速度と編集のしやすさを最優先しているため、要素がふわっと動くようなスクロール演出等は意図的に実装していません。
複数ページには不向き
1ページで情報をコンパクトに伝える「シングルページ専用」の設計です。数十ページに及ぶような大規模サイト構築には向きません。
個別サポートなし
本テンプレートは無料のためノーサポート製品です。カスタマイズ方法やコードの書き換えに関する個別のご質問にはお答えできかねますのでご了承ください。
ベースCSS(グリッド)の使い方
編集や拡張が直感的に行える、シンプルな12カラムシステムを採用しています。
12カラムのグリッドレイアウト
全体の横幅を「12」として考え、組み合わせたい数値のクラス(.span-1 〜 .span-12)を要素に指定します。
- 2カラム(2段組):
.span-6を2つ並べる - 3カラム(3段組):
.span-4を3つ並べる - 非対称(左右非対称):
.span-4と.span-8を並べる
※スマホ・タブレット(768px以下)では、自動的にすべて1カラム(全幅)の縦並びへと切り替わります。
便利な共通ユーティリティ
配置や余白の微調整用に、あらかじめ以下のクラスが用意されており、HTML側だけで完結できます。
| クラス名 | 効果 |
|---|---|
.text-center / .text-right |
文字のセンタリング / 右寄せ |
.mt-1 〜 .mt-4 |
上方向の余白(マージン)追加 |
.mb-1 〜 .mb-4 |
下方向の余白(マージン)追加 |
グリッドのサンプル(PC表示時に横並びになります)
各カラムクラスを組み合わせた際の実際の表示幅です。
■ 2カラム (.span-6 + .span-6)
■ 3カラム (.span-4 + .span-4 + .span-4)
■ 左右非対称レイアウト (.span-4 + .span-8)
HTMLの記述例(2カラムの場合)
<div class="grid-row">
<div class="span-6">左側のコンテンツ(50%幅)</div>
<div class="span-6">右側のコンテンツ(50%幅)</div>
</div>
BaseOneを無料で入手する
商用利用も自由ですが、トラブル防止のため以下の点をご確認ください。
【簡易利用規約】
・二次配布(テンプレートそのものの再販売・再配布)は禁止です。
・本テンプレート利用による損害についての免責(自己責任での利用となります)
・カスタマイズ方法等に関する個別サポートは対象外です。
※クリックするとZIPファイルのダウンロードが始まります。
※より詳細な規約は同梱のREADME.txtに記載していますので必ずご覧ください。