リストを作るHTMLでは、次のような3種類のリスト(箇条書き)を設定できます。
番号なしリスト番号つきリスト用語と説明のリスト番号なしリスト番号なしのリストを作るには、 ul要素を使います。 リストの項目には、li要素を使います。#spanend #spanadd <ul> #spanend <li>項目1</li> <li>項目2</li> ... #spanadd </ul> #spanend #spanadd見出しを作るには、hn要素(nは1〜6の数字)を使います。 <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> /pre> リスト全体は、<ul>〜</ul>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 見出しは、<h1>が大見出し、<h2>が中見出し、<h6>が最小の小見出しのように、 6段階の見出しのレベルに分かれており、 レベルが小さくなるほど、文字サイズが小さくなります。 リストという一要素ですので、 段落(p要素)の中に入れず、一度p要素を閉じてから、 リストを作ります。#spanend #spanadd <p>Webページを記述するには、</p> #spanend #spanadd <ul> #spanend <li>HTML(Hyper Text Markup Language)</li> <li>CSS(Cascading Style Sheet)</li> #spanadd </ul> #spanend #spanadd <p>などの技術が必要なります。</p> #spanend #spanadd <h1>自己紹介</h1> <h2>プロフィール</h2> <h3>リンク集</h3> /pre> リストの使い方リストを入れ子にすることができます。 入れ子にすると、行頭のマークが変わります。#spanend #spanadd <ul> #spanend <li>段落をつくる</li> <li>文字を装飾する</li> <li> <ul> <li>大きさを決める</li> <li>色を決める</li> </ul> </li> #spanadd </ul> #spanend #spanadd 番号つきリスト番号つきのリストを作るには、 ol要素を使います。 リストの項目には、li要素を使います。#spanend #spanadd <ol> #spanend <li>項目1</li> <li>項目2</li> ... #spanadd </ol> #spanend #spanaddリスト全体は、<ol>〜</ol>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 番号つきリストも入れ子にできます。 入れ子にすると、 番号の形式が「a,b,c,...」や「i,ii,iii,...」などに変わります また、それぞれのリストを組み合わせた入れ子もできます。 #spanend #spanadd <ul> #spanend <li>段落をつくる</li> <li>文字を装飾する</li> <li> <ol> <li>大きさを決める</li> <li>色を決める</li> </ol> </li> #spanadd </ul> #spanend #spanadd 定義型リスト辞書のように、「用語」と「その説明」のリストを作るには、 dl要素を使います。 リストの項目には、dt要素とdd要素を使います。#spanend #spanadd <dl> #spanend <dt>用語1</dt> <dd>説明1</dd> <dt>用語2</dt> <dd>説明2</dd> ... #spanadd </dl> #spanend #spanaddリスト全体は、<dl>〜</dl>で囲みます。 その中に、用語にあたる<dt>〜</dt>と、 説明にあたる<dd>〜</dd>で、リストを作ります。 表示するときには、dd要素の部分が字下げして表示されます。 dt要素とdd要素の組み合わせは、1組だけでなく、 必要なだけ組み合わせることができます。 #spanend #spanadd <dl> #spanend <dt>ユーザビリティ</dt> <dd>「使いやすさ」のこと。usability。</dd> #spanadd </dl> #spanend #spanadd 次へ進んでください。 }} |