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

準備

本スライドの使用方法

準備

ホームページ作成講習会に必要なもの

はじめに

「ホームページ」とは?

ホームページとは本来、ブラウザを起動した際に最初に表示されるページのことを指します。
ホームページは使用者によって様々ですが、GoogleやYahoo! JAPANといった検索エンジンを設定する人が多いです。
本来はこのページを指すのですが、インターネット上にある特定の複数ページの集まりである「ウェブサイト」と誤用されたまま広まってしまい、いつの間にか「ウェブサイト」と同義で使われるようになりました。

ちなみに、プロに「ホームページの作成」とか言うと多分キレます。素人の僕ですら蕁麻疹がしますし。
ってことで、以下スライドからホームページという表現は使いません。なんか気持ち悪いので。

はじめに

(ウェブ)ブラウザとは?

ブラウザとは、ウェブサイトを見るときに使用するアプリケーションソフトウェアのことを指します。
簡単にいえば、あなたがネットをするときに起動するソフト、それがブラウザです。

ブラウザには沢山種類があり、Windowsに元から入っているのがInternet Explorer、Mac OS Xに最初から入っているのがSafariです。他にも、Mozilla Firefox、Chrome、Operaといったブラウザがあります。僕はFirefox愛用してます。Chrome使う男の人って……。

ブラウザの種類

はじめに

ブラウザの挙動

ブラウザは、HTML(HyperText Markup Language)と呼ばれる、ウェブサイトを作るためにルールに従い記述された特殊なテキストを解釈して表示します。これだけでは意味が分からんと思うので、例を示します。

HTML

実際の表示

こんにちは。私の名前は中野梓です。

はじめに

ブラウザの解釈

ブラウザの解釈図

これがブラウザの挙動です。細かい部分の説明は本日後半。

はじめに

ウェブサイト制作に必要な知識

C言語講習会ならばC言語の文法を覚えれば話は終わりですが、ウェブサイトを(本格的に)制作したいならば後述するHTMLを覚えただけではお話になりません。

HTMLを装飾するCSS(スタイルシート)、Photoshopなどによる画像の編集技術、サイトのレイアウト能力、検索エンジンでサイトを上位に表示させるためのSEO対策、FlashやJavaといったリッチインターネットアプリケーションの活用、SVGなどのXML技術の活用、JavaScriptによるクライアントサイドによる動的ページの構築、PerlPHPといったサーバーサイドでスクリプト言語を用いた動的ページの構築、Apacheなどのサーバー運用に関する知識など、必要とされる知識は非常に多岐に渡ります。現に、ソフトフォーラムの公式サイトも様々な技術が組み合わさっています。
しかも、Web界隈において知識は日々変化し続けます。数年前に覚えた知識が古い知識になってしまっていることなんてザラです。

しかしながら、ウェブページは世界中に数兆ページあります。我々はその技術やデザインを大いに活用できます。ウェブサイト制作は、C言語などに比べれば初心者にとって非常に取り組みやすいテーマだと思います。

ところで、東急三階の天一書房とかにWebに関する書籍は大量にありますが、どの書籍も知識が断片的で、あまり役立たないように感じます。(本を5冊6冊買うなら話は別ですが。)ってことで、書籍購入はオススメしません。

HTML基礎知識

HTMLとは

で、ここからHTMLに関する説明をしていきます。

HTML(HyperText Markup Language)とは、ウェブサイトを作成するために開発された言語です。
HTMLは文字色、文字の大きさ、文字の配置などはもちろん、画像や動画の配置、図表や行のレイアウト、背景の色や画像、他のHTMLファイルへのリンクといったウェブサイトに関するあらゆる情報を保有しています。

インターネット上にあるあらゆるウェブサイトは、HTMLまたはこのHTMLがベースの技術を組み込んで作られています。
このスライド自体もHTML(HTML5)ですし、ソフトフォーラムのサイト(XHTML1.0)、慶應のサイト、Twitterやmixi()、GoogleやYahoo! JAPANといった検索サイトですらHTMLです。
(「出力」されているものがHTMLなだけで、中で動いているものは違うのですが)

当講習会では、このHTMLの習得を中心に進めます。

HTMLおまけ知識

W3C

HTMLの書き方のルールは、W3Cとかいう標準化団体が勧告しています。W3CはアメリカのMIT、フランスの研究機関、そして日本の慶應義塾大学が中心になって活動しています。

2chとかで叩かれてるけど、慶應って実は超凄いんです。

で、ウェブサイトを作る上で、このW3Cが勧告したルールに則ってサイトを制作することが、とても大切です。

HTML基礎知識

なぜ文法を守ることが大切なのか

なぜ大切なのか、実例を示せばたぶん皆納得します。
http://eduedu.jp/circruit/

正常な見え方
Firefoxで見た正常な状態

HTML基礎知識

なぜ文法を守ることが大切なのか

異常な見え方
Internet Explorer 9.0で見た異常な状態

HTML基礎知識

なぜ文法を守ることが大切なのか

文法の大切さは理解頂けたでしょうか?

勿論、「文法を守ること」は目的ではなく手段であり、本来の目的は「すべてのブラウザで正しく表示させること」です。

全てのブラウザで同じ表示、同じ挙動をさせるという概念を「クロスブラウザ」と呼び、ウェブデザイナーの多くはこの前提に基づきウェブサイトを制作していました。

最近はブラウザ毎に異なる挙動をさせる「プログレッシブ・エンハンスメント」なんて考え方が主流になりつつあります。

HTML基礎知識

ブラウザによって異なる表示

先のような誤りは同じHTML文でもブラウザにより解釈が異なるために起こります。例えば

点滅

詳しくは後で説明しますが、この文中にあるblinkは文字を点滅させるための命令です。
ところが、このblinkで文字が点滅するのはMozilla系ブラウザのみで、Windowsに標準で入っているInternet Explorer(IE)では文字が点滅しません。

HTML基礎知識

ブラウザによって異なる表示

スクロール

このHTML中にあるmarqueeは文字を左右にスクロールさせる命令です。
これは元々IEの独自拡張で、MacユーザがSafariを使って見ても何も起こりません。

これはほんの一片ですが、HTMLにおける独自属性の採用、CSSにおける独自プロパティの採用、ブラウザによる規格(例:HTML5、CSS3)への対応状況の差異など、正しい知識がないとブラウザの種類(或いはバージョン)によってさっきのページのように表示がぐちゃぐちゃになります。

HTML基礎知識

ブラウザによって異なる表示

Internet Explorer(IE)はウェブデザイナーの間で長年厄介者扱いされています。

IEはWindowsに標準搭載されているという圧倒的な強みがありますが、この強みに乗じてMicrosoft社は独自拡張、独自仕様をバンバン搭載しました。(ドラえもんのジャイアンをイメージしてもらえれば分かりやすいですね。)
特に2001年に公開されたIE6は衝撃的で、前述のW3Cが勧告した文法に完全に従ったとしてもページがぐちゃぐちゃになる、独創性溢れる素晴らしい機能を提供しています。

IE6は市場から消えつつありますが、IEがレンダリングエンジンをW3C標準仕様に切り替えたのはIE8からのことで、HTML5やCSS3などの最新技術を実装し始めたのはなんとIE9からで、ウェブサイトを作る時はMacユーザも含めこのIEを強く意識しなければなりません。

ちなみに、サイト制作会社にIE6対応サイトの制作依頼すると料金が跳ね上がるそうです。

HTML基礎知識

HTMLの種類

一言にHTMLと言っても、様々な種類があります。

HTMLおまけ知識

HTMLの種類

以降のスライド(おまけ知識)は補足なんで暫く読み飛ばしてくれておkですが、HTMLは細かく分けると

DTDとは文書型定義とも言われ、同じバージョンのHTMLでもDTDが異なると文法が微妙に異なる、いわば書き方のルールを定義したものです。

HTMLおまけ知識

(狭義の)HTML5とは

HTMLの最新版。十数年ぶりの本格改訂とあってか、業界関係者の間では話題沸騰となっている。

W3Cで2014年を目処に仕様の検討・標準化が進められており、その技術は依然として流動的。

つまり、HTML5はまだ未完成ということ。
未完成ながらも、その柔軟性故に各ブラウザは既に実装を始めている。
特に業界自体が新しいスマートフォン向けサイトなんかでは古いブラウザとの互換性を図る必要がないためバンバン使われている。

HTMLおまけ知識

なぜHTML5が必要なのか

HTMLおまけ知識

なぜXHTMLを使うのか

ソフトフォーラムのサイトではHTMLよりも難しいXHTMLを採用しています。なんで難しいものを使うの?マゾなの?いいえ、そんなことはありません。なぜならば

おまけ

HTMLとC言語の違い

マークアップ言語とプログラミング言語、種別が違うのでそもそも両者を比較すること自体が間違いなんですが、強いて挙げると

と、両者はまいんちゃんとあずにゃんを比較するのと同じぐらい全然性質が違います。

HTMLを書こう

HTMLは簡単

初めてHTMLを見ると難解な暗号のように感じられますが、HTMLは小学生でも理解できる簡単なものです。

また、お金を出してソフトを購入する必要もありません。Windowsの方は、「スタートメニュー」→「アクセサリ」→「メモ帳」でHTMLを書くことが出来ます。メモ帳を起動して、次スライドの文字を何も考えずに打ってみましょう。(慣れたらコピペでいいんですが、まあ最初なので)

HTMLを書こう

実際に書こう

HTML

ブラウザでの表示

ここに本文を記述します。
こんにちは。

HTMLを書こう

実際に書こう

書き終わったら、メモ帳左上の「ファイル」→「名前をつけて保存」を押し、名前を「(任意の半角英数字).html」ここでは「index.html」とします、ファイルの種類を「すべてのファイル」にして、「保存」を押してみましょう。(保存場所はデスクトップなどが良い)

保存したら、出力されたファイルを開いてみてください。どうでしょう、簡易的ではありますが、ウェブサイトのように文字が表示されたかと思います。

HTMLタグについて

HTMLタグとは

HTMLファイルを構成しているのはHTMLタグと呼ばれるものです。さっきので言うと<html>とか</html>とか<br>とか。

文字の色や画像の配置、全体のレイアウト、段落などひとつひとつにタグが割り当てられており、これらを複数組み合わせることによって、HTMLファイルは形成されています。タグの中には、それ自体で文字を装飾するものもあれば、画像や音楽などの外部のファイルを読み込む動作を指定するタグもあります。

HTMLタグについて

HTMLタグの書き方

HTMLタグの使い方はとても簡単です。<開始タグ>~内容~</終了タグ>で内容を囲めば、要素の種類を指定することができます。ウェブページ内の各部分をどのような要素に割り当てるかによって、このタグの種類を使い分けます。

タグは全て半角の小文字で記述します。(HTML4.01の文法的には小文字じゃなくてもいいんですが、XHTMLとの兼ね合い的な理由で小文字が好まれる)

ただし、<br>のように終了タグがないやつもあります。付けると間違いなので、それはそれでそれぞれ覚えればおkです。

HTMLタグについて

HTMLタグの書き方

さっき使ったタグの説明をします。赤くなってるタグ以外は、ちゃんと</終了タグ>を書くように。

htmlHTML文書であることを示します。このタグでHTML文書全体(ただしDTD宣言は含めません。これは次回以降に)を囲みます。
headヘッダー。ここに書いた内容は表示されません。例えば↓のタイトルとか、ウェブページには直接表示されませんよね。そんな感じのタグをこの中に記述します。
titleページのタイトルです。
bodyボディー。本文です。
br文を改行します。終了タグは不要。

HTMLタグについて

HTMLのお約束

で、さっきのHTML文書の

は、お約束的なものです。(Cで言うと#includeうんたら的な)後でこのお約束がちょっと増えますが、慣れたら全部コピペでおkです。

各々のタグの説明では省略してますが、このお約束をちゃんと記述して下さい。(各々のタグは「本文」、即ちbodyタグに囲まれた部分に書くこと)

HTMLタグについて

属性を指定する

タグ(要素)は属性をもてます。例えば、

段落1

段落2

p囲まれた内容を一つの段落であると示す。

ここでは、align属性(表示位置の指定)にcenter(真ん中)という値を指定しています。

属性の値は、上のように半角の「"」二重引用符(ダブルクオーテーション)で括ります。「'」引用符(シングルクォーテーション)や括らずそのまま書いてもいいのですが、XHTMLのことや慣習上のことを考慮すると、二重引用符で括った方がいいです。

HTMLタグについて

属性を指定する

真ん中

align表示位置を指定する属性。left、center、rightで左中央右を指定。

HTMLタグについて

タグは入れ子にできる

ひぐらしのく頃に

b太字。

この文書ではp要素のなかにb要素を入れてます。このようにタグは入れ子にできます

HTMLタグについて

終了タグのない要素

いつもニコニコあなたの隣に這いよる混沌、ニャルラトホテプです。
(」・ω・)」うー!(/・ω・)/にゃー

さっきも言いましたが、brは終了タグがありません。開始タグのbrだけで「改行」は表せるからです。

ところで、b要素の終了タグを省略するとどうなるでしょうか?答えは、開始タグ以後の文書が全部太字になってしまいます。そういう事態を避けるため、brなどの例外的なタグを除き、終了タグは必ず記述しましょう。
(実はさっきやったpはbrと違った意味で例外的なタグで終了タグを書いても書かなくてもいいんですが……紛らわしいので終了タグは付けること。HTMLには、pのように終了タグを書いても書かなくてもおkなタグが多数存在します。)

XHTMLではこの終了タグは省略できず、開始タグとまとめて<br />と記述するんですが、まあ今は忘れて下さい。

HTMLタグについて

補足

pとbrって何が違うの?的な質問を受けそうなのでここで回答しますが、

けいおん!の登場キャラは
中野梓
秋山澪です。

けいおん!の登場キャラは

中野梓

秋山澪です。

見ての通り、pは段落なので一行空きます。brタグ×2でも同じようにはなりますが、ブラウザによってはbrタグが連続していると2個目以降を省略しちゃう奴もあるので、段落にしたい時はpやCSSを使います。(勿論、このp要素内でbr要素を使うことも出来ますが)

HTMLタグについて

補足

中野梓
中野梓
中野梓
中野梓
中野梓

これはCSSを使った場合。あずにゃんが一杯です。まあCSSについては後々。

HTMLタグについて

補足

同じ働きをするタグ

御坂美琴白井黒子初春

b要素は物理強調、strong要素は論理強調、span要素は汎用的なインライン要素で、ここではCSSでの物理強調に使っています。(b以外今は覚えなくておk)

このように、表面上は同じ働きをするタグは多数ありますが、実は表す意味が全く違います。初心者なんかが混同して使っちゃので、これらのタグを習った後々、気をつけて下さい。

HTMLタグについて

注意

今日紹介したタグはメジャーなものばかりなので覚えておいて欲しいんですが、マニアックなタグを習っても、それを一々覚える必要はありません。

お約束も含めて、ぶっちゃけコピペでおkです。(良いエディタにはタグの入力補完機能もあります)