---
title: "要素の設定"
slug: "configuring-an-element"
abstract: "レイアウトやアライメント、画像のサイズや配置など要素のプロパティを調整してコンポーネントをカスタマイズできます。"
---
# 要素の設定

コンポーネントビルダーでは、コンポーネント内の要素をカスタマイズできます。特定の要素ごとにさまざまなオプションが利用可能です。

## レイアウトとアライメントの調整

レイアウトのカスタマイズは、セクション、カード、コンテナなどの要素の右側ペインにあります。編集しているコンポーネントバージョンに適用されますが、そのコンポーネント内の複数の要素に広がることもあります。例えば、コンテナ要素はスペースやレイアウト設定をそのコンテナ内のすべての子要素に適用できます。

レイアウトのカスタマイズは以下の設定で行えます:

-   **レイアウトとアラインメント** - [CSS Flexible Box Layout](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)が提供するすべてのコンテンツの整合ツールを提供します。例えば、「 **列数自動** 」設定では、子要素を並べて配置するために必要な列数を自動的に決定でき、子要素がスペースを超えて子要素がコンテナに溢れないようにラップを用いて管理します。レイアウト設定は子要素を保持する親要素に適用されます。
    
    ![Screenshot of the Layout and alignment dialog](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/alignment.png)
    
-   **Dimensions** - ピクセル数、パーセンテージ、EMS、REMで設定可能です。例えば、要素の高さを設定することでコンポーネント内のスクロール可能な領域を作成できます。
    
-   **Spacing** - スタイルズライブラリであらかじめ定義されたパディング値を適用します。値はいつでも上書き可能で、タイポグラフィの例と同様に変更はスタイルズライブラリに戻されません。 *Sides*は縦方向と水平パディングに同じ数値値を素早く適用するショートカットです。 *Sync*は左右、上、下、右のパディングに同じ数値値を素早く適用するショートカットです。
    
-   **Grid sizing** - 列数や行数を調整したり、行の高さを変えたりして、セクション内のグリッドの構成を変更する。
    

## 画像のサイズと配置の調整

画像のサイズや配置のカスタマイズが可能です。

この設定では、画像に対して以下のプロパティから選択できます:

-   画像の **幅** と **高さ**を定義するか、定義された幅に対して高さを計算する方法を示します。
-   以下のサイズ設定方法が利用可能です:
    -   **カバーは** 背景画像のサイズを調整して容器全体を覆うようにします。たとえ画像を伸ばしたり、端の一部を少し切り取ったりしても。
    -   **背景画像のサイズをリサイズして、画像が完全に見えるようにし、元のアスペクト比に戻します。**
    -   **ストレッチは** 、画像のアスペクト比を変えることで、エッジを切ることなくコンテナ全体を覆うように背景画像のサイズを調整します。
    -   **トリミングは** 背景画像のサイズをリサイズし、元の画像要素のアスペクト比を維持しつつコンテナ全体を覆うようにします。
-   もしすべてが見えない場合は、利用可能な空間内で画像を再配置するための **アライメント** を指定してください。

## 画像をアクセシブルにする

画像にオルトテキストを設定することで、視覚障害のある訪問者がスクリーンリーダーを通じてサイトをよりアクセスしやすくなります。オルトテキストはサイトのSEOも向上させます。

代替テキストを設定するには:

1.  画像要素を選択します。
    
2.  右側のペインの **「内容** 」セクションで「 **画像代替テキスト**」をクリックしてください。
    
3.  もしオルトテキストが静的テキストなら、「 **スタティック」** をクリックして **テキスト** 欄にテキストを入力または貼り付けてください。
    
    データソースからaltテキストをマッピングするには、「 **Mapped**」をクリックし、ドロップダウンリストでデータソースを選択し、データパスツリーで該当プロパティをクリックします。