どうも、シノだ。前回挨拶が抜けていた、失礼。
今回は、早速だがHTMLを書いていこうと思う。先に、今回どんなことができるかをお見せしよう。以下のURLにアクセスしてみて欲しい。
やたら殺風景なページが出てきたと思う。今回は、これが作れるようになるまでを解説していく。そのために必要な準備と、このページの解説、さらに知っておいて損はない知識も併せて紹介していこう。
なお、HTMLを書くファイルの作り方を知っていてできる方は、「HTMLを書いてみよう」まで飛ばしてもらって構わない。
前回の復習
前回は、そもそもHTMLやCSSって何者なんだということを解説した。まあ、Webページを表示するために、文章に意味をつけるものがHTML、見た目をカスタマイズするのがCSSと思っておいてもらえれば十分だ。
HTMLを書く前に…
まずは、準備をしていこう。前提として、Winodwsを使用している方を対象にする。
準備する内容は以下の通りだ。
- 拡張子の変更ができるかを確認する
- HTMLを書く用のファイルを作成する
順番に見ていこう。
拡張子の変更ができるかを確認する
…といきなり書いたが、そもそも「拡張子って何？」という方もいらっしゃるだろうから、その解説からしていく。
拡張子とは、「コンピュータがファイルの種類を判断するためのもの」だ。よく音楽ファイルだと「MP3」とか、画像ファイルなら「JPEG」とか「PNG」とか聞いたことないだろうか？これらのファイルは、実際に見てみると、ファイル名の後ろに「.mp3」とか、「.jpeg(.jpgなど)」、「.png」というものがついている。このドット以降の文字列が拡張子だ。
で、このWebページとして表示するためのHTMLも専用の拡張子がある。そのまま、「.html」という拡張子だ。まずは、この拡張子のファイルを作ったり変更したりできるか、確認していこう。そのためには、拡張子が表示されているかを確認すればいい。
何でもいい、自分のパソコンのファイルを確認してほしい。そこで、ファイル名の一番うしろに、ドットから始まる文字列が表示されているだろうか。もし、表示されていれば、それで問題ない。次のファイル作成まで飛ばしてしまおう。
表示されていないという方は、以下の手順で確認してほしい。Windows10の場合のものなので、他のOSの方は各自調べて欲しいが、基本的にはそんなに変わらないと思う。
- 「設定」を開く
- 上部「設定の検索」に“拡張子“と入力し、出てきた「ファイル拡張子を表示する」をクリック
⇒「開発者向け」というメニューが出てくるはずだ。 - 出てきたメニューの中から、「エクスプローラー」という項目を探す
- チェック項目の中、「ファイル拡張子を表示するように設定を変更します」にチェックが入っているか確認する
⇒恐らく、チェックされていないと思う。チェックされていたら、すでに拡張子が表示されているはずだ。 - チェックが入れられる場合はチェックを入れ、「適用」をクリック
⇒これで上に書いた、ファイル名の後ろのドット○○が出ていればOK、チェックを入れられなければ次へ。 - 右の「設定の表示」をクリック
⇒新しいウィンドウで、「エクスプローラーのオプション」が出てくる。 - 「詳細設定」の中から、「登録されている拡張子は表示しない」という項目を探し、チェックを外す
⇒ここ注意。チェックを入れるのではなく、外す。 - 「OK」、もしくは「適用」をクリック
⇒これで再度確認してみよう。これで拡張子が表示されているはずだ。
設定できただろうか。これで、一つ目の準備ができた。できない方は、この記事のコメントに書くか、Google先生に聞いてほしい。
HTMLを書く用のファイルを用意する
まず、どこでもいい。ここにHTMLファイルを置く、という場所を決めて欲しい。分かりやすくCドライブ直下でもいいし、自分のドキュメントフォルダの下でもいいが、新しく専用のフォルダを作っておいた方がいいだろう。
場所が用意できたら、そこに新しいテキストファイルを作成しよう。上で拡張子の設定が上手くいっていれば、「新しいテキストドキュメント.txt」という名前になると思う。そうしたら、好きな名前をつけて、最後の「.txt」を「.html」に変更して決定しよう。上のサンプルページの場合は、「Sample01-1.html」という名前にした。
決定すると、なんかウィンドウが出てくるかもしれない。「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」という内容だ。出てきたら、「はい」を押す。すると、変更が反映されるはずだ。
これで、HTMLを書く準備ができた。
HTMLを書いてみよう
さあ、準備ができたので早速書いていこう。作ったファイルを右クリックして、「プログラムから開く」の中からお好きなテキストエディタを選択する。そうすると、そのファイルを編集するためのエディタが出てくる。
このエディタにも色々種類があるのだが、これは人によって異なるので、自分で好きなものを使用してもらえれば大丈夫だ。ただ、Windowsデフォルトの「メモ帳」はあまりオススメしない。調べてもらえれば色々出てくるので、この機会に変えてみるのも手だろう。
話を戻そう。テキストエディタが出てきたら、以下の内容を入力し、保存する。ここで、全部コピー&ペーストはオススメしない。面倒でも最初は手で打ってみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World!!!</title>
</head>
<body>
<h1>Hello World!!!</h1>
<p>これは、初めてのHTMLです。</p>
<p>これから、<br>色々勉強していきましょう！！！</p>
</body>
</html>これを入力して保存できたら、同じファイルを再び右クリック⇒「プログラムから開く」から、今度はブラウザを選択してみよう。すると、最初に紹介したサンプルページと同じものが表示されると思う。もし表示がおかしい場合は打ち間違いなので、どこが違うか確認してみよう。
さて、ここで文字化けしてしまう方もいるのではないかと思う。その場合も落ち着いてほしい。ちょっと補足しよう。
文字化けの原因と対処法
そもそもなぜ文字化けが発生するかだが…これは、「文字コード」というものが関係している。文字コードは、パソコンが文字を認識するための、数字との対応だと思ってほしい。で、この文字コードは幾つかの種類があるのだ。あ、基本的にはどの数字がどんな文字に対応しているかは気にしなくていい。気にする必要があるのは、どんな決まりを使っているかだ。
分かりやすくするため、例を出そう。ここに、二つの文字コード「A」と「B」があるとしよう。文字コードAでは、「あ」という文字が「1000」という数字で表されているとしよう。で、文字コードBでは、数字「1000」は「＠」を表すとする。
ここで、ファイルを文字コードAで編集して「あ」と入力する。つまり、文字コードAの決まりに従って、この文字は「1000」という数字に対応することになる。これを、文字コードBとして表示すると、この文字コードBで「1000」に対応する「＠」が表示されてしまう。これが、文字化けの正体だ。
今回、上のサンプルは「UTF-8」という文字コードで表示するように書いている。つまり、中身もこの「UTF-8」というもので書かれている必要があるのだ。文字化けしてしまった方は、今何の文字コードを使用しているかと、「UTF-8」に変換するにはどうすればいいかを調べて欲しい。これは使っているエディタによって変わるので、一概には説明できない。
簡単な解説
ここから、解説の深さを分けていく。まずは、初心者向けに、基本的な書き方と簡単な内容を見ていこう。
基本的な書き方
再度、サンプルソースを見てみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World!!!</title>
</head>
<body>
<h1>Hello World!!!</h1>
<p>これは、初めてのHTMLです。</p>
<p>これから、<br>色々勉強していきましょう！！！</p>
</body>
</html>何やら、実際に表示されているもの以外に、「<」と「>」で囲まれたものが大量に入っている。これはタグといって、実際に文章に意味を持たせるものである。
HTMLでは、基本的にこのタグを使用して、その内容やこのファイル自体の設定をしていくことになる。
基本的な構造は以下の通りだ。
<html>
<head>
ここに、このHTMLファイル自体の設定を書く
</head>
<body>
ここに、表示させる内容を書く
</body>
</html>全体を<html>というタグで囲み、その中は大きく<head>タグ、<body>タグで囲まれている。また、基本的には各タグは開始と終了がセットになっており、終了の際は先頭に「/」が入ったものを書く。
<head>タグの中にはそのHTMLファイル自体の設定を、<body>タグには実際に表示させる内容を書いていくというイメージでいてもらえればいい。
なお、サンプルの中では先頭一行が余分にあって、更に二行目も<html lang="ja">と書かれているが、こう書くんだなくらいでいい。
タグの説明
さて、あともう5つ、タグを紹介しよう。それ以外は、いったんはそう書くんだ程度で構わない。詳細を知りたい方は、下の方で残りを解説しているので、そちらを見て欲しい。
一つ目は、4行目の<meta charset="UTF-8">だ。ここでは、上に書いた「文字コード」というものを設定している。無くても表示はされるのだが、文字化けの原因になるので、しっかり書いておこう。なお、このタグには終了がないので、</meta>は不要だ。
二つ目は、5行目の<title>Hello World!!!</title>だ。これはこのHTML自体のタイトルを決定するもので、ページを表示するときにタイトルバーに表示させる内容を記載する。実際のWebページで、検索エンジンで表示されるタイトルもこれだ。SEOをやりたいという方は、ここが非常に重要なので覚えておこう。
三つ目は、8行目の<h1>Hello World!!!</h1>だ。これは見出しを表すタグで、数字の部分は1から6まである。数字が大きくなると、その分細かい見出しになっていく。
四つ目は、9行目、10行目にある<p>文字列</p>だ。これは、囲まれた部分が一つの段落であることを表す。段落が終わると、勝手に改行も挟んでくれる。
最後、五つ目は、10行目の真ん中にある<br>だ。これは、改行を表す。4行目のmetaタグと同じように、終了タグがない。なんでこんなタグがあるかだが…実は、HTMLファイル内で普通に改行しても、表示するときは改行されない。また、一つの段落などの要素の中で改行させたい場合に使うものだ。
いったん、このくらいだろうか。基本的な事項だけでもこんなにある。でも、ここら辺は書いていれば勝手に覚えてしまうので、最初のうちはどんどん書いていこう。今回のサンプルも、タイトル、見出し、段落の中身をいろいろ変えて、表示がどうなるか確認してみて欲しい。
詳しい解説
さて、ここからはある程度分かっている人向けの追加内容だ。とはいえ、先頭から2行分だけだが。
一行目、<!DOCTYPE html>の部分。これは、「文章型宣言」といって、このHTMLが「HTML5」というバージョンで書かれていることを表している。これがないと以前のバージョンとの互換モードってやつで表示される。そうすうと、見た目が狙った通りにならないなど、不具合の元となるのだ。常に同じ環境にするため、特別な事情が無い限りは書いておこう。
次に二行目、<html lang="ja">の部分。後ろになんかくっついている。これは「言語オプション」といって、この文章が何語で書かれているかを表している。jaは日本語を表している。他に使うものがあるとしたら、英語のenくらいだろうか。他の言語は喋れないので知らない。
覚えておくと便利なもの
ここからは、覚えておくと非常に便利なものを2つ紹介する。「開発者ツール」と、「コメント」だ。
開発者ツール
私はGoogleChromeを使用しているため、その場合で説明していく。他のブラウザを使用している方は、それぞれ調べて欲しい。
ページを表示している状態で、「F12」キーを押して欲しい。画面になんか出てくる。それが、「開発者ツール」というやつだ。これは、表示されているページのHTMLソース、見た目の設定などを確認できる。それだけでなく、上手く表示されていない場合にエラーがここに表示されるのだ。
今回の内容ではそんなに使うこともないかもしれないが、例えば外部ファイルを読み込む場合に読み込めないときなどにConsoleタブにエラーとして表示される。また、HTMLがおかしそうであれば、開発者ツール左上の□にカーソルが重なっているようなボタンを押し、画面の見たい部分をクリックすれば、そこのソースが表示される。これを使いこなせれば、エラー対処がスピーディになるだろう。
コメント
まだ今回のように総量が短ければいい。だが、だんだん数百行とか、長いソースコードが出てくるだろう。そんなとき、そこの部分が何を表しているか書いておきたくなる。
そこで役立つのが、この「コメント」だ。コメントは、実際に表示されるときは無視されるので、ソースコード内に直接メモを残すことができる。
書き方は、<!--と-->で囲むだけ。その中には閉じる-->以外なら基本的に何を書いても無視される。使った例を下に挙げてみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- ここはタイトルを書くよ -->
<title>Hello World!!!</title>
</head>
<body>
<!-- ここは見出しを書くよ -->
<h1>Hello World!!!</h1>
<!-- ここからは段落だよ -->
<p>これは、初めてのHTMLです。</p>
<p>これから、<br>色々勉強していきましょう！！！</p>
</body>
</html>三行ほどコメントを追加したが、表示は一切変わらない。
また、このコメントを使うと、便利なことができる。いったん消したいけど、あとでまた追加するかもしれない…という場合だ。そこをそのまま消すのではなく、いったんコメントにしてしまうことで、見た目上は消すことができる。このコメントにしていったんそこの部分を無効化することを「コメントアウト」と言ったりする。
おわりに
いかがだっただろうか。かなり大量に解説してしまったが、ついてこれただろうか。
ここまでで、とりあえずページにタイトルをつけて、見出しを入れて、段落を書いていくことができるようになった。だが、まだよく見るWebページのようにはならないだろう。
次回は、個人的によく使うと思うHTMLタグをいくつか紹介する。最初のうちは、とにかく書いて、表示して、楽しもう。
更新情報はTwitterでも呟いているので、よかったら本ページ最下部のTwitterアイコンから覗いていってほしい。
それでは。
コメント
[…] 前回は、HTMLの基本的な書き方を解説した。また、開発者ツール、コメントといった、知っておくと便利なものも紹介した。このあたりは是非使いこなせるようにしておきたい。 […]
[…] にしてしまい、HTMLで読み込んでしまおうというものだ。この、別にしたものは拡張子を「.css」にしてあげる。拡張子って何？という方は以前解説しているのでこちらを参照してほしい。 […]