Webデザイン・マナーブック

編著者 エ・ビスコム・テック・ラボ
出版社 (株)毎日コミュニケーションズ
出版日 2001年4月2日
判型 B5変形 (182 x 234) / 400ページ
価格 2,400円
ISBN 4-8399-0523-1

はじめに - Foreword -

21世紀に入った今、企業はもちろんのこと一般のユーザの間でもWebページ(ホームページ)は制作ができてあたりまえの存在になってきているように思えます。

ところが、 “Webページのマナー” を知らないことが原因で、さまざまな問題が発生しているという現実があるとしたら…。制作段階での立ち往生。作ったは良いが、制作者が気付いていない数々の問題。また、見た目はスマートでも、HTMLソースが見られたものではないWebページも…。

“HTMLの文法を守る” ことは基本的なWebページ制作上のマナーですが、文法を守っていたとしてもトラブルが発生することがあります。Webページの商業利用が進む中、ビジュアルデザインや動画、フラッシュなども重要なWebページのコンテンツです。が、一方で、それのみに傾注しアクセシビリティが考えられていない場合、ユーザが情報にアクセスできない。そんな状況も少なくありません。

どうですか? あなたのWebページは?

HTMLの規格書を読めば “タグのルール” を知ることはできます。エディタを使えば、HTMLを知らなくてもWebページを作ることはできます。しかし規格書やエディタだけではわからないことが実はたくさんあるのです。どのタグをどう組み合わせて使えばよいのか。複数の選択肢があるときどの方法を選べばよいのか。様々な受信環境で、どのようなことが起きるのか…。

本書では、そんな疑問に対する答えを可能な限り網羅しました。

誰でもがWebページというメディアを持てる。

そんな時代だからこそ、いま。

△TOP

もくじ - Contents -

第1章 WebとHTMLの歴史
Webの理念
HTMLで記述することになった理由
コンテクストの記述とアクセシビリティ
ビジュアルデザインの始まり
ブラウザによる独自タグの拡張
ユーザビリティの必要性
タグ乱開発の影響
HTMLの標準化
第2章 WebとHTMLの現在
現在のWebの役割
多様化したコンテンツに対応するために
HTML4
スタイルシート
外部オブジェクトとスクリプト
XMLとXHTML
HTMLを知らない制作者たち
第3章 Web制作に求められる作法
Web制作に求められる4つの要素
要素のバランス
第1章 HTMLの基本ルール
正しいHTMLの書き方
HTMLは適当に書いても大丈夫だと聞いたのですが、していいことと、悪いことがあるのですか?
HTMLタグの書き方を知る
HTMLソースの基本構造を知る
見た目のデザインをコントロールするタグ
使わない方がよいHTMLタグがあると言われますが、なぜ?
使わない方がよいと言われるタグと属性
使わない方がよいと言われるタグを
       スタイルシートで書き換える
効率的なスタイルシートの利用
スタイルシートを利用した方がよいと言われますが、なぜ?
スタイルシートの基本的な使い方
スタイルを一括管理する
ブロックレベルとインラインレベル
<h1>や<p>を使うとタグの前後が勝手に改行されるのですが、なぜ?
ブロックレベルと
   インラインレベルの違いを知る
スタイルシートを使った
   レベルのコントロール
XHTMLに移行するためのHTML
これからはXHTMLを使う方がよいと言われたのですが、なぜ?
XHTMLのルールに従ってHTMLを書く
第2章 ページ情報
イントロページの是非
イントロページを作るのはよくないと言われたのですが、なぜ?
イントロページ作成のポイント
イントロページの役割
ページのリンク関係
前後のページやトップページへのリンクが必要だと言われますが、なぜ?
コンテンツ内にリンクを用意する
ページのリンク関係を記述する
タイトルの重要性
登録したブックマークを見てもどんなページだったか思い出せないのですが、なぜ?
タイトルの基本ルール
わかりやすいタイトルを付ける
検索エンジン用の情報
検索エンジンでページを見つかりやすくすることができますか?
検索エンジン用の情報を記述する
第3章 フォント
<font>タグを使わないフォントコントロール
<font>タグは使わない方がいいと言われますが、なぜ?
<font>タグを使わずに
   フォントをコントロールする
コンテクストを記述するタグで
   フォントをコントロールする
見出しタグを正しく使う
見出しには見出しタグ<h1>〜<h6>を付けた方がよいと言われますが、なぜ?
見出しタグを使う
見出しの階層に従ったタグ付けを行う
フォントサイズを調整する
フォントサイズを細かく指定するのはよくないと言われますが、なぜ?
ユーザが調節できる
   フォントサイズの指定方法
フォントサイズを固定する指定方法
WindowsとMacintoshのフォントサイズ
OSやブラウザによってフォントサイズが変わると言われますが、なぜ?
WindowsとMacintoshにおける    
見た目のフォントサイズの違い
ブラウザのデフォルトフォントサイズの違い
フォントサイズの違いを考慮した
         ページ制作のポイント
フォントの種類をコントロールする
OSやブラウザによってページの印象がひ弱な感じになってしまうのですが、なぜ?
ユーザ環境に存在するフォントを使う
フォントをイメージ化する
文字化け
文字が化けると言われるのですが、なぜ?
HTMLソースの文字コードを指定する
第4章 テキスト
改行をコントロールする
テキストの改行に<p>タグを使ってはいけないと言われますが、なぜ?
改行をコントロールする
ブラウザによる改行を防ぐ方法
段落タグの正しい使い方
すべての段落に<p>タグを付けた方がよいと言われますが、なぜ?
段落タグがいらない場合といる場合
段落と段落の間隔をコントロールする
段落と段落の間のスペースの大きさをコントロールすることはできますか?
マージンとパディングを知る
段落の間隔をコントロールする
行の横幅をコントロールする
テキストがウィンドウの横幅いっぱいに広がって読みにくいのですが、なぜ?
行の横幅をコントロールする
行揃えを整える
段落の右端の文字がまっすぐに揃わないのですが、なぜ?
行揃えをコントロールする
左右のマージン
本文の位置を見出しよりも下げたいのですが、 <blockquote>は使わない方がよいと言われました、なぜ?
左側のスペースをコントロールする
行間をコントロールする
行と行の間隔が狭くてテキストが読みづらいのですが、なぜ?
行間をコントロールする
イメージに対する文字揃え
イメージとテキストの中央をきれいに揃えることができないのですが、なぜ?
イメージとテキストを中央で揃える方法
イメージに対するテキストの回り込み
イメージの周りに入れたテキストがくっつきすぎて 文字が読みづらいのですが、なぜ?
イメージとテキストの間隔をコントロールする
第5章 テーブル
テーブルを使ったレイアウトの問題
ページをレイアウトするとき、テーブルを使わない方がよいと言われますが、なぜ?
複雑な構造のテーブル
テーブルによるフォームの分割
表示に時間のかかるテーブル
ページの一部が表示されたきり、いつまでたっても残りの部分が表示されないのですが、なぜ?
表示に時間がかかるわけ
より早く表示するためには
テーブル内のスペース
テーブルでレイアウトしたイメージやテキストがくっつきすぎて読みづらいのですが、なぜ?
セルごとのコンテンツの間隔をコントロールする
テーブルの罫線
とても細い罫線や、角の丸い罫線を見かけますが、どのようにしているのでしょうか?
HTMLタグによる罫線のコントロール
テーブルによる罫線のコントロール
スタイルシートによる罫線のコントロール
角の丸い罫線を作る
テーブルの横幅
ページの横幅が大きすぎて、ウィンドウを右スクロールしないと見ることができないのですが、なぜ?>
ウィンドウサイズの影響を受けないレイアウト
ウィンドウサイズに合わせて変化するレイアウト
ウィンドウとの間に余白なしでバーを入れたページを見かけますが、どうやって作るのでしょうか?
ウィンドウに接したバーを作る   
(背景イメージを利用する方法)
ウィンドウに接したバーを作る    
(背景イメージを使わない方法)
第6章 イメージ
最適な画像フォーマット
ファイルサイズが小さくならなかったり、イメージが汚くなったりするのですが、なぜ?
画像フォーマットの特徴
画像作成アプリケーションの選択
画像フォーマットの使い分け
GIFの特許問題
GIFはあまり使わない方がよいと聞いたのですが、なぜ?
イメージの代替テキスト情報
イメージについて説明するテキストを書いたほうがよいと言われますが、なぜ?
イメージについてのテキスト情報を入れる
イメージの表示サイズ
イメージが表示されるたびにレイアウトが変わるので、ゆっくりテキストを読むことができないのですが、なぜ?
イメージの表示サイズを指定する
背景イメージのコントロール
スクロールしても背景の動かないページを見かけるのですが、なぜ?
背景イメージの基本的な入れ方
背景イメージの表示位置を固定する
きれいな透過イメージの作り方
イメージを透過すると輪郭が汚くなってしまうのですが、なぜ?
きれいな透過GIFを作る
PNGイメージの透過
イメージマップの使い方
イメージマップはあまり使わない方がよいと聞いたのですが、なぜ?
イメージマップを正しく使う
アニメーションGIFのコントロール
ブラウザやマシンによって、アニメーションGIFの再生速度が変わってしまうのですが、なぜ?
アニメーションGIFの再生速度
アニメーションGIFの使い方
ベクトル形式の画像フォーマット
Webページ上でベクトル形式の画像が扱えるのですか?
SVG画像の使い方
第7章 色
色のコントロール
HTMLを使って色を指定しない方がよいと言われますが、なぜ?
Webページの色をコントロールする
色の値
色の組み合わせ
テキストと背景の色が似ていて文章が読みにくいのですが、なぜ?
制作者の指定した色の組み合わせがトラブルとなる場合
受信環境でトラブルとなりやすい色の組み合わせ
色化け
ページやイメージの色にはWebセーフカラーを使うように言われますが、なぜ?
Webセーフカラーとは
Webセーフカラーを使う
イメージと背景の色合わせ
イメージとページの背景が違う色になってしまい かっこ悪いのですが、なぜ?
受信環境の表示色数によって発生する色の違い
制作時に発生する色の違い
ガンマ値とカラーマネージメント
Windowsではきれいだったイメージが、Macintoshで見ると色が薄い感じになってしまったのですが、なぜ?
カラーマネージメントを行う
PNGのガンマを設定する
第8章 フレーム
フレームの正しい使い方
フレームは使わない方がよいと言われますが、なぜ?
フレームの特徴
小さな画面サイズに配慮する
フレーム未対応ブラウザに配慮する
フレームの構成とリンク
リンク先のページが意図しないフレームに表示されたりするのですが、なぜ?
フレームのリンクターゲット
複数のフレームをコントロールする
第9章 オブジェクト&スクリプト
Flashの利用
Flashがないと見れないと言われるのですが、なぜ?
Flashの利用方法
Flashを利用したWebページの問題
Flashのアクセシビリティ
最適なムービーシステム
いろいろな種類の動画配信システムがありますが、どれを使うのがよいでしょうか?
ムービーシステムの種類
ムービーシステムを選択する
きれいなムービーを作る
きれいなムービーを作ることができないのですが、なぜ?
ムービーの質に影響するもの
PDFの利用
受信環境によってレイアウトが変わらないようにする方法は?
PDFを作成する
スクリプトの利用
アクセスカウンタや時刻などを表示したいのですが、どうすればよいのでしょうか?
スクリプトを利用する
JavaScriptを利用したWebページの問題
10章 制作&受信環境
エディタの種類
Webページの制作をもっと効率よく進める方法はないでしょうか?
エディタの発展
WYSIWYG型エディタの種類
エディタを使ったWebページ制作
エディタを使ったことが原因で、Webページにトラブルが発生するのですか?
見た目重視のレイアウトで発生する問題
エディタにおけるチェッカー機能
標準的な受信環境
ページを作るとき、基準となるブラウザやウィンドウサイズはあるのでしょうか?
ユーザの環境を知る
標準的な受信環境をターゲットにしたページ制作
Webブラウザ
ページを見るのに、ブラウザのバージョンを指定したページがありますが、なぜ?
ブラウザの種類
ブラウザフォン(インターネット対応携帯電話)
携帯電話用のページを作るには専用のHTMLが必要なのですか?
ブラウザフォンで利用できるインターネットサービス
ブラウザフォン用のWebページ記述言語
ブラウザフォン用のWebページを作成する
きれいにプリントアウトする
Webページをプリントアウトすると、紙サイズによって文字やイメージが切れてしまうのですが、なぜ?
改ページをコントロールする
出力メディア別にスタイルをコントロールする
△TOP