【無料で作れる】ホームページ制作に必要なHTMLの知識
ホームページを作成すること自体は無料で行えます。書店に行けば多くのホームページ作成の入門書、インターネットで『ホームページ 無料』などで検索すれば多くの入門ページがヒットすると思います。誰でも無料で簡単に始めることが出来ます。
しかし、html入門ページやマニュアル本などに書いてある通り、htmlやcss、JavaScriptなどを使ってホームページを作成するのも良いですが、それぞれの構造、歴史的経緯などを調べておき、予め目的と経緯などを知った上で作成するのも、非常に理解度を高める良い方法です。
※Webサイト、Webページなどの単語はまとめてホームページとして記述しております。
htmlのはじまり
インターネットで使われるドキュメントを広く閲覧出来る仕組みはWWW（World Wide Web）と言われています。世界範囲の蜘蛛の巣、という意味になります。提唱した人はティム・バーナーズ=リーという方で、この方がWWWの生みの親と言われています。
WWWが生まれる前までハイパーテキスト（文章を相互に関連付ける技術）、ハイパーメディア（文章だけでなく映像、音楽なども含む）とよばれる、それぞれのコンテンツを結びつける概念は存在していましたが、現在はインターネット上でのhtmlという仕組みが、このハイパーテキスト、ハイパーメディアとして認識されています。
htmlというのは一つの言語であり、htmlで書かれたファイルは拡張子と呼ばれる、ファイルの末尾の記号が『.html』になっています。単語や文章をタグと呼ばれる記号とアルファベットでくくることで、その文章や単語に意味をもたせる事ができます。専門用語にリンクのタグを貼ることで、別のページにリンクさせることも出来ます。
ただしhtmlのリンクは一方向という欠点があります。ですので、せっかく参考ページへのリンクを貼ったとしても、そのリンク先は別の管理者である場合、リンク先が変更されたり、ホームページ自体が消滅するなどで、リンク切れを起こす可能性があるのです。
その為、厳密にはハイパーテキスト、ハイパーメディアの概念を完全に踏襲しているわけではありませんが、本来のハイパーテキスト、ハイパーメディアは実装が極めて複雑であり、残念ながら普及に至っておりません。ですので簡単に記述出来るhtmlという言語をつかったホームページがインターネットでは普及しました。
このhtmlという言語ですが、もともとsgmlというドキュメントのフォーマットから派生した言語であり、既存の文章にタグを付けることで、文節をまとめる、見出しをつける、別の文章へリンクを貼る、などが出来るマークアップ言語になっています。
同じsgmlからの派生としてxmlというマークアップ言語もあります。xmlとhtmlとは兄弟ということになります。
htmlと同じ位大事な言語に、css、JavaScriptがあります。
cssはCascading Style Sheetという意味で、継承可能な装飾を定義することが出来きる言語です。具体的に説明しますと、見出しは太字で色は赤、本文の文字は黒で行間は2文字分、などなど、あらかじめスタイルを定義し、それに名前をつけ、その名前をhtml側で呼び出すことで、タグに囲まれた箇所を自由に装飾をさせる事が可能になるという仕組みです。
JavaScriptはよりプログラムっぽい記述になります。変数と呼ばれる入れ物に値をいれたり、値を演算したり、演算した内容によって処理を分けたりするなどが可能な、プログラミング言語です。html、cssなどを操作して変更することなども出来ます。
そしてこれらのテクノロジーですが、インターネットが普及し始めた後、Mozilla、Microsoft社、Apple社などで始まった、html、css、JavaScriptの自社独自の拡張機能により、一貫性が保てなくなってしまいました。
ティム・バーナーズ=リー氏はこの仕様の不統一を慮り、W3C（World Wide Web Consothiｍ）という団体を作ります。W3Cではhtmlの仕様、cssの仕様などをドラフトとしてまとめ、試験を繰り返し、最終的に仕様として決まった内容を公開しています。
現在ではhtmlの仕様は別の団体に移り、xhtmlというhtmlを拡張したマークアップ言語のメンテナンスなどを行っています。
さてhtmlですが、2017年現在ではWHATWG（Web Hypertext Application Technology Working Group）という団体が使用の決定を行っています。こちらは企業からのアプローチという色が濃い団体です。主にhtml5、html5 apiなどの仕様を決めています。読み方は「ワットダブルジー」というのが一般的なようです。
マークアップとは
ところでhtmlというマークアップを実際に書いてみましょう。
まず文章があります。そしてその文章の中で、区切り、見出し、誇張したい場所などの前後にタグと呼ばれるhtmlを記述します。
以下、宮沢賢治氏の作品「銀河鉄道の夜」を引用して説明致します。
午後の授業
ではみなさんは、そういうふうに川だと言いわれたり、乳の流れたあとだと言いわれたりしていた、このぼんやりと白いものがほんとうは何かご承知ですか」先生は、黒板につるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指しながら、みんなに問いをかけました。
「午後の授業」は見出しです。見出しは英語でheadingといいます。htmlでは6種類のheadingが存在します。具体的には`h1`タグから`h6`タグまでです。数字が少ないほど上の（大きな）見出しになります。
<h1>午後の授業</h1>
そして文節はparagraphと呼びます。htmlでは`p`タグになります。
<p>ではみなさんは、そういうふうに川だと言いわれたり、乳の流れたあとだと言いわれたりしていた、このぼんやりと白いものがほんとうは何かご承知ですか」先生は、黒板につるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指しながら、みんなに問いをかけました。</p>
「銀河帯」という部分を強調したい場合、以下のように記述します。
<strong>銀河帯</strong>
このように、すでにある文章にタグ付けをしていくことをマークアップと呼びます。
しかし現在ではこの手法は殆ど採用されていません。なぜでしょう？
現在のhtml事情
2017年現在では、マークアップは大きく以下の2つの要素で捉えられているようです。
- ホームページのワイヤーフレーム（枠組み）を構成する要素
- 閲覧者に伝えたい文章などの内容を表す要素
htmlは文章をマークアップしながらハイパーテキスト、ハイパーメディアとしてホームページを作っていく言語ですが、ホームページの枠組を構成するもの、という認識をされている方も多いと思います。
現在では、具体的には以下のような流れになることが多いのではないでしょうか。
- レイアウト・デザインを決める
- 決まったデザインの通りにhtml、cssを組み上げる
- 文章などの中身を流し込む
コンテンツとしての文章などが後の作業になるわけですね。つまり最初に文章ありきという古来の方法では作られていない、別の言い方をすると、最初に文章が無くても作れてしまうという流れです。
参考リンク
ホームページ作成に関してはこちらを参照ください。
変化するhtml
実はhtmlには幾つものバージョンがあります。現在はhtml5です。html4までとはどう違うのでしょうか。
具体的には、レイアウト＋デザインの要素がhtmlから切り離され、あくまでhtmlは文章の意味付けをするものという定義に変わりました。使い方が限定され、目的がはっきりしたわけですね。
今までは、「文字を太くしたい」「背景色を赤くしたい」などの装飾に関わる部分もhtmlで可能でした。
<font color="red">この文字は赤くなります</font>
や、
<b>この部分は太字になります</b>
など、こういったhtmlタグが存在していました。
しかしhtml5ではこれらの見た目の要素は廃止もしくは使用方法が変更になり、色を変えたり、文字のサイズや太さを変えるのは、すべてcssで行うようになったのです。
html5での`b`タグは「太くしたい」ではなく「他の単語と区別したい」に変わります。`font`タグでの色指定は「赤くしたい」ではなく「特別な見せ方をしたい」という意味付けに変わり、`span`タグや`p`タグなどを使うようになりました。`font`タグは廃止になる予定です。
このように、見た目を変化させるのではなく、使用用途して目的別にタグを付けるという変化がおこりました。これをセマンティクスと呼びます。
<span class="attract">この文字は目立つようになります</span>
.attract {
color: red;
}
上記のように、該当箇所をhtmlでマークアップし、cssで判別出来るようにclassで名前をつけます。そしてcssでclassの中身を定義する、という形です。
「特定の文字を」「赤くすることで」「目立たせたい」と分けて考えると簡単です。
「特定の文字を」「目立たせたい」はhtmlで指定しておき、「赤くすることで」はcssに記述、という手法です。
ですので、レイアウトなどの目的を持たないものはcssで行い、htmlでは行わないようになりました。
進化するhtml
htmlでのマークアップ以外にも、html5では機能が大幅に拡張されています。
先にも書きましたが、html APIと言うものがあります。具体的には以下のような内容になります。今まで実現不可能だったことが次々に出来るようになってきています。
- Web Storage API
- 閲覧者のコンピュータにデータを保存させる
- 保存したデータを読み込む
- File API
- ブラウザ内からコンピュータ内のファイルを直接参照、編集可能
- Geolocation API
- 閲覧者が今いる場所を取得
- スマートフォンでいう位置情報
- Drag And Drop API
- ブラウザに対してファイルをドラッグ＆ドロップしたことを検知する
- Canvas API
- JPEG画像、GIF画像などとは別に、直接ブラウザに描画ができる
- Web Worker API
- ブラウザの処理を並列で行うことが出来る
- History API
- ブラウザの戻るボタン、進むボタンを操作できるようになる
その他にも策定中のAPIが沢山あります。具体的には、JavaScriptなどの言語を使ってAPIを利用することが多いと思います。
このようにhtmlはhtml5になることで、文章をマークアップする言語だけではなくなって来ているのがわかると思います。
ホームページ作成の難易度
このような発展を遂げたhtmlですが、デメリットも存在します。
すでにホームページをお持ちの方はご自身で更新なさってる方もいらっしゃると思います。文章を変更したり、情報を追加したりなどの作業です。
しかし上記で説明したレイアウト、デザインに関わる部分を編集したり、html5 APIでストレージ機能を変更したりするためには、難易度が突然高くなってしまいます。
編集している内にホームページが閲覧できなくなってしまい、修復不可能になってしまうこともありえます。
html5で出来ることが大幅に増えたことにより、難易度が遥かに高くなってしまいました。
不安であればプロに依頼することも考えたほうが良いと思います。
まとめ
WWWが始まったのが1990年と言われています。2017年現在、すでに27年経過しています。現在では当初の文章をマークアップするという手法は使われなくなりつつあります。
Webデザイナがホームページをデザインし、htmlで枠組みとなるワイヤーフレームを構築し、文章、画像などを流し込む、という一連の流れが現在主流の作業フローなのではないでしょうか。
しかし発端はあくまで、文章をマークアップする、マークアップしたものを相互にリンクさせる（ハイパーリンク）、という部分が大事なわけです。ハイパーリンクはWWWの醍醐味です。
現在のテクノロジーはラットイヤーと呼ばれ、進化のスピードが加速しています。当時の手法もどんどん進化を遂げるようになりました。
その結果現在の様に、htmlはすでに存在する文章をマークアップさせるものではなく、ワイヤーフレームから作成する形に落ち着いたという解釈で問題無いと思います。そのほうが現実的でもあります。
ただ、歴史的には文章ありきという事実がありますので、そこは覚えておいて損はないと思います。
この記事を読んだ方におすすめの記事
- 記事検索
