カスケードスタイルシートの概要

フォントを制御する CSS を使用して、複数のブラウザーでページの外観とレイアウトの一貫性をさらに高めることができます。CSS でユーザーが制御できる多数のテキストプロパティの一部には、フォントファミリーとサイズ、テキストの色と背景色、テキストの書式設定、およびリンクの色があります。

CSS を使用して、ブロックレベル要素の位置設定、色の追加、テキストの回り込み、余白と境界の設定を行うこともできます。ブロックレベル要素は、視覚的にブロックとしてフォーマットされるコンテンツのスタンドアロン要素です。たとえば、コンテンツブロック (p タグに等しい) とパネル (div タグと同じ) は、両方ともブロックレベル要素です。

Site.com では、CSS の最新仕様である CSS3 をサポートしています。

インラインスタイルとスタイルシートについて

Site.com Studio では、次の操作を実行できます。

• [スタイル] ペイン () の [インライン] オプションを使用して、選択したページまたはページ要素にスタイルを直接適用する。インラインスタイルは、選択した項目にのみ適用されます。
• スタイルシートに CSS クラスや ID などのスタイル項目を追加して、選択したページまたはページ要素にスタイル項目を適用する。この方法を使用すると、コンテンツ (Web ページ) がプレゼンテーション (スタイルシート) から分離されます。

CSS に精通していない場合、おそらくインラインオプションが最も簡単に理解して使用できます。ただし、インラインスタイルではコンテンツとプレゼンテーションが混合するため、スタイルシートの多くの利点が失われます。つまり、インラインスタイルは、個々の要素にのみ適用されます。サイトのスタイルを更新する必要がある場合、影響を受けるページとページ要素のすべてのスタイルプロパティを更新する必要があります。

それに対して、スタイルシートは、最初は理解するのがやや難しいかもしれませんが、任意の 1 か所からサイト全体を変更できます。スタイルシートのスタイル項目を更新すると、そのスタイルシートを使用するページまたはページ要素のすべてのスタイルがすぐに更新されます。

次の理由により、時間をかけても CSS に精通する価値があります。

• サイトの作成と設計時の時間と手間を節約する
• より読みやすく一貫性のあるサイトデザインを生成する
• アクセシビリティを必要とする人 (スクリーンリーダーを使用するサイト訪問者など) に対するナビゲーションを簡素化する

CSS の使用およびスタイルシートの作成についての詳細は、World Wide Web Consortium (W3C) の www.w3.org/Style/CSS にアクセスしてください。インターネット上には、詳細な CSS トレーニングを提供するチュートリアルも数多く用意されています。

CSS クラスと ID について

スタイルシートを使用して、サイトのスタイルを設定する場合、body や h1 などの HTML タグのフォーマットを再定義できます。CSS クラスと ID を作成して、ヘッダーや繰り返しコンテンツなど、特定の要素のスタイルを定義することもできます。CSS クラスでは、ページの多くの要素にスタイルプロパティを定義して適用します。一方、ページの単一項目を対象とする場合は、CSS ID が理想的です。たとえば、ページの構造では、多くの場合、各ページには同じ 1 つのヘッダーやフッターが含まれるため、ヘッダーとフッターエリアの定義には ID が使用されますが、ブログ投稿など繰り返しページ要素の定義にはクラスが使用されます。

ベストプラクティス

• スタイルシートに CSS のリセットを挿入して、すべてのスタイル項目を基準値にリセットします。CSS のリセットにより、固有なデフォルトのスタイル設定によるブラウザー間の相違を回避できます。
• 可能な限り、インラインスタイルの代わりに CSS クラスと ID を使用します。CSS クラスと ID により、プレゼンテーションとコンテンツの分離を促進し、より簡単にサイトのスタイルを更新できます。
• ページに 1 回のみ出現する場合は、ID を使用します。使用した ID は、そのページには再使用できません。ページに 1 つ以上出現する場合は、クラスを使用します。
• グループを使用して、論理的に CSS を整理し、より簡単にスタイルシートを管理します。
• CSS3 を使用している場合、一部のブラウザーでは CSS3 の機能がまだ完全に実装されていないため、CSS3 のサポートが必要なブラウザーごとにプレビューを確認し、サイトを完全にテストしてください。