SharePoint Foundation におけるカスケード スタイル シート クラスの使用
最終更新日: 2015年3月9日
適用対象: SharePoint Foundation 2010
カスケード スタイル シート (CSS) では、開発者が Web ページで要素に適用できるスタイル ルールが定義されます。たとえば、CSS スタイルによって、ページ上に要素をどのように表示し、どこに配置するかを定義できます。CSS を ECMAScript (JavaScript、JScript) と一緒に、また、マスター ページ (v4.master) および個別のページで定義されている HTML 要素と一緒に使用すると、Microsoft SharePoint Foundation Web サイトの表示をカスタマイズできます。
チーム サイトのホーム ページの要素および CSS のクラス
次の表は、既定のチーム サイトのホーム ページで使用されている、選択された最上位要素と CSS スタイルを示します。カスケード スタイル シートの使用方法を理解するための第一歩としてこの表を使用したうえで、SharePoint Foundation をカスタマイズします。詳細については、「Cascading Style Sheets (英語)」を参照してください。
要素 |
CSS クラス |
メモ |
|---|---|---|
<body> |
v4master |
corev4.css の CSS スタイルをページに適用します。 |
リボン コンテナー |
s4-pr |
リボン コンテナーをページ行の幅に合わせます。 |
s4-ribbonrowhidetitle |
リボンが開いているとき、または閉じているときに、リボンのタイトル領域を表示または非表示にするために使用されます。 |
|
ms-cui-ribbon |
メインのリボン CSS クラスを定義します。 |
|
ms-cui-ribbonTopBars |
リボン本体上 (ページ上部からリボン タブ タイトルまで) の要素を定義します。 |
|
[サイトの操作] メニュー |
ms-siteactionsmenu |
[サイトの操作] メニュー全体のスタイルを設定します。 |
ms-siteactionsmenuinner |
内部の [サイトの操作] メニューのスタイルを設定します。 |
|
ms-menu-a |
上位メニューの margin-right プロパティを設定します。 |
|
階層リンク メニュー |
s4-breadcrumb-menu |
階層リンク メニュー全体のスタイルを設定します。 |
s4-breadcrumb-anchor |
階層リンク メニューの上にカーソルを移動したときのスタイルを設定します。 |
|
階層リンク メニューのヘッダー |
s4-breadcrumb-top |
ドロップダウン ツリーが開いているときの、階層リンク メニューの上部領域のスタイルを設定します。 |
s4-breadcrumb-header |
階層リンク ツリーのドロップダウン メニューが選択されているときの、階層リンク フォルダー アイコンのスタイルを設定します。 |
|
階層リンク メニューの項目 |
s4-breadcrumb |
階層リンク項目のスタイルを設定します。 |
s4-breadcrumbRootNode |
階層リンク チーム サイトのルート ツリー要素のスタイルを設定します。 |
|
s4-breadcrumbCurrentNode |
階層リンク ホーム ツリー要素のスタイルを設定します。 |
|
[編集] タブ |
ms-qatbutton |
[編集] タブのスタイルを設定します。 |
[参照] タブ |
ms-cui-tts |
タブ タイトルのコンテナーのスタイルを設定します。 |
ms-cui-tt |
タブ タイトルのスタイルを設定します。 |
|
ms-browseTab |
[参照] タブに固有のスタイルを設定します。 |
|
ms-cui-tt-s |
選択されたタブ タイトルのスタイルを設定します。 |
|
ms-cui-tt-a |
[リボン] タブ タイトルのアンカー (テーブル タイトルをクリックできるようにする link 要素) のスタイルを設定します。 |
|
ms-cui-tt-span |
タブ タイトルのスパンのスタイルを設定します。 |
|
[ページ] タブ |
ms-cui-tt |
タブ タイトルのスタイルを設定します。 |
ms-cui-tt-a |
[リボン] タブ タイトルのアンカー (テーブル タイトルをクリックできるようにする link 要素) のスタイルを設定します。 |
|
ms-cui-tt-span |
タブ タイトルのスパンのスタイルを設定します。 |
|
[ユーザー] メニュー |
s4-trc-container-menu |
右上隅のコンテナー メニューのスタイルを設定します。 |
ms-SPLink |
メニュー項目に適用するスタイルを設定します。 |
|
ms-welcomeMenu |
ドロップダウン メニューの項目の margin-right プロパティを設定します。 |
|
ms-menu-a |
上位メニューの margin-right プロパティを設定します。 |
|
タイトル行 |
s4-pr |
タイトル行をページ行の幅に合わせます。 |
s4-title |
ページ タイトル要素のスタイルを設定します。 |
|
s4-lp |
ページの左パーツの要素のスタイルを設定します。 |
|
s4-titlelogo |
タイトル ロゴ画像の余白と配置を設定します。 |
|
s4-titletext |
ページ ロゴ グラフィックスの右側にあるテキスト全体のスタイルを設定します。 |
|
検索エリア |
s4-search |
セカンダリ メニューの検索コントロール上の間隔を設定します。 |
s4-rp |
ページの右パーツの要素のスタイルを設定します。 |
|
クイック起動メニューの項目 |
menu-item |
サイト ロゴの下にある [ホーム] ボタンのスタイルを設定します。 |
menu-item-text |
[ホーム] ボタンのテキストのスタイルを設定します。 |
|
[ごみ箱] リンク |
s4-rcycl |
[ごみ箱] リンク要素に固有のスタイルを設定します。 |
ms-splinkbutton-text |
リンク要素のスタイルを設定します。 |
|
[すべてのサイト コンテンツ] リンク |
s4-specialNavIcon |
[すべてのサイト コンテンツ] リンク要素に固有のスタイルを設定します。 |
ms-splinkbutton-text |
リンク要素のスタイルを設定します。 |
|
[共有ドキュメント] リンク |
ms-WPHeaderTd |
Web パーツのヘッダー セクションのスタイルを設定します。 |
ms-standardheader |
標準のヘッダー スタイルを設定します。 |
|
ms-WPTitle |
Web パーツ タイトルのスタイルを設定します。 |
|
[Web パーツ] メニュー |
ms-WPHeaderTdMenu |
[Web パーツ] メニューのスタイルを設定します。 |
ms-WPHeaderMenuImg |
[Web パーツ] メニューの画像のスタイルを設定します。 |
|
[選択] チェック ボックス |
ms-WPHeaderTdSelection |
[Web パーツの選択] チェック ボックスのスタイルを設定します。 |
ms-WPHeaderTdSelSpan |
[Web パーツの選択] チェック ボックスのスパンのスタイルを設定します。 |
|
[選択] チェック ボックス |
ms-vh-icon |
[項目の選択] チェック ボックスのアイコンのスタイルを設定します。 |
ms-vh2 |
height プロパティを設定します。 |
|
[種類] オプション、[名前] オプション、[更新日時] オプション、[更新者] オプション |
ms-vh-div |
padding-top プロパティを設定します。 |
s4-ctx |
ドロップダウン メニューの padding、position、display の各プロパティを設定します。 |
|
ms-vh2 |
height プロパティを設定します。 |
|
共有ドキュメントのテキスト |
ms-vb |
共有ドキュメントのコントロール グループのテキスト領域 (グループの下部) のスタイルを設定します。 |
[ドキュメントの追加] リンク |
ms-addnew |
[ドキュメントの追加] リンクに指定するスタイルを設定します。 |
写真の画像 |
ms-rte-layoutszone-outer |
チーム サイト ホーム Web パーツのコントロールの float プロパティを設定するリッチ テキスト エディター クラス。 |
ms-rte-layoutszone-inner |
チーム サイト ホーム Web パーツのコンテンツ領域のスタイルを設定するリッチ テキスト エディター クラス。 |
|
ms-rteThemeForeColor-5-5 |
Wiki の概要領域のテーマ前景色 (濃い青色) を設定するリッチ テキスト エディター クラス。 |
|
概要領域 |
ms-rte-layoutszone-outer |
チーム サイト ホーム Web パーツのコントロールの float プロパティを設定するリッチ テキスト エディター クラス。 |
ms-rte-layoutszone-inner |
チーム サイト ホーム Web パーツのコンテンツ領域のスタイルを設定するリッチ テキスト エディター クラス。 |
|
ms-rteThemeForeColor-5-5 |
Wiki の概要領域のテーマ前景色 (濃い青色) を設定するリッチ テキスト エディター クラス。 |
|
[このサイトを共有] リンク、[サイトのテーマの変更] リンク、[サイト アイコンの設定] リンク、[クイック起動のカスタマイズ] リンク |
ms-rteTable-0, ms-rteTableEvenRow-0, ms-rteTableEvenCol-0, ms-rteTableOddCol-0, ms-rteTableOddRow-0 |
Wiki の概要領域の下のコントロールのスタイルを設定するリッチ テキスト エディター クラス。 |