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

準備

お約束

いつもの通りお約束です。コピペして使って下さい。今日は後半にそのお約束がちょっと増えます。

前回の内容について

補足

hr要素やh1やh3などの見出しの要素を使うと勝手に改行が入るので前後でbr要素を使う必要は特にないです。

前回の内容について

補足

本講習会で使用しているエディタで表示確認した時に文法エラーが出てきますが、今学習しているHTML文書はまだ文法的に完全ではないからで、無視して問題無いです。うざったいならエディタの設定のところで「文法チェック」の欄の「文法チェックタイミング」のチェックを全て外して下さい。

リンクとは

準備

リンクについて学習する前に、ウェブサイトを作る上でファイルの拡張子(index.htmlの「.html」の部分」が表示されていないと色々な不都合が起きます。

表示方法はWindows 7やVistaではhttp://penguintan.blog32.fc2.com/blog-entry-357.html、を参照。

戻すときも同じ方法で戻せます。でもこれって本来ならば初回にやるべきことだよねー……。

リンクとは

リンクとは

ウェブサイトは複数のHTMLファイル(文書)とそれとセットになる画像や音楽データなどの外部のファイルで構成されています。これらのファイルが相互につながることで複数のウェブページを持った一つのウェブサイトが完成します。このようにページ同士を繋げることを「リンク」(LINK)といいます。

リンクとは

リンクの種類

リンクには3つの種類があります。

リンクの種類リンクの手法
内部リンク自分のウェブサイト内(同じドメイン)の他のHTMLファイルやデータへのリンク
外部リンク第三者のウェブサイト(他のドメイン)へのリンク
ページ内リンク(アンカーリンク)同じHTMLファイル内へのリンク

内部リンクの例:ソフトフォーラムのトップページへのリンク

外部リンクの例:Google(ドキュメント)へのリンク

ページ内リンクの例:このスライド一枚目へのリンク(戻る時はブラウザの「戻る」ボタンで戻れます)

リンクとは

ファイルとフォルダ

で、リンクについて説明する前に一つ。ウェブサイトだけでなく、私たちが普段使っているコンピュータ上では、「ファイル」と「フォルダ」(ディレクトリ)という論理的な区切りによってデータを管理しています。

デジカメで撮影した写真やインターネットで落とした買った音楽、エクセルやワードで作成した文書など。これらのデータのことを総称して「ファイル」と呼びます。

一方、これらファイルを入れておく箱を「フォルダ」(ディレクトリ)と呼びます。

ウェブサーバー上でもこれは同じで、ファイルとフォルダという区切りを用いてデータを管理しています。

ごくごく基本的な話ですが、リンクなどの考え方を学ぶ上で非常に重要なことなので一応確認しました。

リンクとは

相対パスと絶対パス

これから他のHTMLファイルにリンクするためのa要素や画像を埋め込むimg要素、CSSによるHTMLの装飾などを徐々に学習していきますが、その前に相対パスと絶対パスの考え方を理解しなければなりません。

ウェブサイトを街に喩えましょう。
あなたの家は太郎君の家の隣にあり、あなたの家と太郎君の家の住所は「A町1-1」と「A町1-2」です。
太郎君の家の位置を聞かれ、「多浪君の家は私の家の隣にある」と答えるのが相対パス、「A町1-2」にあると答えるのが絶対パスです。簡単ですね。

リンクとは

相対パス

ソフトフォーラムのトップページ(http://www.soft-forum.net/)から見たこのページ(http://www.soft-forum.net/html/html-3.html)を相対パスで表すと、「./html/html-3.html」となります。しかし「./」は省略可能なので「html/html-3.html」と表すのが普通です。

パス

リンクとは

相対パス

では、逆にこのページ(http://www.soft-forum.net/html/html-3.html)から見たソフトフォーラムのトップページ(http://www.soft-forum.net/)を相対パスで表すとどうなるでしょうか。パスを表す時、一つ上のフォルダ(この場合階層と言う方がいいのかな)は「../」(さっきの「./」と混同しないこと)と表します。

従って、「../」とだけ書けばおkです。(html-3.htmlはフォルダではなくファイルです。だから「../../」とか書く必要はないです。それだと2つ上の階層を表してしまいます。)

例を示すと、このページから同じ階層の他のファイル(例えばHTML講習会初回スライド)は「./html-1.html」や「html-1.html」、この講習会で使われてる画像はimgフォルダに入れてあるので「./img/p2-1.png」や「img/p2-1.png」、旧講習会資料は「../2010/programming/index.html」(index.htmlは実は省略可能です。その理由は後で分かります)です。

リンクとは

絶対パス

これはもう簡単です。ソフトフォーラムのトップページならば「http://www.soft-forum.net/」、このページなら「http://www.soft-forum.net/html/html-3.html」と書くと絶対パスです。

もう一つ絶対パスには表し方があり、こっちは現状テキトーに覚えておいてくれればおkですが、ソフトフォーラムのサイト(http://www.soft-forum.net/~)内にある全てのファイルから見たこのページ(http://www.soft-forum.net/html/html-3.html)を、「/html/html-3」と表すことが出来ます。このように、「/」で始めると絶対パスとなり、その基点はルートディレクトリ(http://www.soft-forum.net/)となります。要は、「/」の前に「http://www.soft-forum.net」が省略されてると考えればおkです。

リンクとは

相対パスと絶対パス

で、リンクするにしても画像埋め込むにしてもこのパスが必要ですが、相対と絶対、どちらを使っても見え方は同じです。(ただしサーバー上にファイルをアップロードしなければなりません。)

じゃあどっちを使うの?ってとこですが、内部リンクは相対パス、外部リンクは絶対パスで表すのが普通です。(ただし外部リンクは絶対パスを使います。というか使わなければリンクできません。)
なぜならばウェブサイトを丸ごと他のサイトに引っ越した時、内部リンクが相対パスで記述されていると全てのパスを書きなおさなければならないからです。

リンクとは

a要素

a要素は他のHTMLファイルとリンクを組んだりページ内の一部に名前(アンカー)を付けるための要素です。

内部リンクを使うにはHTMLファイルを2つ以上用意する必要があるので、「名前をつけて保存」を使ってファイル名が「a.html」、「b.html」のファイルを用意して下さい。

aリンクの出発点と到達点を指定する。

リンクとは

a要素

で、a.htmlに

a.html

b.htmlに

b.html

と書けばそれぞれのHTMLファイルを行き来できるようになります。

リンクとは

a要素

a要素が使用する属性は以下のとおりです。

hrefリンク先の指定
targetターゲット。
例えば、前のスライドではリンクを張った時同じタブ、またはウィンドウでリンク先が開かれましたが、target="_blank"と属性値を指定すれば新しいタブ、またはウィンドウでリンク先を開くことが出来ます。
target属性の属性値には他に_selfや_parentや_topがありますが、フレーム利用時に使うものなので今は"_blank"だけ覚えておけばいいです。
nameアンカーを貼る。ページ内リンクで用いる。後述。

リンクとは

a要素

name属性はページ内リンクに用います。以下のような感じです。

リンクとは

a要素

実行してみれば分かるのですが、先頭へをクリックするとページの一番上に戻ると思います。

このようにa要素のname属性で名前を付けた箇所に、別のa要素のhref属性でhref="#名前"とリンクを貼ればページ内リンクができます。nameには#は要らず、hrefには#がいるので注意して下さい(カラーコードとは混同しないように)。

ちなみに、XHTML1.0ではname属性が非推奨となっているので<a name="abc" id="abc">とid属性も併記するのですが、まあ今は忘れて下さい。

img要素

img要素

HTML文書には画像を埋め込むことが出来ます。何か適当に画像を用意してください。パソに元から入ってる画像でもいいですし、Google画像検索で用意してもいいですし、絵師なら自分で描いてもいいです。その画像をHTMLファイルと同じフォルダ(階層)に置いて下さい。ここでは「a.jpg」という画像を同じフォルダに配置したものとします。

働いたら負けかなと思ってる

img要素

img要素

src="a.jpg"の部分は、自分が用意した画像名に合わせてsrc="(ファイル名).(拡張子)"として下さい。

もしimgやimageなどと画像フォルダを作って配置したい場合、そのフォルダ名を先頭に必ず付けて下さい。「(HTMLファイルから見た相対パスのフォルダ名)/(ファイル名).(拡張子)」
ちなみにしっかりとしたサイトを作る場合、画像はhtmlファイルと同じフォルダ(階層)ではなく専用フォルダを作って配置するのが原則です。

img要素

img要素で使える属性

img画像を埋め込むための要素。
src画像のパス。img要素を使う上では必須。
alt代替テキスト。これは例えば何らかの原因で画像がなかったりブラウザで画像を表示しない設定にした時に代わりに表示されたり、障害者用ブラウザで音声読み上げ機能なんかを使った時に読み上げられます。忘れる人が多いのですが、後述するSEO対策的にも重要なので画像に合ったキーワードを必ず記述しましょう。必須です。
width幅を指定。後述
height高さを指定。後述

今更ですが、ある要素を使う上で必須の属性は赤字で示します。

img要素

width属性とheight属性

これら2つの属性では、数値を直接指定するかパーセントを用いて幅を指定します。

width="300"ならば300ピクセル、width="50%"ならば50%という感じです。

img要素

ピクセルとは

ディスプレイ上の画面を構成する最小単位の点をピクセルと呼びます。デジカメなどに良く使う画素とほぼ同じ意味になります。

パソコンの画面を拡大していくと、将棋盤のようにマス目になっています。このマスのことをピクセルと呼び、1マスであれば1ピクセルと表現します。よく使われるドットという言葉もほぼ同義です。

後で習うCSSでは単位を「100px」的な感じで付けるのですが、ここで使うwidthやheight属性では付けないので混同しないこと。

img要素

パーセント指定とは

width="50%"ならば50%という意味を表しますが、この50%は何に対する50%なのでしょうか?

答えは、「親要素の幅に対する大きさ」……と言っても分からないので、例を示します。

実行してみれば分かりますが、body要素の直下に置いた場合、この画像はブラウザのウィンドウ(正確にはbody要素)の幅の50%(半分)の大きさで表示されます。

img要素

パーセント指定とは

また、下は汎用的なブロックレベル要素であるdiv要素とCSSを用いてウィンドウに対して75%の幅の箱(今はわからなくていいです)を作った上で箱に対して50%の大きさの画像を表示しています。

イメージ図
↑イメージ図

このように、すぐ真上にある箱に対する大きさをパーセントで指定します。

img要素

パーセント指定とは

ちなみに、width="200%"とすれば親要素の2倍の大きさになります。まあ、箱内で指定するとはみ出ちゃうのであんまり意味はないですが、width属性では0%以上の整数ならばどんな値でも指定可能です。ただし0とか0%とかやると画像が表示されませんが。

説明したとおりですが、パーセント指定は元画像の大きさに対する大きさではなく親要素に対する大きさです。大事なことなので二度言いました。

img要素

width属性とheight属性

ちなみに、width属性とheight属性はセットで使う必要はないです。

元画像の幅が100px、高さが50pxだとしましょう。

画像の大きさ(幅x高さ)は、上から10x5、20x10、80x40、200x100になります。このように、片方を指定してやれば画像に合わせてもう片方が自動調整されます。

img要素

width属性とheight属性

ちなみにプロでも勘違いしている人がいますが、この2つの属性は必須属性ではありません。10年ぐらい前に流行ってたNetscapeというブラウザではこれを指定しないと表示が変になるバグがあったようですが、今は関係ないですし。

ただし、これらの属性を指定してやるとネットワーク負荷が減るとか言う話もあるので、指定できるのならば指定してやるといい、かも。まあ好みです。僕は指定してないですし、後述のコーディング規約でも特に定めません。

img要素

画像の拡大や縮小について

また、元画像の幅が1000pxだとして、width="100"と指定すると大きさが10分の1に縮小されますが、極端な拡大や縮小は画像が荒くなる原因になります。特別な理由がない限り、表示したい画像に合わせ元画像を予め拡大や縮小しておくことが推奨されます。

img要素

a要素との合わせ技

でかい画像をそのまま貼り付けると邪魔なので、上ではHTML文書上には小さいサイズで表示させた上で、a要素で大きい元の画像にリンクしています。

実際にウェブサイトを作る際は、img要素で埋め込む画像は元データごと小さいサイズに縮小した別画像を用意し、a要素で元の大きさのものにリンクをさせると表示速度的に望ましいです。(大きい画像をHTML文書に埋め込むと重いので表示に時間が掛かってしまいます。経験的に分かりますよね。)

お約束の改訂

文書型定義とmeta要素

今までは非常にシンプルなお約束を使ってきましたがこれだとW3Cさんが言ってる文法的にアレなので、今からお約束をちゃんとしたいのにしたいと思います。

お約束

文書型定義とmeta要素

1行目で文書型定義(DTD)を指定しています。初回にやりましたがHTMLには様々な種類があり、HTML 4.01 Transitionalはその一つです。他に、HTML 4.01 StrictやHTML 4.01 Framesetとかがあります。
ちなみに、このDTDを指定していない人が初心者を中心に一杯いるのですが、非常によろしくないので指定するようにしましょう。

2行目ではlang要素で言語を指定してます。日本語ならばja、英語ならばenです。

4行目では文字コード(エンコード)を指定してます。後述。

他にも色々指定してますが、まあDTDの指定とエンコードの指定以外はまず意味を覚える必要はないです。ちなみに、このお約束はXHTMLやHTML5では全く別のものになります。

お約束

文字コードとは

同じ文字でもコンピュータ内部では文字コードと呼ばれる文字セットの種類によって異なる数値で記されています。例えば、「あ」はShift_JISでは829F、EUC-JPではA4A2、UTF-8ではE38182と表されています。あくまで内部では。

だからただテキストで「あいうえお」と記述しても、我々が一見するだけではどの文字コードを使っているのかわからないのです。

Crescent Eveでは、名前を付けて保存時に出るダイアログの下部で文字コードを変更できます。WindowsではShift_JISが多く使われますが、インターネット上ではUTF-8が用いられることが多くなっています。EUCは主にUNIXで使われます。
で、文字コードは何を使ってもいいのですが、この名前を付けて保存時のダイアログで指定したエンコードと<meta http-equiv="content-type" content="text/html; charset=文字コード">は一致させねばなりません。お約束では、とりあえずデフォルトの「Shift_JIS」(EUC-JPと違い_はハイフンではなくアンダースコアです)を指定しています。

蛇足ですが、HTML文書はWordなどのソフトウェアを用いても作成できます。しかし、Wordで作成したHTML文書はなぜかこのエンコードが複数指定されていて、ブラウザによっては必ず文字化けが起こるという恐ろしい現象が置きます。MSは何考えてるんだろうね。

読みやすいソースを書こう

コメントを書こう

HTML文書が複雑で長くなってくると、訳がわからなくなってきます。

読みやすいソースを書こう

コメントを書こう

そこで、コメントの出番です。

読みやすいソースを書こう

コメントを書こう

前のスライドのように、コメントは<!--コメント-->という感じで、<!--と-->で括ります。

ソースが長くなると訳がわからなくなるので、今のように自分で後で見た時に分かる説明を書くことが大切です。

また、ソフトフォーラムのサイトのように複数人で編集する必要のあるサイトの場合は他人が見ても分からないといけませんね。現在の公式サイトは誰が見ても分からない汚いソースの実例です☆

読みやすいソースを書こう

コーディング規約の制定

ソースは各々の好みで読みやすいように(brではない)改行をしたり、インデント(字下げ)を入れて構いません。しかしながらそれは同じサイト内では統一されていた方がいいのです。

本講習会では、以下に列挙する規約に従ってソースを記述することにします。まだ習ってないこともあるので、知らんとこは無視して下さい。

読みやすいソースを書こう

コーディング規約の制定

読みやすいソースを書こう

コーディング規約の制定

なお、スライドに示す例はスペース節約のために一部無視しますが、みなさんはちゃんと規約どおりに書きましょう。