日文文書処理

ここでは、箇条書きの表示を変更してみる。具体的には

1. 〈dl要素〉の文字サイズと表示位置を調整する（→dl要素の表示を変更する）
2. 〈ol要素〉の数字の部分の表示を変更し、表示位置を調整する（→ol要素の表示を変更する）
3. 〈ul要素〉のマーカーの形を変更し、表示位置を調整する（→ul要素の表示を変更する）

ことを目的にする。

dl要素の表示を変更する

まず、項目と説明との区別をはっきりさせるために、〈dl要素〉の項目部分（〈dt要素〉）の文字サイズを大きくし、太さも太くすることにする。

〈dt要素〉の文字サイズを適当なものに変更しよう。

〈dt要素〉の文字サイズを変更するには、

dt {
  font-size: [文字サイズ] ;
  font-weight: [文字の太さ];}

と書けば良い。

〈dt要素〉と〈dd要素〉の表示位置を変更しよう。

dl要素の表示位置を調整する

次に、テキストの表示位置を調整する。ここでは、〈h2要素〉にあわせて〈dt要素〉の左に「2em」のマージンを設定することにする。また、箇条書きの項目がくっつきすぎているように感じられるので、箇条書きの説明の部分（〈dd要素〉）の下にも「1em」のマージンを設定する。具体的には、次にように書けば良い【参考→余白（マージン）を設定する】。

dt {
  font-size: [文字サイズ] ;
  font-weight: [文字の太さ];
  margin-left: 2em ; }
dd {
  margin-bottom: 1em ;}

ol要素の表示を変更する

〈ol要素〉の数字の部分の表示を算用数字以外のものに換えてみる。〈ol要素〉の数字の部分を変更するには、

ol {list-style-type: [数字の書式] ;}

と書けば良い。

数字の書式の指定

数字の書式は、以下のようなキーワードで指定する（ブラウザによっては表示できない場合もある）。

• list-style-type: upper-roman ;（大文字のローマ数字）
• list-style-type: lower-roman ;（小文字のローマ数字）
• list-style-type: upper-latin ; / list-style-type: upper-alpha ;（大文字のアルファベット）
• list-style-type: lower-latin ; / list-style-type: lower-alpha ;（小文字のアルファベット）
• list-style-type: decimal-leading-zero ;（"0"のついた数字）
• list-style-type: cjk-ideographic ;（漢字の数字）
• list-style-type: hiragana ;（あいうえお...）
• list-style-type: katakana ; （アイウエオ...）
• list-style-type: hiragana-iroha ;（いろは...）
• list-style-type: katakana-iroha ;（イロハ...）
• list-style-type: lower-greek ;（ギリシア文字）

実際に数字部分の表示を変更する

〈ol要素〉の数字の部分の表示を好みのものに変更してみよう。

ol要素の表示位置の調整

次に、テキストの表示位置を調整するため、〈h2要素〉にあわせて〈ol要素〉の左に「2em」のマージンを設定してみよう【参考→余白（マージン）を設定する】。

ul要素の表示を変更する

〈ul要素〉のマーカーの形を変更してみる。〈ul要素〉のマーカーの形を変更するには、

ul {list-style-type: [マーカーの形] ;}

と書けば良い。

マーカーの形の指定

マーカーの形は、以下のようなキーワードで指定する（ブラウザによっては表示できない場合もある）。

• list-style-type: none ;（なし）
• list-style-type: disc ;（小さな黒い丸）
• list-style-type: circle ;（小さな白い丸）
• list-style-type: square ;（小さな黒い四角）

実際にマーカーの形を変更する

〈ul要素〉のマーカーの表示を好みのものに変更してみよう。

ul要素の表示位置の調整

次に、テキストの表示位置を調整するため、〈h2要素〉にあわせて〈ul要素〉の左に「1em」のマージンを設定してみよう【参考→余白（マージン）を設定する】。