見た目を整えながら、
HTMLとCSSを確かめる。

コードの前に、まず形にする。

見出し、本文、ボタン、画像、コンテナを追加し、選んだ要素を右側の設定で編集します。文字はキャンバス上でも直接書き換えられます。何から書き始めればよいか迷う方も、見えるところから制作を進められます。

順序とサイズを調整

ドラッグ＆ドロップで要素の並び順や配置先を変更。ハンドルで幅・高さを調整し、数値でも指定できます。基本はページやコンテナの流れに沿う配置です。自由な座標に重ねる操作を前提にしないため、ページの構造を意識しながら組み立てられます。

試して、戻して、比較する

Undo / Redoで変更を戻したり、やり直したりできます。Light / Dark / Systemは編集ツールの表示だけを切り替え、制作中のページの配色は保ちます。

下部のHTML / CSSタブは、操作のたびに生成コードを更新します。見出しを作ればHTMLに見出しタグが現れ、色や文字サイズを変えればCSSに設定が反映されます。

学習モードをONにすると、操作に対応したプロパティの説明も表示します。コードを眺めるだけでなく、ひとつ設定を変えて、変化した行を比べる使い方がおすすめです。

見出しの文字サイズと色を変えた場合の例

<h1 class="element-1">私の作品集</h1>

.element-1 {
  font-size: 36px;
  color: #2563eb;
}

実際には、余白やレスポンシブ用のCSSなども出力します。

ページが増えても、
共通部分をそろえられる。

無料アカウントでは複数ページを制作でき、サイトマップでページやリンクのつながりを確認できます。ヘッダー・ナビゲーション・フッターを共通化すると、サイト全体の案内を一か所で編集できます。

繰り返し使うカードなどは共通パーツとして再利用。同じデザインを毎ページ作り直す手間を減らせます。

白紙から迷うときは、テンプレートから

開発者・シンプル・複数ページの公式ポートフォリオを用意しています。テンプレート内の文章や色も、通常の要素として編集できます。

Freeでは、自分の作品から文章・画像を除いたレイアウトをマイテンプレートとして保存し、次の制作に再利用できます。

まずはブラウザ保存

アカウントなしでも編集を体験でき、制作データを使用中のブラウザに保存します。ブラウザのデータ削除や端末の故障などで失われる場合があるため、大切な作品は定期的に書き出してください。

無料アカウントでクラウド保存

サインインしてクラウドへ保存したプロジェクトは、別のブラウザからも開いて編集できます。ゲストで制作中の内容も、登録後にクラウドへ保存できます。

HTML/CSS・画像をZIPで出力

HTML/CSSを確認・コピーでき、画像を含むサイトはZIPでまとめて書き出せます。特定のサービス内だけで表示する形式に閉じず、一般的なHTMLとCSSとして制作を続けられます。