1. スタイリングとスクリプト

ページとレンダリングのHTML構造

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

ページHTML

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

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

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

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

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

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

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

  • カラムスプリッター – 行コンテナでラップされた適切なグリッドクラスでdivsを生成します。グリッド値は列幅を指定します。

  • 行分割器 – 利用可能な親コンテナの幅を埋める空のrow divsを生成します。

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

HTMLのレンダリング

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

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

  • Header content
    Section content

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

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

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

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

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

!注内部のレンダリング構造は、クラスのダッシュ区切られたクリーンなマークアップを使用します。いくつかの例外もあります。フォームなどの一部の要素は追加のSitecoreモジュール(例

for Marketers)を使用し、見た目が異なるHTML(camelCaseクラス名や場合によってはテーブル)を生成します。このHTMLは変更できません。

すべてのHTMLレンダリングはプラットフォームの一部であり、単一のプロジェクトやサイトのために変更することはできません。ただし、HTMLが レンダリングバリアントによって形作られている場合を除きます。

JavaScript

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

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

以下は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。

この記事を改善するための提案がある場合は、 お知らせください!