使用テキスト:はじめてのホームページ入門編 HTMLの書き方と使い方 (秀和システム)(amazonで購入)(正誤表)
| タグ | 終了 タグ |
意味 | オプション | 解説 | ページ | ||
|---|---|---|---|---|---|---|---|
| 基本 | <HTML> | </HTML> | HTML文書であることを宣言 | 5 | |||
| <HEAD> | </HEAD> | ブラウザ内に表示されない文書情報を記述 | 5 | ||||
| <BODY> | </BODY> | ブラウザ内に表示させる文字列やタグを記述。オプションでページの背景や文字色を決めることができる | bgcolor background text link vlink alink | 解説 | 5,36 | ||
| ヘッダ | タイトル | <TITLE> | </TITLE> | ブラウザに表示されるタイトル。ブックマーク(お気に入り登録)したときの見出しにもなる | 5 | ||
| 概要 | <META> | HTMLファイルに属性を追加します | http-equiv content keywords | 解説 | |||
| ボディ | 段落 | <H1>〜<H6> | </H1>〜</H6> | 見出しタグ。行位置の指定も可 | align | 解説 | 8 |
| <HR> | 段落の間に水平線を引く。終了タグなし | width size color | 解説 | 23 | |||
| <P> | </P> | 行間あり改行。段落の範囲と行位置を指定。終了タグ省略可 | align | 解説 | 20,21 | ||
| <BR> | 行間なし改行。終了タグなし | clear | 20 | ||||
| <DIV> | </DIV> | テキストの行位置を指定 | align id | 21 | |||
| テキスト | タグなし。通常のテキスト文にはタグは必要ない | 7 | |||||
| <B> | </B> | 文字を太字にする | 9 | ||||
| <U> | </U> | 文字にアンダーラインを付ける | 12 | ||||
| <I> | </I> | 文字を斜体にする | 11 | ||||
| <FONT> | </FONT> | フォントタグ。文字の大きさや色を決める | size color face | 10,13 | |||
| <!--注釈--> | 注釈。間に書いた文字は表示されない | 17 | |||||
| リスト | <UL> | </UL> | 「・」などの記号で始まるリストの範囲を指定 | type | 解説 | 24,25,29,30 | |
| <OL> | </OL> | 番号やアルファベットで始まるリストの範囲を指定 | type start | 26-28 | |||
| <LI> | </LI> | <UL>または<OL>の中で使用。 リストの箇条書き項目。終了タグ省略可 | type start | 24-30 | |||
| リンク | <A> | </A> | アンカータグ ハイパーリンクの範囲を指定 |
href name target title | 解説 | 52-57 | |
| 画像 | <IMG> | イメージタグ。終了タグなし | src border width height align vspace hspace alt id | 解説 | 31-35 | ||
| テーブル | <TABLE> | </TABLE> | テーブルの外枠と範囲を指定 以下のタグはこの中でないと使えない |
border width height align bgcolor background cellpadding cellspacing bordercolor | 37-47 | ||
| <CAPTION> | </CAPTION> | テーブルのタイトル | align valign | 43 | |||
| <TR> | </TR> | テーブルの行 | width height align valign bgcolor | 38,44,47 | |||
| <TD> | </TD> | テーブルのセル | width height align valign bgcolor background colspan rowspan | 38,41,44-47 | |||
| <TH> | </TH> | テーブルの見出しとなるセル | 39,41,44-47 | ||||
| フォーム | <FORM> | </FORM> | フォームの範囲と送信の設定を指定 | name id action method enctype target accept-charset accept | 解説 | なし | |
| <INPUT> | テキストの入力フィールドやボタン、ラジオボタン、チェックボックスなど | name id type value disabled | |||||
| <SELECT> | </SELECT> | セレクトメニューの範囲を指定 | name size multiple disabled value selected | ||||
| <OPTION> | セレクトメニューの項目。終了タグなし | id value | |||||
| <TEXTAREA> | </TEXTAREA> | 改行可能なテキストフィールド | name rows cols wrap disabled | ||||
背景に黄色をつけたタグが基礎中の基礎です。これらは必ず覚えた方が良いでしょう。
これらの他に知っていると便利なタグとしては、<BIG><SMALL><BLOCKQUOTE><SUP><S><TT>などがあります。これらは、現在のHTMLの定義では正式には使用しません。
参考:とほほのWWW入門>HTMLリファレンス
見やすいページ作りの基本は優しさです。
ホームページの目的は、来訪者に見てもらうことです。見やすいページ、読みやすいページを作ることで、来訪者は安心します。その安心を生むのが来訪者への優しさです。
優しい言葉遣いという意味ではありません。読みやすい文字や見やすいデザインを使うことで、誰もが利用できるように意識することです。
内容は個性的であって構わないのですが、背景の色や、文字の大きさが適切でないと、伝えたいことが伝わらなくなってしまいます。
ページを頻繁に、もしくは定期的に見直すことも大切です。単に間違いを直すということではなく、そこに進化がないとブックマークをして何度も来訪してくれる人がいなくなってしまいます。そこで、コンテンツ(内容)には、動的なものと静的なものの2種類を意識します。
動的なコンテンツとは、定期的に変化するものです。これがないと、いつみても変化のないホームページとなってしまい、リピーターが訪れなくなってしまいます。
例えば日記や行動記録、ブログや掲示板を使っても良いでしょう。簡単な近況報告や季節の変化に応じて背景やデザインの模様替えを楽しんでみても良いと思います。
静的なコンテンツとは、いつでも参照できる情報のことです。得意分野の情報であれば、最新の情報でなくても調べ物として利用されることがあります。
辞書や豆知識のように、豊富な知識や文章によって来訪者に長時間の滞在をしてもらったり、検索サイトからの有益な情報源として利用されます。
利用者に優しいホームページ、その指針となるのがアクセシビリティです。
個人が作るページの中には、技術や作品を見せることを主体にしていたり、趣味を前面に押し出したページがあります。しかし、それらを受け入れない人もいますし、企業のような公共性の高いサイトでは、そのようなわがままな演出は
利用者に迷惑がかかるだけです。
インターネットは個人の部屋の様に自由に飾りつけできますが、ガラス張りで通行人の誰もが目にすることができる、ということを忘れてはいけません。プライベート空間として許されるのは個人サイトの中だけです。しかし、情報を検索して開いたときに、アクセシビリティの悪さによって情報を得る前に来訪者が帰ってしまう(閉じてしまう)ページというのもあるのです。
利用者はどんな人か分かりません。年齢や健康状態、アクセスする場所によって受け方が違ってくるのです。
やってはいけない、やらないほうが良い事例を挙げますので、作ったページがそれに該当しないように確認してください。配慮の優先度が高い順に並べて置きます。
様々なホームページを訪れることで、どのようなページが見やすく、また見難いか判ってくるでしょう。その時に、自分の作ったページがどうか思い出してください。
広告や告知だけが古い日付のまま放置されていると、まるで死んでいるように寂しく感じられます。ホームページは生き物なのです。
時間を置くことで、文章の間違いに気づくだけでなく、少し身を引いた目線で見直すことができるのです。
よくある間違いは、自分の好きなことをあれもこれもやろうとして、ごちゃごちゃしてして利用者が置き去りにされてしまうことです。そんな時にはページの内容を複数ページに分けたり、メニュー(目次)を作って内容を整理することも必要です。
自分のためにページを作るのも良いのですが、それは誰に対してアピールしているのか、相手がいることを考え直すことも大切です。
慣れてきたら、色々なブラウザを使ってみてください。ブラウザによってはデザインが異なってしまうことがあるからです。これはアクセシビリティにも関係しています。ブラウザのバージョンアップで影響が及ぶこともあります。
特殊なプログラムを使ってしまうと、誰もが同じページを同じように利用できなくなってしまうこともあります。
そのような不備がないように、複数のブラウザを使って、自分の作ったページを定期的に見てみるようにしましょう。
| ●:タグ、オプションの解説/★:応用や実例のまとめ |
ホームページの背景に関する注意事項をまとめました。
参考:カラーチャート(色見本)
テーブルの細かな設定の違いを比較して見てみましょう。
<hr>についても記述しています。
基本的な配置、色分けによる見やすい表の作り方、テーブルの階層化、画像を使用した飾り枠など紹介しています。
テキストや段落の表現に関するタブについて一覧でまとめました。
<h1>
<font><div><center><p><br><blockquote>など。
リンクの仕方について、ディレクトリ構造についてもまとめました。