しまいとは？/ プロミス
[ 327] やってしまいがちなテクニック
[引用サイト] http://www.rju666.com/web/mistakable.html
|
HTMLファイルを作成する上で、どのような記述を行うかというのはHTMLの作成法をどのように学んだかに大きく依存すると思われます。 HTML文書はその他のプログラム言語と違い、おかしな記述や間違った文法が存在しても表示できる場合が多いこともこのことに拍車をかけているといえるでしょう。 また、仕様書を読めばどのような記述が最適なのかはある程度把握できますが、間違った用法などを勧めているサイトなどの存在が原因で「正しくない記述」であることを知らない場合もあるかもしれません。 仕様書どおりに記述しなくても表示できるのはユーザーエージェント（インターネットエクスプローラや、ネットスケープナビゲータなどのブラウザのこと）が、親切でそうやってくれているだけです。 HTMLの記述法を紹介しているサイトは数多いですが、間違った記述や間違った説明をしているサイトも少なくないようです。 難しい決まりごとを知らなくても簡単に作成できる所為か、ゲームのtipsのように、「×ボタンを長く押せばジャンプの距離が伸びるよ」「わー、ホントだー」みたいなノリで、「このタグを使えばこんな風に表示できるよ」「わー、ホントだー」とやってしまうのもわからなくはありません。 ユーザーエージェントの多くはマークアップされた文字列を斜体や太字などの何らかの形で強調するように設定されています。しかし、見栄えは「たまたまそのユーザーエージェントがそのようなレンダリングをしている」だけであり、今後ともそうであると言う保障はないのです。 段落の見栄え整形のためにインデントを用いたい場合は、スタイルシートを使い、左右にマージンを設定することをお勧めします。 とくにありませんが、スタイルシートの使い方がわからないから、などで簡単に扱えるインデントであることは確かです。 必ずしもインデントされるわけではないことと、ユーザースタイルシートなどによってレンダリングが大きく異なる場合が存在することです。 前者の場合は見栄えが若干異なるだけかも知れませんが、後者の場合、ユーザーが指定した「引用のレンダリング」であるために、引用であると認識される事によりどこからどこまでがあなたの文章で、どれが他人の文章なのかの判別が難しくなることが考えられます。 しかしながら、単なる字下げテキストの機構としてBLOCKQUOTEを用いてきた著者もいるため、そのような著者の意図を守るため、ユーザエージェントは、デフォルトのスタイルとしては引用符を挿入しない必要がある。 テーブルレイアウトの場合、ほとんどのユーザーエージェントが同じようなレンダリングを提供しているため制作者の意図に近い表現をする事が可能です。 table要素は表をマークアップするための要素であるため、音声ブラウザなどでは思ったとおりの順番に解釈してくれない場合があります。 見た目の順番と記述内容の順番が異なる場合が多いため、管理者がソースの編集が困難になるかもしれません。 テーブルのサイズが決定されるまで、レンダリングが開始されないので中身の表示が全て終わるまで閲覧できないといった不便さもあります。 古いユーザーエージェント等では、table要素の入れ子などが原因でハングアップすることもあるようです。 ユーザーエージェントによってはスタイルシートの解釈が異なるため、ずれたり重なったり崩れる場合があります。 ただし、その場合は、ネットスケープ4.xなどでの表示がレイアウトされていないもの（恐らく縦にずらりと並ぶ形）になります。が、ネットスケープ4.xなどの利用者は（全てがそうであるとはいえませんが）見た目よりも軽さを重視していると思われますので問題ないでしょう。 可読性を優先するならば配置に対するこだわりもそこそこに、環境に依存しない見やすいリソースを提供することを思慮した方が有益だと思います。 HTMLドキュメントとCSSの関係を考えてみると、HTMLドキュメントで文書を作成し、CSSで見易くする、という概念が理解できるでしょう。そこから考えるとレイアウトありきの文書作りが不自然であることに気付くと思います。レイアウトとは文書のために存在しているのです。 正しい記述とは少し関係ないですが、正しい記述を心掛けていてもおかしな表示になる場合があります。いろんなユーザーエージェントで確認することを推奨します。 近い見栄えに拘る必要性はさほどないと思われますが、見易さが損なわれている場合などには注意が必要です。 HTMLを「プログラム」と言ってみたり、スタイルシートのタグと言ってみたりしてしまうと言いたいことが正確に伝わらなかったりすることがあります。 HTMLはハイパーテキストマークアップランゲージのことですからマークアップ言語ということになります。プログラム言語ではありません。 この間違いはそれほど致命的なことではありませんが、嘲笑されることもありますので「HTML」と呼んでおくと無難だと思われます。 どこにどの要素が配置できるのかをあまり意識していない人が多いようです。ブロックレベル要素は直前のブロックレベル要素を閉じ、新しいブロックレベル要素を作ります。従って以下のような記述はできません。 一行目のp要素は開始preタグで閉じられていますが、終了preタグ以降に最後の終了pタグに対する開始pタグが存在しません。三行目の先頭に開始pタグを記述する必要があります。 ブロックレベル要素をインライン要素の中に記述することはできません。従って以下のような記述はできません。 インライン要素の中にブロックレベル要素を記述することはできません。従って以下のような記述はできません。 フロウは特殊で、ブロックレベル要素でもインライン要素でも内容とすることができます。ins要素、del要素、div要素がそれに該当します。従って以下のような記述ができます。 最初のp要素は開始pタグで閉じられていますが、終了pタグ以降に最後の終了pタグに対する開始pタグが存在しません。終了delタグの後ろに開始pタグを記述する必要があります。 要素の開始を表す開始タグと要素の終わりを表す終了タグが存在します。<と>で括って記述します。要素のことをタグと呼ばれる方も多いようですが、混乱の原因になり易いので無闇になんでもタグと呼ぶのは避けた方がよいでしょう。 スタイルシートで、セレクタに対し適応できる事項のことです。プロパティなどもひっくるめてタグと呼ぶ方もおられますが、区別したほうが混乱が最小に済むと思われます。 h1〜6要素の数値は小さいほど大きく表示するレンダリングを提供するユーザーエージェントが多いことは確かですが、強調したいものを大きくするのではなく、見出しの位置関係を表す事が好ましいです。つまり、h1要素の中にh2要素の項目が存在しているのであり、h2要素の中にh3要素の項目が存在しているような形になるべきだということで、具体的には、 とあるように、見出しレベルを飛ばすことは一概に悪いとは言い切れないようですが、ソースの可読性を考慮するならば見出しレベルを飛ばさないほうがよいでしょう。 簡単なソースをコピー＆ペーストするだけでサイトがオシャレになったような気がしたり、高度なテクニックを使っているような錯覚を起こすことが多いようですが、様々な理由から嫌がられている小手先技があります。 「自分はウザいと思ったことないよ」という方もいるかと思いますが、自分のサイトは見慣れているのでそう感じないだけかも知れません。また、他の人のサイトの場合でも「凄い！」という視点で見ているからウザくないだけで、見やすいかどうかを考えずに見ているからかも知れません。 統計をとったわけではないですが、このような意見がある、こう思う人がいる、ということを知っていただければ幸いです。 iframe要素は、マウスホイールでスクロールしているときにウインドウ全体のスクロールをiframe要素内のウインドウで止めてしまうバンカーになってしまうことがありえます。 新しいウインドウで開くことは、ユーザ側で選択できますが、同じウインドウで開くという選択肢を奪ってしまいます。新しいウインドウで開きたい場合は閲覧者が自らそうしますので、余計なお世話だと思われることが多いようです。 「『他の人のサイトは新しいウインドウで開くべき』と誰かに聞いた」という話も聞きますが、それは恐らく教えてくれた人がフレームの問題と誤解しています。 「自分のサイトに少しでも長くいてほしいから」という人もいますが、そのようなことをしなくても閲覧者が気に入れば何度も見に来てくれます。また逆に「新しいウインドウで開く」からもう来ない人もいるかも知れませんのでなお注意すべきかと思われます。 ニュースサイトなど「元の記事と合わせて見る事が前提なサイト」では「別のウインドウを立ち上げた方が便利」という主張もよく見かけますが、便利かどうかは閲覧者が判断すべき事柄であるといえます。 カーソルを変更するプロパティです。普段見慣れているカーソルは直感的に「これはリンクである」などと認識することに役立っています。それが違ったものとなると「どこがクリックできるのかわかり難い」と思わせる要因になりえます。 「イラストサイトなのでカーソルがイラストの邪魔になってほしくない」という人もいるようですが、イラストサイトの閲覧者は、邪魔だと思えばカーソルをブラウザ外に置くでしょうし、また、imgセレクタのみにカーソル変更を用いるという手段もあります。 「標準のフォントサイズでは大きい」と思う人もいるようですが、それぞれ閲覧者は「自分にとっての見易いサイズ」を標準に設定しているので余計なお世話だと思うむきがあるようです。 「デザインが崩れるから」という人もいますが、可読性を損なって見栄えを優先させるのは本末転倒だと思われます。いくら綺麗なサイトであっても、読むのに疲れるようでは「また見たい」という気持ちもそがれてしまうようです。 blink要素、marquee要素はそれぞれネットスケープナビゲータ、インターネットエクスプローラの独自拡張の要素です。レンダリングはそれぞれ文字を点滅させる、文字を移動させるです。 可読性を損なう上に、ちらついて他の文章を読むときに気が散るなどの理由により嫌がられることが多いようです。 インターネットエクスプローラの独自拡張のプロパティです。スクロールバーの色合いを変更することが可能です。 スクロールバーで文書全体の長さや、未読の長さなどを見る人もいますし、スクロールバーを使って上下させる人もいます（全てのマウスにマウスホイールがついているわけではありません）。スクロールバーの配色が見辛いということに不便を感じる人も多いようです。 普段使っているユーザーエージェントの外観というものは、見慣れているために安心する、という部分があるようで、インターフェイスが変わると落ち着かない、というのも嫌がられている原因です。 まず、驚くという理由があります。急に鳴り出すのでびっくりするのは当然かも知れません。人前などで「恥ずかしい」というケースもあるようです。 どうしても音楽を付けたい場合は、再生と停止の権限を閲覧者に与えるとそれほど不快感を与えないと思われます。 「ステータスバーにメッセージを流す」「リンク先の説明を表示する」などはブラウザのHTML表示部分以外に何かできるということで凄いことをやっているような錯覚を起こすようです。 ですが、ステータスバーに表示される情報により項目の残りを見たり、リンク先のURLを確認したりできないので嫌がられます。 2003.8.18 【スタイルシートのpositionプロパティを用いたレイアウト】「絶対値の指定によるレイアウト」と間違った情報を記載していたため修正。【スタイルシートのfloatプロパティプロパティを用いたレイアウト】と統合して【スタイルシートを用いたレイアウトのメリット】【スタイルシートを用いたレイアウトのデメリット】とした。スタイルシートを用いたレイアウトの崩れを回避する方法に不適切な方法を記載していたため修正。 |
プロミスのサイトです。
