www.tenman.info

目次

1. WEBパブリッシング
   1. ウェブサーバ
      1. ウェブサーバの機能
   2. ドキュメント出力の仕組み
      1. 編集ツール
         1. 編集ツールの特徴がよく出る場面
            1. 誰がいつ編集するか
            2. どのようなドキュメントを作るか
         2. ホームページ作成ソフト
            1. ブログCMS
            2. スクリプト
         3. WEBパブリッシングの為のプログラムの特徴

特集

基本に立ち返って、WEBパブリッシングを復習しよう。

ブログが登場してから、インターネット上でドキュメントを公開したり、自分の道具として活用する作業は、飛躍的に、ハードルが低くなり現在では、ポータルサイトそれぞれに、マイ何とかがつくのが当たり前です。

そのような、身近さや、お手軽さが強調される中、少しまじめに取り組んで、企業やグループのウェブ上でのパブリッシングを考えようとした時、そう簡単なものでもない事に改めて気づく機会も少なくありません。

このドキュメントは、WEBパブリッシングについて、大体の事はわかっている。わかっていた。たぶんそうだったと思う。といった、忘れかけた知識を持っている人や、雑誌で見聞きして知っている人のために、「マジですか」「ホンとかよ」ちょっとちゃんと調べておこう。という気にさせる。怪しいドキュメントです。

WEBパブリッシング

ウェブサーバにドキュメントや画像、動画などのファイルを保存しておいて、誰でも（時には、限定した範囲で）そのファイルを自分のコンピュータに保存したりする事が出来るようにする事を言います。

ウェブサーバ

ウェブサーバは、特別なものでなくても、通常私たちが使うWindowsでも、ウェブサーバとして機能させる事が可能です。

ウェブサーバの機能

インターネット上でwebサーバにアクセスする為には、ネームサーバへの登録、ドメインの取得など、自身のコンピュータの設定だけでなく、いくつかのステップを踏む必要があります。

ただ、自分でドメインを取得しなくても、加入しているプロバイダが、ダイナミックDNSなどのサービスを提供していれば、自宅のパソコンにインターネットからアクセスすることが出来るようになります。

Apacheなどのサーバプログラムをインストールする事で、URLを入力して、ドキュメントにアクセスする事が出来るようになります。LAN等で数台のコンピュータがつながっていれば、LAN内で情報を共有したりすることが出来ます。

同じプラットフォームを使っていれば、Apacheをインストールしなくても、LANでファイルを共有したりすることは出来ます。この場合は、ディレクトリ単位でアクセスして、一覧の中から、ファイルを自分で開く必要があります。
サーバプログラムをインストールすることで、http://localhost/等、URLを使って異なるプラットフォームからのアクセスも可能です。

ウェブサーバプログラムは、指定したファイルを表示したり、アクセスに許可が必要な場合に、パスワード入力を確認したりする機能を持っています。
したがって、ウェブパブリッシングの計画をする時に、ブログやCMSのインストールだけでなく、アクセス許可や、ファイルが存在しない場合の挙動などについて設定が必要になります。

Apacheだけがインストールされていれば、何でも出来るという事はありません。
共有サーバなどを利用する場合には、計画している機能を使えるかどうかを判断する必要があります。

ドキュメント出力の仕組み

一般的なドキュメントは、htmlと呼ばれるテキストファイルです。様々なプログラムで、htmlファイルを作成する事が出来ます。
ブログも、ホームページ作成ソフトも、サーバサイドスクリプトも、クライアントスクリプトも、一般的には、htmlを出力します。
どの仕組みで、htmlを出力するかによって、htmlの性質が変わります。

編集ツール

ドキュメントの編集用プログラムは、PCにインストールして使用するものと、サーバにインストールして使うタイプに分かれます。
ホームページ作成ソフトを使っても、ブログなどのコンテンツマネージメントを使っても適切に運用されていれば、使い勝手は悪いものではありません。

編集ツールの特徴がよく出る場面

ホームページ作成ソフト

WEBパブリッシングの為のプログラムの特徴

WEBパブリッシュを行うためのツールの多くは、オープンソースです。

オープンソースは、オープンソースを組み合わせて作っています。最新版をインストールしても、内部で使っているオープンソースは、最新版とは限りません。

オープンソースのプログラムの特徴は、ライセンスの範囲で、誰でも自由に利用する事が出来ます。
オープンソースは、無償で配布されるケースが多いため、フリーソフトと同じようにみられますが、フリーソフトは、必ずしもオープンソースではありません。
フリーソフトの多くは、ソースコードを公開していませんし、改造したりすることはできません。

WEBパブリッシングは、どのプラットホーム（windowsでも、Macでも）でも、普通に表示できるほうがいいに決まっています。そのために結構手間がかかります。この互換性を確保する作業は、簡単ではありません。

目次

1. htmlファイル
2. htmlソースのサンプル
3. ブログなどが出力するhtml
4. WEB標準
   1. ブラウザ
   2. htmlの文書型
   3. なぜ、W3Cの文書型を使うのか

特集

基本に立ち返って、WEBパブリッシングを復習しよう。

WEBパブリッシングに不可欠なファイル形式に、html形式のファイルがあります。
もっとも、よく利用されるファイル形式ですから、この際概要を抑えておきましょう。

htmlファイル

htmlファイルは、hyper text markup languegeで記述したテキストファイルです。windowsでは、アクセサリにあるメモ帳が、テキストファイルを編集するプログラムです。

メモ帳に、何か文字を入力して、ファイル形式をhtmlで保存していただくと、そのファイルは、ブラウザで開くようになり、入力した文字を見ることが出来ます

ブラウザで文字が判読できない場合、それを、「文字化け」と呼びます。

実際に試していただくと、単に文字を入力して表示することが出来ますが、メモ帳で入力した改行などは、無視される。等といったことを理解していただけると思います。

私たちが、日常使っている文書作成ソフトなどでは、見出しをつけたり、行をインデントしたりして、文書の体裁を整えますが、そのような部分。
つまり、どこからどこまでが、見出しになるか、段落になるか、特定部分の意味をコンピュータに伝える役割を担うのが、hyper text markup languegeで、タグという記号で、文書に意味を与えます。

タグ付けによって、文書構造をブラウザが理解できると、ブラウザ自身が持っているベーシックなスタイルを適用して、見出しなら、大きめの文字で表示するとか、調整をして、ディスプレイに表示します。

必要により、スタイルを指定したり、スクリプトを適用したりして、ブラウザでの見栄えや、印刷時の調整などを行うことも出来ます。
それらの指定は、htmlタグ単位を中心に指定されます。

このように、htmlファイルは、文書をコンピュータが解釈したり、視覚的な指定や、操作性に関する設定などの要になるファイルです。

htmlファイルは、元々は、それほど厳密な描写や、作業性を作り出したり、維持したりする為に作られたものではなく、簡易的なものでしたが、インターネット上で爆発的に利用される中で、厳格さが要求されるようになりました。

現在では、W3Cという、標準化団体の公開するDTDやJISなどに準拠する事が、ごく普通のことになりました。W3Cでは、文書型の定義を、過渡的なもの、正確なものの、2種類の体系で、文書型を公開しています。

厳密さと寛容さの2面性を持つドキュメントとして煩雑な面もありますが、プラットフォームを越え、長期にわたる可読性の維持が可能な他のファイル形式には望めない力のあるファイル形式でもあります。

日常的な広報活動のツールとして、認知されたWEBパブリッシングを考える時、いかにユーザが使いやすいツールになっているかという点がとても大きなテーマになりますが、編集効率というテーマは、誰がどれ位の効率で更新しているのか、比較が困難な為に、あまり意識されていないというのが実情ではないかと思います。

htmlソースのサンプル

ブログなどが出力するhtml

ブログ等のWEBアプリケーションが出力するのも、htmlです。ブログは、テキストエリアや、テキストエリアの機能を拡張したプログラムから、エントリの文章が入力されます。

ブログは、エントリのブロック以外のリンク等のナビゲーションの機能などは、自動的に更新されます。便利な仕組みですが、すでにレイアウトが出来上がっている部分に、エントリを、埋め込む作業といえます。

エントリ内の編集は、インライン要素と呼ばれる。単語の強調などがメインになり、ブロック要素と呼ばれるエレメントは、リストや引用に限定される傾向にあります。

文章を見やすく配置するというよりは、手紙や日記などのような文章形式になります。
比較的読みにくいので、行間を極端に空けた記述の仕方をする人もいます。
ブログエントリ内で、レイアウトを含んだhtmlの記述をしようとすると、編集領域の狭いブログでは、コードの可読性がいちぢるしく低下します。
また、スタイルシートと、ドキュメントの同時編集も考慮されているわけではなく、効率がよいとはいえません。

ブログは、分かりやすい文章を、簡単に書ける割り切ったツールです。
運営上何らかの工夫が必要になることも少なくないと思います。
たいていのブログには、プラグインという、補助プログラムが追加できるようになっていますが、活発に作られるプラグインは、ユーザの工夫の必要性が、少なくない表れなのかもしれません。
また、このような工夫を重ねることが出来るような、htmlを考えると、WEB標準を念頭におく必要性があります。それは、WEB標準ドキュメントを前提として、サードパーティプラグインなども制作されているからに他なりません。

WEB標準

ブラウザ

あまり知られていませんが、ブラウザには、標準モード、互換モードという表示モードがあります。htmlは、終了タグを省略したり、存在しないタグを記述したとしても、エラー表示を行いません。間違った書き方をしていても、極力表示する「寛容さ」を持っています。

これはとても重宝でした。特に初心者がhtmlを書く上で、ハードルは低くなりましたが、ブラウザは、1種類ではありません。
同じさじ加減で表示を調整することなど出来ないので、表示が崩れる原因になりもしました。

適当に記述しても、表示してくれる手軽さと、厳格な記述と指定されたとおりの表示の両方をこなす必要が出てきました。

htmlの文書型

htmllintという、htmlの検証サービスのサイトには、41個ほどの、ドキュメントタイプがあります。
W3Cなど標準化団体のもの、Microsoft等独自のもの。様々です。

WEB標準という場合は、W3Cの文書型定義に準拠するドキュメントを指しますが、html4.01や、xhtml準拠を指します。

これらの文書型は、おおむね2000年前後には、公開されています。現在は、html5が検討されています。

W3Cが公開する　html4.01やxhtmlは、私たちが、準拠すべきルールなのでしょうか。

という説明が行われますが、とても誤解を生みやすい表現だと感じています。

それらの文書型に合致していれば、ブラウザが表示を保障するなどという事はありません。

例えば、イメージタグにAlt属性が必須である。と誰もが言いますが、ブラウザでaltに合致するページ内検索をしても、画像にフォーカスが行くこともありません。

しかし、そのような動作が保障されているわけではなく、準拠したドキュメントであっても、標準モードで動作しないブラウザがあることは、広く知られている事実です。
欠点をあげつらう意図はありませんが、現実にWEBパブリッシングを行う場合には、ブラウザのバグや、文書型に対する誤解が発生しやすく、
とても理解しにくいものになっています。
例えば、「W3Cの文書型に準拠していれば、完全なhtml文書。」というものです。
実際には、準拠していても、問題は出ます。

なぜ、W3Cの文書型を使うのか

WEBサイト運営上のパブリッシングポリシーとして採用するというのが、近い姿だろうと私は考えています。
htmlやcssの編集作業は、一見非常に簡単に見えます。また、それなりに誰でも出来ます。しかし、ドキュメントは運営を始めると爆発的に増加します。あるディレクトリのすべてのファイルの中から、http://www.tenman.info/hoge.htmlというリンクを、http://www2.tenman.info/hoge.html
に変更しなければならない。その数が、1000個ほどある。というのは、珍しいことではありません。
デザインの変更もありますし、例えば、外部サイトは、｢新しいページとして開きたい。」というニーズもあるでしょう。そのようなニーズは、ルール上、否定されるものですが、特例も必要な場合もあると思います。
ブラウザを、標準モードで動作させ、WEB標準に準拠しているところ、していないことを、明確にしておくと、問題の切り分けが可能になり、見通しがだいぶ良くなります。

目次

1. スタイルシート
   1. スタイルの指定と挙動
      1. 誤指定
      2. 重複指定
   2. ユーザスタイルシート
   3. ブラウザ互換性
      1. star hack
      2. under score hack
      3. ブラウザ依存機能をページヘッダに埋め込み
   4. javascriptからのアプローチ
   5. レイアウトとデザイン

特集

基本に立ち返って、WEBパブリッシングを復習しよう。

htmlファイルは、ブラウザなどのプログラムに文書の構造を明確に記述します。検索や再利用の為の布石を提供する為の布石になります。

スタイルシートは、エレメントやid classといった属性等をベースにして、ブラウザが表示する時のレイアウトや色画像など、ヒューマンインターフェースを担当するファイルです。

スタイルシートは、一般的には、スタイルの指定を記述したテキストファイルですが、CMSなどでは、サーバサイドスクリプトを使った。レイアウトや配色を動的に制御することも行われています。クライアントサイドスクリプトなどとの連携で、より、操作性のよいインタラクションデザイン構築のために利用されてもいます。

スタイルシート

htmlファイルで使用するエレメントの、id　class style といった属性を主に使って、視覚的な指定を行います。

視覚的な指定を行うことは、他の属性を使用することでも指定することが可能です。
古い指定の方法の一例を紹介します。

ブラウザは、現在でも、このエレメントで記述したhtmlドキュメントを表示することが出来ますが、それは、htmlドキュメントが、如何に古いドキュメントであっても表示を可能にするという「寛容さ」を表しているもので、WEBパブリッシングの現場で、このエレメントを使う事を誰も推奨していません。

現在では、htmlとスタイルを分離するのが常識になり、このエレメントを使っていたころには、同じ指定が必要な、すべての部分にこのようなタグがちりばめられ、デザインの変更をするなら、最初から作成したほうが楽なケースがたくさんありました。

現在、ブログで、自由にデザインが選べるのも、このスタイルシートの存在が欠かせません。

スタイルの指定と挙動

誤指定

重複指定

• スタイルの適用に関する優先順位は、「 !important指定」「詳細度」「記述位置」によって決まります。

• 詳細度が同じ場合は、外部スタイルファイル < スタイルエレメントによる指定　< スタイル属性による指定が優先されます

ユーザスタイルシート

ユーザがスタイルシートを指定することも出来ます。
スタイルシートは、WEB制作者側で提供するものが、適用されますが、ブラウザの設定によっては、ユーザが用意したスタイルシートを適用することが出来ます。
また、WEB制作者側で複数のスタイルシートを用意しておいた場合、それらをユーザーが切り替えることが出来る機能を持ったブラウザもあります。

スタイルシートは、media属性に値を指定することで、印刷用のスタイル、モバイル機器からのアクセスなど、特定の環境下で異なるスタイルを適用することも出来ます。

ブラウザ互換性

スタイルシートが、html同様エラーを発生させることがなく、記述に問題があっても、バリデーションツールを使わない限り、簡単に見つけ出すことは難しいという問題があります

スタイルシートでは、このエラーを発生させないという性質を利用して、ブラウザ毎の表示の不釣合いを調整する。CSS Hackというテクニックが使われます。

スタイルシートは、環境変数から、そのブラウザの種類を推定して、見合ったスタイルを読み込ませるという事が技術的には出来ますから、そのような選択肢もありますが、簡便に互換性を保とうとする場合に用いられます。

javascriptからのアプローチ

スクリプトを遣って、ブラウザの描画の互換性を高める企ても行われている。

レイアウトとデザイン

スタイルシートは、htmlドキュメントのエレメントやid class　といった属性や、それらの組み合わせを指定します。

実際の指定は、id class element それぞれの優先順位が違います。また、複数のクラスを、半角スペースで区切って使うことも出来ます。

• エレメントの　色、背景色、背景画像、
• ブロックエレメントの、位置、幅、高さ、枠線
• 画像の幅、高さ、
• ハイパーリンク（やエレメント）のクリック、マウスオーバー、アクティブ等、マウスの挙動に応じて、スタイルを指定することが出来ます。

レイアウトは、divエレメントを使って、ページ内を数列に分割して、ナビゲーション列、本文列、の組み合わせによるメインのドキュメント部分と、その上下にヘッダ行　フッタ行を配置したものが、よく使われます。
レイアウトは、自由ですが、「ありふれたレイアウトのほうが、わかりやすい。使いやすい。」という操作性が失われることもある為、注意が必要になります。
ブラウザが、標準で備えている。文字列の表示サイズや、エレメントの表示の仕方は、それぞれのブラウザで異なります。このため、最近は、スタイルシートの初期化という作業を行う場合もあります。初期化によって、h1-6の見出しエレメントのサイズや、リストのマージン等をリセットして、指定しなおすなどということもあります。
スタイルシートは、CSS2迄が使われますが、実際にその指定が有効かどうかは、ブラウザによって異なります。

目次

1. マルチメディア
   1. 動画
   2. 音声

特集

基本に立ち返って、WEBパブリッシングを復習しよう。

YouTubeなど、動画を使う環境が整ってきました。
htmlで表現できる範囲が大きく広がってきました。
また、API等を使ったサービスも増えてきたので、手軽に楽しむことも出来ます。

マルチメディア

WEBパブリッシングで、視覚的な効果を狙ったものに、動画、音声、色、画像などがあります。
htmlでは、これらを表す専用のエレメントや属性があります。

動画

動画を再生する場合には、専用プログラムの起動が必要になります。htmlでは、objectエレメントを使います。
ただ、objectエレメントをサポートしていないブラウザもあるので、embedエレメント（ブラウザ依存タグ）を併用します。
場合によっては、iframeエレメントを使う場合もあります。

ドキュメントの表示に時間がかかる。ロード中に、中止のアクションが取れない。等、敬遠されることもあります。
ユーザの接続環境によっては、不用意に利用すると、効果が半減する事もあります。

現在は、Ajax等の、非同期通信の仕組みがよく利用されるようになって来ました。phpなどのサーバサイドスクリプトとJavaScriptの組み合わせ等で、htmlで表現出来る範囲が広がっており、
ブラウザ内で処理できる場合もあります。

WEBドキュメントは、繰り返し閲覧してもらう事を暗黙のうちに想定しています。

マルチメディアを使う一般的な動機は、

• いかにユーザを魅了するか。
  • （例えば、フラッシュ動画コンテンツの埋め込み。）
• いかに効率的になるか。
  • （ワード等既存文書をPDFとして作成する。）

この2点ではないかと思います。
したがって検討すべき点は、

• ユーザを魅了し続けられるか。
• ユーザにツケをまわしていないか

ユーザのメリットを追及することが、マルチメディアを使う一番大きな理由であるべきでしょう。

音声

PodCast等、音声情報を伴ったドキュメントの場合、ユーザーの意図に反して、音声が再生されるなどといった問題に注意する必要があります。

目次

1. htmlの画像
   1. イメージの表示
      1. img element
      2. object element
      3. iframe element
      4. CSS　image
   2. 画像を表示する現実的な選択肢
   3. 画像の種類
      1. ラスタ画像
      2. ベクタ画像
      3. 画像の生成過程毎の特徴
         1. ダイナミック画像　スタティック画像　添付情報
   4. 色
   5. レイアウト
      1. リキッドレイアウト
      2. ソリッドレイアウト
      3. エラスティックレイアウト

特集

基本に立ち返って、WEBパブリッシングを復習しよう。

ドキュメントを読みやすくする工夫は、文章そのものだけではなく、読みやすさや、画像などによって、内容の理解が早まったり記憶に残り易くなる事があります。ドキュメントには、様々な工夫と仕掛けがあります。
WEBドキュメントに関しても、WEBブラウザで閲覧するという独特の環境から来る工夫が必要になる場合があります。
ここでは、WEBパブリッシングにおける「レイアウト」「画像」と「色」について、その基本を復習していきたいと思います。

htmlの画像

WEBの閲覧に使われるブラウザのサイズは800pxから1024pxが中心です。
このことから、WEBパブリッシングで利用する画像は、100万画素くらいで十分だといえます。
画像を画素数だけで論じることは出来ませんが、印刷に使うような画素数は必要ありません。

ディスプレイに表示する画像そのものが、｢エコ」です。

イメージの表示

htmlドキュメントに、gifやjpg形式のファイルを表示する方法は、4種類ほどあります。

img element

一つ目は、imgというエレメントを使って表示します。
このエレメントには、width　height altという主要な属性があります。width
heightに説明は必要ないと思いますが、alt　とはなんでしょうか、たぶん　ALTernate　で、代替文字を意味します。

htmlは、プラットフォームに依存しない。ということを強く意識したドキュメントです。

人は、画像を瞬間的に理解し、解釈します。
しかし、ユーザのエージェントとして一番最初に、WEBページにアクセスするのは、コンピュータです。コンピュータには、視覚も、感性もありません。画像として評価できれば、表示しますが、それが無理なら、「無理！」としかりアクションが取れません。コンピュータは、画像表現を理解できないのです。それが、alt属性を必要とする理由です。

htmlには、WEBアクセシビリティという指標があります。

例えば、

• 「WEBドキュメントは、マウスがなくたって、最低限度の操作を出来るようにすべきだ。」とか、
• 「小さい文字が見えにくい人もいるのだから、文字の大きさを可変できるような、htmlの指定の仕方をすべきだ。」とか、
• 「自分で操作が出来ないような、自動的な動きは出来るだけ避けて、気に入らないときには、その動作を停止したり出来るようにすべきだ。」とか、

使いやすさのための指標を決めていて、それに由来する留意点が、画像や色に関して、何個かあります。

object element

画像をオブジェクトエレメントで、表示することが出来ますが、ほとんど使われません。

<object data="/images/DSCF0024.jpg" type="image/jpg">見本画像 IE6. IE7 表示できません</object>

iframe element

画像をインラインフレームエレメントで、表示することが出来ますが、ほとんど使われません。
<iframe src="http://www.tenman.info/images/DSCF0024.jpg"
style="width:310px;height:230px;" marginheight="0" marginwidth="0" hspace="0"
vspace="0">IE6. IE7は画像の原寸で、firefoxでは、画像が縮小されて表示されます。
</iframe>

CSS　image

styleの指定を使って、背景画像として、画像を表示します。
スタイル指定を使って画像を表示する手法は、頻繁に利用されます。

画像を表示する現実的な選択肢

現実的な選択肢は、imgエレメントと、スタイルは、バックグラウンド属性の指定の2種類です。
CSSのバックグランド属性を巧妙に使用した例としてYouTubeのCSS Spriteがあります。

画像は、レイアウトの中で使われることもあれば、ドキュメントの中身を視覚的に補助する役割を担ったりその使われ方は、様々です。
レイアウトの一部など大面積の場合は、背景色との組み合わせで、使われることが多いといえます。

画像の種類

ブラウザで表示可能な画像には、大きく2種類に分けることが出来ます。
ラスタ画像は、jpgやgifといった。写真や、背景画像として一般によく使われます。もうひとつは、pdfファイル、svgファイルなど、拡大しても画面が荒れることなく表示ができるファイルです。

ラスタ画像

私たちが、画像と呼ぶときには、通常こちらで、多数の色の点から構成されます。画像を拡大していくと、モザイクのようになります。

ベクタ画像

CAD図面のように、拡大し続けても、モザイクのようになることがなく、画像が荒れることがありません。

画像の生成過程毎の特徴

見た目では、区別がつきませんが、スクリプトを使って生成する画像は、画像を表示するスクリプト内に、自由にスクリプトを組み込むことも可能ですから、アクセスを解析したりすることも、情報によって表示内容を変更することも可能です。

ダイナミック画像　スタティック画像　添付情報

ラスタ画像、ベクタ画像共に、PHPなどサーバサイドスクリプトを使って作る方法と、デジタルカメラや、CADソフトやイラストレータ等のプログラムから生成した静的なファイル、いずれの方法でも作成することが出来ます。

デジタルカメラで、撮影したjpg形式のファイルには、EXIFデータがついていることが多く、そのデータを読み取ることが出来ます。
不用意に、公開したくない情報を、読み取られる可能性もありますので、WEBパブリッシングの時には、注意が必要です。

色

WEBドキュメントの画像と配色は、ドキュメントの印象に大きな影響を与えます。
色についても、すべてのプラットフォームで、完全な互換性があるわけではありませんから、ページレイアウト用の画像と、背景色との組み合わせなどが、最悪破綻することもあるかもしれません。
このようなことから、WEBセーフカラーが216色用意されています。これで、プラットフォームを越えて、共通して利用できる色を知ることが出来ます。
このように、色についても、WEBパブリッシングを行う場合には、印刷とは異なった配慮が必要です。
その辺について考えて見ます。

例えば、グラビア印刷された写真集のようなページを、WEBページとして完成させたいと考えるとします。

冒頭に記述したように、印刷物とは異なり、コンピュータのディスプレイは、主流が、1000個(XGA)ほどの点の集まりで、横幅を形成します。これは、印刷物とのどのような違いを生むのでしょうか？

グラビア印刷の写真が見えにくければ、虫眼鏡を持ってきてみるでしょう。では、ディスプレイを虫眼鏡で見たら、見やすくなるどころか、点が目立って、かえってみずらくなるでしょう。

写真集の写真のディティールに目を奪われたら、スタンドを近づけて、目を凝らしてよく見るでしょう。では、ディスプレイはどうでしょうか、ディスプレイは反射原稿ではありません。透過原稿ですから、多少の調整は出来ますが、本を見るようなわけには行きません。
印刷物の時には、背景と文字の微妙な色使いが効果的であっても、それが、そのまま適用できないこともあるかもしれません。
小さな画像を、きれいに表示できたり、メリットも多いのですが、一言で言うと、「ラティテチュードが、狭いのです。」
ディスプレイは、それぞれ、色の表現が異なります。また、室内照明の色温度の影響も受けやすいので、微妙な表現は、困難です。
根本的には、印刷物と異なり、手触りや、ページをめくる感触など、再現は物理的に困難です。ページをめくる感じに近い表現を模倣したやり方も存在しますが、WEBパブリッシングには、独自の操作性が必要ですから、単に、置き換えをすることが困難です。
文字そのものに関しても、コンピュータにインストールされていない文字は、類似のフォントスタイルで表示されるので、印刷物を制作する場合のこだわりを、そのままWEBパブリッシングに持ち込むには、無理があります。

出版物は、一度出版されると、姿を変えることはありません。WEBパブリッシングの場合には、配色、レイアウト、すべての点で、常に変化します。
WEBパブリッシングは、きわめて動的なメディアです。ひとつのサイトが、同一の体裁を維持し続けることは稀です。
それは、wayback machineで変遷を簡単に調べることができます。

この為、そのような変化に対応できる編集上の仕組み、が必要です。

レイアウト

WEBドキュメントのレイアウトも、書籍などとは、まったく異なります。それぞれのページは、リンクでつながっているだけです。
リンクがなければ、インターネット上で、そのページへたどり着くすべがありません。
ナビゲーションの為のリンクがたくさん張られた。独特のレイアウトは、ユーザが使いやすい形を模索していまの形になっています。
ある、ポータルサイトのレイアウトが、別のポータルサイトのレイアウトにとても似ていることがあります。
なんて、オリジナリティがないんだ。と嘆く方も少なくないと思います。
作業性とデザインの両立は、意外と簡単には出来ないかもしれません。気合を入れてがんばりましょう。

リキッドレイアウト

ブラウザの幅に追従しながらページを調整するレイアウトの方法。
ブラウザのサイズにドキュメントが追従することで、出来るだけ多くの情報ををスクロールしないで表示できる。

ソリッドレイアウト

ブラウザの幅に関係なく指定した幅で、レイアウトする方法。
幅が一定のために、背景画像などの配置が単純にな利レイアウトが簡単。ブラウザによって、大きな余白が出る。
文字を大きくしたような場合、一行ないに収まる文字数が変わって、アンバランスになることもある。

エラスティックレイアウト

ドキュメントの文字列のサイズをベースにレイアウトする方法。
文字サイズを変更した場合に、レイアウト全体が拡大縮小するレイアウト。
画像なども、同時に拡大縮小する必要が発生することもある。
リキッドレイアウト、ソリッドレイアウト、エラスティックレイアウトそれぞれ、文字列のサイズ変更や、サイズがトリガーになって、レイアウトの変化が発生しますが、その発生頻度と、そういった仕掛けの為の手間の問題が大きいと思われます。
エラスティックレイアウトで実現する機能は、ズーム機能に似ていて、ユーザのリテラシーが高ければ、ブラウザ側の操作で実現できたりすることもあります。

目次

1. Apacheサーバの設定
   1. .htaccessの用途
      1. phpのエラーをディスプレイに表示しない。
      2. index.phpをトップページとして表示できるようにする。
      3. index.htmlというファイル形式のままで、phpファイルとして動作するようにする。
      4. 認証の失敗やエラーのときに表示する代替ファイルの指定。
      5. ファイルの閲覧禁止
      6. アクセスのあったURLを別のURLに移動する

特集

基本に立ち返って、WEBパブリッシングを復習しよう。

多くのレンタルサーバで使っているApacheというサーバについて、復習しておきましょう。
レンタルサーバの場合には、.htaccessファイルを使って、アクセス制限をしたり、ファイルがない場合に、表示する特別なファイルを表示したり、アクセスをうまくコントロールして、閲覧する人が、迷子になったり、困らないようなページ作りがを学んでおきましょう。

Apacheサーバの設定

自分だけが使用する場合ならば、httpd.confという設定ファイルがあるので、そのファイルに変更を加えるという事になりますが、共有レンタルサーバでは、このファイルを直接操作する事が出来ない為、.htaccessというファイルを使う事になります。

Windowsでこのファイルを作る場合には、テキストエディタで、名前をつけて保存にして、.htaccessという拡張子だけのファイル名で保存してください。

.htaccessの用途

使用例を紹介します。

phpのエラーをディスプレイに表示しない。

たまに、PHPのエラーが表示されてしまったページを見る事があります。
当然ですが、画面も乱れ、なんかがっかりしてしまう事もありますが、そのようなエラーを画面に表示しない為の工夫です。

index.phpをトップページとして表示できるようにする。

index.htmlというファイル形式のままで、phpファイルとして動作するようにする。

認証の失敗やエラーのときに表示する代替ファイルの指定。

ファイルの閲覧禁止

<FilesMatch "^\..*">

deny from all

</FilesMatch>

アクセスのあったURLを別のURLに移動する