このページの短縮URL(リンク用) 第02章:リストの作成 – オンライン無料パソコン講座 | PCセミナー

第02章:リストの作成

第02章:リストの作成」の学習内容です。

§02-01…リストの作成・準備

(01) 「リストの練習」というフォルダーを作成してください。続けて以下のようなソースを持つWebページ「index.htm」をフォルダー内に作成してください。 <?xml version="1.0" encodi...

§02-02…箇条書きリストの作成<ul><li>

「主要3科目」の下に「国語」「数学」「英語」の箇条書きリストを作成する予定です。 (予想完成図) (01) リストの作成をする場合には<ul>タグを使います。<ul>タグ内にリスト項目を入力するの...

§02-03…連続番号リスト<ol>

(01) 「主要3科目」を番号付きリストにします。この場合は「ul」ではなく「ol」タグを使います。 <h1>リストの練習</h1> <h2>主要3科目</h2> <...

§02-04…リスト全域とリスト項目

(01) リストの各項目部分に背景色を設定しましょう。番号や記号の部分はリスト項目外として認識されています。 li{ background-color:#FF99FF; } (02) リスト項目の上部に0.5文字分の余白...

§02-05…段落番号・箇条書き記号の位置{list-style-position}

(01) 現在<ol>内の段落番号が<li>ボックスの外部にセットされています。これを<li>ボックスの内部にセットします。{list-style-position}プロパティの値を「...

§02-06…リストの中にリストを作成する

(01) 主要5科目の「国語」の配下として「現代文」「古文」というリストを新規に作成します。この場合、「<li>国語~~</li>」の「~~」の部分にリストを追加するのです。Webページのbody...

§02-07…第二レベルのリストにCSSを適用する

(01) さて、第二レベルリストのフォントの色を赤にするにはどうすればよいのでしょうか?class属性を使うのがひとつの方法ですが、子孫セレクタを使う方法がより簡単です。ulの中にあるulを操作するので「ul ul」とい...

§02-08…記号のタイプを変更する

(01) 第二レベルのリスト記号を「■」に変更します。記号を変更する場合には 「list-style-type」プロパティを用います。値は「square」です。「ul ul」セレクタ内のCSSを以下のように更新してくださ...

§02-09…リスト記号に画像ファイルを使用する

(01) 画像ファイル「check01.gif」をサイト(フォルダー)内にコピーしておいてください。この画像ファイルのサイズは「16×16」pxです。 (check01.gif) (02) この画像ファイルを第二レベルの...

§02-10…全称セレクタ(*)

(01) すべての文字間隔を「+0.5文字」にします。すべてを指定するセレクタは「*」です。もちろん「h1,h2,h3,p,ul,…」のようなセレクタを利用しても良いのですが、面倒です。以下のCSSを追加してからブラウジ...