■ WSJ21[GHP]
- XHTMLタグ講座で覚えよう
■Section 2-6■良いホームページ作成講座■
▼GHP講座2.6 − XHTMLタグを覚える
◎ 基本的なホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するタグ一覧◇◆◇
[list] ol li, ul li, dl dt dd
※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。
★順序有リスト - <ol> - Ordered List
★リスト項目 - <li> - List Item
先頭に「１，２，３･･･」の番号のついているリストを作る時に使います。
途中に挿入すると、自動で番号がずれます。
<h3>パソコンの起動方法</h3>
<ol>
<li>コンセントを差し込む</li>
<li>周辺機器の電源を入れる</li>
<li>パソコンの電源を入れる</li>
<li>起動し終えるまで待つ！</li>
</ol>
↓ 順序のあるリスト ↓
パソコンの起動方法
- コンセントを差し込む
- 周辺機器の電源を入れる
- パソコンの電源を入れる
- 起動し終えるまで待つ！
先頭文字の変更や開始番号の変更はCSSで指定します。
変更方法に「type属性」や「start属性」もありますがXHTML1.0までの旧規格です。
★順序無リスト - <ul> - Unordered List
★リスト項目 - <li> - List Item
箇条書きする時に使います。
<h3>パソコンの起動方法</h3>
<ul>
<li>コンセントを差し込む</li>
<li>周辺機器の電源を入れる</li>
<li>パソコンの電源を入れる</li>
<li>起動し終えるまで待つ！</li>
</ul>
↓ 順序のないリスト(箇条書き) ↓
パソコンの起動方法
- コンセントを差し込む
- 周辺機器の電源を入れる
- パソコンの電源を入れる
- 起動し終えるまで待つ！
CSSを使うことで先頭の「黒丸(disc)」を「白丸(circle)」や「黒四角(square)」に変えられます。
★定義リスト - <dl> - Definition List
★定義する語 - <dt> - Definition Term
★定義の説明 - <dd> - Definition Description
プロフィールや用語集を作る時などに使えます。
<dl>
<dt>ア行</dt>
<dd>アメンボ</dd>
<dd>アザラシ</dd>
<dt>カ行</dt>
<dd>カタツムリ</dd>
<dd>カマキリ</dd>
</dl>
↓ 順序のないリスト(箇条書き) ↓
CSSを使うことで定義語(dt要素)を太字にすると分かりやすいリストになります。
★･･･予告･･･
◇◆◇前頁の講座で解説したタグ◇◆◇
img a
◇◆◇今頁の講座で解説したタグ◇◆◇
[list] ol li, ul li, dl dt dd
◇◆◇次頁の講座で解説するタグ◇◆◇
[table] table caption tr th td (colgropup col thead tbody tfoot)
colgropup col thead tbody tfoot は使えないので省かせて頂きます。
◇◆◇表示例◇◆◇
いままでの物を打ち込めばこのようになります。
◎
サンプル６