[リスト] ([スタイルビルダ] ダイアログボックス)

[アーティクル]
09/30/2008

更新 : 2007 年 11 月

[スタイルビルダ] ダイアログボックスの [一覧] ページでは、<OL> タグと <UL> タグを使用して作成したリストを書式指定するカスケードスタイルシート (CSS) のスタイル属性を定義できます。これらの属性を HTML 要素に直接適用することも、CSS スタイル規則に追加することもできます。

リスト属性をページの HTML 要素に直接適用するには

HTML デザイナのデザインビューで HTML ドキュメントを開き、書式を指定する要素を選択します。
[書式] メニューの [スタイル] をクリックして [スタイルビルダ] ダイアログボックスを表示します。
[スタイルビルダ] ダイアログボックスの左側のペインで [一覧] をクリックします。

右側のペインに [[リスト] ([スタイルビルダ] ダイアログボックス)] が表示されます。

デザインビューで選択されている要素を書式化すると、ページの HTML マークアップに CSS スタイル属性が挿入されます。HTML ビューに切り替えて、挿入された新しいスタイル属性を確認します。

外部スタイルシートで定義された CSS スタイル規則にリスト属性を追加するには

既存の外部スタイルシートを開き、該当するスタイルのセレクタに続く中かっこ ({ }) の中にカーソルを移動します。
[スタイル] メニューの [ビルドスタイル] をクリックして [スタイルビルダ] ダイアログボックスを表示します。
[スタイルビルダ] ダイアログボックスの左側のペインで [一覧] をクリックします。

右側のペインに [[リスト] ([スタイルビルダ] ダイアログボックス)] が表示されます。

メモ :
[スタイル] メニューは、外部 CSS スタイルシートを開いて編集するときに表示されます。スタイルルールのセレクタに続く中かっこの中にカーソルを移動すると、[スタイル] メニューの [ビルドスタイル] オプションを使用できるようになります。

CSS スタイルセレクタを目的の要素の CLASS プロパティとして割り当てると、外部スタイルシートで定義されている CSS スタイルクラスを Web ページの <BODY> 要素内の要素に適用できます。

[スタイルビルダ] ダイアログボックスの [一覧] ページでは、次のオプションを使用できます。

処理手順

UI 要素

[一覧]

一覧の種類を指定する属性を設定します。[箇条書き] または [箇条書き解除] を指定できます。この属性は通常、<LI></LI> タグまたは <OL></OL> タグに影響するスタイルに適用されます。[<設定なし>] (オプションを選択しない)、[箇条書き]、または [箇条書き解除] のいずれかを選択します。たとえば、[箇条書き解除] を選択すると、次のコードが追加されます。

LIST-STYLE-TYPE:none

[箇条書き]

次の表に示した属性は、箇条書きの書式を設定します。箇条書きには、番号、文字、ローマ数字、標準の箇条書きイメージ (白丸、黒丸、四角)、またはカスタムの箇条書きイメージがあります。

メモ :
[箇条書き] の各スタイルは、一覧の種類として [箇条書き] を選択すると使用できるようになります。

[スタイル]
箇条書きのスタイルを制御する属性を設定します。8 種類のスタイルが利用できます。[<設定なし>] (オプションを選択しない)、[白丸]、[黒丸]、[正方形]、[1 2 3 4 …]、[i ii iii iv ...]、[i ii iii iv ...]、[a b c d ...]、または [A B C D ...] のいずれかを選択します。たとえば、一覧の種類として [箇条書き]、スタイルとして [正方形] をそれぞれ選択すると、次の CSS マークアップが挿入されます。

LIST-STYLE-TYPE:square
[位置]
テキストを基準に箇条書きの位置を制御する属性を設定します。テキスト位置の 2 つの異なる書式があります。[<設定なし>] (オプションを選択しない)、[外側 (インデント指定)] (テキストをインデントする)、または [内側 (インデントなし)] (テキストをインデントしない) のいずれかを選択します。たとえば、スタイルとして [正方形]、一覧の種類として [箇条書き]、位置として [外側 (インデント指定)] (テキストをインデントする) をそれぞれ選択すると、次の CSS マークアップが挿入されます。

LIST-STYLE-TYPE:square; list-style-position:outside
[行頭段落文字のユーザー設定]
箇条書きスタイルとして、用意された 8 種類のスタイルではなく、イメージを設定します。[行頭段落文字のユーザー設定] を選択すると、[イメージ] と [なし] が使用できるようになります。
[イメージ]
箇条書きスタイルとしてイメージを設定します。フィールドにパスとイメージ名を入力するか、省略記号ボタン (...) をクリックして [行頭段落文字イメージの選択] ダイアログボックスを表示し、イメージの場所を指定します。たとえば、一覧の種類として [箇条書き]、位置として [外側 (インデント指定)] (テキストをインデントする)、行頭文字のスタイルとして [行頭段落文字のユーザー指定] をそれぞれ選択し、[イメージ] フィールドに「bullet.jpg」と入力すると、次の CSS マークアップが挿入されます。

LIST-STYLE-POSITION:outside

LIST-STYLE-IMAGE:url (bullet.jpg)
[なし]
箇条書きスタイルのイメージ値を None に設定します。たとえば、一覧の種類として [箇条書き]、位置として [外側 (インデント指定)] (テキストをインデントする)、行頭文字のスタイルとして [行頭段落文字のユーザー指定] をそれぞれ選択し、[イメージ] フィールドに「bullet.jpg」と入力すると、次の CSS マークアップが挿入されます。

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)

次に、[スタイルビルダ] ダイアログボックスに戻り、[行頭段落文字のユーザー指定] として [なし] を選択すると、次の CSS マークアップが挿入されます。

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none