第17回：HTML&CSS講座本編1「HTMLを書いてみよう」
どうも、シノです。
今日、美容院に行ってきました。そこで、美容師さんの勧めで初めて前髪を上げる髪型にしてみました。雰囲気が普段と変わって、これはこれでアリだななんて思ってたりします。たまにはこういうちょっとした変化を取り入れてみるのもいかがでしょうか。
とはいえ、ブログは平常運転です。
今回は、早速HTMLを書いてみましょう！
今回から、とりあえず書いてみたい方向けと、しっかり理解したい方向け両方の解説を取り入れてみます。流れとしては、とりあえず形を書いて、そのあとにそれがどういった意味を持つのか補足する、という感じです。まず体験したい方は、どんなものかだけでも試してみるといいかなと。あと、こういったコーディングを初めてやる方も、まずはとりあえずの部分だけ読んでください。いきなり詳細まで読むとかなり大変です。
ただ、慣れてからでいいので、最終的にはしっかりと理解することをオススメします。こういう知識って、根底から理解した方が応用も効きますからね。
では、今回の目次です。
本編に入る前に、今回の目標は
- サンプルプログラムを正しく表示すること
- なんとなく理解すること
です。なんとなくってどのくらい？ってのはお任せします。自分のスタイルで進めてみてください。いったん先に進んで、わからなかったら戻るでももちろんOKです。
0.前回の復習
前回は、そもそもHTMLとかCSSって何？というところを解説しました。HTMLについては、太字にしてみようというのもやりました。前回の記事はこちらからどうぞ。
ここでのまとめは以下の通りです。
- HTMLは、主にウェブページを構成している、コンテンツに意味を付加するための記述方式、あるいはその記述方式で記載された文章
- CSSは、HTMLのスタイルの法則をまとめた記述、あるいはその記述が保存されたファイル
今回からが本番なので、前回はふーんくらいで大丈夫です。
1.HTMLを書く準備をしよう
では、早速準備をしましょう。。まず、内容を保存するファイルを用意して開きます。このとき、前回太字にしたファイルを使ってもいいですし、新しいファイルを用意しても大丈夫です。ただ、拡張子を「html」にすることだけ忘れないでください。
ちょっと補足を挟みます。拡張子知ってるしもう書ける準備OKだよって方は、「2.HTMLを実際に書いてみよう」まで飛ばしてください。
補足：拡張子とは？拡張子の変更方法は？
すみません、前回解説が漏れていたのですが、拡張子とは「ファイルの種類をコンピュータが識別するためのもの」で、ファイル名の後ろについてるドット以降の文字列です。テキストなら「.txt」、画像なら「.jpg」や「.png」など。で、HTMLが「.html」になります。
普段表示していない方は、このタイミングで表示するようにしてしまいましょう。おそらく、この設定をしたことがない人は表示されていないと思います。Windows10の場合の設定方法は以下の通りです。
- 「設定」を開く。
- 上部「設定の検索」に、『拡張子』と入力し、出てきた「ファイル拡張子を表示する」をクリック。
→「開発者向け」というメニューが出てきます。 - 出てきたメニューの中から、「エクスプローラー」の項目を探す。
- チェック項目の中、「ファイル拡張子を表示するように設定を変更します」にチェックが入っているか確認する。
→チェックが入っていたら、すでに表示されています。チェックが入っていなかったら、5以降を実施してください。 - チェックが入れれるのであれば、チェックを入れ、「適用」をクリック。
→ファイルを見て、ファイル名の最後に「.○○」という表示が増えていればOKです。チェックができなかったら、6以降を実施してください。 - 右の「設定の表示」をクリック。
→新しいウィンドウで、「エクスプローラーのオプション」が出てきます。 - 「詳細設定」の中から、「登録されている拡張子は表示しない」という項目を探し、チェックを外す。
※ここ注意です。チェックが入っていたら、拡張子は表示されません。表示がややこしい… - 「OK」、もしくは「適用」をクリック。
→ファイルを見て、「.○○」という表示が増えていればOKです。
どうでしょう、表示できましたか？この表示があると色々と便利なので、是非表示させておいてください。
補足：新しいHTMLファイルを作成する
一緒に、新しいHTMLファイルを作る方法も書いておきます。
- ファイルをつくりたい場所で右クリック。
- メニューの中から、「新規作成」→「テキスト ドキュメント」をクリック。
- ファイル名を入力し、末尾の「.txt」を「.html」に変えてEnterを押す。
※間違えてドットを消さないよう注意してください。 - 「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」というメッセージが出てくるので、「はい」をクリック。
- 入力した名前になったことと、末尾が「.html」になったことを確認する。
これで、中身の無いHTMLファイルができました。このファイルに、これから色々書いていきます。
右クリックして、メニューの中から「プログラムから開く」の中のテキストエディタをクリックしてください。テキストエディタって何？って人は、メモ帳で大丈夫です。私はサクラエディタというものを使っています。
クリックしたら、選択したものが立ち上がってきます。これで、やっと書く準備が整いました。
2.HTMLを実際に書いてみよう
では、まずは以下のサンプルコードをそのまま書いてください。コピペでもいいですが、見て自分で入力することをオススメします。実際に手を動かした方が、理解が深まります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World!!!</title>
</head>
<body>
<h1>Hello World!!!</h1>
<p>コンテンツ1</p>
<p>コンテンツ2<br>コンテンツ2続き</p>
</body>
</html>
入力できたら、ブラウザで開いてみましょう。以下のような画面が出てきて、ブラウザのタイトルも「Hello World!!!」になっていれば成功です。
メモ帳で入力した方はそのままうまく表示されていると思いますが、それ以外を使っている方で、もしかしたら文字化けしてしまった方がいるかもしれません。
そんな方は、ファイルの文字コードが「Shift-JIS」等になっていると思うので、それを「UTF-8」に変更してください。おそらく、メモ帳以外を使っている方はこの意味は分かるかと思います。わからなかったら、「文字コード (使っているテキストエディタ) 変更」とかで調べてみてください。ここも解説するととんでもない長さになってしまうので、また別の機会に…と思ったら文字コードについてはすぐに解説する必要が出たので、下の方で解説しています。
3.とりあえずの方向けの解説
では、まずはとりあえずの方向け解説をします。今から説明する部分以外はとりあえず書くものだ、くらいの認識でいいです。
- 5行目：<title>と</title>の中に、ブラウザタイトルを入れる。
- 7行目と11行目：<body>と</body>の中に、実際のページ内容を書いていく。
- 8行目：<h1>と</h1>の中に、見出しを書く。数字は1が一番大きい見出しで、6が一番小さい見出し。
- 9行目、10行目：<p>と</p>の中に、1段落を書く。
- 10行目：<br />と書くと、そこで改行される。
いったんこのくらいで。これがあれば、とりあえず見出しと内容がある、タイトルのついたページが書けます。もちろん、これだけだと寂しいですが…
また、再三の注意ですが、タグは他のタグの中に完全に入るよう書いてください。<body><p>本文</body></p>とかダメですからね。
4.しっかり理解したい方向けの解説
お待たせしました、詳細を見ていきます。1行ずつ見ていきましょう。
1行目：<!DOCTYPE html>
これは、このHTMLがHTML5というバージョンで書かれたということを明示的に示すためのタグです。このバージョンが違うと、思った表示にならない場合があります。どうしても書きたくない場合を除いて、書くようにしましょう。
また、このタグには、終わりがありません。よく見ると、</!DOCTYPE>がないですね。
2行目・12行目：<html lang="ja">と</html>
これは、この中に書かれたものがHTMLであることを示すためのタグです。この中に、この文章の情報や本文を書いていきます。一つ注意ですが、この中に直接含むことができるのは、主に後述する<head>～</head>と<body>～</body>のみです。上のサンプルコードも、よく見ると直接含んでいるのはこの2つだけですよね。厳密にはもう1種類あるのですが、それはまた別の機会…
また、「lang="ja"」というオプションは、このコンテンツには日本語(ja)を書きますよというのを明示的に示しています。他の言語もありますが、恐らく皆さん日本語の文章を書くと思うのでいったん日本語だけで。
3行目・6行目：<head>と</head>
これは、この中に書かれたものがこの文章自体の情報だということを示すためのタグです。後述する文字コードや、文章のタイトルなんかがそうですね。
4行目：<meta charset="UTF-8">
これは、上でも少し名前を出した文字コードというものが、この文章は「UTF-8」で書かれていますよと明示的に示すタグです。これも1行目と同じく、終了のタグがないです。
文字コードについて、上では解説しなかったのですが、今度は解説する必要がありますね。まさかまたの機会がこんなすぐに来るとは…(´・ω・｀)
そもそも、コンピュータは文字を扱うときに、数字に直しています。それが、実際に何の文字を表すか、という決まりが文字コードです。この文字コードは、種類によって数字と実際に表す文字の対応が違います。だから、文字コードが違うと文字化けを起こしてしまうんですね。その文字化けを防止するために、しっかり「UTF-8」という文字コードを使って書いて、ブラウザにも「UTF-8」として表示してねと教えてあげる必要があります。
5行目：<title>と</title>
上にも書いた通り、ブラウザタイトルを決めるためのタグです。Google等の検索時に表示されるページ名もこれになります。
7行目・11行目：<body>と</body>
ページの本文を書いていくタグです。基本的に目に見えるコンテンツの内容を書いていくのはここの中だと思ってください。あ、見た目のレイアウトは別です。この中でも、上で紹介した<head>タグ内にも書けます。
ちなみに、はてなブログのHTML編集ではここの一部を直接編集するイメージになります。
8行目：<h1>と</h1>
見出しを書くタグです。上にも書いたのですが、数字が1から6まであります。<h1>が一番大きい見出しで、<h6>が一番小さいです。数字が大きくなるとだんだん見出しも小さくなっていきます。
はてなブログの見たまま編集では、大見出しが<h3>、中見出しが<h4>、小見出しが<h5>に対応しています。また、<h3>から<h5>に限らず、このタグがついたものが[:contents]の部分に目次として表示されます。このせいで[:contents]を使うと、サンプルの結果が目次に入ってしまったので今回手動で目次を設定しました…あとで修正するときに大変そう(´・ω・｀)
9行目・10行目：<p>と</p>
この中に書かれたものが1段落であることを示すタグです。pはパラグラフの頭文字です。なくてもいいのですが、入れた方が編集するときも何かと便利なので、入れるようにしましょう。
10行目：<br />
これは改行を表すタグです。1行目に解説したDOCTYPEと同じく、終了がないタグになります。このタグは、<br>とも書くことができますが、今回ははてなブログのHTML編集での記載に合わせて<br />と書きました。
と、さらっと解説しましたが、HTMLではこのbrタグで明示的に改行を示してあげる必要があります。HTMLファイル中で改行しても反映されないんですね。上のサンプルコードで、文字の途中で改行して保存し、もう一度ブラウザで開いてみてください。改行されず、ほんのちょっとスペースがあるだけだと思います。
かなり長くなりましたが、今回の解説は以上になります。気になった方は、サンプルコードをいろいろ変えて、どんな表示になるか試してみてください。
まとめ
いかがだったでしょうか。今回は、HTMLファイルを作成する方法を紹介し、実際にHTMLを書いてみました。上手く表示できましたでしょうか。
ちょっと本文が細かい解説ばかりでしたが、一応目標は正しく表示されることと、なんとなく理解することなので、そこまで到達してもらえれば何よりです。
まとめとして、とりあえずの人向けの内容を貼っておきます。が、慣れてきたら是非詳細を理解したい人向けの部分も読んでみてください。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World!!!</title>
</head>
<body>
<h1>Hello World!!!</h1>
<p>コンテンツ1</p>
<p>コンテンツ2<br>コンテンツ2続き</p>
</body>
</html>
まとめ
- 5行目：<title>と</title>の中に、ブラウザタイトルを入れる。
- 7行目と11行目：<body>と</body>の中に、実際のページ内容を書いていく。
- 8行目：<h1>と</h1>の中に、見出しを書く。数字は1が一番大きい見出しで、6が一番小さい見出し。
- 9行目、10行目：<p>と</p>の中に、1段落を書く。
- 10行目：<br />と書くと、そこで改行される。
ここまでで基本的なHTMLの書き方がなんとなーくわかったのではないでしょうか。
さて、次回ははてなブログの見たまま編集で実際に入力されているタグを紹介していこうと思います。
これが分かれば、意図しない表示になったときの修正が楽になるのではないでしょうか。また、自分で調べて詳細なカスタマイズもだんだんとできるようになってくると思います。
ちょっと数が多そうで今からどんだけ長くなるかビビってますが、頑張って書きあげたいと思います。
Twitterでも更新情報を呟くので、よかったらフォローをお願いします！！！
次回：見たまま編集の内容を、HTMLで書いてみよう(2019/1/10投稿しました！！！)
それでは。
