要素とは何ですか?

エディターでは、要素とセクションテンプレートを使用することで、追加のコードを必要とせずに、美しいウェブサイトを素早く簡単に作成できます。 要素は、アイコン、ボタン、見出し、画像など、ウェブサイトを構築するための個々のオブジェクトを提供します。セクションテンプレートは、要素を組み合わせ、追加のデザインオプションで拡張します。

基礎知識

要素はウェブサイトエディタにおける「最小単位」です。要素は積み木のようなもので、テキスト、見出し、ボタンなどの基本的な機能を提供するために使用されます。まずはセクションテンプレートを探すことをお勧めします。セクションテンプレートは、様々な要素と定義済みのスタイルオプションで構成された、あらかじめ構築されたウェブサイトセクションです。

要素を編集するには、マウスの左ボタンでダブルクリックするか、既に選択されている場合はEnterキーを押します。矢印キーを使用して要素間を移動できます。

要素をダブルクリックすると、その要素のコンテンツを編集できるだけでなく、エディターの左側のパネルで設定を調整することもできます。各要素にはタブ（名前で示されます。この例では 「見出し」 ）があり、そこで要素固有の調整を行うことができます。また、すべての要素に 「スタイル」 タブがあり、そこではすべての要素に共通する設定を行うことができます。

---

要素を追加する

要素を追加するには、左側のコンテンツ サイドバーの 「要素」 カテゴリをクリックします。

コンテンツサイドバーの横に 「コンテンツを追加する」 パネルが表示されます。ここで、必要な要素を選択し、ドラッグ＆ドロップでウェブサイト上の希望の位置に配置することができます。要素が追加される位置は緑色の水平線で示されます。

ウェブサイトで既に要素を選択している場合は、パネルから左クリックするだけで要素を追加できます。複数の要素を一度に追加する場合は、[Ctrl]キーを押しながらすべての要素を選択します。ウェブサイトにドラッグ＆ドロップすると、クリックした順序で追加されます。統合されたショートカットを使用して要素を追加することもできます。例えば、[Ctrl] + [2]（MacOSの場合は[Cmd] + [2]）でテキスト要素を追加できます。すべてのショートカットの概要については、[Ctrl] + [K]（MacOSの場合は[Cmd] + [K]）を押してください。

---

要素を移動する

ウェブサイト上の要素を移動するには、いくつかの方法があります。ショートカットを使用するか、 階層構造を利用することができます。例えば、ショートカットの[Ctrl] + [上矢印]を使用すると、要素を上方向に移動します。[Ctrl] + [下矢印]を使用すると、要素を下方向に移動します。

階層構造を使用すると、ラベルを左クリックして押したまま、要素を目的の位置までドラッグすることで要素を移動できます。繰り返しになりますが、要素をドロップした際に配置される位置を示す緑色の水平線に注意してください。要素を2つのコンテナの間に配置したい場合は、[Ctrl]キーを押したままにしてください。

---

スタイルタブ

「スタイル」タブでは、基本的なデザイン設定を行うことができます。これらの設定はすべての要素に共通です。また、「スタイル」タブでは、要素がセクションコンテナ内にある場合、セクションテンプレートの設定に切り替えることもできます。

レイアウト（フレックスボックスアイテム）

ウェブサイトエディターは、「フレックスボックス」原則に従って要素を配置します 。親コンテナの主軸（「隣り合う」または「下に位置する」）が定義され、さらに詳細な配置指定が行われます。これにより、要素の配置方法が常に定義され、「手動で移動」する際に発生する可能性のある「予期せぬ結果」は発生しません。デザインは常に予測可能で、あらゆるデバイス、あらゆるディスプレイ解像度、あらゆる状況において固定されています。

この目的のために、「Flexbox-Item」設定は、親コンテナ内での要素の動作を指定します。

• 基準は、親コンテナに対する主軸上の要素の大きさを指定します。
• 拡大 では 、利用可能なスペースが増えた場合に要素も拡大するかどうかを指定できます。
• 縮小 は、より多くのスペースを解放するために要素がどれだけ縮小されるかを定義します。
• 複数の要素が隣接している場合、例えばモバイルビューに切り替えると、それらの要素は互いに下に表示されます。 注文 を使用すると、要素 の元の構造を変更せずに、要素をどの位置に表示するかを指定できます。

表示

「表示」 セクションでは、要素を表示するかどうかを指定できます。上部のナビゲーションでデスクトップ、タブレット、モバイルを選択し、設定を調整することで、デバイスに応じてこの設定を調整できます。

さらに、 不透明度 を下げて透明度を調整することもできます。さらに、 オーバーフロー 設定では、要素の境界を越えたコンテンツを表示するかどうかを指定できます。オーバーフロー設定の横にある矢印で、スクロールバーを下部、右側、またはウィンドウサイズに応じて自動的に表示するかを選択できます。

スペース

「スペース」 では、要素の パディング （内側の間隔）と マージン （外側の間隔）を定義できます。ここでは、上、下、左、右の4辺の値を指定できます。または、ラベルの横にある入力フィールドを使用して、すべての辺に同じ値を入力することもできます。

枠線

枠線は、特定の要素を強調表示したり、残りのコンテンツから分離したりするための興味深い方法を提供します。

「スタイル」 では、枠線の線種を 実線、破線、点線、二重線 から指定できます。さらに、間隔と同様に、要素の4辺すべてに枠線の幅を異なる値に設定することも、ラベルの横にある入力フィールドを使用してすべてに同じ値を設定することもできます。枠線の色も指定できます。

角を丸くしたい 場合は、ラベルの横にある入力フィールドを使用して、各角またはすべての角に対して希望する値を入力します。

影

陰影をつけることで奥行き感を演出できます。要素を「浮かせる」または「浮かせる」ことで、より焦点を絞ることができます。以下から選択できます。

• デフォルト
• なし
• 外側 - これはシェーディングの典型的な使用例で、要素の周囲にその「後ろ」の要素に影が落とされます。
• 内側 - 現在選択されている要素の周囲の他の要素が、選択された要素に影を落とすことを意味します 上部のオプションを選択した後、対応するフィールドを使用して、影の色、向き、影のぼかし、広がりを調整できます。

文字の影

文字の影の設定を管理することもできます。

配置

「配置」では、Web サイト上の要素の配置を指定できます。

• Static配置では、要素は常にエディター内に配置された場所に表示されます。
• Relative要素は、相対要素内にある他の従属要素の「アンカーポイント」として機能します。この配置はコンテナ要素にとって重要です。「Zインデックス」もここで指定され、画面からのZ軸上の位置を定義します。
• Absolute位置の要素は、次の上位レベルの要素を基準として配置されます。上位レベルの要素は「相対的」な位置にあります。ここでZインデックスを指定することもできます。
• 固定要素はブラウザウィンドウに相対的です。これにより、ウェブサイト訪問者が上にスクロールしても下にスクロールしても、要素がブラウザウィンドウ内の同じ位置に常に表示されるようになります。
• Sticky は、ウェブサイト訪問者がスクロールしてページを通過した後に、要素が画面の上部を基準とした位置に「固定」されることを保証します。

変換

変換 を使用すると、要素の外観をさらに変更できます。以下の4つのオプションがあります。

• 移動 を使用すると、 ウェブサイト上の要素を移動しても、残りの要素は移動されず、その他の影響も受けません。
• 拡大/縮小は、パーセンテージ係数で要素のサイズを変更します。
• 回転は指定した角度で要素を回転します
• 傾斜は 、X軸とY軸上の要素を歪ませ、要素自体を歪ませます。

ID & クラス

ID&クラス セクションでは、リンクやCSSを扱う際に必要となる可能性のあるIDを割り当てます。また、要素にクラスを割り当てることもここで行います。

アニメーション

各要素に異なるアニメーションを簡単に割り当てることができます。幅広いアニメーションからお選びいただけます。

その他

「その他」 では、要素の最小数と最大数を指定します。

要素を複製すると、元の要素のフィールドに元の要素の ID が自動的に入力されるため、現在の要素がどの要素から複製されたかがわかります。

---

セクションテンプレートの設定

前述の通り、セクションテンプレートは様々な要素で構成されています。そのため、セクションテンプレートを構成する要素をクリックすると、「スタイル」の下に2つのカテゴリが表示されます。要素カテゴリとセクションテンプレート設定のカテゴリです。

---

階層処理

階層構造は、上記の「移動」機能に加えて、追加の機能を提供します。最も重要なのは、ラベルにマウスオーバーすると、ネストされたすべての要素を直感的に確認できることです。セクションテンプレートと要素を区別するには、ラベルと境界線の色を確認してください。

• 水色：要素
• 濃い青: コンテナ
• オレンジ: セクションテンプレート

要素をクリックすると、ウェブサイトエディターのフッターにあるパンくずリストで、その要素の階層構造を簡単に確認できます。ウェブサイト上のすべてのセクションと要素の完全な概要を確認するには、ナビゲーターもご利用ください。

各ラベルは、それぞれの要素に対応する固有のアイコンで構成されているため、どの要素であるかを一目で確認できます。マウスを現在位置付けている要素のラベルには、その要素名も表示されます。要素によっては、ラベルの横に追加のオプションが表示される場合もあります。

• 省略記号アイコンをクリックするとコンテキストメニューが開きます
• 重複
• 消去
• 上に移動する
• 下に移動
• 要素がアニメーション化されていることを示す星アイコン

---

レスポンシブ設定

「レスポンシブ」とは、ウェブサイトが可能な限り最適に表示されるよう、デバイスと解像度に応じてデザインが適応することを意味します。レスポンシブ設定を活用するにはいくつかの選択肢があります。まず、セクションテンプレートは既にそのように設計されているため、できるだけ頻繁に使用することをお勧めします。次に、デスクトップ、タブレット、モバイルのそれぞれの表示に合わせて、色、高さ、幅、配置などの設定を調整できます。

これを行うには、エディターの上部にある 3 つのデバイス アイコン (デスクトップ、タブレット、スマートフォンのビューポートを表す) を使用して、目的のビューに切り替え、そのビューに対応する値を具体的に変更します。

次の例では、左右のパディングを調整します。これを行うには、次の手順に従います。

1. エディターの上部にあるタブレットアイコンをクリックして、タブレットビューに切り替えます。
2. 要素のスタイルタブにいることを確認してください
3. 間隔の下にある パディング の横にある カスタム をクリックし、remを選択した後、右と左の入力フィールドに3を入力します。

上部のナビゲーションから該当するアイコンを選択して、モバイルビュー用の調整を行います。この例では、左右のパディングを1remに変更しました。

他のデバイスビューで行った変更は、常にすべての小型デバイスに自動的に適用されます。デスクトップビューで行った設定は、上書きされない限り、すべてのデバイスタイプに適用されます。タブレットビューの設定を変更した場合、その設定はモバイルデバイスにも適用されますが、デスクトップデバイスには適用されません。上記の例のようにパディングを調整すると、設定ラベルの色が白から、タブレットの場合は紫、モバイルの場合は黄色に変わり、上部ナビゲーションのアイコンの色と一致していることに気付くでしょう。