高度な CSS

• 10 分

カスケード スタイル シート (CSS) は、テキスト、フォント、色、背景、境界線、余白などの HTML 要素をどのように表示するかを記述して、Web ページのスタイルを指定するための言語です。

Web サイト ページのスタイルを変更するのは、CSS ステートメントをページに直接適用するのと同じくらい単純です。 Visual Studio Code を使用してページ コンテンツを編集する場合、CSS を独立したファイルとして使用できます。 そのファイルはページ コンテンツの一部として含まれており、CSS はそのページに適用されます。 たとえば、ホーム ページの上部にあるナビゲーション バーの高さをロゴに合わせて拡大する必要がある場合は、CSS ファイルを編集してから、カスタム CSS ステートメントを追加することができます。

.navbar-static-top.navbar { min-height: 100px; }

1 つのページで小規模な調整を行う場合には、このアプローチで問題ありません。ただし、より優れた方法として、1 つまたは複数の CSS ファイルにカスタマイズ内容を記録してから、Web サイトの全体または一部に適用する方法が挙げられます。

Power Pages テーマ

Power Pages では、Bootstrap フロンドエンド フレームワークを使用して、Web サイトのデザインやレイアウトを制御します。 Bootstrap は、タイポグラフィ、フォーム、ボタン、ナビゲーションや、オプションの JavaScript 拡張機能を含む他の要素のための、HTML および CSS のデザイン テンプレートのパッケージです。 Bootstrap のすぐに利用できる魅力的な機能の 1 つとして、レスポンシブ レイアウトが挙げられます。レスポンシブ レイアウトでは、小さなスマートフォンから大きなデスクトップまで、あらゆるデバイスで美しく表示されるように、Web サイトが自動的に調整されます。

テーマによって、Web サイトのすべてのページの外観が決まり、視覚的な一貫性が確保されます。 テーマを使用して、ナビゲーションの構造、バナー、色、フォントなどの、Web ページの視覚要素をコントロールします。

Power Pages のテンプレートは、最小限のコア カスタム スタイルを含む標準の Bootstrap コンポーネントを使用して実装できます。 その結果、Bootstrap が提供するカスタマイズのオプションを利用すると、テーマを簡単にカスタマイズでき、Web サイト全体に一貫して適用できます。

カスタマイズの適用

Power Pages は、Web サイトをデザインするためのテーマとツールの包括的なコレクションを提供します。 いくつかのテーマから Web サイトで使用するものを選択し、スタイル設定オプションを使用してさらにパーソナライズしてください。

Power Pages デザイン スタジオのスタイル設定ワークスペースでは、Web サイトに適用される CSS スタイルが制御され、汎用のサイト デザインを実装できます。 会社のブランド化に関する変更を組み込んで、アプリ ウィンドウの右側のプレビューで変更内容を確認できます。 スタイル設定にはあらかじめデザインされた複数のテーマが用意されており、各テーマについて、配色、背景色、フォント タイプ、ボタンのデザイン、およびセクションの間隔を変更できます。

テーマ

テーマでは、さまざまなテキスト要素、ボタン、リンク、およびセクション レイアウトのスタイルを定義することで、サイトの全体的な外観と動作を作成します。 サイトにその他のカスタマイズが必要な場合は、CSS の管理機能を使用できます。

スタイル設定ワークスペースでは、使用可能なテーマから選択できます。 テーマを選択した後、個々の要素をさらにカスタマイズして、目的のスタイルを作成できます。

CSS の管理

CSS の管理機能にアクセスするには、省略記号 (...) メニューを選択し、テーマ タイルで CSS の管理を選択します。

すべての Power Pages Web サイトでは、bootstrap.min.css、theme.css、portalbasictheme.css の各ファイルがすべてのページに既に含まれています。 これらのファイルは、Web サイト全体のスタイルを定義します。 CSS ファイルをさらにアップロードするには、アップロード リンクを使用し、Visual Studio Code エディターで編集します。 詳細については、「Power Pages で CSS ファイルを管理する」を参照してください。

Web サイトのスタイルを変更する方法を決定する際には、次の要素を考慮してください。

• サイト全体の包括的なスタイルを作成してから、CSS ファイルの内容を置き換えます。 このプロセスは、必要な要素をすべて確実に定義できる優れたデザイナーがいる場合に適しています。 この方法では、スタイルを集約的に管理でき、Web サイト全体の一貫性を確保できます。

• 色やフォント サイズなど、変更が必要な要素のみ定義し直します。 これらの変更の差分のみを含む CSS ファイルを作成してアップロードします。 このプロセスは、使用したいデザインが、選択したテンプレートに含まれているデザインに近く、スタイルにわずかな変更を加えるだけで済む場合に適しています。 この方法では、差分の変更が可能であり、元に戻すこともできます。

特定の Web サイト領域へのカスタマイズの適用

Web サイトの特定のページまたはセクションに対してカスタマイズを追加するには、ポータル管理アプリを使用し、CSS ファイルを添付して Web ファイル レコードを追加します。 スタイルを親ページとそのページの子孫すべてに適用するには、Web ファイル レコードで親ページを指定する必要があります。 この方法により、サイトの特定のセクションを完全にカスタマイズできます。

ブートストラップのカスタマイズ

ブートストラップのカスタム バージョンを作成するための標準的な方法は、公式のブートストラップサイトを使用する 方法です。 ただし、ブートストラップは広く使用されており、このための他のサイトも多数作られています。 ブートストラップをカスタマイズするための使いやすいインターフェイスが用意されているサイトや、あらかじめデザインされたバージョンのブートストラップをダウンロードできるサイトがあります。 Bootstrap カスタマイザーの公式サイトには、Bootstrap のカスタマイズに関する詳細情報が記載されています。

Bootstrap をカスタマイズすると、1 つまたは複数のファイルが生成されます。これらのファイルを Web ファイルとしてアップロードします。 元のスタイルを完全に置き換える場合以外は、部分 URL で bootstrap.css、bootstrap.min.css、theme.css、theme.min.css ファイルを使用しないようにしてください。Power Pages での CSS ファイルの処理に影響があるためです。

単純な調整を行う場合の CSS

CSS は、要素を非表示にしたり、幅の広いラベルに合わせて余白を調整するなどの単純な調整が求められるときには、見過ごされることがよくあります。 Bootstrap フレームワークは、Power Pages Web サイトにおけるスタイル設定の基盤であり、外観や複数列のレスポンシブ レイアウトを制御する数多くのスタイルを定義します。 たとえば、特定の列を非表示にして、ユーザー入力を収集する代わりに既定値を送信する必要がある場合は、その列に対してテーブル フォームのメタデータを使用してから、次のパラメーターを定義します。

• ラベルを単一のスペースに設定します。

• CSS クラスを非表示に設定します。

• 必要に応じて既定値を設定します。

JavaScript を使用する代わりに、構成のみを使用してこのタスクを完了できます。 使用できる場面で CSS を使用することには、次のような利点があります。

• CSS は読み込み時に適用され、ドキュメントの読み込みが完了するまで待つ必要がないので、時間が短縮されます。

• CSS は、JavaScript によってドキュメント構造を変更され、要素が追加または削除された場合でも、常にオンになり、引き続き関連する要素に適用されます。

• 要素の可視性とレスポンシブ レイアウトに関連するタスクについては、CSS のほうがメンテナンスが少なくて済み、エラーが発生しにくいため、JavaScript よりも簡単に使用できます。