2.前提知識

ホームページ制作に入る前に、これだけは覚えてほしいことをまとめました。

ホームページは何でできているか

基本の基本、HTML

今見ているこのホームページはHTML（注1）という言語で書かれたファイルです。

例えば、メモ帳で何か文章を書いて「memo」という名前で保存したとします。そうするとその保存したテキストは「memo.txt」というテキストファイルとしてデータ化されます。
この「 .txt」というのは「拡張子（かくちょうし）」といって、このファイルがどういうファイルなのかを識別するためのものです。

これをHTMLに当てはめると、同じようにメモ帳で文章を書いて、「memo」という名前で保存します。
その時に拡張子を「html」にして保存すると、それは「memo.html」という名前のHTMLファイルになります。
極端な話、拡張子をHTMLにしてしまえば全部HTMLファイルになってしまうのです。

※拡張子が表示されてない！という方はこちらをどうぞ

言ってしまえば、HTMLというのはホームページを表示するために開発された共通のルールです。
「HTMLを使って書けば全世界共通でみれるから、みんなHTMLを使って書こうね」
だからインターネットがあればアメリカのサイトも、ドイツのサイトもタイのサイトもブラジルのサイトも見れるのです。

こう考えると便利なルールですよね。

デザインを再現するCSS

HTMLだけでは、味気ないサイトになってしまいます。
試しに、HTMLだけで作ったサイトを見てみましょう。

HTMLだけで作ったサンプルサイト

今どき、こんなサイトありませんよね。
そこで、サイトを綺麗に見せたいというニーズによって生まれたのがCSS（注2）です。

CSSを使えば、テキストの色を変えたり、フォントの大きさを変えたり、位置を1px単位で動かしたり、要素を見えなくしたり等…いろいろとできるようになりました。

「こんなデザインのホームページにしたいな」

と思っているだけでは、その通りのホームページにはなりません。
具体的に「この部分の背景色を黒くして」と「命令」しないといけません。
それがCSSの役目です。

まずはHTMLとCSS

このようにHTMLで中身を作り、作ったデータに対してレイアウトやデザインをしていくのがCSSというのがわかりました。

「ホームページを作れるようになるには何をしたらいいか？」

まずはHTMLとCSSを覚えましょう。
これができるようになればホームページが作れるようになります。

その他の言語

HTMLとCSS以外にもホームページを作る上で必要な言語があります。
例えばJavaScript（注3）や、PHP（注4）等です。
ただこれらは、プログラミング言語になるので今は必要ありません。HTMLとCSSではできないことが出てきた時に学べばOKです。
今は「こういうものがあるんだ」くらいで問題ないです。

確認の友、ブラウザ

このホームページを見ているのに使っている「ブラウザ」。
おそらくInternet Explorerとか、Chrome、Firefox、Safariなどを使ってみていると思いますが、これらのことをブラウザと呼びます。

Windowsをお使いで、特に何も変更していない場合はInternet Explorerを使っているはずです。MacであればSafariです。
このブラウザを使ってこれから作成していくHTMLファイルを確認します。
HTMLのタグを打って、それが間違ってないかブラウザで確認したり、CSSがちゃんと効いているかどうかをブラウザで確認します。
最初のうちは書いたら確認、書いたら確認、というのを癖にすると間違いが起こりにくいです。

どのブラウザを使えばいい？

このブラウザは好きなものを使っていただいて結構なんですが、ホームページ制作をするのであれば通常確認用はChromeやSafari、もしくはFirefoxをお勧めします。
要は「Internet Explorerを使わない」ということです。

Internet Explorerはバグで有名

Internet Explorerは予期せぬバグで有名で、ホームページ制作の人間からしてみると本当に消えてなくなってほしいと思っている人間もいるほど、ダメダメなブラウザでした 笑
Internet Explorerはバグが多くエラーや崩れをそのまま出力するので気づかないということが多々ありました。特に初心者のうちは「なぜここがこのようになるのかわからない」といった問題で数時間悩み、原因がInternet Explorerの独特のバグだった、ということもよくあります。

しかし今はバージョンが上がってきていて、昔に比べかなり良くなりましたが、対応していない新しいバージョンのCSSがあるなど、未だに名残があります。

ベストなブラウザ選択

当サイトはChromeを基本として進めていきます。便利なプラグイン等も紹介していくので、特にこだわりがなければChromeブラウザを是非お使いください。Googleが開発したブラウザで、プラグインも充実していてInternet Explorerに比べかなり早くさくさく動きます。
Chromeダウンロード

そして第二の確認用として、FirefoxやInternet Explorerを使えば最適なブラウザ環境に。
Chromeでは崩れていなくてもInternet Explorerでは崩れている、ということも多々あるので、確認用として使っていきます。

注釈
注1：エイチ・ティー・エム・エル。Hyper Text Markup Lanugageの略
注2：シーエスエス。Cascading Style Sheetの略
注3：ジャバスクリプト。ブラウザ側で実行するため特に必要とするものがなく実行できる。
注4：ピーエイチピー。サーバー側で実行するので環境によって結果が左右されない。