HTMLタグ講座

使用テキスト：はじめてのホームページ入門編 HTMLの書き方と使い方 （秀和システム）（amazonで購入）（正誤表）

基本的なタグ

　背景に黄色をつけたタグが基礎中の基礎です。これらは必ず覚えた方が良いでしょう。
　 これらの他に知っていると便利なタグとしては、<BIG><SMALL><BLOCKQUOTE><SUP><S><TT>などがあります。これらは、現在のHTMLの定義では正式には使用しません。

　参考：とほほのＷＷＷ入門＞HTMLリファレンス

ホームページ作りの基本姿勢

　見やすいページ作りの基本は優しさです。
　ホームページの目的は、来訪者に見てもらうことです。見やすいページ、読みやすいページを作ることで、来訪者は安心します。その安心を生むのが来訪者への優しさです。
　優しい言葉遣いという意味ではありません。読みやすい文字や見やすいデザインを使うことで、誰もが利用できるように意識することです。
　 内容は個性的であって構わないのですが、背景の色や、文字の大きさが適切でないと、伝えたいことが伝わらなくなってしまいます。
　
　 ページを頻繁に、もしくは定期的に見直すことも大切です。単に間違いを直すということではなく、そこに進化がないとブックマークをして何度も来訪してくれる人がいなくなってしまいます。そこで、コンテンツ（内容）には、動的なものと静的なものの2種類を意識します。

　動的なコンテンツとは、定期的に変化するものです。これがないと、いつみても変化のないホームページとなってしまい、リピーターが訪れなくなってしまいます。
　例えば日記や行動記録、ブログや掲示板を使っても良いでしょう。簡単な近況報告や季節の変化に応じて背景やデザインの模様替えを楽しんでみても良いと思います。

　静的なコンテンツとは、いつでも参照できる情報のことです。得意分野の情報であれば、最新の情報でなくても調べ物として利用されることがあります。
　辞書や豆知識のように、豊富な知識や文章によって来訪者に長時間の滞在をしてもらったり、検索サイトからの有益な情報源として利用されます。

アクセシビリティ

　利用者に優しいホームページ、その指針となるのがアクセシビリティです。
　 個人が作るページの中には、技術や作品を見せることを主体にしていたり、趣味を前面に押し出したページがあります。しかし、それらを受け入れない人もいますし、企業のような公共性の高いサイトでは、そのようなわがままな演出は 利用者に迷惑がかかるだけです。
　 インターネットは個人の部屋の様に自由に飾りつけできますが、ガラス張りで通行人の誰もが目にすることができる、ということを忘れてはいけません。プライベート空間として許されるのは個人サイトの中だけです。しかし、情報を検索して開いたときに、アクセシビリティの悪さによって情報を得る前に来訪者が帰ってしまう（閉じてしまう）ページというのもあるのです。
　 利用者はどんな人か分かりません。年齢や健康状態、アクセスする場所によって受け方が違ってくるのです。
　 やってはいけない、やらないほうが良い事例を挙げますので、作ったページがそれに該当しないように確認してください。配慮の優先度が高い順に並べて置きます。

• リンクが途切れている。（リンクの確認はホームページ作りの基本。外部へのリンクも定期的に確認すること）
• トップページで自動的に音が出る。（注意書きをして次のページから音を出したり、音のないページを用意するのが良い）
• 文字の大きさやフォントを固定しない。（CSSを使う場合に注意）
• 文字の判読ができないような背景や色を使っている。（自己満足では情報とは言えない）
• 文字で表現できる部分を画像で表現している。（文字のサイズが固定されて見難く、また読み込みに時間がかかることになる。視覚障害者が使う文字読上装置に対応しない）
• Flashを使ってメニューを作っているが、Flashを使えない人が見るためのメニューが用意されていない。（新技術を当たり前のように使わないこと）
• 外部プログラムをダウンロードさせたり、使わせたりすること。（ウイルス等への安全性が確保できない場合がある）
• 特定のアプリケーションでしか開けないファイルを配布すること。（付属のソフトであっても他者が持っているとは限らないし、マクロを含む場合セキュリティ上の問題も発生する）
• 画像ファイルを大きなサイズのまま使っている。（画像の見た目のサイズだけではなく、ファイル容量を小さくする）
• JPEG、GIF以外の画像ファイルを使っている。（他のファイル形式では特定のソフトがないと開かない）
• 自作のソフトウェアや容量の大きなファイル、大量にファイルを配布する場合にファイルの配慮がない。（圧縮したり1つにまとめてダウンロードさせる）
• サイトの構成が分かりにくい。（トップページから各ページへリンクをしたり、各ページへのリンクをまとめたページを作って置く）
• フレームの使用。（検索サイトから飛んできた場合にメニューが表示されない場合の対処をしておく）

メンテナンス

　様々なホームページを訪れることで、どのようなページが見やすく、また見難いか判ってくるでしょう。その時に、自分の作ったページがどうか思い出してください。
　広告や告知だけが古い日付のまま放置されていると、まるで死んでいるように寂しく感じられます。ホームページは生き物なのです。
　時間を置くことで、文章の間違いに気づくだけでなく、少し身を引いた目線で見直すことができるのです。

　よくある間違いは、自分の好きなことをあれもこれもやろうとして、ごちゃごちゃしてして利用者が置き去りにされてしまうことです。そんな時にはページの内容を複数ページに分けたり、メニュー（目次）を作って内容を整理することも必要です。
　自分のためにページを作るのも良いのですが、それは誰に対してアピールしているのか、相手がいることを考え直すことも大切です。

　慣れてきたら、色々なブラウザを使ってみてください。ブラウザによってはデザインが異なってしまうことがあるからです。これはアクセシビリティにも関係しています。ブラウザのバージョンアップで影響が及ぶこともあります。
　特殊なプログラムを使ってしまうと、誰もが同じページを同じように利用できなくなってしまうこともあります。
　そのような不備がないように、複数のブラウザを使って、自分の作ったページを定期的に見てみるようにしましょう。

★背景の色と画像について

　ホームページの背景に関する注意事項をまとめました。

　参考：カラーチャート（色見本）

●テーブルと水平線

　テーブルの細かな設定の違いを比較して見てみましょう。
　 <hr>についても記述しています。

★テーブル事例集

　基本的な配置、色分けによる見やすい表の作り方、テーブルの階層化、画像を使用した飾り枠など紹介しています。

●テキスト用タグ一覧

　テキストや段落の表現に関するタブについて一覧でまとめました。
　 <h1> <font><div><center><p><br><blockquote>など。

●アンカー（リンク）

　リンクの仕方について、ディレクトリ構造についてもまとめました。

リンク

素材：まなざしの工房、神楽工房

戻る