[HTML]マークアップの方法とbody要素

はじめに

今日はbody要素の記述方法（マークアップ）の基本と、body内の代表的な要素について勉強しました。

body要素のマークアップ

見出しと段落

body要素の内容は、主に「見出し」と「段落」から成り立ちます。

• 見出し(Heading)→内容が一目で把握できるもの
• 段落(Paragraph)→見出しで表せる文節のかたまり

パラグラフ・ライティング

この「見出し＋段落」で表す内容が「パラグラフ」となります。
わかりやすく書くためには、パラグラフ・ライティングの考え方が必要になります。

論文の小構造は、基本的に文とパラグラフ（段落）、そしてそれらの関係が命です。英語圏では paragraph writing という言葉が、文章作成とほとんど同じ意味で使われているほどです。
小論文の書き方

参考→第３回プロから学ぶ「わかりやすい文章の書き方」

見出し：heading

• ページ内容を表す１行を記述
• 優先順位のレベルでマークアップする
• 見出しの拾い読みでも、ページの意味が分かるようにする

初期のブラウザは、見出しの数はh7まででした。
これは人間の一度の記憶量が７（+-2）であるからです。
この７、あるいは５を基準とした単位は、人間が直感的に把握できる数として、グローバルナビゲーションの数などに応用できます。

段落：paragraph

基本的に２行以上の文章に指定

迷ったらp

ブロック下に必ず１行分の空きができる

箇条書き：list

見出しと段落だけでは可読性が落ちがちであり、効果的に箇条書きを使います。

<ul>un_ordered list

並列な内容に用います。
果物の種類

• りんご
• バナナ
• みかん

<ol>orderd list

順序がある内容に用います。
コーヒーの作り方

1. 豆を煎る
2. 豆をひく
3. お湯をわかす

<dl>difinition list

名称とその定義をセットにしてリスト化するとき使います。
日付で明示する更新情報などにも使われます。

• <dl>definition list …リスト全体に対する
• <dt>definition term…名称に対する
• <dd>definition description…定義に対する

りんご

赤いあまずっぱい果物

3/1

ブログ開設

3/2

ブログ更新

画像の挿入：img

<img src= "画像の場所" widht="幅" height="高さ" alt="代替文字">

img=image
src=sorce
alt内の代替文字は、画像検索から参照されるため、現在重要な要素です。

表組み：table

• table要素
• caption要素:テーブルの見出し
• tr要素:table row(row:並び、畑の畝)
• th要素:table header(表のヘッダ部分を定義)
• td要素:table data(表内のデータを定義)

<table border="1">
<tr>
<caption>クラス別男女数</caption>
<th>　</th><th>１組</th><th>２組</th>
</tr>
<tr>
<th>男</th><td>３人</td><td>４人</td>
</tr>
<tr>
<th>女</th><td>４人</td><td>２人</td>
</tr>
</table>

クラス別男女数

	１組	２組
男	３人	４人
女	４人	２人

文字と枠の修飾はCSSで行う。いまは便宜的にborder=1を表示。

水平線：horizontal rule

<hr>

いわゆる水平垂直の目盛り…ruler、ルーラー。
見た目的な区切り線として使われるより、↓

---

現在では、「意味を区切ること」として利用されることが多い。
例→キューピー:スタイルシートを非表示にすると水平線が見える
(Firefox:表示→スタイルシート→スタイルシートを使用しない)

リンク：link

リンクには３つの使い方があります。

1. テキストリンク→テキストにリンクを設定
2. 画像リンク→画像にリンクを設定
3. メールリンク→メールソフトを起動

<a href="移動先のアドレス">ページを移動</a>
<a href="移動先のアドレス"><img src="画像の住所" width="幅" height="高さ" alt="代替文字"></a>
<a href="mailto:hoge@hoge.net">お問い合わせ</a>
<a href="tel:00011112222">モバイル環境ではクリックで電話が起動</a>

a : anchor
href : hyper reference

新規ウインドウで開く

target="_blank"

現在はウインドウを別にするのが主流。

相対パスと絶対パス

相対パス(relative path)

起点となる現在地から、目的のファイルやフォルダを記述する方法。
以下のようにファイルを指定します。

• 同じ階層→「./ファイル名」※./省略可
• 下の階層→「./フォルダ名/ファイル名」
• 上の階層→「../ファイル名」
• ２階層上→「../../ファイル名」

ひとつ上の階層にあるフォルダの中のファイルにアクセスするには、
「../フォルダ名/ファイル名」と記述します。

絶対パス(absolute path)

装置内の最上位階層から、目的のファイルやフォルダまで、階層を「/」で区切って表現します。