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

Web作成支援

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

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

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

                    毎週金曜日配信 What's New 2003/5/9
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
 今週のコンテンツ
  ■ HTML講座 第1回 HTMLとは何か?
  ■ XHTML講座 第13回 XHTML1.1実践 〜 コンテンツの配置

◆ HTMLとは何か?

居ながらにして、要求する情報を瞬時に取り寄せることが可能になったのは、WWW というネットワークの発達と、HTMLの普及に他なりません。

HTMLとは、Hyper Text Markup Language の略で、直訳すると「飛んでるしるし付けテキスト用言語」とでもなりますか。

エッチ・テー・エム・エルと発音し、Webページを作成する言語であり、テキストベースで成り立っています。大きな特徴は、人間にもコンピューターにも理解可能な言語といえるでしょう。

マークアップ(しるし付け)とは、ある仕様書に基いて、一般的な普通の文書を HTML文書に仕上げる過程で行なう一連の作業のことを指します。この「仕様書」については、講座を進める中で適時説明します。

SGMLがルーツ

その昔、最初のマークアップ言語である SGML(Standard Generalized Markup Language)、つまり標準一般マークアップ言語が開発されましたが、そのパフォーマンスの悪さと、難解な言語仕様であったために、ほとんど一般的に利用されることがありませんでした。

1990年代に入ってから、CERN(欧州原子力研究所:セルンと発音)に勤める ティム・バーナース=リーさんの手によって、SGMLをよりわかりやすい仕様に再定義した原始的な HTMLが作られ、その後幾つかのバージョンアップを経て、今日に至っています。

講座では、1998年に W3C(World Wide Web Consortium)より勧告された HTML4.01の仕様に基づいて解説します。

HTMLは簡単か?

多くの専門書や、Webサイトでは「HTMLは簡単です」と記述しているのをよく見かけます。文法を無視するような作り方は、ある意味では簡単かもしれません。

しかし、HTMLの仕様書を理解し、ユーザ環境に配慮するような振る舞いを持った正しい文法を習得することは、決して簡単とは言い切れません。

本当のところ、実に難しいのです。

◆ XHTML1.1実践 〜 コンテンツの配置

XHTML1.1では、HTML4.01とは、コンテンツの配置についての概念が少し異なります。

XHTML1.1は、その文書が論理的に明示された構造を持って作成するために用いられることで、プレゼンテーション(見栄え)に利用する属性の利用は一切排除されています。

(本来マークアップとは、XHTMLに限らずそのように約束されているものです。)

例えば、位置を指定する、<p align="center"> という HTMLの記述は無視されます。

XHTML1.1でプレゼンテーションを実現するためには、スタイルシートだけがその手段となります。位置の指定に限らず、すべてのプレゼンテーションの設定は、スタイルシートに委ねなければなりません。

実際に、このページは XHTML1.1で記述されていますが、その見栄えのすべてを外部スタイルシートによって依存しています。

コンテンツの位置指定

コンテンツは、基本的にブロックレベル要素の中で配置されます。それ以外は認められておりません。同時にインラインレベル要素は、フローティング以外に位置を指定することができません。

ということは、ブロックレベル要素そのものに位置を指定すれば、思い通りに配置することができます。

 例えば、
       p { text-align: right }   右寄せで配置
      div { text-align: center }  中央揃えで配置
このように、簡単に望みどおりの位置に指定されます。その必然性があれば、ですが。

なお、デフォルト(初期設定)では、すべて左寄せとなっています。念のため。

テーブルの位置指定

XHTML1.1で厄介なのが、テーブルの位置指定です。HTML4.01では、文書型定義が Strictの場合、

      teble { margin-left: auto; margin-right: auto }
このように指定するだけで、左右の余白が自動的に設定され、結果的に中央で配置されます。

ところが、XHTML1.1では、auto が無視され、デフォルトの位置で表示されます。

そこで、テーブルの左右の余白や、テーブル自身に横幅を設定して、あたかも中央に配置されるように設定する必要が出てきます。

マークアップ言語バージョン推移
年代 Version 制定機関
1986 SGML ISO-8879
1991 HTML 1 CERN
1995 HTML2.0 IETF
1995 HTML3.0 W3C
1997 HTML3.2 W3C
1997 HTML4.0 W3C
1998 HTML4.01 W3C
この設定は、以下のとおりです。
      table { margin: 1em 20%; width: 59%; background-color: #ffc }

全体の横幅を100%にしなかった理由は、100%にすると、視覚系ブラウザによっては、不意な横スクロールが発生する場合があるためです。見た目は中央に配置されていると思います。

このように、余白をうまく利用することによって、どのようにでもコンテンツを配置することができます。いろいろとお試しください。

絶対位置の指定

通常コンテンツの表示順位は、HTMLの記述順に従って、順次表示されていきます。

しかし、ある要素を絶対位置指定した場合、表示の順番に関係なく指定された位置で表示されます。これを絶対位置の指定と呼びます。

絶対位置に指定するスタイルシートの記述は以下のとおりです。

      div { position: absolute; top: 100px; left: 100px }

この記述は、汎用ブロックレベルである div要素に囲まれたコンテンツが、他のコンテンツの表示に関係なく、視覚系ブラウザ画面の上側から 100ピクセル、左側から 100ピクセルの位置で表示されることを設定したものです。

この特性を利用することで、画像を重ねて表示させることも可能で、特殊な表示に利用されることの多いスタイルシート設定です。

絶対位置で画像を2枚重ねたサンプル



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