「6章 Webページの制作」の演習問題の解答例
演習問題の解答例
6章で解説した基本的なHTMLタグ、スタイルシートを使い、企画デザインしたWebページを制作します。
W3Cが推奨するHTMLの規準は、絶対的なルールではありませんが、規準から大きく外れないようにHTMLを記述することは、環境によらないアクセスビリティに配慮するためにも重要です。
オーサリングツールは描画ソフトのように簡単に要素を配置でき、装飾ための画像も用意していますが、それに頼ると、装飾過多で、画一的なデザインになりがちです。設計プロセスで行ったページデザインを基本に作業をすすめてください。
テキストエディタでタグを自分で記述するのは、タグの働きを理解する上でも、HTML文書の成り立ちを理解する上でも、よい学習になります。オーサリングツールはその部分を隠し、直接見えないようにしているので、HTMLファイルを記述していることに意識が及びにくくなります。
ファイル名
どの道具を使うとしても、ファイル名のつけ方、ファイルを置くフォルダ構造については、十分理解しておく必要があります。
HTML文書や画像のファイル名には日本語コードや空白を含めないようにします。Webサーバとして働くコンピュータやネットワークの環境により、日本語コードを含むファイル名をつけると問題が起こることがあります。作成したHTMLファイルを、ローカルなコンピュータ(使っているコンピュータ)上で、ブラウザに表示するだけであれば、日本語や空白を含んだファイル名でもまったく問題ありません。しかし、この場合でも、Webサーバで公開をすることを想定して、ファイル名に日本語や空白を使わない習慣をつけておくと、Webサーバに公開する際のトラブルを防ぐことができます。
ファイルの保存場所
作成したファイルをどこに保存するかは常に意識しておきましょう。最初にフォルダを作成し、作成中のWebサイトに関係するファイルはすべてそのフォルダの下に保存するようにします。また、サブフォルダを作成して、関係する多くのファイルを整理して保存すると管理しやすくなります。こうしておけば、Webサーバへのアップロードする場合も容易です。
サブフォルダによるファイルの管理には、画像など種類の同じファイルをまとめておく、あるいは、大項目ごとに関連するファイルをまとめておくなどの整理方法があります。
HTMLファイルや画像ファイルをサブフォルダに保存、管理する場合、それらファイルへのリンクや画像表示の指定には、フォルダ名を含めることを忘れないように注意しましょう。
文字コード
ブラウザには文字コードの設定機能があり、そこでWebページが使っている文字コードを指定すると、文字を正しく表示できます。ページを見る人が文字コードの設定機能を自動選択にすると、ブラウザは可能な限り自動的に文字コードを判別して、表示を切り替えます。一方、制作者がHTMLファイルに、<meta>タグで文字コードを指定しておけば、ブラウザが文字コードを誤って判別し、文字化けするのを避けられます。