メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。
なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。
＜第91号＞ 今週のおさらい
毎週金曜日配信 What's New 2004年4月16日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
■ HTML講座 第33回 --- 略語・専門用語の扱い
■ CSS講座 第12回 --- 絶対位置の妙技
- ◆
HTML講座 --- 略語・専門用語の扱い
- 難解な略語や専門用語に終始したページは幾つか存在します。なんだか高尚に見えて近づきがたい印象を与えています。しかしそれは決して高尚でもなく権威的でもなくアクセシブルではありません。
- 今や深く生活の中に溶け込んでいるインターネットの現実を考えると、「誰もが閲覧でき、誰でも理解できること」 は Web制作者にとって大変重要な課題です。
- 各分野における専門性には、略語や専門用語がつき物です。それを否定する気はまったくありません。しかしながら、そうした用語の意味を知らずに閲覧している訪問者もいることを忘れてはいけません。
- 誰でもはじめは「初心者」なのだということを知ってほしいものです。
- ひたすら難しい用語を羅列することで、さも専門性を高く見せ、高尚であるがごとく振舞うのは鼻持ちにならないばかりか、単なる「自己満足」でしかありません。
- そうならないために、誰にでも理解できるよう各用語にアクセスできるようなコンテンツを作成しましょう。
- ■ 略語の扱い
- 幸いなことに
HTML には、略語のフルスペルをサポートする要素が２つ用意されています。１つが発音することができない略語として利用する abbr要素で、もう１つが、１つの単語として発音することができる acronym要素です。
- ２つの要素を利用法は以下のとおりです。
-
<abbr title="World wide Web Consotium">W3C</abbr>
<acronym title="Local Area Network">LAN</acronym>
- 両者とも一般的な視覚系ブラウザでは要素に触れるとツールチップが表示されます。
- 左の図は、
Mozilla Firefoxブラウザで abbr要素に触れたところです。
- (なお、
Microsoft Internet Explorer は、abbr要素でツールチップは表示されません。)
- このようにして、略語のフルスペルを表示させることで、閲覧者に情報を提供します。なお、音声ブラウザでは
title属性で示された内容が読み上げられます。
- ■ 用語の扱い
- 例え、
abbr要素や acronym要素などで略語のフルスペルを表示できたとしても、閲覧者がその意味を知らなければ意味がありません。略語であっても基本的には専門用語と変わりがないので、やはりその意味を明確に示すことが求められます。
- スクリプトを使って、各用語に触れるとその意味が主縷言する方法も考えられますが、スクリプトに対応していない環境もあるのでアクセシブルとは言えません。
JavaScriptを使った用語解説のサンプル- もっともポピュラーで比較的簡単に専門用語などにアクセスできる手法は、同じページの欄外 (一般的にはページの一番下) に必要と思われる用語集などを用意して、用語にアンカーを設定します。アンカーは、
<a name="ABC"> というようにリンク先となる名前を設定し、その場所にリンクするために、<a href="#ABC"> とします。
- 具体的なサンプルを用意しましたので参照してください。
- 同一ページの用語集にアクセスするサンプル
- また、あらかじめ用語などを集めたページを作成し、用語が出現する都度に該当する項目へアクセスさせる方法もあります。例えば、
HTTP などの用語は、そのリンクをクリックすることで、該当するページの該当する項目へ誘導します。
- 当サイトでも、Webに関する専門的な用語が多々登場します。なるべく分かりやすく説明していますが、まだまだ発展途上といったところです。
- 略語や専門用語に関しては今後も力を入れて、誰にでも理解できるように努力したいと思っています。「使いやすい」 ということは、「分かりやすい」 ということにもつながります。使いやすさを追求する「ユーザビリティ」の一環からも、略語や専門用語の扱いには、十分に配慮していきたいものです。
- PageTop
- ◆
CSS講座 --- 絶対位置指定の妙技
- Webページは通常、
HTMLデータの記述順に上から順次レンダリングされます。つまり「相対的な位置」によって表示されるわけです。
- また、Webブラウザでは ブロックレベル要素の前後で改行して出力されるため、それを横に並べて表示させることができません。
- 多くの Web制作者はこうした点を踏まえて、レイアウトを構築する際にテーブルで組むことが一般的に利用されています。しかし、テーブルにはさまざまな難点があるため、
W3Cでは好ましくないとしています。
- スタイルシートでは、「絶対位置」を指定することで、こうした難問から回避することができます。今回は「絶対位置指定」の妙技について解説します。
- ■ 絶対位置とは
- 絶対位置は、ある要素をはじめから表示させる位置を指定するもので、他の要素の並び方に左右されることがありません。そのため、ブロックレベル要素を複数横に並べて表示させることが可能なため、レイアウトを構築するにも便利に使えます。
- スタイルシートで絶対位置を指定するためには、
position属性を利用しますが、あわせて位置も指定しなければなりません。
- 位置の指定は、
top、left、right、bottom などの属性を利用します。
- つまり、
position属性は、要素を絶対位置に定義するために用い、画面の上下左右からの位置を指定するために、top、left、right、bottom属性を使うことになります。position属性の値は、absoluteとします。
- 絶対位置指定の具体的な書式は以下のとおりです。
-
div { position: absolute; 絶対位置の定義
top: 100px; 画面の上からの位置指定
left: 80px } 画面の左からの位置指定
- 絶対位置指定のサンプル
- ■ 絶対位置を重ねる
- 絶対位置指定は、他の要素の位置に関係なく指定した場所で描画させるものです。このことを逆手にとって要素を重ねて描画させることもできます。
- つまり、絶対位置指定の要素を「レイヤー」として利用することができます。レイヤーは層状になるため、幾つか重ねて描画します。
- 絶対位置を重ねる 画像とテキストを重ねたサンプル
- (具体的な構文は、今週のメールマガジン「第91号」をお読みください。)
- ■ 絶対位置の注意点
- 何度も述べつとおり、絶対位置は他の相対的に描画される要素とは関係なく指定した位置で描画します。このとき、設計を誤ると要素が重なり合い、結果的にひどい目にあいます。
- 絶対位置利用の失敗例
- 絶対位置を利用するためには、全体の位置関係を十分に考慮して設計する必要があります。
初版公開日 2004年4月16日
Copyright（C） 2002-2004 banban@scollabo.com