ブラウザの進化にともなう変更

ブラウザによる表現の違い

ホームページを作るため、見るためにはブラウザと呼ばれるソフトが必要です。普段意識しないで使用しているインターネットの全てのページはテキスト(文字の集合体)で作られています。そのテキストに記録されたデザイン、各文章、構成を解釈し、視覚化するのがブラウザの役割です。

ブラウザにはさまざまな種類があります。飲料にたとえます。たとえばコーラ。同じコーラという商品でもでもコカ・コーラ、ペプシ、キリン、ダイドーなどの各メーカーから販売されており、メーカーによって味が違います。同じメーカーのコーラでも、ダイエットコーラや砂糖未使用コーラなどの種類があり、それぞれに特徴が変わります。製造時期などでも品質改良やコスト調整のために味が変わったりもします。ブラウザも同じようにさまざまなメーカーが存在し、さまざまなバージョンがあります。同じテキストデータを読み込ませても、ブラウザによって異なった表示結果となることがあります。

味の違いは味わいとして共存できますが、テキストデータの表示の相違は時としてデータ作成者の意図を超えた障害となることがあります。HTML5はこういった結果の相違をできる限りなくすことを第1目標として掲げています。

表現力の標準化

では、そもそもなぜこういったデータの表現の違いが生まれたのか。それは各ブラウザメーカの開発競争のためでした。インターネットのページデータはテキストデータですので、情報そのものには位置や色情報を文字で表現します。そうやって文字で表現されたデータをブラウザが解析し視覚化しますが、そういった解析が必要なコンテンツが多角化したことによります。図やイラスト、表だけではなく、インターネットのエンタテイメントかにより、音楽や動画のメディアファイル、ゲームをはじめとする動的なプログラムファイルさえもブラウザ上で表現する試みを各メーカで独自に進めていった結果、あるブラウザではできることがほかのブラウザではできない、といったことが生まれました。

結果としてこれまでのHTMLには作成者の使用するブラウザに合わせたデザイン仕様となり、その記述についてもデザイン表記の方法はその独自のものでした。

表現の記述が異なることはブラウザメーカにとっても好ましいことではありません。ブラウザメーカの使命とは、世界中のどんなHTMLファイルでも作成者の意図する表示に視覚化することだからです。記述方法がデザイン仕様について変わるため、その仕様にブラウザが合わせていくためには他メーカの仕様が変わるたびにブラウザの仕様も変えていかなければならない。

そこでW3C、WHATWGという機関により、これらの仕様の標準化が提案され、多角化されていたHTMLのバージョンの統一化が開始されました。これがHTML5です。

HTML5概要

HTML5には捕らえ方として2種類の意味があります。 広義の意味でのHTML5とは「OSの違い、ブラウザの違いに依らず表現される」HTMLであること。 狭義の意味では「4.01に続くHTMLバージョン」として理解されます。広義の意味でのHTML5にはHTMLファイルに記述される各付加機能の仕様が含まれます。一般的にはCSS3、ECMAscriptと呼ばれるものです。ECMAscriptはJavaScriptとして有名です。

Webページ作成にあたって（PC初級者のために)

パソコンでホームページを作成するためにはいくつか学ばなければならないことがあります。このセクションではPC操作の基本を説明します。

フォルダ(ディレクトリ)の概念

パソコンで作成するすべての作成物はデータファイルと呼ばれます。ファイルは全て記録媒体(多くのPCではHDD、もしくはSSD)に保存されます。保存の際、保存する場所を指定する必要があります。これはデータを探すときに見つけやすくするため、間違えず正しいデータを探すために必要なことです。

図書館でたとえれば、「走れメロス」を探す際には、

という風に探すことができます。

パソコンでのファイル保存も同じように考えることができます。

たとえば、個人の日記をパソコンに保存するときには

C:\Users\admin\Documents\日記\2013年\10月\10月4日.txt

といった命令をパソコンに出します。

これは、パソコンのどこにしまうかを指定しています。

ということになります。保存するフォルダの指定はファイルの種類や仕様用途によってパソコンを使う人が決めます。

その決め方のルールはありません。ただし、そのファイルを使うソフトによっては禁制があります。ですので、文章や表のファイルはドキュメント用のフォルダ、音楽ファイルは音楽用のフォルダ、ダウンロードしたデータファイルはダウンロード用のフォルダ、それぞれが用意されているパソコンが多いので、いつでも既定のフォルダを探せるように使い慣れておくと良いかと思います。

ホームページのファイルを作る際にも、同じようにホームページファイルの保存用のフォルダを用意しておいたほうが便利です。ホームページのファイルは１つではまとまりません。ファイルの数は多くなりますので、ホームページ用のファイルとそれ以外のファイルが混じって保存されてあると使いづらいと感じることがあります。

フォルダの作成方法は各パソコンによって変わります。まずはデスクトップにフォルダを作ってみましょう。Windowsの場合はデスクトップ上で右クリックし、[新規作成]→[フォルダ]を選びます。[新しいフォルダ]がデスクトップに作成されるので、使いやすいように名前を決めます。[新しいフォルダ]の上で右クリックし、[名前の変更]を選びます。homepageなどと、用途に合わせてわかりやすい名前に変えましょう。フォルダの作成は以上で完了です。

作成されたフォルダを開くと新しい画面が出てきます。普段目にしている画面だと思いますが、これをエクスプローラといいます。エクスプローラのアドレスを確認してみましょう。パソコンによって違いますが、[アドレスバー]などを表示してみると、上記のディレクトリの概念で説明したようなアドレスが確認できるかと思います。

Windowsの場合はOSのバージョンでも変わりますが

C:\Documents and Settings\ユーザー名(パソコンにつけた名前)\デスクトップ\homepage

といった表記が確認できるかと思います。（XPの場合)

図書館で読みたい本のタイトルを探す際にはまず本の場所(アドレス)を特定する必要があります。パソコンでも同じことが言えます。使いたいファイルを使うためにはファイルの場所(アドレス)を把握する必要があるのです。

アドレスがわからなくなったときには

現在、多くのIT機器には検索機能がついています。これは図書館の書籍検索端末と同様の使い方ができると言えます。検索して特定できた場合には、そのファイルを使うだけではなく、アドレスを覚えておくようにしましょう

拡張子の概念

前述にて日記をテキストして保存した場合には10月4日.txtというタイトルで紹介しました。このとき、多くの場合には[.txt]の部分はパソコンの機能によって自動的につけられます。

この[.txt]の部分を「拡張子」といいます。

拡張子には次の機能があります。

拡張子はパソコンの設定によって隠されている場合が多くなっています。ファイルの拡張子はホームページを作るうえで重要な要素ですから、拡張子を表示する設定にすることをお勧めします。

ホームページ作成の上でよく使う拡張子

HTML5ではメインファイルとスクリプトファイル、メディアファイルなどの種類のデータを使用します。それぞれのファイルは基本的には同じディレクトリ内に保存しておく必要があります。外部からデータを取り込む際には必ずしもこのルールを守る必要はありませんが、この場合には取り込むための処置をしなければなりませんので簡単なページ編集をするはじめのうちは同じディレクトリに保存するようにしたほうが便利です。外部ファイルの取り込みを始めるということは多くのファイルを扱う複雑なページに発展させることです。その際にディレクトリを分ければいいでしょう。

ファイル操作の概要

シンプルな2ボタンマウスでの操作。
基本概念として

となっています。左ボタンの操作は、クリック、ドラッグ、ダブルクリックの3種類があります。

次に右クリックによる基本操作についてを以下にまとめました。

ホームページ作成の際にはファイルのコピーとペースト、テキストのコピーとペーストをよく活用します。マウスの操作には慣れておきましょう

HTMLファイル記述の基本

HTMLとは

HTMLとはHyperText Markup Languageの略で、直訳すると、『付加機能をタグ付けされた言語』となります。付加機能とは、文字の大きさや色、フォントだけではなく、リンクの機能や描画の機能もあります。

記述ルール

HTMLはタグという記述ルールがあります。タグは大きく3つのルールがあり、タグには数多くの種類があります。タグにはそれぞれの種類に属性と呼ばれる値をつけることができます。その書き方は簡潔にひとつのルールで説明できます。

<タグ名 属性="属性値">タグ付けしたい文章</タグ名>

ルールはこれだけです。

<タグ名>←これを開始タグといいます。
</タグ名>←これを終了タグといいます。
機能を持たせたいテキストを開始タグと終了タグではさみ、開始タグには属性とその値を記述します。タグの名前は使いたい機能によって選ぶ必要があります。選んだ機能によっては属性を必要としない場合もあります。たとえば、段落をつけたり、見出しにしたりと、タグ名自体が全ての機能をまかなう場合です。

ここでは基本記述となる6種類のタグを使ってHTMLを記述していきます。

まず、以下のタグについてはHTMLの記述基礎となります。これはコピーして使用します。

HTML フォーマット

上記が、最も簡単なHTMLファイルとなります。HTMLファイルは全てがテキストで記述されます。ほぼ全てのテキストエディター(ワープロソフト)で作成することが可能です。

Windowsの場合、OSに付属するソフト『メモ帳』を使用して作成できます。Wordでも作成できますが、Wordのフォント指定や改行の機能はHTMLドキュメントには適用できないことを理解しておきましょう。

スタート＞すべてのプログラム＞アクセサリ＞メモ帳
またはスタート＞検索＞メモ帳　or　notepad
この方法でメモ帳を開いたら、上記のHTMLフォーマットをコピーしメモ帳に貼り付けてください。h1タグ、それからpタグ内の文章を任意で書き換えてください。入力が終わったらメモ帳のメニューバーから、[ファイル]→[名前をつけて保存]を選択し、デスクトップや作成したhomepage用フォルダのなかに適当な名前を付けて保存します。このとき、注意しなければならないのはファイル名の拡張子、それから文字コードを決める必要があることです。

ファイル名：index.html
文字コード：UTF-8

保存が完了したら、保存されたファイルを確認してください。既定で使用しているブラウザのアイコンで保存されていることが確認できたら成功です。ファイルを開いてみましょう。

a(アンカー)タグの使い方

アンカーはテキストにリンクの機能を持たせるタグです。さっそく以下のように記述してみましょう。

記述が終わりましたら、次にアンカータグの属性を入力します。ここで作成するリンク先はGoogleにしてみます。Googleのアドレス（URL）を確認しましょう。http://www.google.co.jp/であることが確認できたらこのURLをコピーします。次にアンカーの開始タグに次のように追記します。

できましたら上書き保存します。メニューバーより[ファイル]→[上書き保存]を選びます。

上書き保存が完了したら、もう一度保存したHTMLを開いて見てください。Googleへのリンクはうまく設定できたでしょうか？うまくいかなかった場合には、メモ帳の記載と下記の表記とを比べて間違いを探してください。

できましたか？

imgタグの使い方

イメージタグは画像の貼り付けに使うタグですが、多くの属性を持ちます。

属性名src(ソース)

属性名srcは画像の参照名を指定する属性です。このときの参照先はHTMLファイルと同じディレクトリを指します。もし、画像が多くなってしまう場合には画像をひとつ深いディレクトリに保管し、src="[ディレクトリ名]/sample01.jpg"と別のディレクトリに指定することもできます。また、この方法では表示される画像は画像ファイルそのものの大きさです。あらかじめ画像ファイル自体を編集し、Webに表示させるのに適当な大きさにしておく必要があります。これがimgタグの一番シンプルな使い方です。また、imgタグには終了タグは存在しないことになっています。

属性名width、height

画像の大きさを大きめに保存しておいて、属性で指定するのもひとつのテクニックです。この方法であれば、画面の大きさの違うパソコンやスマホからアクセスした場合にでも表示される画像を画面の幅いっぱいに表示させることなどができます。幅の設定はwidth、高さの設定にはheightの属性値を設定します。

widthかheight、どちらか一方のみを記述した場合には、元の画像の縦横比が守られます。どちらも指定した場合には自動的に伸縮された画像が表示されます。

CSSファイル記述の基本