第4回ホームページ作成講習会

準備

お約束

前回言い忘れましたが、このお約束を使えば完全なHTML文書になります。エディタ付属の文法チェックを使っても本文中の構文に誤りがなければ文法エラーは出ないはずです。

前回の補足

img要素

a要素との合わせ技で、img要素をa要素で囲んだ時、周りに枠ができてしまいます。img要素にborder属性を指定することで枠を調整できます。

border枠の太さ。border="0"と書くと枠を消せる。

前回の補足

パス

パスの説明が我ながら分かり難かったので、よく分からなかった人はhttp://masaboo.cside.com/new_html1/ht_67.htmを見て下さい。
分かってる場合、特に新しいことは書いてないので見なくていいです。

前回の補足

a要素

name属性の説明で、ソースが間違ってたので訂正します。

a href="#anime1"となっていますが、それは間違いです。href="#名前"とname="名前"の中身は一致させないとページ内リンクになりません。従って正しくはa href="#anime"です。

前回の補足

リスト

前回っつーか前々回ぐらいの補足になりますが、ul要素やol要素の間にはli要素以外の要素を入れてはいけません。ただし、コメントは除きますし、li要素の中には何を入れても構いません。以下のソースはダメな例です。

ol要素はあくまで括った部分がリストであることを示すので、li要素以外の要素を挟むことはダメなのです。上のようにすると、ブラウザによっては表示が変になります。
今日この後やるtable要素なんかも間に決まれれた要素以外を入れちゃいけないことは同じなので、よく覚えておいて下さい。

前回の補足

リスト

しかし、以下のようにli要素の中に何かしらの要素を含むことは可能です。

前回の補足

リスト

下はol要素の下のli要素の中で更にul要素でリストを作っています。

前回の補足

文字コードについて

文字コードについて自分も色々引っかかってたんで調べてみたんですが、W3Cは「UTF-8」(Unicode)を使用することを推奨しているようです。

日本語圏での文字コードの主流は2012年現在未だにShift_JISですが、新しく作成されたウェブサイトはUTF-8で作成されることが非常に多くなっています。

まあ別にどちらを利用してもいいのですが、その際meta要素内での文字コード指定と実際の文字コードを一致させ、なおかつ同じウェブサイト内では文字コードは統一して下さい。

※前回説明したかどうか忘れましたが、Unicodeは世界中のあらゆる文字を16ビットで表現し、1つの文字コードで多国語処理を可能にしようとするもの、です。

テーブル(表)の利用

table要素などの使い方

表のことをテーブルと言います。ちょっとややこしいので苦戦する人がいるかもしれませんが、しっかり覚えましょう。

table要素は<table>~</table>内に<tr>~</tr>で表の横一行を定義して、さらにその中に<th>~</th>や<td>~</td>でセルを定義します。

よくわからないと思いますし、自分でも何書いてるのか分からないので図とソースで例を示します。

テーブル(表)の利用

table要素などの使い方

ソース

テーブル(表)の利用

table要素などの使い方

要素の重なり方のイメージ図

table要素
※見難いですが黄色がtr要素です

実際の表示

苗字が「うりゅう」のキャラの一覧

-雨流雨生瓜生
男性キャラ-雨生龍之介瓜生新吾
女性キャラ雨流みねね-瓜生桜乃

テーブル(表)の利用

table要素などの使い方

tableテーブル(表)を作成する。
trテーブルの行(横列)を記述する。
tdテーブルのセルを記述する。いわば表の中身(データ)ですね。
thテーブルの見出し(ヘッダー)セルを記述する。tdとの違いは、物理的には太字か太字じゃないかで、論理的には中身が表題を表すのかデータを表すのかです。これは前スライドの例を見ればすぐに違いが分かります。

つまり、表を作るにはtable要素の中にtr要素を入れ、更にそのtr要素の中にth要素かtd要素を入れなければなりません。

テーブル(表)の利用

table要素

以下の属性はtable要素で使える主な属性です。

border枠線の太さ。これはimg要素でも扱いましたね。tableの場合初期値が0なので、これで値を指定しないと枠が表示されません。border="1"でも十分な太さの枠線になるんで、あんまり大きな値を指定する必要はないです。
alignテーブルの表示位置。pでも扱いましたね。left、center、rightでテーブルの表示位置を指定。pのalignと同じく非推奨属性ですが、皆使っちゃってるので使っても大丈夫だ、問題ない。あ……。
widthテーブルの幅。
heightテーブルの高さ。
summaryテーブルの要旨。HTML4.01では一応必須属性とされていますが、HTML5では廃止予定ですし必ず書く必要はないです。実際自分もSEO対策(サーチエンジン最適化)目的でたまに入れるぐらい。あ、ちなみにサマリーに何書いても実際のブラウザには何も表示されません。

テーブル(表)の利用

tr要素

以下の属性はtr要素で使える主な属性です。どれも必須ではないです。

aligntr要素以下にあるtd、th要素の中身の表示位置。非推奨属性だがtableのalignと状況同じ。
valign縦方向の表示位置。alignは横方向ですが、これは縦方向を指定できます。(ただし属性値は全く異なるので注意すること。)bottom(下揃え)、middle(中央)、top(上)、baseline(ベースライン)から選べます。baselineはアルファベットにおける小文字のoやxやzの下端の位置のことですが、日本語においてはその概念自体がないのであまり使わないです。非推奨属性だg(ry
height行の高さ。

テーブル(表)の利用

td、th要素

以下の属性はtd、th要素で使える主な属性です。どれも必須ではないです。

aligntd、th要素の中身の表示位置。非推奨属性だがtableのalignと状況同じ。
valign説明は前スライドで。
widthセルの幅。
heightセルの高さ。
colspanセルを指定した値分、横方向に連結。後述
rowspanセルを指定した値分、縦方向に連結。後述

テーブル(表)の利用

td、th要素

colspanとrowspanではこの属性を指定したセルをn個分(それ自身を含む)連結します。例を示すので、実際に試して下さい。

テーブル(表)の利用

table要素などの使い方

結構どうでもいいことですが、個々のセルで指定した幅の合計がtable要素で指定した幅を上回っていると、table要素を押し出してセルの合計の幅が優先されます。以下参照。

高さの場合も同じような感じです。

テーブル(表)の利用

table要素の利用

なお、セルの中身が空白(<td></td>みたいな)だとブラウザによっては枠が表示されません。

空白セルに枠のないテーブル

テーブル(表)の利用

table要素の利用

空白セルにも枠を表示させたい場合、半角スペースの文字参照を使うか、table要素にCSSのempty-cellsプロパティでshowを適用するのが一般的です。今回は前者を紹介します。

記号文字実体数値文字補足
 &nbsp;&#160;(改行禁止)半角スペース

空白セルに枠のあるテーブル

テーブル(表)の利用

table要素の利用

table要素はページのレイアウトで使われることがよくありますが、現在はCSS(スタイルシート)を用いるのが主流です。ちょっと複雑になりますが、例を示します。ちなみに、テーブルレイアウトは時代遅れ云々とかデザイナー達は言ってるそうですし、実際時代遅れです。

テーブル(表)の利用

table要素などの使い方

テーブルの使い方はHTML初学者にとって難関です。以上の説明を聞いて、完璧に理解できた初学者はあまり多くないと思います。(べ、別に説明が悪かっt(ry
なので今は完全に使いこなせなくてもいいです。何回か使ってるうちに自然に覚えます。たぶん。

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

講習会を通して色々なタグを学習してきましたが、ここでもう一度概念的なお話に戻りたいと思います。

HTMLでは多くの要素が定義されていますが、そのうちbody要素の中で使われるものは「ブロックレベル要素」と「インライン要素」に大別されます。

ブロックレベル要素とインライン要素

ブロックレベル要素とは?

ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。前に「大きい箱のなかに小さい箱は入るがその逆は無理」とか簡単な言葉で触れましたが、ブロックレベル要素の内容モデルには別のブロックレベル要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。

ブロックレベル要素の例として、習ってきたものの中ではh1-6の見出し、pによる段落、olやulのリスト、hrによる水平線、tableによる表があります。

ブロックレベル要素とインライン要素

インライン要素とは?

インライン要素は主としてブロックレベル要素の内容として用いられるもので、文書を構成するというより、ブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素です。

インライン要素の例としてb(太字)、i(斜体)などの文字装飾、a要素によるアンカー、img要素、br要素などなど……習ってきたものだけでも非常に数多くあります。

インライン要素はその内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

と、難しい言葉でgdgd説明してきましたが、例を見ればすぐ理解できます。

あずまんが大王はあずまきよひこによる日本の4コマ漫画、およびそれを原作としたアニメ作品である。
ごにょごにょ


とある高等学校を舞台にした学園物コメディで、キャラクターの多くは女子高生である。

※例を示すためにfont要素とか使っちゃいましたが、あんまり使わないように

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素
※赤がブロックレベル要素、青がインライン要素

↑理解できるでしょうか?ブロックレベル要素は文書の幅いっぱいを占める大きな塊で、インライン要素はその塊の中にある小さな部品です。

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

一般に、ブロックレベル要素とブロックレベル要素の間には自動的に改行が入ります。これは前回の補足でやった「hrや見出しの前後に改行は入れなくていい」に関係してくる訳です。

繰り返しますが、ブロックレベル要素の中にはブロックレベル要素とインライン要素を入れる(入れ子にする)ことができますが、インライン要素の中にはインライン要素のみを入れることができます。

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

以上を読んで、「で?」と思う人が多いと思いますが、実はこの2つの概念はHTMLを学ぶ上では非常に重要なことなので、必ずイメージできるようにしておきましょう。これらをしっかり理解してないと、後で習うスタイルシートがさっぱりわからなくなります。

しかも、初学者向けを謳っている多くの参考書やサイトではこの点に触れておらず、HTMLやCSSなどを本質的に理解する上での妨げとなっています。

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

では、ここで新たに2つのタグを紹介します。

div汎用的なブロックレベル要素。
span汎用的なインライン要素。

p要素やb要素などは、そのタグ自体が何らかの意味を持っていました。しかしこの2つの要素はブロックレベル要素、インライン要素であることを宣言しているだけで、他には何の意味も持っていません。(ただしdivはブロックレベル要素なので自動的に改行が入ります。)

「そんなタグ意味あるの?(´・ω・`)」
→はい、大いにあります。後で習うスタイルシートで嫌になるほど使うので、必ず覚えておいて下さい。

ブロックレベル要素とインライン要素

HTML4.01 Strictにおける決まり

以下は補足なので読み流して構いませんが、HTML4.01 Strict(文書型定義の一つ)では以下のようにbody要素の下にインライン要素や文章をそのままベタッと書いてはいけません。必ずブロックレベル要素で括ってからインライン要素や文章を書いて下さい。ただし、あくまでStrictでの話なので、今我々が利用してるHTML4.01 Transitionalでは(あまり良くはないのですが)問題無いです。

見やすいサイトを作るとはどういうことか

色々なタグを習い、次回からはいよいよスタイルシート(CSS)に入ったりJavaScriptに触れたりで少しづつ高度になっていく本講習会ですが、ここで一つ気をつけてほしいことがあるので先に教えておきます。

複雑な技術を使って複雑なサイトを作ることは大いに結構ですが、ウェブサイトを見るのは最終的には人です。ですから、人が見やすいように作らなければどんなに素晴らしい技術を使って作っても無意味です。

例をいくつか示します。

見やすいサイトを作るとはどういうことか

背景が……

背景が……1
背景黄緑に文字色黄色という、糞見難いサイトです。笑っちゃいますが、こういう色指定をする人は非常に多いです。やめましょう。

背景が……2
上の進化版です。JavaScriptを使って背景色を変えています。
※追記
先程からJavaScriptによる背景色の変更が正常に動作しているか確認してたのですが、そのせいで目が非常に痛いです。リアル.hackになりかねないので、じっくり見ないで下さい。

見やすいサイトを作るとはどういうことか

いらねえ

いらねえ1
お気に入り登録ボタンがあります。こんなものサイト上になくても自分でブラウザの登録ボタンを押しますよね。不要です。

いらねえ2
何か特殊なサイトorデザインとして使ってる以外の場合、時計とかいらんですよね。Windowsなら右下にあるし。

見やすいサイトを作るとはどういうことか

邪魔だよ

邪魔だよ1
100回クリックしないと入れないサイトです。emacs使いのように腱鞘炎になりそうです。

邪魔だよ2
視覚的に邪魔です。まあギャグ系のサイトでやるならありかもしれませんが……。偽物語はコケましたね。

邪魔だよ3
きゃああああ。こういうのを、一般的なサイトでやるのはやめましょう。本当に心臓の弱い人も見てるんだから。

邪魔だよ4
Internet Explorerでは右クリックが禁止されています。右クリック禁止の目的は主にソースの不可視化ですが、一部のブラウザには効かない上に少しパソコンが分かる人には何ら無意味です。

邪魔だよ5
ページ全体がスクロールされる糞仕様です。そもそもmarquee要素自体が非推奨要素なので、使わないでくださいね。

見やすいサイトを作るとはどういうことか

これらの例は一見すると笑えますが、脱初心者をした下級者とかに使う人がホントに多いです。(ネットでちょっとググれば八九寺真宵以外のサイトはいくらでも見つかります。)

気をつけましょう。あなたのサイトを見るのは人です。