情報サイト WIZ

お役立ちリンク集

2005-08-23T12:04:47+09:00

Webお役立ちリンク

Webサイトの構築やSEO対策に役立つリンク集をつくりました

ズクダス座談会で話しに出たサイトをまとめてあります。佐藤の能書きはいいから、役に立つツールを見たいという方はこちらをご利用ください。

■キーワードを選択する

キーワードを指定すると、前月の検索エンジンでの検索数が表示されます。どのキーワードがよく検索されているかが分かります。

ちなみに　長野　VS　信州　では、長野=38173　信州=12058　で長野の勝ちでした。（2005年4月の検索結果）

　→　http://inventory.overture.com/d/searchinventory/suggestion/?mkt=jp

■キーワードを絞り込む、関連キーワードを探す

こちらは件数は出ません
関連キーワードの選定や、絞込みに有効です。 例　飴　に関連するキーワードは？ テキストエリアにキーワードを入力して、 「一致するキーワードをその類語を表示」ボタンをクリックすると より限定的なキーワード　と　類似キーワードが表示されます。 →　https://adwords.google.co.jp/select/KeywordSandbox

■ポジションを確認する

キーワードとURLを指定すると、各検索エンジンでの指定したサイトの順位が表示されます

　→　http://www.seoseo.net

■HTML文法チェッカ

WebページのHTML文法への適合性が100点満点で採点されます。

テキストブラウザでの見え方も確認できるためSEOにも有効です。

但し、文法のチェックのみで内容は評価の対象とはなっていません。また、点数が高い方が、SEO的に有効だとは限りません。

URLのテキストボックスにチェックしたいサイトのURLを入力し、チェックボタンをクリックすると、点数と問題点が表示されます。

テキストブラウザでの見え方を確認するには、画面下の　「出力について」の三角マークをクリックして、テキストブラウザでの見え方の表示　でlynxか　w3mをチェックオンにしてください。

　→　AnotherHTML-lint

■オープンオフィス

無料で手に入って、自由に使え、MicrosoftOfficeと高い互換性があり、「オープンソース」という方針で開発されているワープロ＆表計算＆プレゼン＆ドローソフト

はっきり言って　使えます！

　→　オープンオフィス日本ユーザ会

■iFax

FAXからメールへ、メールからFAXへ

メール・FAX間の双方向通信を可能にしたネットワークサービス

受発注業務の効率化・省力化に有効です。

パソコンで発注入力してメールで送信すれば、相手にはFAXとして届けられます。いちいち印刷してFAX番号を押して送信する手間が省けます。ハイテク→ローテク間のデータ交換に便利です。

　→ NTTコミュニケーションズiFax

ズクダスブログ案

2005-08-08T11:51:30+09:00

ズクダスブログ案

ダメダスブログ

会社でコンピュータ・システムを使っている人、必読のブログ

これからシステムを注文しようとしている人、必読のブログ

ちょっと待て、ハンコを押す前に、これだけは読んでおけ！

システム開発の裏側、開発者はこんなことを考えている

システムエンジニアとしての経験と実感をもとに、

日常生活の事例と対比して

システム開発の問題点、改善点、課題を浮き彫りにするブログ

１．車とシステム　←　誰にでも使えるシステムは存在するか？

２．家とシステム　←　出来上がってからでは遅過ぎます

３．医者とシステム　←　どこかおかしいんですが・・・・

４．寿司とシステム　←　時価の恐怖、時は金なり

５．役所とシステム　←　分業と責任の間

６．アスリートとシステム　←　記録が命です

７．家電とシステム　←　使う人と作る人

８．ＯＳとシステム　←　砂上の楼閣

９．プログラマとシステム　←　それは仕様です

参考サイト

■どのブログを使うか迷ったら

無料ブログ比較なら　まあ待て、ブログを借りる前にここを読め　http://ebn.livedoor.biz/

■ブログに何を書こうか迷ったら

人気ビジネスブログの作り方　http://www.blogtowa.jp/

スタイルシートの利用

2005-06-10T13:31:49+09:00

スタイルシートの利用

構造と表現の分離

HTML4の考え方

HTML4(HTML4.0およびHTML4.01)では、構造＝コンテクストの記述　と表現＝ビジュアルデザインの記述　を分離することが推奨されています。
HTMLはコンテクスト、つまりコンテンツの構造を記述するものだとする原理主義の教義にのっとったものです。

fontタグが使えない！

この考え方によれば下のようなHTMLは誤り(言い過ぎ？推奨されない)となります。

<fontsize=5 color=red>fontタグが使えないなんて！</font>

将来的に無効になるタグの例

font	テキストのフォント、サイズ、色等を指定
applet	Javaアプレットの呼び出し
center	センター揃え
sおよびstrike	取り消し
u	アンダーライン

将来的に無効になる属性の例

background	ページの背景
bgcolor	背景色
align	配置 top,middle,bottom etc
height	テーブルセルの高さ等
width	テーブルセルの幅・罫線の幅等

構造と表現を分離するには

将来的に使えないとされているタグや属性を使わずにHTMLを書くために、スタイルシートを利用することが求められています。一説によれば、スタイルシートはHTML自体より早く定義され、ワープロのレイアウト定義に使用されてきたとのことです。XMLでもスタイルシートの利用が推奨されています。
スタイルシートを利用すれば、文書の構造定義であるHTMLと分離して、文書のビジュアルデザインを定義することが可能になります。

スタイルシートの利用

スタイルシートの例

スタイルシートでは

h1 { color: red}

のようにセレクタ(例ではh1タグ)を指定し、宣言と呼ばれる{}の中にプロパティ(例ではcolor)と値(red)をコロン:で区切って記述します。セミコロン;で区切れば複数のプロパティを指定することもできます。

h1{color:red;font-size:XX-large;margin-left: 100px}
h1タグを、色は赤で、フォントサイズ最大で、左に100ピクセルの空白を入れて表示する

スタイルシートの適用方法

タグの中に直接書く	インライン方式	<h1 style="font-size=32pt; color: red">
HEADで定義しておく	エンベッド方式	<head> <style="text/css"> <!-- h1 {font-size:32pt; color: red} --> </style>
別ファイルで定義する	リンク方式	<head> <link rel="stylesheet" type="text/css" href="default.css">

一括定義・一括管理が可能なリンク方式をできる限り採用し、リンクで定義しきれない部分のみをインライン方式で設定することが望ましい

スタイルシートのメリット

複数の文書に一貫したデザインが適用できる
デザインのメンテナンスが一括で行える(リンク方式で適用した場合)
HTMLに比べて、細かな設定ができる
デザイン要素がなくなるためHTMLがスッキリする

スタイルシート　文字

文字プロパティ

スタイル	設定方法	コメント
フォントの設定		特殊な効果が必要な場合以外は使用しない
文字サイズ	font-size : XXXX	絶対値指定と相対値指定の二種類あり　要注意
文字スタイル	font-style : italic / normal	斜体・標準の指定
文字の太さ	font-weight : bold / normal	太字・標準の指定
文字色	color : COLOR_NAME or RGB	色名指定に対応していないブラウザあり、要注意

サイズの値

絶対値と相対値

文字サイズの値には、絶対値指定と相対値指定がある。

絶対値指定　pt:ポイント　px:ピクセル
相対値指定　7段階指定(xx-largex-largelargemediumsmallx-smallxx-small)

絶対値で指定するとユーザがブラウザの文字サイズを変更してもサイズが変わらないため、好みの文字サイズで表示できなくなってしまいます。これはWEB原理主義に反するため、相対値で指定することが望ましいと佐藤は考えています。
相対指定には現在の大きさにたいする比率指定もありますが、煩雑なので佐藤は使用していません。

相対値指定時のデフォルトサイズ

現状ブラウザのデフォルトの文字サイズは　small　となっていますが、HTMLの規格上は　medium　がデフォルトです。
Netscape6.0のみ標準規格に対応し、mediumがデフォルトサイズとなっています。また、解像度の違いによりマッキントッシュでは、ワンサイズ小さく表示されてしまいます。

7	xx-large	文字サイズ　xx-large	文字サイズ　36pt
6	x-large	文字サイズ　x-large	文字サイズ　24pt
5	large	文字サイズ　large	文字サイズ　18pt
4	medium	文字サイズ　medium	文字サイズ　13.5pt
3	small	文字サイズ　small	文字サイズ　12pt
2	x-small	文字サイズ　x-small	文字サイズ　10pt
1	xxsmall	文字サイズ　xx-small	文字サイズ　7.5pt

表示=>文字サイズでサイズを変更すると左の文字はサイズが変わるが、右は変わらない。

色の値

red,navy等の色名による指定もできますが、HTMLの規格で決まっている色名は
Black,Silver,Gray,White,Maroon,Red,Purple,Fuchsia,Green,Lime,Olive,Yellow,Navy,Blue,Teal,Aquaの16色のみとなっています。他の色名はブラウザにより正確に表示できない可能性があるため、上記の16色以外の色は16進で指定することが推奨されています。

Black #000000	Silver #C0C0C0	Gray #808080	white #FFFFFF	Maroon #800000	Red # FF0000	Purple #800080	Fuchsia #FF00FF
Green #008000	Lime #00FF00	Olive #808000	Yellow # FFFF00	Navy #000080	Blue # 0000FF	Teal # 008080	Aqua #00FFFF

スタイルシート　段落

チョットしたクイズ

Ｑ１．<p>で改行され、１行空白行が入るのはなぜか？
Ｑ２．<br><br>　あるいは<p></p>　は許されるか？

Ｑ３．下のHTMLは正しいでしょうか？

３－１
<body>
<h1>佐藤のJavaサイト</h1>
JavaはC++より優れている

３－２
<body>
<p>社員健康順位
<table border=2>
<tr><td>第一位</td><td>佐藤</td></tr>・・・・・・

段落とは？

HTMLではBODY部は段落の集合であるとされています。いくつかの段落が組み合わされてBODY部となります。言い換えると、段落に所属しない要素はHTMLの規約に反していることになります。

ブロックレベルエレメントとインラインレベルエレメント

HTMLのタグは段落を作るタグと段落の中にあるべきタグの二つに分けられています。

ブロックレベルエレメント

段落を作成するタグです。ブロックレベルエレメントには以下のタグがあります。

p
h1,h2～h6
ul,ol,dl
blockquate
form
table
div
hr,pre,center

インラインレベルエレメント

段落の中にあるべきタグです。インラインレベルエレメントには以下のタグがあります。

br
em,strong
sub,sup
a
img
input

注意点

ブロックレベルエレメントの中にブロックレベルエレメントを入れてはいけない
ブロックレベルエレメントに対するスタイル指定はテキスト文字だけでなく、段落全体に影響する

クイズの答え　　二つとも正しくない！
=>「JavaはC++より優れている」点は真実だが、この文がどの段落にも含まれていないので×
=>ブロックレベルエレメントであるtableタグがブロックレベルエレメントであるpタグの中にあるので×

とは言え、原理主義を徹底するには若干の無理があります。例えば、フォームの中にテーブルで入力項目やボタンを整列して配置したいという場合には、ブロックレベルエレメントであるformの中に、同じくブロックレベルエレメントであるtableを入れ子にしなければなりません。だからと言って、すべての原理が無意味であるということにはなりませんが、原理主義の常として、現実社会との調和が重要な課題であると言えるでしょう。

pタグの使い方

基本的に段落ごとにpタグを入れ、段落の最後は/pで閉じる
見出しタグ(h1,h2等)やテーブルタグ、divタグの前にはpタグは不用、これらのタグの前では/pで段落を終らせる
空のpタグは許されない　ブラウザで無視されることになるはず

スタイルシート　余白(パディングとマージン)

余白

タグの中身=コンテンツはパディングとマージンという余白で取り囲まれている。
パディングはコンテンツを内側で取り囲み、マージンはコンテンツを外側で取り囲む。
コンテンツに対するスタイルはパディングまで影響する。

上の段落　パディング:0　マージン:0

コンテンツ　パディング:20px　マージン:10px　背景色:アクア
枠の内側の水色の部分がコンテンツとパディング、枠の外側の上下の段落との間の空白の部分がマージン

下の段落　パディング:0　マージン:0

設定

上下左右一括指定	magin:20px
上指定	magin-top:20px
下指定	magin-bottom:20px
左指定	magin-left:20px
右指定	magin-right:20px
上はmargin指定の例、パディングの場合は　padding:20px等々となる
注意！　段落間の間隔は上下の段落のマージンのうち大きい方で決まる

段落間のマージンをコントロールするには、この点が重要になります。段落見出しh3と段落pのマージンを少なくするには段落見出しh3の下マージンを設定するだけでは不十分です。段落pの上マージンの方が大きいと、そちらが優先されてしまいます。

行の横幅

ページ全体をテーブルで囲み、テーブルにwidthを設定して、行の横幅を制御するというような技は使わないこと。スタイルシートの　width　プロパティで設定します。とは言え、行の横幅を決めてしまうことはWEB原理主義に反する行為なので、好ましくないと考える人たちが存在することも知っておきましょう。誰もが1024×768の画面で、最大化してWEBを見ているとは限りません。ユーザの表示したいサイズに合せて柔軟に表示できるようなページを作ることが大切です。
preタグも画面のサイズに影響を与えます。乱用は避けるべきでしょう。

行揃え

text-align　プロパティを使う。値は　left,center,right
等間隔にそろえるには　text-align:justify　を使う。日本語では　text-jutify:distribute　もトライしてみる。

行の間隔

ブラウザのデフォルトは英文用の行間になっています。日本語では見ずらいという人もいます。行間を広げたい場合は、line-height　プロパティを使用し、値はポイントによる絶対指定か現在の文字サイズに対する倍率指定で行います。ただ、いたずらに行間を広げると、間延びしたページになってしまいます。文章の構成を考え、段落に分割して、読みやすいページにする必要があります。

左マージン:20px　右マージン:10px　上マージン:15px　下マージン:10px
行の幅:300　中央揃え　行間２倍　の例
<divstyle="margin-left:20px;margin-right:10px;margin-top:15px;margin-bottom:10px;
　　line-height:2;text-align:center; width:300">
</div>

左マージン:20px　右マージン:10px　上マージン:15px　下マージン:10px
行の幅:300　中央揃え　行間２倍　で実際に設定した例

スタイルシート　イメージと文字の関係

イメージと文字揃え

文字の回り込み

いずれも省略しました。誰か補足願います。

スタイルシート　罫線

罫線を引く

border-(top/bottom/left/right-)style : solid / none ;

罫線に色をつける

border-(...-)color : COLOR_NAME;

罫線の太さを変える

罫線の太さ ?? border-(...-)width : XXpx ;

スタイルシート　印刷

改ページ指定

page-break-before : always ;

メディア別指定

省略

スタイルシート　タグ以外への設定

タグ以外へのスタイルの設定

設定したいスタイルに対応するタグがある場合はタグに対してスタイルを設定できますが、適当なタグがない場合は、DIV　や　SPAN　にスタイルを書くことになります。前述の通り、DIVはブロックレベルエレメントなので段落を作成したい場合に記述し、SPANはインラインレベルエレメントなので段落中に記述することになります。

この先の内容は<spanstyle="color:red">赤で書きたい</span>と思った
実例．この先の内容は赤で書きたいと思った

複数の要素にまとめてスタイルを設定したいときは、クラス名を使用します。リンク方式もしくはエンベッド方式で、クラスに対してスタイルを書き、HTML中にクラス名を入れます。

クラスへのスタイル設定
.sample {color:blue;font-weight:bold}

クラス名を入れたHTML
この先は<spanclass="sample">サンプルクラス</span>です

佐藤の標準スタイルシート

ページの構成の考え方

文　＜　段落　＜　章　＜　ページ
文の集まりを段落、段落の集まりを章、章の集まりをページとする。

上記の主たる構成以外に、署名・コメント・強調・ナビゲーション・履歴に対してスタイルを設定する。

ページ

bodyタグにページ全体の本文エリアのマージンを設定する。(見出しは本文エリアからマイナスのマージンを取る)

body{    text-align: left;         // テキスト左揃え    margin-left: 30px;        // 左マージン　30ピクセル    margin-right: 5px         // 右マージン　 5ピクセル}

ページ見出し

タグ　h1　を使用する。CSSの設定により文字サイズはx-large、中央揃えとなる。

h1{    text-align : center;     // テキスト中央揃え    font-size : x-large       // 文字サイズ　x-large}

章見出し

タグ　h2　を使用する。CSSの設定により、左端に濃い色が、背景に薄い色がつき、強調して表示される。

h2{    　　margin-left : -20px;         // bodyのマージンより左に　20ピクセル    background-color: #e7e7e7;   // 背景色　薄い灰色    border-color: #000080;       // 境界線色　Navy　   border-top-style: none;      // 境界線　上　なし    border-bottom-style: none;   // 境界線　下　なし    border-right-style: none;    // 境界線　右　なし    border-left-style: solid;    // 境界線　左　線    border-left-width : 13px;    // 境界線　左　太さ　13ピクセル    font-size : large;           // 文字サイズ　large    padding: 3px                 // 内側余白　3ピクセル}

段落見出し

タグ　h3　を使用する。CSSの設定により、テキストエリアより左に出て表示される。

h3{    margin-left : -10px;         // bodyのマージンより左に　10ピクセル    margin-bottom : 1px;         // 段落の外側下余白　1ピクセル    font-size : medium          // 文字サイズ　medium}

段落小見出し

必要により段落に小見出しをつける。小見出しはタグ　h4　を使用する。CSSの設定により、テキストエリアより左に出て表示される。

h4{ /* 段落小見出し */
margin-left : -5px; // bodyのマージンより左に　5ピクセル
margin-bottom : 1px; // 段落の外側下余白　1ピクセル
font-size : small // 文字サイズ　small テキストと同じ
}

署名

WEB上のページは必ずしもホームページから順に読まれるとは限らない。検索エンジン等により、中間のページが最初に読まれるかもしれない。したがって各ページには、著者の署名が必須となる。このためHTMLは特別に署名用のアドレスタグを持っている。通常は署名として、ホームページのURLとメールアドレスが右詰めで書かれることが多い。

address{
padding-right : 20px; // 右余白　20ピクセル
text-align : right // 右詰め
}

ページの最初のコメントや文中のコメントなど、地の文と区別して記述したい場合に使用する。HTMLにはコメント用の特別のタグがないため、div　や　span　をコメントクラスとして使用する。

.comment{ /* コメント */
padding-left : 20px; // 左余白　20ピクセル
padding-right : 20px; // 右余白　20ピクセル
padding-top : 5px; // 上余白　 5ピクセル
padding-bottom : 5px; // 下余白　 5ピクセル
background-color : #FFF8DC // 背景色　薄い肌色 cornsilk
}

<divclass="comment">これはコメントの実例です。ページの先頭にページ全体に対する説明や文中に注釈を加えたいときに使用します。</div>

これはコメントの実例です。ページの先頭にページ全体に対する説明や文中に注釈を加えたいときに使用します。

プログラムソース

クラス名としてsourceを指定するとプログラムソースとして背景に色を付けて表示できます。

<divclass="source">これはプログラムソースの実例です。HTMLのソースやJavaのソースプログラムを記述するときに使用します。</div>

これはプログラムソースの実例です。HTMLのソースやJavaのソースプログラムを記述するときに使用します。

フッター

ページの最後であることを明示するために入れる水平線hrのマージンを設定する。

.footer{    margin-left : -20px}

履歴

いつ書かれ、いつ修正加筆されたかわからないようなページの情報は読む価値がないともいえる。WEBページには更新情報は必須である。
現在は特別なスタイルは設定していないが、将来の備えて履歴にもクラスを入れておくこと。

更新履歴
2001.8.7　個人資料に加筆し、講習会資料として作成
2001.12. 4　AnotherHTML-lintで満点がもらえるよう修正

アクセシビリティJIS規格抜粋

2005-06-10T11:38:50+09:00

資料　JIS　X8341－3抜粋

JISX8341-3

規格番号 JISX8341-3
規格名称　「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ」

以下、開発及び制作に関する個別要件

■規格及び仕様: 5.1 a（文法）ウェブコンテンツは、関連する技術の規格及び仕様に則り、かつそれらの文法の従って作成しなければならない。
■構造及び表示スタイル: 5.2 a（構造化）ウェブコンテンツは、見出し、段落、リストなどの要素を用いて文書の構造を規定しなければならない。; 5.2 b（スタイル）ウェッブコンテンツの表示スタイルは、文書の構造と分離して、書体、サイズ、色、行間、背景色などをスタイルシートを用いて記述することが望ましい。ただし、利用者がスタイルシートを使用できない場合、又は意図的に使用しないときにおいても、ウェブコンテンツの閲覧および理解に支障が生じてはならない。; 5.2 c（表）表は、分かりやすい表題を明示し、できる限り単純な構造にして、適切なマーク付けによってその構造を明示しなければならない。; 5.2 d（表とレイアウト）表組みの要素をレイアウトのために使わないことが望ましい。（音声ブラウザなどでは意図しない順序で読み上げる可能性がある）; 5.2 e（ページタイトル）ページのタイトルには、利用者がページの内容を識別できる名称を付けなければならない。; 5.2 f（フレーム）フレームは必要以上に用いないことが望ましい。使用するときは、各フレームの役割が明確になるように配慮しなければならない。; 5.2.g（パンくずリスト）閲覧しているページがウェッブサイトの構造のどこに位置しているか把握できるように、階層などの構造を示した情報を提供することが望ましい。
■操作及び入力: 5.3 a（キーボード）ウェブコンテンツは、特定の単一のデバイスによる操作に依存せず、少なくともキーボードによってすべての操作が可能でなければならない。; 5.3 b（入力）入力欄を使用するときは、何を入力すればよいかを理解しやすく示し、操作しやすいよう配慮しなければならない。; （フリガナだけでは音声ブラウザでフリガナかふりがなかがわからない。入力欄の後でカタカナで入力、ハイフォン付きで入力などとコメントしても後の祭りとなる。）; 5.3 c（制限時間）入力に制限時間があるときは事前に知らせなければならない。; 5.3 d制限時間があるとき、利用者によって時間制限を延長又は解除ができないときは、代替手段を用意しなければならない。; 5.3 e（移動と新しいページ）利用者の意思に反して、又は利用者が認識若しくは予期することが困難な形で、ページの全部若しくは一部を自動的に更新したり、別のページに移動したり、又は新しいページを開いたりしてはならない。; 5.3.f（ナビの統一）ウェッブサイト内においては、位置、表示スタイル及び表記に一貫性のある基本操作部分を提供することが望ましい。; （トップページ等の表記の統一、ナビゲーションの統一）; 5.3.g（リンク）ハイパリンクおよびボタンは、識別しやすく、操作しやすくすることが望ましい。（こちらこちら、ボタンの大きさ、間隔、リンクなのか画像なのか？）; 5.3.h（ナビのスキップ）共通に使われるナビゲーションなどののためのハイパリンク及びメニューは、読み飛ばせるようにすることが望ましい。; （いつも読み上げるのは無駄、ページ内ハイパリンクでスキップ可能に）; 5.3 i（元に戻す）利用者がウェブコンテンツにおいて誤った操作をしたときでも、元の状態に戻すことができる手段を提供しなければならない。
■非テキスト情報: 5.4 a（画像への代替テキスト）画像には、利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供しなければならない。（空のALT属性もあり）; 5.4 b（リンク画像への代替テキスト）ハイパリンク画像には、ハイパリンク先の内容が予測できるテキストなどの代替情報を提供しなければならない。; 5.4 c（聴覚）ウェブコンテンツの内容を理解・操作するのに必要な音声情報には、聴覚を用いなくても理解できるテキストなどの代替情報を提供しなければならない。; 5.4 d（動画）動画など時間によって変化する非テキスト情報に、字幕又は状況説明などの手段によって同期した代替情報を提供できない場合には、内容についての説明を何らかの形で提供しなければならない。; 5.4 e（オブジェクト）アクセス可能ではないオブジェクト、プログラムなどには、利用者がその内容を的確に理解し操作できるようにテキストなどの代替情報を提供しなければならない。
■色及び形: 5.5 a（色依存）ウェブコンテンツの内容を理解・操作するのに必要な情報は、色だけに依存して提供してはならない。（視覚障害　色の識別困難）; 5.5 b（形依存）ウェブコンテンツの内容を理解・操作するのに必要な情報は、形又は位置だけに依存して提供してはならない。; 5.5.c（コントラスト）画像などの背景色と前景色とには、十分なコントラストを取り、識別しやすい配色にすることが望ましい。（弱視）
■文字: 5.6 a（文字サイズ）文字のサイズ及びフォントは、必要に応じ利用者が変更できるようにしなくてはならない。
■音: 5.7 a（音の再生）自動的に音を再生しないことが望ましい。自動的に再生する場合には、再生していることを明示しなければならない。; 5.7.b（音の制御）音は利用者が出力を制御できることが望ましい。
■速度: 5.8.a（移動）変化又は移動する画像又はテキストは、その速度、色彩、輝度の変化などに注意して作成するｋとが望ましい。; 5.8 b（ブリンク）早い周期での画面の点滅を避けなければならない。
■言語: 5.9 a（言語指定）言語が指定できるときは、自然言語に対応した言語コードを記述しなければならない。; 5.9 c（用語定義）省略語、専門用語、流行語、俗語などの想定する利用者によって理解しにくいと考えられる用語を使用するときは、初めて記載されるときに定義しなければならない。; 5.9 e（単語間の空白）表現のために単語の途中にスペース又は改行を入れてはならない。
JIS X8341-3より抜粋（一部略）
ISL佐藤作成（）内は佐藤のメモ

更新履歴
2004. 7.1　6/20のJIS規格制定を受け、閲覧用PDFファイルから抜粋を作成

メニュー

2005-06-10T11:37:45+09:00

*Wizサイトのコンテンツ **Web関連技術 -[[ビジネスのためのWebサイトの作り方]] -[[Web原理主義宣言]] -[[スタイルシートの利用]] -[[HEAD部の書き方]] -[[BODY部の書き方]] -[[WEB原理主義の掟]] -[[アクセシビリティJIS規格抜粋]] -[[お役立ちリンク集]] **ナビ -[[トップページ]] -[[行動記録]] -[[思考記録]] ---- サイト内検索 #search() ---- 更新履歴 #recent(10) ---- リンク -[[個人情報保護>http://www.isl.ne.jp/privacy/]] ---- #calendar()

ビジネスのためのWebサイトの作り方

2005-06-10T11:36:12+09:00

ビジネスのためのWEBサイト

企業は何のためにWEBサイトを作るのか？

広報活動、求人、知名度アップ　から　取引増・売上増・収益増　へ
「我が社は○○な技術・製品を持った会社です。○○のことなら我が社にお任せください。」

→見てもらえなければ意味がない

見てもらうために必要なこと

2003年10月 Yahoo!Japan　「第14回　ウェッブ・ユーザ・アンケート」結果
　Q.サイトを訪れるきっかけは？　A.検索エンジン　82%

→検索エンジンの上位にランクされることが最重要

検索エンジン対策として何をすればよいのか？　

キーワードを決める

ユーザはどんなキーワードで検索するのか？

キーワードを決める「長野」か「信州」か？　「Web」か「インターネット」か？

キーワードをページに記述する

さりげなくキーワードをページにちりばめる

キーワードが決まったら、ページに埋め込む→作りこみが重要、後で打てる手は少ない。

重要な文は上部に持ってくる

HTMLの上部ほどポイントが高い

一番おいしいところがJavaScriptやナビに占領されるのはもったいない！

検索エンジンは画像を無視する

画像の使い方にも工夫が必要

せっかくのキャッチコピーも画像では検索エンジンには見てもらえない！

検索エンジンからどう見られているか？

Another-lint で確認できる

検索エンジン対策の実績

松本市スキークラブhttp://www.dia.janis.or.jp/~msc/: スキー＋松本市　Google １位; スキー＋松本　　Google １５位; スキー＋クラブ　Google １５位; スキー＋教室　　Google １３位

上記実績は残念ながら、既に過去のものとなっています

検索エンジン対策ツール

■ポジション確認→http://www.seoseo.net: キーワードとURLを指定、サイト順位を表示＝結果確認、ポジション確認
■キーワード選定→http://inventory.overture.com/d/searchinventory/suggestion/?mkt=jp: キーワードを指定、前月の検索エンジンでの検索数＝キーワード選定用　長野県か信州か？

検索エンジン対策としてやるべきこと

適切なキーワードを選定する
キーワードを含んだ自然な文章を書く
キーワードを入れたタイトルをつける
HTMLファイルの先頭部分にキーワードを含んだ重要な文を配置する
画像にもさりげなくキーワードを含んだALT属性を指定しておく
動画だけのページや画像だけのページなどは論外
フレームは百害あって一利なし

WEB原理主義者はテロリストか？

WEBの目的と理念

WEBは誰もが簡単に情報を入手するための手段として、先人たちが築き上げてきた資源であり財産です。先人たちの努力が一企業や一業界の利益のためにゆがめられることのないよう、WEBの目的をシッカリと理解し、WEBの理念にのっとって行動することが、私たち求められています。

宗教的権威W3Cと世俗権力ブラウザの抗争の歴史

歴史1 WEBの誕生とHTML

初期のインターネットでは情報の入手や検索には特殊なコマンドが必要であり、誰もが簡単に情報を利用できるような状況ではなかった。そのような中、World　Wide　Webが生まれ、WEBブラウザによって簡単に情報の検索・参照・入手ができるようになった。

当時はブラウザごとにタグが定義されていたため、情報の入手が簡単に行えるようになったとは言っても、特定のコンピュータの特定のフォーマットでなければ見ることのできないような状況であった。そこで情報の標準化が緊急の課題となり、当時政府文書の記述などに利用されていたSGML(StandardGeneralization MarkupLanguage)を誰でも使えるように簡素化し、ハイパーリンクの機能等を盛り込んでHTML(HyperText Markup Language)が作られた。(1989)

歴史2 ビジュアルの登場

このようにテキスト中心に発展してきたWEBの世界に一大変革の波が押し寄せた。1993年、イメージを取り込める画期的ブラウザ　Mosaic　が登場したのである。Mosaicは文書中心だったWEBの世界に大きなインパクトを与え、以降ビジュアル系の情報発信というWEBの新潮流を生み出した。

歴史3 ブラウザ戦争の勃発

1994年Mosaicの流れを汲むNetscapeが登場、ビジュアル系の勢いは加速された。NetscapeはHTMLの規格以外のfontタグやcenterタグなどの独自タグを拡張していった。これらのタグはコンテクストの記述ではなく、ビジュアルデザインをコントロールするものであったため、WEB本来の目的に反するという反対意見も多くあったが、いったんビジュアル系に傾いた流れはそのような反対意見を押し流してしまった。

ビジュアル系の圧倒的な支持を得たNetscapeがWEBブラウザの標準となることは誰の目にも明らかだと思われた1995年、WindowsによってOS戦線で勝利を収めた　Microsoft社が、その勝利をさらに強固なものにするためにブラウザに乗り出してきた。Microsoft社のInternetExplorerはWindowsにバンドルされることによって、Netscapeの牙城に迫っていった。これが世に言うブラウザ戦争である。

歴史4 ブラウザ戦争の終結とWEB世界の混乱

ブラウザ戦争はMSの圧倒的勝利に終わり、後には大衆の支持を得るために採用された独自拡張タグが残った。特定環境の特定のブラウザでしか見ることができないページが増え、各ブラウザでの動作確認は困難となり、「このページはXXXXXXXのバージョンXX以上でご覧ください」などというWEBの存在そのものを揺るがすようなメッセージを平然と記載しているページが増えていった。ブラウザ戦争が生み出したのは、ブラウザの間の不統一とWEB世界の混乱という不毛の現実であった。

歴史5 WEBルネッサンス　理念への回帰

ブラウザ戦争たけなわであった1997年1月に発表されたHTML3.2は当時のタグ拡張路線を追認するものでしかなかった。さすがにW3Cもこの点をすぐに反省し、その年の12月にHTML4.0を発表して、「HTMLはコンテクストを記述するものである」というWEBの理念への復帰を宣言した。さらに1999年に規格化されたHTML4.01でもWEB理念の回帰は強まっている。

宗教的権威W3C　WEBを語る上で欠かせない存在

WWW（World WideWeb）に関連する各種標準プロトコルを策定し、相互互換性を維持しながら、WWWを発展させるために1994年10月に設立されたコンソーシアム。サービスとしては、ユーザーおよび開発者に対するWWW関連情報の提供などがある。WWWサーバとWWWブラウザの通信プロトコルであるHTTP、Webページの記述仕様であるHTMLなどはW3Cによって標準化されたものだ。
@ITの用語集から抜粋

WEBの理念に立ち返る

WEBの歴史で見てきたように、WEBは誰もが間単に情報を受信したり、発信したりするために作りあげられたものであり、特定の環境に依存するものであってはなりません。このWEBの理念に立ち返り、誰もが読めるHTMLを記述することがWEB原理主義です。それは過激なテロリズムではなく、WEB本来の目的を踏まえた極めて基本的な考え方です。

WEBの理念とは？

誰もが簡単に情報を受信(利用)できること
誰もが簡単に情報を発信(提供)できること
それらの情報が相互に簡単に参照可能であること
環境に依存せずに情報の受発信が可能であること

WEB原理主義の教義

構造はHTML
表現はスタイルシート
誰でもわかる、使いやすいページ設計＝ユーザビリティ
どのような環境からも利用できること＝アクセシビリティ

デザインVS原理主義

デザイナは原理主義者の敵か？

ライターはデザイナの敵か？、原理主義者はライターの敵か？

ユニバーサルデザインとは: 米国のノースカロライナ州立大学教授で建築家・工業デザイナーであるロナルド・メイ氏が70年代に提唱した概念で「可能な限り最大限、すべての人が利用できるように、製品や環境を設計・デザインすること」と定義付けられています。(すまいを建てる・ユニバーサルデザインより　http://www12.ocn.ne.jp/~hagi.d/universa.htm); 国立国語研究所の言い換え「すべての人のためのデザイン」

原理主義はWEBサイトのユニバーサルデザインである

原理主義を言い換えると「すべての人のためのWEBサイトの実現」である

WEB原理主義実践ツール

■HTML文法チェッカ→Another HTML-lint: 非常に役に立つサイト。HTMLの各バージョンての適合性が100点満点で採点される。テキストブラウザでの見え方も確認できるためSEOにも有効

原理主義実践のためにやるべきこと

文法的に正しいHTMLを書く
DocTypeやLang属性を正しく指定する
コンテンツを構造化する
デザインはスタイルシートで設定する
ブロックエレメントとインラインエレメントをきちんと使い分ける
すべての文はブロックエレメントの中に入れる
Hタグは１から順番に使う
文字サイズは固定しない
レイアウトのためのテーブルの使用はやむを得ない場合のみとする
テーブルの入れ子はできるだけシンプルなものにする
画像を多用しない
フレームは使わない
可能な限り利用者が自分の画面サイズに合わせて閲覧できるようにする
画面スクロールはできるだけ避ける
勝手に新しいウィンドウを開かない

JIS規格の登場

規格番号 JISX8341-3

名称：「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ」
平成１６年６月２０日制定

この規格は，ホームページ上などで提供される電子的な情報（コンテンツ）が満たすべき具体的な要件を規定しています。これにより、パソコンなどのハードウェアの規格だけでは実現できなかった、非テキスト情報などへのアクセシビリティの向上が期待されます。(2004年6月21日付　JIS規格報道向け資料より)

アクセシビリティとは？

情報やサービス、ソフトウェアなどが、どの程度広汎な人に利用可能であるかをあらわす語。特に、高齢者や障害者などハンディを持つ人にとって、どの程度利用しやすいかという意味で使われることが多い。accecibilityとは「受け入れられやすさ」という意味の英単語である。　例えば、手や腕の障害のためにマウスを使えない場合、ソフトウェアはキーボードだけで利用可能である必要がある。弱視や老眼の人にとってはフォントサイズや配色は容易にカスタマイズ可能でなくては見にくい。視覚障害の人は読み上げソフトを使うので、それに適したレイアウトや記述方法が求められる。

特に、Webページについての「利用のしやすさ」を「Webアクセシビリティ」という。これについては「WCAG」(WebContent AccessibilityGuidelines)という指針がW3Cによって提唱されている。画像や音声などには代替テキストによる注釈をつける、すべての要素をキーボードで指定できるようにする、情報内容と構造、および表現を分離できるようにするなどの方針が定められている。
IT用語辞典　e-Wordより

JIS規格の例

ウェブコンテンツは、関連する技術の規格及び仕様に則り、かつそれらの文法の従って作成しなければならない。
ウェブコンテンツは、見出し、段落、リストなどの要素を用いて文書の構造を規定しなければならない。
ウェッブコンテンツの表示スタイルは、文書の構造と分離して、書体、サイズ、色、行間、背景色などをスタイルシートを用いて記述することが望ましい。
文字のサイズ及びフォントは、必要に応じ利用者が変更できるようにしなくてはならない。

JIS規格の影響

公的な規格の制定→官公庁・大企業は規格に準拠したサイトの構築に迫られる→JIS規格とWEB原理主義は極めて近い！→原理主義者にとってのビジネスチャンス！

JIS規格に対応するためにやるべきこと

◎5.1.a 文法的に正しいHTMLを書く
◎5.1.aブロックエレメントとインラインエレメントをきちんと使い分ける
◎5.1.aすべての文はブロックエレメントの中に入れる
◎5.1.a Hタグは１から順番に使う
◎5.2.a コンテンツを構造化する
◎5.2.b デザインはスタイルシートで設定する
●5.2.b 利用者によるスタイルシートに切り替え
◎5.2.dレイアウトのためのテーブルの使用はやむを得ない場合のみとする
◎5.2.e キーワードを入れたタイトルをつける
◎5.2.f フレームは使わない
●5.3.a キーボードのみの操作　アクセスキー
◎5.3.e 勝手に新しいウィンドウを開かない
●5.3.h ナビのスキップ
◎5.4.a画像にもキーワードを含んだALT属性を指定しておく
◎5.6.a 文字サイズは固定しない(フォントも！)
◎5.9.a DocTypeやLang属性を正しく指定する
○画像を多用しない
○テーブルの入れ子はできるだけシンプルなものにする
○画面サイズは利用者の環境に合わせられるようにする
○画面スクロールはできるだけ避ける

◎:検索エンジン対策・原理主義と共通、●:JIS独自、○:JISには含まれない

更新履歴
2004. 7. 1　講習会資料として作成
2005. 6.9　松本ソフト開発センターでの資料としてアレンジ

トップページ

2005-06-10T11:27:33+09:00

*ビジネス情報サイト　Wiz です ***Wizは、システム開発、Webアプリケーション、Webビジネスに関する情報を提供します ---- ズクダス松本の皆さまへ「何でも座談会」へ参加いただきありがとうございました。座談会での資料は、「Web関連技術」にあります。画面左のナビからお入りください。なお、社内講習会資料として作成したものをアレンジしているため、一部過激あるいは不適切な表現がある点はご容赦ください。また、自社サーバにアップしていたものを @Wiki(あっとうぃき)サービスに移植している関係上、画面文字サイズが変更できません。HTML文法にも誤りがあります。「言っていることと違うじゃないか！」という突っ込みはなしにしてくださいネ。 ---- 「お役立ちリンク集」にズクダス座談会で話しに出たサイトをまとめてあります。佐藤の能書きはいいから、役に立つツールを見たいという方はこちらをご利用ください。 ---- WizへようこそこのページはWikiWIkiで作成しています。本来のWikiWikiは誰でもページの編集ができるのですが、Wizではページ編集機能は停止しています。あしからず。 ---- WizはBLOG(ブログ)的に、ビジネス情報をアップしていきます。ブログだと日記的に、時系列に（つまり日付順に）並んでしまうので、テーマ別に更新できるようWikiWikiを使っています。 ---- Wiz　は　@Wiki（アットウィキ）を利用させていただいています。感謝！ ---- #google()

思考記録

2005-06-09T20:05:41+09:00

Web原理主義宣言

2005-06-08T17:57:16+09:00

WEB原理主義宣言

WEB原理主義　目次

WEB原理主義宣言

あなたはHTMLが書けますか？,WEBの歴史,WEB原理主義とは何か？,原理主義の四大教義

スタイルシートの利用

利用方法,スタイルシートの設定（文字、段落、余白）,標準スタイルシート

HEAD部の書き方

ドキュメントタイプ宣言,正しいタイトルのつけ方,検索エンジン対策,文字化けしないために

BODY部の書き方

構造から書いて行け,文書も設計せよ,リンクと画像の情報,改行

WEB原理主義の掟

WEB原理主義第一回宗教会議で決定された、実際にHTMLを書いていくときに守らなければならない掟の数々

あなたはHTMLが書けますか？

いやしくも情報戦略研究所の一員であれば、HTMLが書けないなどという人は一人もいないとは思います。
しかし、あなたは本当にHTMLが書けますか？
どこかのサイトを参考に、見よう見まねでテキストの間にタグを散りばめて、それでHTMLが書けると思っているのでしょうか？　あるいはワードで書いた文章をHTML出力し、自分もHTMLが書けるとおもっているのでしょうか？
あなたの書いたHTMLは、あなた以外の人にも、あなたと同じに見えているのでしょうか？　あなたの書いたHTMLは、数年後にも今と同じように見えるという保証があるのでしょうか？

まさかフォントタグ(font)は使ってはいないでしょうね？
fontは将来的には無効になるタグだと決定されました。当然fontで指定したサイズや色は無効になります。
センタタグ(center)もアンダーラインタグ(u)も無効です。配置属性(align)も使えなくなりますし、テーブルの背景色属性(bgcolor)も使えません。
HTML4.0以降では、これらのタグと属性は使わない方が望ましいとされています。つまり、今のままのHTMLを書いていたのでは、数年後には読めないページになるかもしれないということです。あなたの書いたページが来年には読めなくなったらどうしますか？

まさかタグを大文字で書いたり、改行タグ(br)を閉じずに使ったりしていないでしょうね？
HTML5.0に取って変わることになるXHTMLでは、より厳格な記述が求められています。改行タグや段落タグ(p)も閉じなければならなくなりますし、タグは小文字と決められました。今までHTMLのいい加減さに甘えてきたとしても、XHTMLでは甘えは通用しません。

まさか引用タグ(blockquote)で字下げしたり、テーブルでページ全体を囲んではいないでしょうね？
HTML4.0以降、ビジュアルデザインはHTMLから切り離されました。見栄えを良くするために使っていた小細工はこれから通用しなくなります。あなたはどうしますか？

WEBの歴史

「カノッサの屈辱」風に
やあ、皆さん、私の研究室へようこそ。
今夜もこの時間で、歴史とは何たるものかを理解した者のみが味わえる喜びを、皆さんにも感じ取っていただくことを期待します。
さて、今夜は普段から皆さんがごく身近に接しておられる、WEBの歴史についてお話してみたいと思います。WEBの歴史とは、宗教的権威であるHTMLと、世俗的権力のブラウザとの抗争の歴史でもありました。

WEBの誕生とHTML

当初、インターネットでは情報の入手や検索には特殊なコマンドが必要であり、誰もが簡単に情報を利用できるような状況ではなかった。そのような中、World　Wide　Webが生まれ、WEBブラウザによって簡単に情報の検索・参照・入手ができるようになった。

当時はブラウザごとにタグが定義されていたため、情報の入手が簡単に行えるようになったとは言っても、特定のコンピュータの特定のフォーマットでなければ見ることのできないような状況であった。そこで情報の標準化が緊急の課題となり、当時政府文書の記述などに利用されていたSGML(StandardGeneralizationMarkupLanguage)を誰でも使えるように簡素化し、ハイパーリンクの機能等を盛り込んでHTML(HyperTextMarkupLanguage)が作られた。

ビジュアルの登場

このようにテキスト中心に発展してきたWEBの世界に一大変革の波が押し寄せた。1993年、イメージを取り込める画期的ブラウザ　Mosaic　が登場したのである。Mosaicは文書中心だったWEBの世界に大きなインパクトを与え、以降ビジュアル系の情報発信というWEBの新潮流を生み出したのである。

ブラウザ戦争の勃発

1994年Mosaicの流れを汲むNetscapeが登場し、ビジュアル系の勢いは加速された。NetscapeはHTMLの規格以外のfontタグやcenterタグなどの独自タグを拡張していった。これらのタグはコンテクストの記述ではなく、ビジュアルデザインをコントロールするものであったため、WEB本来の目的に反するという反対意見も多くあったが、いったんビジュアル系に傾いた流れはそのような反対意見を押し流してしまった。

ビジュアル系の圧倒的な支持を得たNetscapeがWEBブラウザの標準となることは誰の目にも明らかだと思われた1995年、予想外の敵が現れた。WindowsでOS戦線で勝利を収めた　Microsoft社が、その勝利をさらに強固なものにするためにブラウザに乗り出してきたのである。Microsoft社のInternetExplorerはWindowsにバンドルされることによって、Netscapeの牙城に迫っていった。これが世に言うブラウザ戦争である。

ブラウザ戦争の終結とWEB世界の混乱

ブラウザ戦争の経過と結末は周知の事実であり、もはや記するまでもないであろう。しかしながら、ここで特筆しておかなければなければならないのは、大衆の支持を得るためにInternetExplorerもNetscapeと同様の独自タグ拡張戦術を取ったことにより、HTMLの世界から理念が失われてしまったということである。

特定環境の特定のブラウザでしか見ることができないページが増え、ブラウザの度重なるバージョンアップに追従したユーザのハードディスクは悲鳴をあげることとなった。かつては制作者の常識であった、各ブラウザで動作確認を行うという美風は失われ、「このページはXXXXXXXのバージョンXX以上でご覧ください」などというWEBの存在そのものを揺るがすようなメッセージを平然と記載しているページも少なくない。ブラウザ戦争が生み出したのは、ブラウザおよびバージョンごとの不統一とWEB世界の混乱という不毛の現実であった。

WEBルネッサンス　理念への回帰

今夜の私の講義を終えるにあたり、「WEBの理念とは何か」という点を皆さんとともに改めて確認しておく必要があると考えます。WEBとはインターネット上で、誰もが簡単に情報を入手するための手段です。これは先達たちが築き上げてきた資源であり、財産でもあります。先達たちの努力が、一企業や一業界のためにゆがめられることのないよう、WEBの理念をシッカリと理解し、その理念にのっとって行動することが、私たち一人一人に、今、求められてるのではないでしょうか？

WEBの理念: 誰もが簡単に情報を受信(利用)できること; 誰もが簡単に情報を発信(提供)できること; それらの情報が相互に簡単に参照可能であること; どのような環境であっても情報の受発信が可能であること

WEB原理主義とは？

WEBの理念に立ち返る

WEBの歴史で見てきたように、WEBは誰もが間単に情報を受信したり、発信したりするために作りあげられたものであり、特定の環境に依存するものであってはなりません。このWEBの理念に立ち返り、誰もが読めるHTMLを記述することがWEB原理主義です。それは過激な運動ではなく、WEB本来の目的に根ざしたごく基本的な考えなのです。

WEBに求められるもの

それではWEBの理念に回帰し、誰もが読めるHTMLを書くためにはどうすればよいのでしょうか？WEB原理主義では以下の四か条を誰もが読めるHTMLを書くための教義としています。いすれもWEBの理念から生み出されたものです。

WEB原理主義　四か条の教義: 第一教義　構造はHTMLで！; 第二教義　表現はスタイルシートで！; 第三教義　誰でもわかる、使いやすいページ設計を！; 第四教義　どのような環境からも見えること！

教義その１　構造はHTMLで！

HTMLは文書の構造を記述するために生まれてきた言語です。文章を見出しや段落で識別するための規約がHTMLです。タグの拡張と称して、文書の見栄えを良くするためのタグをHTMLに追加したことがWEBの混乱の最大の原因でした。

そもそも文章を書くということは、文章の構造を書くということなのです。文章を書くことは文字を書くことだと誤解し、文章の構造も考えず、文字を書き連ねることで文章を書いたとする傾向がありますが、これは大きな誤りです。文章は文字の羅列ではなく、構造に支えられて成り立っているものなのです。

WEB原理主義では、文字通りWEBの原理に立ち返り、HTMLではコンテンツの構造をのみを記述することとします。

教義その２　表現はスタイルシートで！

ともするとWEB原理主義とはWEB上から一切のビジュアルデザインを排除する運動だと誤解されることがあります。WEB原理主義では、情報を伝達には視覚が重要であり、そのためにビジュアルデザインが必要であると認めています。

ただ、ビジュアルデザインは麻薬のようなものです。内容の空虚なページでも、ビジュアルデザインを多用すれば、あたかもすばらしいページであるかのような錯覚を与えます。いたずらにビジュアルに走ることは、戒めなければなりません。WEB原理主義では、情報の中身と関連のない画像を多用したり、不必要に大きな画像を入れることで表示が遅くなったりすることは、重大な戒律違反だとされています。必要なところに、必要なビジュアルデザインを使用すること　がWEB原理主義の教えです。

かつてブラウザ戦争で大衆の支持を得るために二大ブラウザがビジュアル系のタグを大量生産しました。しかし、それらのタグは何の規格もない、単なる一企業の勝手な規格でした。いや、バージョンごとの対応状況をみれば、一企業の規格ですらない、その場の思いつきであった　というべきでしょう。そんなタグをいつまでも引きずってはいられません。HTMLの規格に従い、HTMLの規格にあるタグのみを使うことが、誰にでも読めるページを作ることに他なりません。

では、HTMLでビジュアルデザインが記述できないとするとどうやってビジュアルデザインをWEBに反映するのでしょうか？
WEB原理主義ではスタイルシートを利用します。スタイルシートは原理主義だけのものではなく、XMLでもスタイルシートの使用が前提となっています。スタイルシートは、HTMLと同じWEBの正統なのです。
スタイルシートに見栄えの情報を記述しておけば、HTMLがスッキリします。ビジュアルデザインの管理がスタイルシートに一元化され、デザインの変更スタイルシート上だけで済みます。
WEB原理主義宣言では、スタイルシートの記述方法と標準的なスタイルシートについて、説明を行います。

教義その３　誰でもわかる、使いやすいページ設計！

わざわざわかりにくいページを作る人はいないと思いますが、世の中にはわかりにくいページが数多く存在しています。あなたのページをせっかく訪ねてくれた人を迷子にしたり、余計な手間をかけさせたりしないように考えておく必要があります。

「戻る」とはどこに戻るのでしょうか？
「トップ」とはページのトップですか？　トップのページですか？
「イントロページ」と「トップページ」の違いは？
よく言われることですが「ホームページ」とは何を指しますか？
これら間違いやすい、あるいは人により解釈がまちまちな点をクリアにしなければ、迷子はなくならないでしょう。

検索エンジンで見つけたページではしばしば困ったことが起きます。
内容が興味深いので次のページを読もうとしたが、次のページに進めない！
誰が書いたページだかわからない！　あるいはどんな人が書いたのかわからない！
いつ書かれたページかわからない！　あるいはキチンと更新されているかどうかわからない！

WEB原理主義では、誰もがわかる、使いやすいページを作成することを、「ユーザビリティの確保」と呼び、WEB制作の重要事項だと考えています。

教義その４　どのような環境からも見えること！

少なくとも不特定の人に公開しているサイトであれば、特定のブラウザからしか見えないようなページは問題です。InternetExplorerからもNetscapeからも、見えなくてはなりません。しかし、InternetExploerとNetscapeだけがブラウザではありません。テキストしか表示しないブラウザもあります。音声読み上げブラウザもあります。そのようなブラウザからもあなたのページは見えなくてはいけないのです。

もちろん、画像を表示しないブラウザに画像を表示することはできません。音声読み上げブラウザなら、なおさらです。画像は読めません。
画像を表示しないブラウザは通信環境の不自由な人が多く使っています。音声読み上げブラウザは目の不自由な人が使うことが多いでしょう。そのような人たちを排除しないために、あなたはどうすればよいのでしょうか？

WEB原理主義では、どのような環境からも見えることを、「アクセシビリティの確保」と呼び、使いやすさ＝「ユーザビリティの確保」とともに、WEB制作の重要事項だと考えています。

付録　WEB制作にあたって考えておかなければならないこと

WEB原理主義を実践するには、この他にも考えておかなければならないことがあります。
原理主義の教義からは結論がでないことが多いのですが、いずれもWEB制作上で重要な点です。これらの課題については、この後の宗教会議で決定されることでしょう？

イントロページは必要か？
フレームを使用してもよいか？
テーブルを使ったレイアウトは是か？非か？
標準的なユーザ環境は？

更新履歴
2001.7.30　今こそ原理主義に立ち返るべき時であるとの声に従い、本宣言を作成を開始する
2001. 8. 6　天のご加護により、無事作成が完了した
2001.12. 4　AnotherHTML-lintで満点がもらえるよう修正

WEB原理主義の掟

2005-06-08T16:10:39+09:00

情報サイト WIZ

お役立ちリンク集

Webお役立ちリンク

ズクダスブログ案

ズクダスブログ案

ダメダスブログ

会社でコンピュータ・システムを使っている人、必読のブログ

これからシステムを注文しようとしている人、必読のブログ

ちょっと待て、ハンコを押す前に、これだけは読んでおけ！

システム開発の裏側、開発者はこんなことを考えている

システムエンジニアとしての経験と実感をもとに、

日常生活の事例と対比して

システム開発の問題点、改善点、課題を浮き彫りにするブログ

スタイルシートの利用

スタイルシートの利用

構造と表現の分離

HTML4の考え方

fontタグが使えない！

将来的に無効になるタグの例

将来的に無効になる属性の例

構造と表現を分離するには

スタイルシートの利用

スタイルシートの例

スタイルシートの適用方法

スタイルシートのメリット

スタイルシート 文字

文字プロパティ

サイズの値

絶対値と相対値

相対値指定時のデフォルトサイズ

色の値

スタイルシート 段落

チョットしたクイズ

段落とは？

ブロックレベルエレメントとインラインレベルエレメント

ブロックレベルエレメント

インラインレベルエレメント

注意点

pタグの使い方

スタイルシート 余白(パディングとマージン)

余白

設定

行の横幅

行揃え

行の間隔

スタイルシート イメージと文字の関係

イメージと文字揃え

文字の回り込み

スタイルシート 罫線

罫線を引く

罫線に色をつける

罫線の太さを変える

スタイルシート 印刷

改ページ指定

メディア別指定

スタイルシート タグ以外への設定

タグ以外へのスタイルの設定

佐藤の標準スタイルシート

ページの構成の考え方

ページ

ページ見出し

章見出し

段落見出し

段落小見出し

署名

コメント

プログラムソース

フッター

履歴

アクセシビリティJIS規格抜粋

資料 JIS X8341－3抜粋

JISX8341-3

メニュー

ビジネスのためのWebサイトの作り方

ビジネスのためのWEBサイト

企業は何のためにWEBサイトを作るのか？

見てもらうために必要なこと

検索エンジン対策として何をすればよいのか？

キーワードを決める

ユーザはどんなキーワードで検索するのか？

スタイルシート　文字

スタイルシート　段落

スタイルシート　余白(パディングとマージン)

スタイルシート　イメージと文字の関係

スタイルシート　罫線

スタイルシート　印刷

スタイルシート　タグ以外への設定

資料　JIS　X8341－3抜粋

検索エンジン対策として何をすればよいのか？　

歴史5 WEBルネッサンス　理念への回帰

宗教的権威W3C　WEBを語る上で欠かせない存在

WEB原理主義　目次

WEBルネッサンス　理念への回帰

教義その１　構造はHTMLで！

教義その２　表現はスタイルシートで！

教義その３　誰でもわかる、使いやすいページ設計！

教義その４　どのような環境からも見えること！

付録　WEB制作にあたって考えておかなければならないこと