HTTPサーバーとWeb開発

Web開発、特にクライアント側のHTMLインターフェースの開発において、
ほとんどのWebデザイナーおよび開発者は、自分のローカルPCで、
HTML作成ツール(DreamWeaver等)を使用しHTMLファイルを作成するか
テキストエディターを使用しタグ打ちで編集しHTMLファイルを作成している。

HTML作成ツール(DreamWeaver等)で開発しているのであれば、そのツールにビュアーがあるので、
ツール内で編集したHTMLファイルをブラウズすることができ、スタイル(見た目)をその場で確認することができる。

しかしテキストエディターでHTMLファイルをタグ打ちし、HTMLのレイアウトやスタイル(見た目)を確認するには、
例えば一般的には、作成したHTMLファイルをHTTPサーバーの所定の場所に配置し、ブラウザより

http://192.168.1.1/AS400-NET.USR/XXXX.HTM

のようなURLへアクセスを行い、HTMLファイルのスタイル(見た目)を確認している。
このように、確認する度にサーバーへHTMLファイルをアップロードする作業が繰り返し必要となるのでは
作業効率が悪いと思いませんか?

そこで、いちいちHTMLファイルをサーバーに保管せずとも、ローカルPC上でHTMLファイルのスタイル(見た目)や
レイアウトをサーバーに保管したときと同じように確認する方法がある。

下記のように一行を挿入するだけ!!

     <html>
     <head>
     <base href="http://192.168.1.1/AS400-NET.USR/">
     <meta http-equiv="Content-Language" content="ja">
      ・
      ・
     <LINK href="/AS400-NET.USR/TEST.css" rel="stylesheet" type="text/css">
      ・
      ・
     </html>

<base>タグは、HTML文書中に存在する相対パスで指定しているリンクに対して、
ベース（基点）となる URL を定義します。
従って、上記の外部スタイルシート(TEST.css)のファイルもローカルPCから相対パスで
参照することができるのである。

これはスタイル(見た目)の確認だけではなく、もちろん外部JavaScriptファイルに定義されている関数の動作確認も
HTMLファイルをサーバーに保管せずにローカルPC上で行えるのである。

104. HTML開発のとっておきテクニック!!