詳細タブ設定の概要

異なり、 設定 タブでは、これらの構成はすべての要素にわたって一貫しています。これらの設定を調べることで、各要素のより高度な機能を効果的にカスタマイズし、その可能性を最大限に引き出すことができます。

に表示

その 表示オン この設定では、特定の要素またはセクションを特定の画面タイプ（デスクトップ、タブレット、モバイル ビュー）で表示するかどうかを選択できます。 

この設定を調整すると、デバイスに応じてコンテンツを非表示または表示することができ、ページがさまざまなユーザー エクスペリエンスに合わせて最適化されます。

「ディスプレイオン」の仕組み:

• デスクトップ： ページをデスクトップ画面 (通常は幅 1024 ピクセル以上の大きな画面) で表示するときに、要素またはセクションが表示されるかどうかを制御します。
• タブレット： タブレット デバイス (通常、幅 768 ピクセルから 1024 ピクセルの中型画面) での表示を制御します。
• モバイル： モバイル デバイス (通常、幅 768 ピクセル未満の小さな画面) での表示を制御します。

GemPages のユースケース

• モバイルファーストのデザイン：もし デスクトップではきれいに表示されるが、小さい画面ではうまく収まらない大きな画像や詳細なセクションがある場合は、 モバイル デバイス上でその要素を非表示にして、よりモバイルに適したバージョンに置き換えます。
• さまざまなデバイス向けのカスタムレイアウト: 複雑な製品グリッドはデスクトップでは適切に機能しますが、モバイルではグリッドを非表示にして代わりに 1 列のリストを表示することでレイアウトを簡素化できます。
• ターゲットメッセージ: 異なるデバイスのユーザーに異なるマーケティング メッセージを選択的に表示したい場合 (例: モバイル限定割引の提供)、この設定を使用すると、ユーザーのデバイスに基づいて特定の要素を表示できます。

間隔

間隔 セクションでは、4つの寸法をすべて調整できます マージン と パディング。 

マージン 

マージン 要素の境界線の外側のスペースです。ページ上の要素と他の要素の間のスペースを制御します。マージンは透明で、要素を周囲のコンテンツから押し出し、その周囲にバッファを作成します。

GemPages では、マージンを使用して、2 つの画像間やボタンとテキスト ブロック間などの異なる要素間の距離を制御し、視覚的な分離や空白を作成することができます。

パディング

パディングは、要素の境界線の内側でコンテンツの外側にあるスペースです。要素のコンテンツ (テキストや画像など) と要素の境界線の間のスペースの量を定義します。

GemPagesでは、 パディング 要素内にスペースを作りたい場合に使用します。例えば、ボタンにパディングを追加することで、ボタン内のテキストの周囲にスペースが確保され、ボタンが大きくなったり、視覚的にバランスが取れたりします。

形状

ボーダー

境界線は、要素のコンテンツとパディングを囲む線です。ボタン、画像、テキスト ボックスなどの要素のアウトラインまたは端を定義します。境界線には、さまざまな幅、スタイル (実線、破線、点線など)、色を設定できます。

GemPages のユースケース

境界線は、要素を視覚的に強調、定義、または分離するために使用されます。たとえば、CTA ボタンの周囲に境界線を追加すると、ボタンがよりはっきりと目立つようになり、画像の周囲に境界線を適用すると、フレーム付きの外観になります。

コーナー（境界半径）

コーナーは、border-radius とも呼ばれ、要素の角の丸みを制御します。コーナーの鋭さや湾曲度を定義します。border-radius を適用すると、要素の角は丸くなり、値が大きいほど角はより円形になります。

GemPages での使用例

border-radius を使用すると、要素の角を丸くして見た目を柔らかくすることができます。これは、モダンで親しみやすく、洗練された美観を作成したいボタン、画像、コンテナーに特に役立ちます。 例えば、境界線の半径を 50% に設定すると、長方形の画像を円形に変換できます。

Shadow

影は要素の周囲に影の効果を追加し、奥行きや階層化、高さの感覚を与えます。影は、色、ぼかし半径、広がり、オフセット (要素からの距離) で調整できます。

GemPages での使用例

影は通常、平面の要素に立体的な効果を与え、ページから飛び出しているように見えます。たとえば、カードやテキスト ブロックに微妙な影を追加して奥行き感を演出したり、よりドラマチックな影を適用して製品画像などの重要な要素を強調したりできます。

役職

CSS position プロパティは、Webページ上の要素の配置方法を制御するために不可欠です。このプロパティは、異なる値を使用して、レイアウト内での要素の配置方法を定義します。

• 静的： デフォルトの配置方法。要素は通常のドキュメントフローで表示され、HTML内の順序に基づいて他の要素と自然に重なります。
• 相対的： 要素は通常のフローに残りますが、オフセットプロパティ（上、右、下、左）を使用して元の位置から移動できます。元の要素が占めていたスペースは保持されます。
• 絶対の： 要素は、最も近い祖先要素を基準にして配置されます。 relative, absoluteまたは fixed 位置。通常のドキュメントフローから削除されるため、他の要素の配置には影響しません。
• スティッキー： この要素は次のように動作します relative ページが一定の位置までスクロールすると、その位置で「固定」されます。 fixedこれは、固定ヘッダーやフローティングバーによく使用されます。
• 一定： 要素はブラウザウィンドウを基準に配置され、スクロールしても同じ位置に表示されます。フローティングボタンやスティッキーナビゲーションなどの永続的なUI要素に便利です。

GemPages のユースケース

• 重複する要素: 絶対位置指定を使用すると、画像の上にテキストを配置するなど、重なり合う要素を作成できます。 z-index どの要素を上に表示されるかを制御します。
• オフセット調整: 他の要素に影響を与えずに、通常の位置からわずかにシフトする必要がある画像またはテキストの配置を微調整するには、上、左、下、または右のオフセットを使用します。

不透明度

不透明度は要素の透明度を表し、背景やその下にある要素がどれだけ透けて見えるかを決定します。不透明度の値の範囲は0%から1%で、以下のようになります。

• 0%: 要素は完全に透明です（完全に見えません）。
• 100%: 要素は完全に不透明です (完全に表示されます)。
• 要素間の任意の値 部分的に透明なので、視認性が変わります。

アニメーション

アニメーションは、出現効果とホバー効果に分類されます。 アニメーション をオンにして設定を拡張し、好みのものを選択して、アニメーションが期待どおりになるように構成します。

出現時

• 表示される効果として、フェード、スライド、ズーム、またはシェイクを選択します。 なし 要素が表示されたときに効果を追加したくない場合。
• 表示される効果の速度、遅延、イージングを調整します。

ホバーすると

選択する なし 効果を追加しない場合は[オフ]を選択し、ズーム効果とシェイク効果を選択します。

GemPages での使用例

• 行動喚起ボタンのシェイクボタンを振ったり跳ねたりさせることで、ユーザーの注意を引き、クリックを促すことができます。たとえば、「今すぐ購入」ボタンは、ホバー時または一定の遅延後に振る効果を使用して目立つようにすることができます。
• スクロール時のセクションフェードイン: ユーザーがページを下にスクロールすると、特定のセクションがフェードアウトしたりスライドして表示したりできます。この効果により、視覚的に魅力的な方法でユーザーをコンテンツに誘導し、より魅力的なエクスペリエンスが生まれます。
• ホバー時の画像ズーム: インタラクティブ性を追加するには、ユーザーが画像の上にマウスを置いたときに画像が拡大表示されるように設定できます。これは、製品画像やギャラリー内の視覚要素に適しています。
• テキストアニメーション: 読み込み時やスクロール時にテキスト要素をスライドまたはフェードインするようにアニメーション化し、重要なメッセージや見出しを強調できます。

相互作用

要素のトリガーインタラクションを作成します。

クリックすると 創造するにリダイレクトされます インタラクション設定.

CSSクラス

CSSクラスは、HTML要素に再利用可能なスタイルです。ウェブサイト全体でHTML要素の外観の一貫性を保つのに役立ちます。