2017年10月15日バックアップの旧・時代おくれです 現行サイトはこちら
|
|
（7c）：『時代おくれ』的記述の根拠 |
2003年7月18日作成／2003年12月22日更新／4加筆 |
|
（7b）の続きです。分割点に意味は ありません、適当に分割されています。 |
| ||
|
ページ全体の背景画はタグオプションの<body background="URI">で指定可能で、画像にGif、透過Gif、Jpegを使用する のであればほとんどのグラフィカルブラウザが対応しています（NN1がOKなんですから ^_^;）。 しかし、内容に関わる画像を背景画として提示す ると、背 景画には代替文字<alt>が指定できませんから、テキストブラウ ザや音声ブラウザで意味が通じなくなります。内容に関わる画像は背景画ではなく確実に 情報が伝わる通常画像として提示します。 内容に関わらない装飾目的のページ背景画の場合には、重ねる文字と画像のコントラ ストが確保できれば問題ありません。背景画と同系の背景色を指定しておけばさらに安心 です・・・と思ったら大間違い！ほとんどの場合、背景画の選び方に問題があります。 当然ですが、文字の背景にはモノトーン低コントラストの画像が適しています。しか し、折角提供するなら『見た目に美しい物を』と思うのが人情、人の常、解っていな がら目立ちすぎる画像を選んでしまうた め、背景画付きで文字の読み易いサイトは滅多にありません。アニメーションGifなど論 外で、非対応環境も確実に増えます。 文字の背景画は慎重に選択して下さい、と言うか・・・そんな『有るのか無いのか分 らない心霊写真のような背景画』は潔く使わない、のが一番ではないかと思う今日この頃(^^ゞ。 |
| ||
|
HTML4.01ではbackgroundによるテーブル背景画の指定は廃止されています から、CSSの<style="background: 背景色 url(画像 ファイル)">で指定します。ページ背景画と同じ理由で、内容に関わる画 像をテーブルを用いた部分的背景画として提供するのは好ましくありません。 テーブル背景画は、当然CSS非対応ブラウザでは表示できませんが、対応ブラウザでも 制限が発生します。<table style>によ るテーブル全体の指定はNN4で、<tr style>による行一括指定はNN4とOpera6で 無効ですから、<td style>でセル単位に指定する必要があります。 背景画に限りませんが隣接するセルに画像を貼り付けた 場合、NN4ではborderを省略するとセル間に隙 間ができます。都合が悪ければborder="0"を明示的に指定する必要があ り、背景色の場合も同様です。 テーブル背景画の場合も同系の背景色を合せて指定し ます。<style="background: 背景色 url(画像ファイル)">の背景色指定を省略しな い事が推奨されていますが、この指定はCSS非対応ブラウザでは意味がありま せん。CSS非対応ブラウザのためにbgcolor=""も併 せて指定する必要があります（style非対応なんですから ^_^;）。当然、テ ーブル背景色を変えられないNN2では無意味、ページ背景色のままです。 なお、NN4はbgcolorよりstyleを優先する にも関わらず、そのstyleにバグが有るため背景色が正しく表示できま せん。そのため画像ファイルが無い（URLが間違っている）場合、予期 せぬ表示になりますから、画像は確実に管理する必要があります。 さらに、NN4とIE3は入れ子にした<table>でも 親<table>の背景画が有効になってしまう＝背景色が無効になるの で、子や孫<table>の背景色か背景画をstyleで指定する必要があります。ただし、 これをやるとIE3が落ちやすくなるような気が・・・(^_^;)。 |
| ||
|
ブロック要素<h>をブロック要素<table>内に配置する事は認められますか ら、見出し<h1〜6>を<table>と組み合 わせてパネル的演出を行う事が可能です。 アイキャッチ効果も高く、画像を使用した場合と異なり標準文字サイズにあわせて大 きさが変わります。テーブル背景色は非推奨<bgcolor>で指定してい ますが、色が無効な環境でも、枠線の太さや囲む 範囲を変えて見出しレベルの違いが表現可能です。もちろん、すべての視覚 補強が失われても、本来の構造的意味<h>に影響はありません。 通常<h>は行送りとセットですが、その行送り分がボックス内に挿入されてしま い罫線枠が下に広がるため、背景色が『見出し＋もう1行』に着いてしまいます。気になら ない、逆に解り易いと言う意見も無くはありませんが、個人的に間延びした画面が嫌いな ので、CSSで行送りを制御しています。CSS非対応ブラウザとNN4は制御不能で、不細工な ままです(T_T)。IE3も制御不能ですが、行送りをボックス外に挿入するので制御の有無 に関わらず文字部分のみに背景色が着き、あまり気になりません。 なお、同様の効果は文字背景色のインラインスタイル指定<style="background: カ ラーコード">でも可能ですが、当然CSS非対応ブラウザでは反映さ れず、NN4では<h2〜6>にのみ有効で<h1>と 本文では無効という明かな障害が発生します。 テーブル背景色の代わりに背景画を使用する事も可能で、ベタ塗りの背景色と比較し て『体裁・見た目』と言う点では優れています。文字との十分なコントラストが得られ、 形や模様ではなく色を目的とする背景画であれば、背景色で代替される非対応ブラウザと の表示ギャップも小さいため、問題は少ないと思います（苦しい言い訳だ ^_^;）。 『時代おくれ』でもタイトルと見出しの<h>とナビゲーションバーに使用されて いますが、同じ画像を使い回す、小さ目の画像を横方向に反復表示させる、として総量を 抑えています。また、ブラウザ毎の文字サイズ設定の違いを考慮して、背景に吸収される 縦の循環グラデーションにしています（文字サイズを拡大すると意味がわかります）。 |
| ||
|
HTML4.01では<hr color="">による区切り線の色指定は廃止されています から、色は<style="color: カラーコード">で 指定します。 自動文書処理で<hr>が意味の区切りとして使用される可能性があるので、単純 な装飾目的の使用は控え、意味の区切りとなる場所に直接<body>要素として使用し ます（心がけています ^_^;）。なお、直 接<body>要素とした場合、Opera6.0では<align="">で位置を指定する事がで きませんが、修飾目的で使用しなければ特に位置を指定する必要もない でしょう。 IEでは太さ1の色付き区切り線は視認性もよくデザイン上もすっきりした印象を与えま すが、<hr>に色が着かないOperaとNNでは影付き線の影だけが表示されたような目 立たない区切り線になり、さらにOperaは区切 り線に行を与えない（行間に線を引く）ので上下のコンテンツが密着し ます。そのため、区切り線、特に太さ1を多用したページはブラウザ毎にイメージが大きく 変わってしまいます。 |
| |
|
強調<em>はデフォルトの斜体 を<font size="5" color="#00ffff（シアン）">で視覚的に補強します。 <em>はほとんどのブラウザで英文の慣例に従い斜体で表現されますが、私は読み 辛い日本語の斜体が大嫌いで(‾_‾)、日本語的にも斜体は強調と言うイメージではありま せん。CSSで斜体を制御して通常書体とし色で強調を表現する事も可能ですが、色が利用 できない状況で強調が伝わらなくなり、同時に<strong>と区別した表現が難しくな ります。斜体も拡大する事で読みやすくなり強調の意図もはっきりするので、<font>で 拡大し（ついでに）色も指定します。もちろんお約束の非推奨です。この<size>指 定はブラウザによって文字の大きさが異なると言う問題を含んでいますが、試行錯誤の結 果、5に落ち着きました（4.5が指定できれば一番良かったんですが）。 より強い強調<strong>はデフォルト の太字を<font size="5" color="#ff00ff（マゼンダ）"で視覚的に補強します。 <strong>はほとんどのブラウザで読み易い太字で表現され標準の文字サイズでも 問題はありません。日本語的にも太字は強調！です。そこで、強調は<strong>のみ を使用し文字サイズは変えないと言うアイディアもあったのですが、２種類の強調を注目 <em>と禁止・決定<strong>に使い分ける事を選びました。<em>を拡大 してしまった都合上、強調の重要度が逆転しない様に<strong>も拡大します。文字 色は赤ではなく、黒背景でもコントラストの得られるマゼンダにしています（赤だから注 意なのか、目立つから注意なのか・・・シアンの方が目立っているような気がする・・・^_^;）。 この文字の拡大（しすぎ）は苦し紛れの対応だったのですが、見慣れると強調が構造 はもちろん、色、形、大きさで力強く表現され多様な環境で意図が伝わるナイス（死語 ^_^;） な手法ではないかと自画自賛しています。また、単調な画面に色を着ける効果もあり、強 調するとなぜか一回り文字が小さくなり強調の意味が失われるNN4対策にもなっています。 貴方も早く見慣れて下さい(^^ゞ。 なお、強調を『』付きで表現するブラウザは確 認できなかったので『』付きを強調しない（『』を語句の強調に使用しない） と言う警告は無視します。仮に存在しても体裁が悪いだけで強調の意味は失われませんし、 『『強調』』になって判り易いかも・・・ (^^ゞ |
| |
|
<a href="">リンクの見出しは、見出し だけでも意味のある単位で指定します。『こちら』や『mail』のようなアバ ウトな語句では音声ブラウザのリンクリストで選択が難しくなります。『・』など論外で す。私の能力を超えた問題で具体的にはわかりませんが、巡回ロボットを使ってリンクだ けを抽出した場合にも困るはずです。 Opera以外のブラウザで画像は拡縮が効かないので、特に理由が無ければリンクに画像 を使用するのは避けるのが安全なのですが、先方からバナーの指定があった場合、W3Cバ ナーの様にシンボリックな意味を持つ場合、そして本人が使いたい場合(^_^;)、画像を使 用することになります。画像をリンクに使用する 場合、絶対にaltを指定する、視認性に問題がある場合はテキストも併用する事 が必要です。altを指定しないと音声ブラウザやテキストブラウザでリンクとして意味を持ちません。 また、『画像／<img src>』で説明した様に、altによる代替文字は画像と並列 で表示される『解説文』ではありませんが、altがないと意味不明なリンク画像を見かけ ます。秘密の入り口ならともかく、情報の量と質、視認性に問題のある画像はリンクには 不適切です。多くの場合（製作者の性格か？）、リンク画像の多用と煩雑なページ構成・ サイト構造はセットになっています。他府県人は『奇怪な生物の （しかも可愛くない！）イラスト』を見て、『これは有名な●●●だ、地域を代表する生 き物だから特別な意味がある、入り口だ！』とは普通思いません。『○○県立○○館／入 り口』とテキストも併用して他府県人にも閲覧させてください(T_T)。しかし、公 的マスコットキャラクターは、どうして可愛くないのだろう？ |
| |
|
ページ内の特定の位置にリンクする場合、リンク先に<a name="">で名前をつけ ますが、<table>内に<a name="">を 配置すると、IE3は整形に失敗しテーブルが表示されなくなりますから、 直接body要素として<table>外に記述します。 しかし、『時代おくれ』ではページ全体を<table>でレイアウトしている都合上、 直接body要素として名前を付けられる物がありません。<a name=""></a>で 何も無い場所に名前を付けるのは不安な ので、<a name=""><br>また は<!-- --></a>として『改行位置』や『コメント』に名前を付けていま す。この行為に意味があるのかどうかは良くわかりません(^_^;)。 また、<a name="">は単独で使用できると受け取れる解説文が有りますが、理屈 的に変だし、XHTML的記述にも反するので、</a>は省略しません。 なお、IE4では<a name>で飛ばして も正しい位置が表示されない場合が多々あります。その付近には飛ぶの ですが、再現性もなくその都度『適当な位置』に移動してしまいます。今のところ対処方 法は解かりません（『時代おくれ・コミック』が実例です T_T）。 |
| |
|
『（5）：記述全般の留意点』の『JavaScriptの自粛／他の手段で実現可能なJavaScriptは 使用しない』に該当するので、『戻る』ボタンに はJavaScriptを使用せず、構成上の前ページを明示的な戻り先URIに指定し ます。表示されていた前のページに戻る機能はブラウザにあるので困りません。また、『戻る』 で検索結果に戻ってしまうとか、あるページの上位階層・トップページに辿り着けない、 と言う事態も防ぐ事ができます。 スクリプト（history back）を使用した１個の『戻る』ボタンは、複数のページから リンクされていてもそれぞれに対して『戻る』ですが、同じページに複数ヶ所からリンク してしまうと明示的に指定するにはリンク元のページの数だけ『戻る』ボタンを用意しな ければならなくなります。 サイト名は忘れましたが『複数箇所から参照されているのでトップに戻る（笑）』ボ タンを見かけました。なるほど名案、その手があったか、と思ったのですが悔しいので真 似はしません（そうです、私は偏屈者 (^^ゞ）。 で、数が多くなると作る側も大変ですが、閲覧側も混乱します。そして、その多数のリン クはサイト構成変更時に手作業で張り直さなくてはなりません。それは困るし、嫌ですか ら、サイト内で複雑なリンクを張らなくても良い様に、サイト構成を工夫し、『思いつき リンク』は極力避けます。 『言うのは簡単、みんな出来ないから困っている、お前は出来るのか！？』と言う話 になりますが、私も出来ません。この話題は 『（9）：検討中の問題／サイト構造』に続きます(^^ゞ。 |
|