---
title: "ページとレンダリングのHTML構造"
slug: "the-html-structure-of-pages-and-renderings"
abstract: "SXAは標準化されたHTML構造を使用し、一貫したHTMLレンダリングに依存しています。"
---
# ページとレンダリングのHTML構造

SXAは構造(HTML)とデザイン(CSS)を分離し、ウェブサイトのデザイン変更を容易にします。これを可能にするために、SXAはすべてのページで同じ安定的でよく構造化されたHTMLコードを提供します。ユーザーは基礎となるコードを変えずに異なるスタイリングを適用できます。

## ページHTML

すべてのSXAページは以下のレイアウト構造を使用しています。

<html>
<head>
 <!-- meta renderings placeholder "head" -->
</head>
<body>
 <!-- meta renderings placeholder "body-top" -->
 <div id="wrapper">
 <div id="header" class="main clearfix">
 <!-- header components -->
 </div>
 <div id="content" class="main clearfix">
 <!-- content components -->
 </div>
 <div id="footer" class="main clearfix">
 <!-- footer components -->
 </div>
 </div>
 <!-- meta renderings placeholder "body-bottom" -->
</body>

すべての通常のレンダリングは以下の容器に配置できます:

-   ヘッダー
-   内容
-   フッター

メタレンダリングは、Meta Partial Designsに以下の容器で配置できます:

-   ヘッド
-   ボディトップ
-   ボディボトム

デザイナーはページスプリッターを使って、ヘッダー、コンテンツ、フッターコンテナ内で追加の列や行を生成できます。

スプリッターには2種類あります:

-   カラムスプリッター – 行コンテナでラップされた適切なグリッドクラスでdivsを生成します。グリッド値は列幅を指定します。
    
    <div class='row'>
     <div class='grid-6'></div>
     <div class='grid-6'></div>
    </div>
    
-   行分割器 – 利用可能な親コンテナの幅を埋める空のrow divsを生成します。
    
    <div class='row'></div>
    <div class='row'></div>
    <div class='row'></div>
    

列と行の両方にクラスを追加できます。また、特定のスプリッターセクションをマークして、他のセクションとは異なるスタイルでスタイリングすることもできます。これはグリッドシステムを壊すページパーツのスタイリングに役立ちます。ただし、グリッドの挙動は特定の行に対してのみオーバーライドできます。

## HTMLのレンダリング

すべてのSXAレンダリングは、簡単にスタイリングできるように設計されています。HTMLが非常に標準的であるため、テーマ開発者がCSSやJavaScriptを簡単に適用できます。

以下の例はアコーディオンレンダリングを使用しています。レンダリングのHTML構造は、コンポーネントクラスとコンポーネント名アコーディオンでdivでラップされています。スタイリングのためにCSSクラスのバリエーションを追加することもできます。

<div class="component accordion {custom classes}" data-properties='{"expandOnHover":false,"expandedByDefault":false,"speed":5000,
"easing":"easeInOutBounce","canOpenMultiple":false,"canToggle":false}'
>
 <div class="component-content">
 <div>
 <ul class="items">
 <li class="item">
 <div class="toggle-header">
 <div class="label">
 Header content
 </div>
 </div>
 <div class="toggle-content">
 Section content
 </div>
 </li> </ul>
 </div>
 </div>
</div>

> !注スタイリングにはクラスを使いましょう。IDは使わないでください。div IDはSitecoreで使用されており、変更できません。

以下のプロパティは、JavaScriptがレンダリング動作を制御するために使用しています:

-   expandedByDefault – 最初のアコーディオンタブが表示されます。
-   expandOnHover – マウスのタブを展開し、マウスの入りと閉じるイベント(この場合canOpenMultifulプロパティは使われません)。
-   canOpenMultiple – 複数のタブを同時に開く(canToggleプロパティは常に有効で無効化できません)。
-   速度と緩和 – 移行方法や時間を定義するためにあらゆる場所で使えます。

すべてのSXAレンダリングは同じラッピング構造を持っています:

<div class='component <component-name>'
 <div class='component-content'>
 <!-- component html -->
 </div>
</div>

レンダリングごとにコードは異なります。多くの場合、Sitecoreで使われている特定のレンダリングを表す一意のIDを持つ追加のラッピングdivが存在します。CSS/JSスクリプトはこれらのIDを使わないべきです。

> !注内部のレンダリング構造は、クラスのダッシュ区切られたクリーンなマークアップを使用します。いくつかの例外もあります。フォームなどの一部の要素は追加のSitecoreモジュール(例:WebForms for Marketers)を使用し、見た目が異なるHTML(camelCaseクラス名や場合によってはテーブル)を生成します。このHTMLは変更できません。

すべてのHTMLレンダリングはプラットフォームの一部であり、単一のプロジェクトやサイトのために変更することはできません。ただし、HTMLが [レンダリングバリアン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-a-rendering-variant.html "Create a rendering variant")トによって形作られている場合を除きます。

## JavaScript

複雑なレンダリングには独自のJavaScriptがあります。これらのスクリプトはJavaScriptフレームワークのメインテーマフォルダ内にあります。フレームワークはregisterやinitなどの公開メソッドを提供し、レンダリングを登録したり、クッキーなどの追加のヘルパーを登録したりします。

JavaScriptで使用されるすべてのバックエンドプロパティは、レンダリングラッピングdiv内のdata-properties属性に配置されています。これらはJSON形式でエンコードされています。

<div class='component accordion' data-properties='{"expandOnHover":false,"expandedByDefault":false,"speed":5000,
"easing":"easeInOutBounce","canOpenMultiple":false,"canToggle":false}'
</div>

以下はJavaScriptフレームワークの短縮版です:

var XA = XA || (function ($, document) {
 var api = {}, onPreInitHandlers, onPostInitHandlers, modules = {};
 onPreInitHandlers = new Array();
 onPostInitHandlers = new Array();
 /\*
 \* Register new module
 \* @params name - name of the module
 \* @params api - API object of the module
 \* @params init - init function for module, if not defined api.init will be used
 \*/
 api.register = function (name, api, init) {
 modulesname = {
 name: name,
 api: api,
 init: init || api.init || (function () { })
 };
 };
 api.registerOnPreInitHandler = function (handler) { onPreInitHandlers.push(handler); };
 api.registerOnPostInitHandler = function (handler) { onPostInitHandlers.push(handler); };
 var initScheduled = false;
 /\*
 \* Initializes all registered modules
 \*/
 api.init = function () {
 if (!initScheduled) {
 initScheduled = true;
 XA.ready(function () {
 try {
 for (var name in modules)
 if (modules.hasOwnProperty(name)) {
 $xa.each(onPreInitHandlers, function (i, h) { h.process(name, modulesname); });
 modulesname.init();
 $xa.each(onPostInitHandlers, function (i, h) { h.process(name, modulesname); });
 }
 }
 finally {
 initScheduled = false;
 }
 });
 }
 };
 /\*
 \* Wrapper around $(document).ready - fires given function when (or if) document is ready
 \*/
 api.ready = function (fn) {
 $(document).ready(fn);
 };
 };
 return api;
})($, document);
XA.init();

## CSS

レンダリング動作を変更するために、例えば標準ナビゲーションからモバイルナビゲーションに切り替えるなど、単一のクラスを置き換えることができます。また、CSSクラスを追加し、スタイリングやJavaScript機能を追加することで、独自のレンダリングバリアントを作成することもできます。命名規則に従う必要があります。特定のレンダリングのクラスは常にレンダリングの名前で始まります。ダッシュ名の規則を使って新しいクラスの機能を説明する言葉を追加してください。例えば: .navigation-mobile、.navigation-main-horizontal、.navigation-sidebar。