[リスト] ([スタイル ビルダ] ダイアログ ボックス)
更新 : 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
参照
概念
参照
[フォント] ([スタイル ビルダ] ダイアログ ボックス)
[テキスト] ([スタイル ビルダ] ダイアログ ボックス)