ワイヤーフレーム向け基本HTMLパーツの利用方法

1.HTMLパーツ編集画面を開く

トップページの「HTML編集」ボタンか、こちらのリンクからHTMLパーツ編集画面に進んでください。

2.「ワイヤーフレーム」タグの選択

HTMLパーツ編集画面が開いたら、「絞り込み」ボタンの下部に点線の枠で表示されたタグ一覧の中にある「ワイヤーフレーム」をクリックしてください。 ワイヤーフレーム向けに追加された「基本パーツ」シリーズのHTMLパーツが表示されます。

3.HTMLパーツを設置する

お好みのHTMLパーツのドラッグを開始し、表示されるドロップエリアの中にドロップしてください。 従来のパーツと全く同様に、ドラッグ＆ドロップでドロップエリア内での順番を入れ替えたり、削除したり、テキストや画像の変更を行うこともできます。 もちろん、フレームレイアウトのカラムの内部にも設置することができます。

uWebeeで作成したワイヤーフレームの幾つかのサンプルがテンプレートとして登録されています。 テンプレートを使うと、複数のHTMLパーツの組み合わせをまとめてドロップエリアに設置できます。

HTMLパーツ一覧の右上のアイコンの中から上段右端の「テンプレート一覧」アイコンをクリックすると、テンプレートの一覧が表示されます。 この中の「ワイヤーフレームサンプル」シリーズのテンプレートをドラッグし、表示されるドロップエリアにドロップすると、ワイヤーフレームのサンプルがドロップエリア内に設置されます。 このサンプルに対して更にパーツを追加したり、不要なパーツを削除したり、自由に編集してご利用いただけます。

余白サイズ変更機能の操作方法

HTMLパーツの余白サイズの変更方法をご説明します。「基本パーツ」シリーズだけでなく、任意のHTMLパーツの余白サイズが変更可能です（※）。

※「ページトップへ（黒）」など一部のHTMLパーツでは、余白サイズが変更できない場合があります。

1.HTMLパーツを設置する

HTMLパーツ編集画面でお好みのHTMLパーツをドラッグし、表示されたドロップエリアの中にドロップしてください。

2.余白サイズ変更モードに切替える

HTMLパーツ一覧の右上のアイコンの中から下段の右端にある「編集」アイコンをクリックすると、編集モードに切り替わり、ドロップエリアの左側にツールバーが表示されます。 この左ツールバーの「余白サイズ変更」をクリックすると、ドロップエリアに設置済みのHTMLパーツの上下左右の辺が色付きの点線で表示されるようになります。 また、同時にドロップエリアの右側に余白サイズ設定欄が表示されます。

3.余白サイズを変更する

余白サイズ変更モードで表示されたHTMLパーツ上下左右の点線はドラッグで動かすことができ、パーツの内側にドラッグすることで、HTMLパーツの余白のサイズを広げることができます。
点線がドラッグしにくい場合は、各辺の点線の中央付近に表示される矢印をドラッグしても、同様に余白サイズの変更ができます。

余白サイズをドラッグで変更するとき、ドロップエリア右に表示された余白サイズ設定欄の対応する数値も変化します。この数値は余白サイズのpx値を示しており、この数値を直接編集することでも、余白のサイズを変更することが可能です。

4.ドラッグ時の最小単位を変更する

ドラッグ操作でHTMLパーツの余白サイズを変更する時、初期状態では10px単位で 0 → 10 → 20 → … のように値が変化します。 この値の変化の単位は、ドロップエリア右の余白サイズ設定欄の上部にある「ドラッグ最小単位」で変更することができます。 ドラッグ最小単位を1pxにすれば、1px単位で自由な余白サイズを設定することができます。
なお、数値入力で余白サイズを指定する場合は、このドラッグ最小単位の影響を受けず、自由な値を設定可能です。

HTMLパーツの編集が終わったら、画面右上にある「確認」ボタンをクリックしてHTMLパーツ確認画面を表示し、ページ全体のレイアウトのイメージを確認してください。 なお、HTMLパーツ確認画面の表示には、会員登録およびログインが必要です。

以下のページで、uWebeeによるホームページ制作の流れを詳しくご説明しています。