§02-08…記号のタイプを変更する
(01) 第二レベルのリスト記号を「■」に変更します。記号を変更する場合には 「list-style-type」プロパティを用います。値は「square」です。「ul ul」セレクタ内のCSSを以下のように更新してください。 ul ul{ color:#FF0000; list-style-type:square; } (02) 「lis...
§02-07…第二レベルのリストにCSSを適用する
(01) さて、第二レベルリストのフォントの色を赤にするにはどうすればよいのでしょうか？class属性を使うのがひとつの方法ですが、子孫セレクタを使う方法がより簡単です。ulの中にあるulを操作するので「ul ul」というセレクタを使います。以下のCSSを追加してからブラウジングしましょう。 ul ul{ color:#FF0000; }
§02-06…リストの中にリストを作成する
(01) 主要5科目の「国語」の配下として「現代文」「古文」というリストを新規に作成します。この場合、「<li>国語～～</li>」の「～～」の部分にリストを追加するのです。Webページのbody内部を以下のように更新してください。なお、リストの中にリストを作成する場合には、左にスペースかタブを入れておくとわかりやすいでしょう。 &...
§02-05…段落番号・箇条書き記号の位置{list-style-position}
(01) 現在<ol>内の段落番号が<li>ボックスの外部にセットされています。これを<li>ボックスの内部にセットします。{list-style-position}プロパティの値を「inside」にします。 ol{ background-color:#FFFF99; padding:1em; padding-le...
§02-04…リスト全域とリスト項目
(01) リストの各項目部分に背景色を設定しましょう。番号や記号の部分はリスト項目外として認識されています。 li{ background-color:#FF99FF; } (02) リスト項目の上部に0.5文字分の余白を作成しましょう。リスト項目の標準の高さは1文字分ちょうどであることがわかります。 li{ background-col...
§02-03…連続番号リスト＜ol＞
(01) 「主要3科目」を番号付きリストにします。この場合は「ul」ではなく「ol」タグを使います。 <h1>リストの練習</h1> <h2>主要3科目</h2> <ol> <li>国語</li> <li>数学</li> <li>...
§02-02…箇条書きリストの作成＜ul＞＜li＞
「主要3科目」の下に「国語」「数学」「英語」の箇条書きリストを作成する予定です。 (予想完成図) (01) リストの作成をする場合には<ul>タグを使います。<ul>タグ内にリスト項目を入力するのです。以下のようにWebページのbody内を更新してください。 <body> <h1>リストの練習<...
§02-01…リストの作成・準備
(01) 「リストの練習」というフォルダーを作成してください。続けて以下のようなソースを持つWebページ「index.htm」をフォルダー内に作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
§01-12…その他の要素に背景を設定する
(01) 「grd03.gif」をフォルダー内にコピーしておきましょう。 (grd03.gif 20×20) (02) この画像をh1内の背景にしましょう。CSSのh1セレクタ内を以下のように更新してからWebページをブラウジングしてください。 h1{ color:#0000FF; border:thin solid #00FFFF; backg...