何が作れるか
ポートフォリオ、サービス紹介、イベント告知、個人ページの 4種類を想定した、レスポンシブな1ページサイトを生成します。
生成物は外部ライブラリを使わない単体HTMLなので、 Finderから開くことも、GitHub Pagesへ置くこともできます。
PROJECT 02 / WEB TOOL
Website Starter
サイト名、文章、色、必要なセクションを選ぶだけで、 1ページのWebサイトを生成するブラウザツールです。 完成したHTMLはそのまま保存して編集できます。
YOUR NAME
About Contact
WELCOME
伝えたいことから、
サイトを始める。
入力内容がすぐ右側のプレビューへ反映されます。
OVERVIEW
コードを書く前の空白を埋める
何を自分で決めるか
サイト名、キャッチコピー、説明文、メインカラー、 ボタンの文言、表示するセクションを入力します。
右側のプレビューを見ながら調整し、完成したら HTMLを保存するか、コードをクリップボードへコピーします。
FEATURES
生成までをブラウザ内で完結
リアルタイム表示
入力のたびにプレビューを更新し、完成形を確認できます。
4つの用途
用途に合わせて初期の文章とセクション構成を切り替えます。
色の自動調整
選択した色から淡い背景色と濃い文字色を自動生成します。
1ファイルで保存
CSSを含むHTMLとして保存し、そのまま公開・編集できます。
安全な文字処理
入力文字をHTMLとして実行せず、表示用テキストに変換します。
端末内だけで処理
入力内容と生成したコードを外部サーバーへ送信しません。
WORKFLOW
3つのステップ
-
1
用途と内容を入力
何のためのサイトかを選び、見出しと説明文を入力します。
-
2
プレビューで調整
色やセクションを変更し、PC・スマホ幅の表示を確認します。
-
3
HTMLを保存
生成したファイルを開くか、自分のプロジェクトへ追加します。
PRIVACY & LIMITATIONS
入力内容は送信されません
すべての生成処理はブラウザ内で行われます。 生成後のサイトにフォーム送信、データベース、ログインなどの サーバー機能は含まれません。