ホームページ構成作成ツール（共通版）

ホームページ構成作成ツール使い方ガイド

▶ ツールを開く

はじめての方でも1〜3分で使い方がわかる、かんたん取り扱い説明です。

このツールについて

このツールは、ボタンを押すだけで「お知らせ」「テーブル」「案内」「PICK UP」「備考」などのブロックを自由に組み合わせて、ホームページのHTMLを作れる無料ツールです。プレビューで見た目を確認しながら、完成したHTMLをそのままコピー・ダウンロードできます。

1このツールでできること

「お知らせ」「テーブル」「案内欄」「PICK UP」「その他・備考」の5種類のブロックを、必要なだけ自由に追加できます。
ブロックの順番を入れ替えたり、不要になったブロックを削除したりできます。
テーブルブロックでは、行数・列数やツール名・説明・リンク先・ボタン名を自由に設定できます。
作った内容はその場でプレビュー表示され、完成したHTMLをコピーまたはダウンロードして使えます。

2基本的な使い方

「基本設定」で、サイトタイトル・サイト説明・配色（メイン／サブ／アクセント／背景／文字色）を入力します。配色は下の「配色おまかせプリセット」から選ぶだけでも設定できます。
「ページ構成」で、追加したいブロックのボタン（＋テーブル／＋お知らせ／＋案内欄／＋PICK UP／＋その他・備考）を押します。
追加されたブロックの中に、タイトルや文章、テーブルの場合はツール名・説明・リンク先・ボタン名を入力します。
「プレビュー」で仕上がりを確認します。内容を変更すると自動的にプレビューへ反映されます。
仕上がりに満足したら、「HTMLをコピー」または「HTMLをダウンロード」ボタンを押して完成データを取得します。

3各項目の説明

サイトタイトル	作成するホームページのタイトルです。完成HTMLの見出しとページタイトルに使われます。
サイト説明	ホームページの簡単な紹介文です。完成HTMLの説明文として使われます。
メイン／サブ／アクセント／背景／文字色	ホームページ全体の配色を決める5つの色設定です。それぞれの色ボックスをクリックして選べます。
配色おまかせプリセット	用意された配色の組み合わせをワンクリックで反映できるボタンです。
＋テーブル／＋お知らせ／＋案内欄／＋PICK UP／＋その他・備考	それぞれの種類のブロックを1つ追加するボタンです。
ブロック名の入力欄	追加したブロックの見出し（タイトル）を自由に書き換えられます。
↑／↓ボタン	ブロックの表示順番を1つ上下に移動します。
削除ボタン	そのブロックを削除します（確認メッセージが表示されます）。
行数／列数（テーブルのみ）	テーブルの行と列の数を1〜20の範囲で設定します。
ツール名／説明（テーブルのみ）	各マスに表示する項目名と、その説明文を入力します。
リンク先（テーブルのみ）	最初は「#」になっています。この「#」を消して実際のURL（例：https://example.com/tool.html）を入力すると、そのページへ移動するリンクになります。
ボタン名（テーブルのみ）	リンク先へ移動するボタンに表示する文字です。初期値は「ツールを開く」です。

4プレビュー・コピー・ダウンロード

プレビュー：入力した内容が、実際のホームページの見た目でその場に表示されます。
HTMLをコピー：完成したHTMLのコードをクリップボードにコピーします。押すと「完成HTMLをコピーしました。」と表示されます。
HTMLをダウンロード：完成したHTMLをファイル（.html）として保存できます。ダウンロードしたファイルは、そのままブラウザで開いて使用できます。

5注意事項

テーブルのリンク先は、初期状態では「#」のままです。実際に使うときは必ずURLに書き換えてください。
ブロックの削除は元に戻せません。削除前に確認メッセージが表示されるので、内容をよく確認してから「OK」を押してください。
行数・列数を減らすと、その分のマス（ツール情報）は表示されなくなります。

まとめ：ブロックを追加して入力し、プレビューで確認してからコピー・ダウンロードするだけ。むずかしい設定は不要です。