スタイルパネルの概要

デザイナー ツール内にあるスタイル パネルには、Web サイト上のすべてのコンポーネントをカスタマイズできるさまざまなスタイル コントロールが用意されています。スタイル パネルに用意されている包括的なコントロール セットを使用して、要素のレイアウト、背景色、またはタイポグラフィを柔軟に変更できます。

個々の要素のスタイル設定の他に、スタイルをクラスとして保存するオプションがあり、Web サイト全体の要素に一貫したスタイル セットを適用できます。さらに、ブレークポイント (メディア クエリとも呼ばれます) を利用して、スタイル パネルでさまざまなデバイス サイズに合わせてレイアウトをカスタマイズできます。

このガイドでは、スタイル パネルのさまざまなコンポーネントについて説明します。

1. クラス
2. セレクターフィールド
3. 州メニュー
4. スタイルセクション
5. 継承と適用されたスタイルのインジケーター

クラス

スタイル パネルを使用して Web サイト上の各要素を個別にスタイル設定することは可能ですが、手動で要素を微調整するのは面倒で時間がかかります。ここでクラスが役立ちます。

クラスには、Web サイト全体のさまざまな要素に適用できるスタイル情報が保存されます。スタイル パネルで要素のスタイル設定を開始するとすぐに、クラスが自動的に生成され、選択した要素に割り当てられます。また、クラスを手動で作成して名前を変更することもできます。

元のクラスからスタイル値と、そのコンボ クラスに実装した追加のスタイルを継承するコンボ クラスを作成することもできます。クラスとコンボ クラスの詳細をご覧ください。

セレクターフィールド

スタイルパネルの上部にある要素タイプは、現在スタイルを設定している要素（画像、divブロック、フォームなど）を示します。要素タイプの下には、 セレクターフィールド、その要素に適用されているすべてのタグ、クラス、およびコンボ クラスが表示されます。既存のクラスの名前を変更したり、新しいクラスまたはコンボ クラスを確立したりする操作は、このフィールドで直接行うことができます。

セレクターフィールドでのクラスの作成と名前の変更

要素のスタイル設定を開始すると、要素の種類に基づいてクラス名が自動的に割り当てられます（たとえば、手動でクラスを作成せずに段落要素にスタイルを適用すると、「Paragraph」という名前のクラスが自動的に割り当てられます）。 セレクターフィールドクラスの名前を変更したり、新しいクラスを作成したりできます。

新しいクラスを導入するには、希望するクラス名を セレクターフィールド.

クラスの削除

要素からクラスを削除するオプションがあります。 セレクターフィールドこのクラスは他の要素のスタイル設定にいつでも再利用できますが、 スタイルセレクタパネル またはウェブサイトからクラスを完全に削除するには、 スタイルセレクタパネル どの要素とも関連付けられなくなったとき。

州メニュー

特定の要素の外観と動作を変更するには 州、 のような ホバー または 集中したから州を選択できます セレクターフィールド > 州 ドロップダウン メニュー。スタイル設定の状態に関する詳細については、こちらをご覧ください。

継承メニュー

の 継承 メニューは セレクターフィールドクリックすると、選択した要素の親要素と祖先要素がグローバルタグまで表示されます（例： 本文（全ページ）タグ）。継承メニューから、任意のクラスのスタイルを選択して更新することもできます。

継承メニューには、コンボ クラスの基本クラスも表示されます。状態が選択されると、スタイルが適用されている状態がメニューに表示されます。継承と適用されたスタイルのインジケーターについて詳しく説明します。

影響を受ける要素

の 影響を受ける要素 インジケーターはセレクター フィールドのすぐ下に表示され、セレクター フィールドのクラスまたはタグが現在のページおよび Web サイト全体で使用された回数を示します。テキストをクリックすると、そのクラスまたはタグを共有するすべての要素の周囲にアウトラインを切り替えることができます。

スタイルセクション

スタイル パネルの各セクションでは、個別の CSS プロパティ (つまり、スタイル) のセットを管理します。次のセクション内でさまざまなスタイルを自由に調整し、キャンバス上で変更をプレビューできます。

• レイアウト
• 間隔
• サイズ
• 位置
• タイポグラフィ
• 背景
• 国境
• 効果
• カスタムプロパティ

セクションを個別に、または一度に展開、折りたたみ、切り替えることができます。 フォーカスモード. 

フォーカス モードを有効にするには: 

1. クリックしてください "3つの点”アイコンをクリックすると、 スタイルパネル
2. チェックしてください フォーカスモード オプション
3. セクションを選択してください スタイルパネル 拡張する（例：間隔、背景など）

フォーカス モードを無効にするには: 

1. クリックしてください "3つの点”アイコンをクリックすると、 スタイルパネル
2. チェックを外す フォーカスモード オプション

プロのヒント: 使用 Alt/オプション + ス キーボードの スタイルパネル プロパティセクション。 Alt/オプション + シフト + ス トグルへ フォーカスモード オンとオフ。 

フォーカス モードの選択または選択解除はセッション中は維持されることに注意してください。たとえば、フォーカス モードを有効にしてデザイナー ツールを更新したり、別のブラウザーまたはタブでアクセスしたりすると、フォーカス モードは維持されます。ただし、フォーカス モードの設定は別の Web サイトには引き継がれません。あるサイトでフォーカス モードを有効にして、デザイナー ツールで別のサイトに切り替えると、新しいサイトではフォーカス モードが無効になります。

レイアウト

キャンバスに要素を追加すると、デフォルトの表示オプションがその外観に影響します。 レイアウト セクションでは、次のようなデフォルトの表示オプションを提供しています。 ブロック, フレックス, グリッド、 または なし「矢印”アイコンをクリックすると、 表示オプション ドロップダウンには次のような選択肢があります インラインブロック, インラインフレックス, インライングリッド、 そして 列をなしてこのセクションでは表示設定について詳しく説明します。

間隔

間隔は、要素の境界の外側または内側の余裕を指す要素の間隔を定義します。 マージン 要素の境界の外側のスペースを決定する パディング 要素内のコンテンツと境界線の間のスペースを定義します。 

指定できます 間隔 要素の上、下、左、右の 間隔 セクション。 間隔 値は、1 つの辺、2 つの補完的な辺、または 4 つの辺すべてに個別に適用できます。間隔に関する詳細については、こちらをご覧ください。

サイズ

デフォルトでは、要素は親要素の幅に合わせて伸縮するか、その中のコンテンツのサイズに合わせて調整されます。 サイズ セクションではカスタマイズオプションを提供しています 幅, 身長, 側面比率, オーバーフロー、 そして フィット 設定。

注記： ある サイズ コンテナ要素のオプションが制限される場合があります。 

詳細については、このセクションで利用可能なさまざまなサイズ設定を確認してください。

位置

の中に 位置 セクションでは、要素を設定できます 位置 （例：静的、相対的、絶対的、固定、スティッキー）とともに 浮く そして クリア 設定。このセクションでは、位置、フロート、クリアの設定についてさらに詳しく理解します。

タイポグラフィ

以内 タイポグラフィ セクションでは、Web ページ上のテキストの表示を制御するための外観とスタイルを管理する設定が見つかります。

変更した場合は タイポグラフィ 要素にデザインを適用すると、その調整はその要素とその子孫要素内のすべてのテキスト要素に適用されます。タイポグラフィの構成と推奨される方法について詳細をご確認ください。

出演

以内 出演 categoryでは、背景画像、グラデーション、または色を任意の要素（メディア要素を除く）に組み込むことができ、その要素を変更することができます。 クリッピング プロパティを変更することもできます。さらに、 寸法, 配置、 そして パターン 背景画像の表示。背景設定の詳細をご覧ください。

エッジ

エッジは、要素の境界の曲率を設定したり、要素の周囲の1つまたは複数の側面にアウトラインを設定します。 エッジ categoryでは、 曲率の範囲, ファッション, 厚さ、 そして シェード 要素エッジについて。エッジ構成をさらに詳しく調べます。

影響

以内 影響 セクションでは、要素にさまざまな効果を割り当てることができます。これには次のものが含まれます。 融合, 半透明性, ボックスの影, 2D および 3D 変換, シフト, フィルター, 風景フィルター、 そして カーソルさらに、特定の状態（ホバー、フォーカスなど）にエフェクトを適用することもできます。エフェクトの詳細については、こちらをご覧ください。

カスタム属性

以内 カスタム属性 category では、カスタム CSS を挿入して、スタイル パネルの他のセクションで自然にサポートされていない CSS 属性と値を統合できます。カスタム属性について理解を深めてください。

遺産と実装されたスタイルのマーカー

スタイル パネルで category を折りたたむと、その category 内の属性にローカル スタイルまたは継承されたスタイルが実装されている場合、category 名の横に色付きのドットが表示されます。スタイル パネルで category を展開すると、ローカル スタイルまたは継承されたスタイルを持つ属性名に色付きのタグが表示されます。

これらの色付きのマーカーは、スタイルの起源を示します。つまり、スタイルが選択した要素、現在のクラスに実装されているか、コア クラス、親要素、グローバル タグ、または拡大されたビューポートから付与されているかを示します。

追加のスタイルを組み込んだり、継承されたスタイルを置き換えたり、これらのスタイルのいずれかを削除したりできます。継承されたスタイルは、ソースを選択して変更することもできます。 遺産 落ちる。

オレンジマーカー

オレンジ色のマーカーは、現在のスタイルが選択した要素の先行要素から継承されていることを示します。つまり、選択した要素のスタイルは、タグ、コア クラス、上位のブレークポイント、または親要素のテキスト スタイルから継承されています。オレンジ色のマーカーをクリックすると、スタイルが継承された場所が表示されます。

継承されたスタイル（オレンジ色のスタイルマーカーで表示）を上書きするか、クラスまたはタグに移動してそこでスタイルを編集することができます。現在の要素にスタイルを適用しているすべてのクラスとタグにアクセスするには、 遺産 落ちる。

このドロップダウンから、クラスやタグを選択して一時的にスタイルを設定できます。たとえば、H1見出しを選択すると、 遺産 ドロップダウンから選択して すべての H1 見出し 鬼ごっこ。

青いマーカー

スタイルマーカーが青色の場合、要素のスタイルが現在のクラス、タグ、またはブレークポイントから派生していることを示します。継承されたスタイル（オレンジ）を修正すると、マーカーも青色に切り替わります。青色のマーカーをタップして、 リセット 地元のスタイルを元に戻し、排除する。

ピンクのマーカー

ピンクのスタイルマーカーは、既存のブレークポイントで現在選択されている要素にスタイルが実装されていることを示します。たとえば、 グリッドチャイルド 設定は選択した要素にのみ適用され、これらのスタイルはクラス内に保存されません。クイック スタックのスタイルを設定するときにピンクのマーカーが表示されることもあります。

小さいブレークポイントで継承された（オレンジ）スタイルを上書きすると、マーカーはピンク色に変わります。ピンクのマーカーラベルをクリックして、 リセット 元に戻して消去します。

専門家のヒント: ショートカットの組み合わせを活用する オプション+クリック (Macの場合) または Alt + クリック (Windows の場合) スタイルをリセットします。

先に進み、あなたのデザインを輝かせましょう スタイルパネル 構成！