初心者のためのホームページ作り 第54号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週<第54号>マガジンのおさらい

                   毎週金曜日配信 What's New 2003/6/6
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
 今週のコンテンツ
  ■ HTML講座 第4回 HTMLの作り方とヘッダの役割
  ■ XHTML講座 第16回 動画の扱い

◆ HTML講座 --- HTMLの作り方

HTML文書の作成とは、普通の文書(テキスト)を、その文書の構成要素にしたがって、一連のマークアップ作業を行うものです。

HTMLを作成するためのオーサリング・ソフトウェア(作成支援ソフト)を利用するのであれば、面倒なマークアップ作業は必要ありません。しかし、オーサソフトが吐き出す HTMLが、仕様書に照らし合わせて妥当性があるものなのかは、保証の限りではありません。大体が滅茶苦茶な文法によって作られていることは、ユーザ自身が経験していることでしょう。

当講座は、基本的に自分自身でマークアップを行うことを主体としています。そのための必要となるツールを揃える必要があります。

HTMLを作成するための道具

ツール(ソフトウェア)といっても、高価なものは必要ありません。その気になればそのほとんどが無料で手に入るものです。以下に最初に用意しなければならないツールを列挙しました。

テキストエディタ 比較的容量の小さい軽量で、普通のテキストを作成するソフト
Windowsではメモ帳、MacではSimpleText、Linuxなら viなどで十分
高機能で軽量なフリーソフトがあるので入手する方法もあります
WindowsXP におけるテキストエディタ「メモ帳」
メモ帳で作るHTML
FTPソフト 作成したHTML文書やその他のリソースを Webサーバに転送するソフト
これも、フリーで優れたソフトがあるので、ネットで探して入手します
Webサーバ 自分で用意するのは大変、最初はプロバイダの Web領域を利用します
また広告が表示されるが、無償で提供しているサーバもあります

この他に、Webブラウザも必要ですが、これはほとんどのパソコンに標準でインストールしてあるので十分でしょう。できれば、他の銘柄の Webブラウザをインストールしておきしましょう。

なお、基本的にはインターネットにアクセスする環境を持つことは当然でしょう。個人がローカル(自分のパソコン)だけで楽しむのならその必要はありませんが・・

HTMLのタグとは?

一般的に HTMLにおける「タグ」といわれるものは、「<」 と 「>」 の鍵括弧を用いて、HTML仕様書で決められた規則に従ってタグを書き込みます。

文書の中で示されるある特定の意味を持つ要素ごとに「タグ」を用いてマークアップします。例えば見出しなら、<h1>見出し</h1>、段落ならば、<p>段落</p> というように、そのほとんどで開始と終了のタグで囲みます。

このように開始と終了タグを対としたものを コンテナタグと呼び、終了タグを必要としないタグを、エンプティタグと呼びます。

ヘッダ

HTMLを構成する1つにヘッダという構造があります。ヘッダとは、自分自身の文書情報を Webサーバ、あるいはユーザエージェントに伝えるための重要な役割があります。

また、自分自身の文書から見た他の文書との位置関係を示したり、外部文書を読み込んだりします。

ヘッダで記述される要素で、titileタグが唯一、ブラウザに表示されるものであり、文書の題名を記述します。この titleタグは、必ずヘッダ部に記述しなければなりません。

ヘッダ部で記述するタグと属性(タグの役割情報)は以下のとおりです。

要素名属性機能
meta http-equiv メタデータのプロパティを name属性の替わりに指定
content Content-type で示されたプロパティの値
name メタデータのプロパティ名を Webサーバに送信する
link rel この文書から見た他の文書との位置関係を示す
rev href属性から見たこの文書の位置関係を示す
href 関連する文書の URLを指定する
hreflang リンク先の言語コードを指定する
charset 他の文書を読み込む際の文字コードを指定する
titleなし 文書のタイトルを指定する(必須)

この中で「必須」とされるのは、文書のMIMEタイプと記述された文字コードを明示し、文書のタイトルを必ず記述しなければなりません。

形式的な記述法
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
  <title>初心者のためのホームページ作り</title>
  </head>

ヘッダには最低、上記のように記述しなければなりません。なお、言語コードおよび、文字コードについては次回詳しく説明します。

◆ XHTML1.1講座 --- 動画の扱い

昨今のブロードバンド環境の普及が進むにつれ、Web上で動画コンテンツを配信するサイトが増えてきています。

動画を再生するためには、ユーザ側でそのプラグインツールを用意していないと見ることができません。また、ある種のプラグインをインストールしていても、それに適応した動画でなければ、やはり見ることができません。

動画は、実は大変容量が大きくオリジナルの30秒程度の動画コンテンツですら、80MB(メガバイト)くらいが必要になります。それを Web上で公開するのは現実的ではありません。

Webで公開するために、動画を圧縮し小さな容量にする必要があり、そのエンコード方式によってプラグインが必要になるわけです。

代表的なエンコード(圧縮)方式は以下のとおりです。

エンコード特徴
QiuckTime Apple社によるエンコード方式。圧縮率に優れ、ストリーミングに対応している

エンコーダーは有償ですが、Mac版 iMoveソフトでも作成可能

Mac版のほかに、Windows版もサポート (拡張子は .mov)

RealMedia 動画エンコーダーとしては老舗だが、度重なるアップデートが多いので人気薄

エンコーダは有償だが、多くのプロットフォームをサポートしている

MPEG、MP3などもサポートしている (拡張子は .rm)

WindowsMedia Microsoft社のエンコーダーで、Windows版として無償で提供している

画質もよく、多くの形式にも対応 (拡張子は .wmv)

XHTML1.1による動画の再生

HTMLで動画再生でよく用いられているのが、embed要素です。HTML規格外ですが、Netscape Navigator、MSIEでサポートされていますが、他のブラウザでは実現されていません。

HTML規格外 embed使った動画の再生 (MPEG-1方式 2,819KB) 未対応ブラウザがあります。また、ナローバンド(ダイヤルアップ、ISDN)では、非常に重いので遠慮してください。

HTML4.01Strict、および XHTML1.1 では、汎用的に利用できる object要素を強く推奨されていますが、残念ながらサポートしている Webブラウザが少ないのが現状です。

object要素の記述
 <object data="sample.mpg" type="video/mpeg" width="320" height="240">
 サンプル動画
 </object>

以下に、object要素によってサンプル動画を再生します。サンプルなので、非常につまらない動画であることをご留意ください。

object要素を使った動画の再生 (MPEG-1方式 2,819KB 注:すぐに再生します。重いです。)

確実な動画の再生

XHTML1.1で確実に動画を際精査する方法は、至極簡単なアンカー要素を用いて、ユーザに選択させる方法があります。いきなりページを訪れたら動画が始まってしまうのは、ユーザビリティ、アクセシビリティの観点からお勧めできるものではありません。

アンカーを利用した動画の再生
  <a href="sample.mpg">MPEG動画の再生</a>

アンカーを利用した動画再生 (MPEG方式のほかに、WindwsMedia、QuickTime方式も掲載しました。)



Valid XHTML 1.1! Copyright(C) 2002-2003 ばんばん banban@scollabo.com