パーツを並べる

HTMLパーツ一覧の左上にある「絞り込み」ボタンと、その右側にある検索ボックスを使えば、HTMLパーツ一覧画面に表示されるHTMLパーツをキーワードやタグで絞り込むことができます。
キーワードとタグの両方を組み合わせて検索することも可能です。

タグによる絞り込み

1. 「絞り込み」ボタンをクリックすると、タグ一覧が表示されます。
2. いずれかのタグを選択すると、HTMLパーツ一覧の表示が選択されたタグに関連するHTMLパーツだけの表示に変わります。
   例えば「ヘッダー」というタグを選択すれば、ホームページのヘッダー向けに作られたHTMLパーツを簡単に見つけることができます。
   また、タグを複数選択すると、選択中のいずれかのタグに関係するHTMLパーツが全て表示されます。
3. タグ一覧で選択中のタグをもう一度クリックすると、タグの選択が解除され、そのタグでの絞り込みが解除されます。

キーワードによる絞り込み

「絞り込み」ボタンの右側のテキストボックスにテキストを入力して虫眼鏡のアイコンをクリックすると、名前にそのテキストを含むHTMLパーツだけを表示することができます。

ドロップエリアに複数のHTMLパーツが設置されているとき、その順番を入れ替えることができます。
また、フレームレイアウトの使用時には、設置済みのHTMLパーツをフレームレイアウトの中に移動したり、逆に外側に移動したり、フレームレイアウトのカラム間を移動させたりできます。
このようなHTMLパーツの移動には、二つの操作方法があります。

ドラッグ＆ドロップによる移動

1. HTMLパーツ一覧が表示されていない場合は、画面右上のアイコンから「HTMLパーツ一覧」を選択します。
2. 画面右上のアイコンから「ドロップエリアモーダル」をクリックして、ドロップエリアを表示させます。
3. 設置されたHTMLパーツをドラッグして、ドロップエリア内の目的の箇所にドロップしてください。

HTMLパーツ移動ボタンによる移動

1. 画面右上にあるアイコンの中に、「HTMLパーツ移動ボタン」があり、その上部にスイッチがあります。このスイッチをクリックしてONにします。
2. ドロップエリア内に設置済みのHTMLパーツの中から移動したいものをクリックすると、そのHTMLパーツが選択状態となります。
3. HTMLパーツ移動ボタンの「↑」「↓」を押すと選択中のHTMLパーツがそれぞれ上か下に一つ移動します。
   HTMLパーツ移動ボタンの「一番上に移動」「一番下に移動」を押すと、選択中のHTMLパーツがドロップエリア内の一番上、または一番下に移動します。

HTMLパーツ一括削除

ドロップエリアに設置したHTMLパーツを全て削除するには、HTMLパーツ一覧の上部に並んでいるアイコンの中から「全て削除」をクリックします。
確認ダイアログが表示されますので、「はい」をクリックしてください。設置済みのHTMLパーツとフレームレイアウトが全て削除されます。

なお、HTMLパーツを一つずつ削除する場合は、ドロップエリア外にドラッグ＆ドロップすることで削除できます。

ドロップエリアの表示サイズは、変更することができます。 作成するホームページがブラウザのサイズによってどのように見え方が変わるのか、ドロップエリアのサイズを変えて確認することができます。

ドロップエリアのサイズ変更は、表示を確認するための機能であり、uWebeeによって作成されるホームページのデータに影響を与えることはありません。

ドロップエリアのサイズは、次の方法で変更できます。

既存サイズからの選択

ドロップエリアの左上にあるプルダウンメニューには、幅と高さの様々なパターンがリストされています。
この中から一つを選択すると、ドロップエリアの表示サイズが選ばれた項目のサイズに変化します。

数値による指定

ドロップエリア上部、プルダウンメニューの右側に現在のドロップエリアのサイズが「900 x 500」のような形式で表示されています。
この数値は、それぞれ幅と高さの値（px単位）を表しており、数値部分をクリックすることで変更できます。
幅と高さのいずれも、300から2000の値が入力可能です。

ドラッグによるサイズ変更

ドロップエリアの右側および下側の辺はドラッグできます。それぞれ幅と高さを300pxから2000pxの間で変更することができます。
また、ドロップエリア右下の角の部分をドラッグすると、幅と高さを同時に変更できます。

1. HTMLパーツ編集画面の右上のアイコンから「レイアウト一覧」をクリックすると、フレームレイアウトの一覧が表示されます。
2. 利用したいフレームレイアウトを選び、マウスでドラッグを開始するとドロップエリアが表示されます。
3. ドラッグしているフレームレイアウトをドロップエリアの中にドロップすると、フレームレイアウトが設置されます。
   
   フレームレイアウトはドロップエリア内に複数設置できますが、フレームレイアウトの中にフレームレイアウトを設置することはできません。

フレームレイアウトには、2カラムや3カラムなど複数のカラムを持つものがあります。 これらのカラムの境界線はドラッグで仕切り位置を変更することができます。

1. HTMLパーツ編集画面の右上のアイコンから「レイアウト一覧」をクリックすると、フレームレイアウトの一覧が表示されます。
2. レイアウト一覧の中から複数のカラムを持つフレームレイアウトを選び、ドラッグ＆ドロップでドロップエリアに設置します。
3. 設置したフレームレイアウトのカラムの境界線上にマウスカーソルを移動すると、マウスカーソルがカラム仕切り位置変更用のカーソルに変わります。マウスドラッグで境界線を移動してください。

いくつかのフレームレイアウトはレスポンシブ対応しており、ドロップエリアの幅に応じてレイアウトが変化し、横に並ぶカラムの数が変わります。 このようなフレームレイアウトでは、カラムの仕切り位置は、それぞれのレイアウト毎の設定となります。

例えば、「123レスポンシブ」の場合、ドロップエリアの横幅が896pxより広い場合は3カラム、667pxから896pxの場合は上に2カラムと下に1カラム、667px以下では1カラムにレイアウトが変化します。 3カラムの場合のカラム幅の変更は3カラムでの表示中にのみ影響し、2カラム、1カラムの表示には影響しません。 2カラム表示中のカラム幅の調整を行いたい場合は、ドロップエリアの横幅を変更して2カラム表示に変えてからカラム幅を調整することで、3カラム表示時とは独立してカラム幅を設定することができます。

1. HTMLパーツ編集画面の右上のアイコンから「テンプレート一覧」をクリックすると、テンプレートの一覧が表示されます。
2. 利用したいテンプレートを選び、マウスでドラッグ開始するとドロップエリアが表示されます。
3. ドラッグしているテンプレートをドロップエリアの中にドロップすると、そのテンプレートに含まれるHTMLパーツやフレームレイアウトがまとめて設置されます。
4. テンプレート設置後、引き続きHTMLパーツの追加・削除や詳細な編集を行う場合は、右上のアイコンから「HTMLパーツ一覧」をクリックしてHTMLパーツ一覧を表示させてください。