文書構造と表組み
文書構造:まとめ
文書構造とは
「文書構造」つまり、ページ内容のツリー構造を指します。
この文書構造を理解するには「パラグラフの概念」を理解する必要があります。
HTMLの記述の仕方
1行目の「<html>」の入力の仕方を順序で説明すると以下のようになります。
まず、開始タグを入力。
- 「<」左アングル・ブラケット:小なり(lesser than)
- html
- 「>」右アングル・ブラケット:大なり(greater than)
続いて、
- 「enter(return)」キーを2回押し、1行空ける
続いて、終了タグを入力。
- 「<」左アングル・ブラケット:小なり(lesser than)
- html
- 「/」スラッシュ
- 「>」右アングル・ブラケット:大なり(greater than)
その結果、以下のような「開始タグと終了タグ」のセットができます。
<html> </html>
使用するキーは、
文書構造に必要な要素
- タイトル
- 見出しと本文
- 箇条書き(番号つき、番号なし)
- 補足説明の画像
<h1>結論:大見出し</h1> <p>要約</p> <h2>結論:検証</h2> <p>解説</p> <ul> <li>検証の項目</li> <li>検証の項目</li> <li>検証の項目</li> </ul> <p>解説</p> <ol> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> </ol> <p><img src="画像の住所" width="画像の幅" height="画像の高さ" alt="代替え文字"></p>
- ul:unordered list
- ol:ordered list
定義型リスト
定義型リスト definition list
- dl要素で定義し、用語(definition term )を示すdt要素と、その説明(definition description)であるdd要素を含める
dl:definition list
dt:definition term
dd:definition description
本文内容を解説する箇条書きではなく、語句の説明の場合に使用します。
<dl> <dt>リンゴ</dt> <dd>赤くて丸いバラ科の果物</dd> <dt>ミカン</dt> <dd>黄色くて皮の薄いミカン科の果物</dd> <dt>メロン</dt> <dd>黄緑色で表面に溝があるウリ科の果物</dd> </dl>
以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。
<dl> <dt>11月21日</dt> <dd>表組みの練習</dd> <dt>11月20日</dt> <dd>定義型リストの練習</dd> <dt>11月19日</dt> <dd>HTMLの基本構造の入力練習</dd> <dt>11月16日</dt> <dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd> </dl>
表組み
- 表組みは、あくまでも表で表示する内容に利用します
- レイアウトには使いません
- 畑に種を巻いた時にできる一筋(table row)
表組み
table:table
tr:table row
th:table head
td:table description
<table border="1" summary="カリキュラム内容のイメージ"> <tr> <th>科目</th> <td>内容</td> </tr> <tr> <th>国語</th> <td>正しい文書構造を理解する(パラグラフの概念)</td> </tr> <tr> <th>算数</th> <td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td> </tr> <tr> <th>理科</th> <td>力学からコンピュータの描画を理解する</td> </tr> <tr> <th>社会</th> <td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td> </tr> <tr> <th>英語</th> <td>Webのバックグラウンドから理解するために必要な言葉の理解する</td> </tr> <tr> <th>図工</th> <td>クロッキーと図解、デザインのルールを理解する</td> </tr> </table>
文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。
最終的には「CSS」設定後、削除します。
アドレス
- 住所や電話番号」など、ページ内容の管理者の住所を明示するために使用します
- 一般的には「著作マーク (c)」を明示する場合にも利用されています
- HTML5では、「著作マーク (c)」には「small要素」を使用します
<address>フェリカテクニカルアカデミー<br> 〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル2F 連絡先: 03-3981-7201</address>
リンク
Webは「リンク」こそ命。
リンクには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"
この属性は、HTMLの解釈の変遷により、使わないほうが良いといわれたりしましたが、HTML5では使用可能になっています。
<html> <head> <title>はじめてのHTML入力練習</title> </head> <body> <h1>結論:大見出し</h1> <p>要約</p> <h2>結論:検証</h2> <p>解説</p> <ul> <li>検証の項目</li> <li>検証の項目</li> <li>検証の項目</li> </ul> <p>解説</p> <ol> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> </ol> <p><img src="画像の住所" width="画像の幅" height="画像の高さ" alt="代替え文字"></p> <dl> <dt>9月25日</dt> <dd>フェリカテクニカルアカデミーWeb実践講座開講</dd> <dt>9月26日</dt> <dd>HTMLの基本構造の入力練習</dd> <dt>9月27日</dt> <dd>定義型リストと表組みの練習</dd> </dl> <table border="1" summary="カリキュラム内容のイメージ"> <tr> <th>科目</th> <td>内容</td> </tr> <tr> <th>国語</th> <td>正しい文書構造を理解する(パラグラフの概念)</td> </tr> <tr> <th>算数</th> <td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td> </tr> <tr> <th>理科</th> <td>力学からコンピュータの描画を理解する</td> </tr> <tr> <th>社会</th> <td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td> </tr> <tr> <th>英語</th> <td>Webのバックグラウンドから理解するために必要な言葉の理解する</td> </tr> <tr> <th>図工</th> <td>クロッキーと図解、デザインのルールを理解する</td> </tr> </table> <address>フェリカテクニカルアカデミー<br> 〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル2F 連絡先: 03-3981-7201</address> </body> </html>
パラグラフの概念
基本的に論文やレポートにおけるパラグラフは、「ひとつのテーマを示す」単位です。
パラグラフは単に「読みやすい長さで切る」のではありません。
この考え方は、Webライティングをする上でとても重要です。
パソコンやモバイル機器の中で見る「文字」は、それほど読みやすいものではありません。
ですから、必然性がなければ読みたくないものなのです。
では、読むか・読まないかの判断をどこでするのでしょうか。
そこには「知覚心理」が影響します。
ここでは深く言及しませんが、デザインにおける2大要素「色彩」と「文字」は、この「知覚心理」が原点です。
トピックセンテンス
- トピックセンテンスは、そのパラグラフの中に書かれているテーマを一言(一文節)で表したもの
- トピックセンテンスは通常パラグラフの最初に置かれる
- トピックセンテンスを見出しとして扱う
トピック以外の文
- 見出し以外の本文(段落)
- 並列した文(同じ重要度の文)→番号なし箇条書き
- 時系列で並んだ文(時間軸に沿って並べないと意味が通じない文)→番号付き箇条書き
- 論理を追う構造の文(因果関係などの論理を追った文)→定義型箇条書き
「見出し+本文(段落)+箇条書き」による文書構造を最小単位と考えることが「パラグラフ」です
1ページの中には、いくつかのパラグラフがあり組み合わせて構造を作ります。
流れとしては、紙媒体は「序論」→「本論」→「結論」という風に組み立てます。
Web媒体の場合は、「結論」→「本論」→「結論」となり、最初に眼に触れるものが「結論」とするように構成します。
「序論」は、Web媒体ではまわりくどい表現として敬遠され、読んでもう事の少ない部分になってしまいます。