建築学習 memo

実制作

HTMLの概要

例えば、私たちがブラウザで普段なにげなくながめているインターネット上の画像が表示されたページも、じつは『HTMLファイル』と『画像ファイル』という、複数のファイルから構成されています。ブラウザのメニューの表示からソースを選んで見てみればわかる通り、『HTMLファイル』とは、実は文字のみのテキストファイルです。
HTMLとは、“Hyper Text Markup Language”の略であり、WEBページを構築する際、文書の構造をコンピュータが扱いやすいようにマークアップする（目印をつける／タグをつける）言語のことです。文字や画像のレイアウトや、関連づけたリンク先を指定し、ブラウザがそれを認識して表示する仕組みになっていて、<と>の記号で囲まれたタグをつけていきます。
制作例：
参考フォーマット

タグの付け方

タグは幾つかの決まった種類があります。<～>で囲まれた部分をタグと良い、～の部分に決まった単語（半角英数字）を入力することで、タグとなります。

基本的にタグは、「<～>○○○</～>」の形をとります。最初の<～>は「ここから～というマーク」の意味で、最後の</～>は「～というマークはここまで」の意味です。そうして「○○○」の部分を<～>というタグで囲むことによって、マークアップしていきます。
例えば、<a>○○○</a>とすると、「○○○がaである」とマークアップされることになります。

また、一部のタグは<～>という単独で記述します。後で述べる<br>や<img>などの改行タグや画像タグなどがそれに該当します。

HTMLファイルの基本構造

HTMLファイルは、「ファイル名.html（拡張子.html）」とファイル名を付けられたテキストファイルです。
HTMLファイルの中味は、<html>～</html>の間に記述します。HTMLの中味は大きくヘッダー（<head>）と本文（<body>）に大別されます。それぞれのタグが入れ子構造になっていることが特長です。

つまり、基本的なHTMLファイルの記述は以下のようになる。

<html>
<head>
タイトルなどの情報を記述
</head>
<body>
本文や画像などの情報を記述
</body>
</html>

詳細は下記の技法・解説を参照：
HTMLの必須タグ <html>, <head>, <body>

基本のタグを理解しよう

先に述べたようにHTMLは文書の構造を記述する言語ですから、タグにはそれぞれに“意味”があります。以下にあげるタグはWEBページを構成する基本となるものですから、最低限理解しておきたいものです。このタグを押さえれば、特別なソフトウェアがなくともテキストエディタ*を用いて、ごく簡単なWEBページの制作が可能です。
これらのタグは<body>タグ内に記述します。
*Windowsであればメモ帳、MacintoshであればSimpleText/TextEditなどOSに標準で付属するソフト

技法・解説：
リンクタグ <a> 文字の大きさや色を指定するタグ：<font> 画像を表示するタグ：<img> 動画を表示するタグ <embed> テーブル（表組）タグ：<table>, <tr>, <td> パスの記述方法

制作ツールについて

HTMLデータ制作では、画像などの素材は別途に画像編集ソフトで準備し、テキストエディタでHTMLソースコードを記述したうえで、実際の画面表示はブラウザ上で確認する、という流れで作業をすすめます。
HTMLソースを変更した場合、ファイルの保存後にブラウザの再読み込み（リロード）ボタンをおします。

HTMLファイルの構造と基本のタグを理解していれば、簡単なページの作成はこの『テキストエディタ』と『ブラウザ』と『画像編集ソフト』があれば十分に可能ですが、WEBサイトの規模が大きくなったり、ページが長くなったり、複雑なレイアウトを実現したくなった場合には、HTMLソースコードが長くなり、制作中にストレスを感じるかもしれません。
フリーや市販ののソフトウェアを使用すれば、HTMLソースコードを触ることなく、レイアウト画面上でWYSWYG（What You See What You Get）で編集することもできます。HTMLエディタにはさまざまありますので、自分の制作環境にあったものを探してみてください。
WEB制作マニュアル：
制作ツールリンク集

オフラインチェック・オンラインチェックのポイント

制作したHTMLデータは、そのままでは多くの人にみてもらうことはできません。インターネット上のサーバにのせてはじめて公開されます。サーバにあげる前にデスクトップ上（オフライン）で、以下の点をチェックしておきましょう。

リンク・画像のチェック リンク機能・画像の表示はしているか？機能していなければタグの綴りは正しいか？ファイルに拡張子はついているか？タグの入れ子はただしいか？ファイル名のつけ方は正しいか？などを確認しましょう。
技法・解説：
ファイル名の注意点

機種依存文字、特殊文字 ローマ数字やなどの記号類の多くは「機種依存文字」といって、OSが異なると文字化けの原因となります。できるだけ使用しないか、どうしても使用する必要がある場合は、「特殊数字」を表示する特殊なキャラクターコードをHTMLファイルに直接記述しなければなりません。
技法・解説：
機種依存文字特殊文字の表示

レイアウトくずれ 受け手側のブラウザやOSごとに文字の見え方は異なってきます。必ずしもこちらの意図した文字サイズでみてくれているとは限りません。CSS（スタイルシート）やJS（ジャバスクリプト）などのHTMLに機能を付加する高度な技術を利用すれば制御することができますが、それよりもまずは、多少の変動にも対応可能な余裕をもったレイアウトをこころがけた方がよいでしょう。

それでもオンラインチェック時にリンクや画像が壊れたら？ 上記のことをオフラインで確認後にサーバにアップしたのに、それでもリンクや画像が壊れていたら、リンクや画像の場所の指定が、ローカルアドレスを示す絶対パスになっていないかを確認してみましょう。HTMLエディタなどを使用した場合や画像をコピー＆ペーストして編集した場合、知らず知らずなっている場合があります。

例）誤ってローカルアドレスを絶対パスで指定している例：
<img src="C:data¥kenchiku¥work1¥image¥work1.jpg">
<img src="file:///data/kenchiku/work1/image/work1.jpg">

こういった記述は、HTMLエディタを使用中などに、コピー＆ペーストで画像を貼った場合などにおこりやすいので注意してください。ただしく相対パスで記述しなおす必要があります。
技法・解説：
パスの記述方法

ディレクトリ構造

プランニングで考えたコンテンツの構成ページ数よりも、実際に制作するデータファイル数は多くなります。きちんと階層化したフォルダをつくり、画像はイメージ専用フォルダに格納するなど、HTMLファイルを扱いやすいように整理しておきましょう。場当たり的に制作すると、ファイルを探すのが困難になりますし、あとから階層構造を変更すればリンクや画像が壊れかねません。事前に計画しておくとスムーズです。自分なりのファイルやフォルダの命名規則を考えておくと良いでしょう。

技法・解説：
ファイル名の注意点パスの記述方法