読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

箇条書きと表、リンク

箇条書き <ul> <ol> <dl>

  • 必然性のある箇条書きを利用する


ul(unordered list)
順序が置き換わっても意味が伝わる並列な内容に使う。

  • 行頭マークは「黒丸」
<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>


ol(ordered list)
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。

  • 行頭は数字
<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>


dl(definition list)
「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するときに使う。

  • リスト全体に対する dl要素:definition list
  • 名称(用語)に対する dt要素:definition term
  • 説明文(定義)に対する dd要素:definition description
<dl>
  <dt>りんご</dt>
    <dd>赤い色をした丸い果物。</dd>
  <dt>バナナ</dt>
    <dd>黄色い色をした細長い果物。</dd>
</dl>


以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。

<dl>
<dt>06月11日</dt>
<dd>定義型リストと表組みの練習</dd>
<dt>06月10日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>06月09日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
</dl>

表組み

  • table 要素
  • caption 要素
  • tr要素:table row
  • td 要素:table data
  • th要素:table header


<body>
<h1>Web年表</h1>
<table border="1">
<caption>1999年以前</caption>
<tr>
<th>西暦</th><th>出来事</th>
</tr>
<tr>
<td>1989年</td><td>WWWの誕生</td>
</tr>
<tr>
<td>1993年</td><td>Mosaic 登場</td>
</tr>
<tr>
<td>1995年</td><td>Windows 95</td>
</tr>
<tr>
<td>1998年</td><td>Google 登場</td>
</tr>
</table>
</body>


文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。

リンク

Webは「リンク」こそ命。
リンクには3つの使い方があります。

  1. テキストリンク
  2. 画像リンク
  3. メールリンク
<a href="移動先のアドレス">◎◎◎のページへ移動</a>
<a href="移動先のアドレス"><img src="画像の住所" width="幅" height="高さ" alt="代替え文字"></a>
<a href="mailto:xxx@xxx.net">お問い合わせ(メールソフトが起動します)</a>


a:anchor
href:hyper reference

新規ウィンドウで開く
  • target="_blank"

水平線

hr:horizontal rule


キューピー」のページを「表示→スタイルシートスタイルシートを使用しない」にすると「水平線」が使われているのがわかります。



このように現在では、「hr」は「区切り線」として見せるのではなく、「意味を区切る」ことに利用されるます。
※いわゆる水平垂直の目盛りは「ruler:ルーラー」です。