【HTML&CSS講座 #2】" width="640" height="395" >
このシリーズの記事では、『Webページの制作ができるようになる』というのを目標にHTMLやCSSを学んでいく記事になります。今回の記事ではHTMLの文法を見ていきながら、コードを書いて試してちゃんと表示されるかを確認していきます。
今回はHTMLの基本の前半ということで、わかりやすいものから順に勉強してもらいます。一つ一つは簡単ですが覚えることが多いので何度も復習しつつ使って覚えていきましょう。
HTMLの文法について
HTMLを使ってwebページを作る際には当然ながらルールが存在します。これからそのルールについて学んでいくわけですが、ルールを勉強するにあたりいくつかの用語を押さえておかないと頭の上にクエスチョンマーク(?)が渋滞しちゃうので、サクッと用語の説明をしておきます。
HTMLを使ってwebページを作る場合、文章の中に『タグ』と呼ばれるものを埋め込んで作成することになります。この『タグ』というのは、『<title> ~ </title>』とか、『<img>』とか『<body> ~ </body>』のような、”<“と”>”で囲まれたもののことを指します。このタグには何十種類と用意されていて、それぞれ適切なタグを使うことでwebページを作ることができます。ちなみにほとんどのタグには開始タグと終了タグで文章を挟んで使います(中には終了タグを書かずに開始タグのみで用いるものもあります)。
HTMLを学ぶということはタグの使い方を学ぶというのと同義だと言っても過言ではありません。タグの正しい使い方を覚えてHTMLをマスターしましょう。
タグにはしばしば属性と呼ばれるものを伴います。この属性というのは、タグ毎に決められていて、タグに追加の情報を与えることができるものです。例えば、『<input>』というタグには『type』という属性があり、これを指定することで、テキストボックスになったりボタンを作ったりとタグの振る舞いを変化させます。こちらもタグと並んで非常に重要な要素なので、たくさん書いてたくさん練習して少しづつ習得していきましょう。
タグ一覧
この講座で説明する全てのタグを一覧にしておきます。これらのタグを使いこなせるようになればHTMLに関しては中級者以上でしょう。
| 分類 | タグ |
|---|---|
| 基本構造 | <html>, <head>, <body> |
| ヘッダーで使うタグ | <meta>, <title>, <link>, <style> |
| ボディで使うタグ | <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <br>, <hr>, <div>, <span>, <pre>, <blockquote>, <a>, <img>, <table>, <tr>, <td>, <th>, <caption>, <ul>, <ol>, <li>, <strong>, <b>, <em>, <i>, <del>, <form>, <input>, <button>, <label>, <select>, <option>, <textarea>, <script> |
| その他のタグ | <!DOCTYPE> |
以下ではこれらのタグについてどういう役割があるのかを説明していきます。
コメント
コメントは画面に出力されないメモのことを指します。HTML文書の中にコメントを書くためには”<!-–“と”-–>”で囲ってあげる必要があります。
<!--ここにコメントを書くことができます-->HTMLファイルはすぐに行数が多くなりわかりづらくなりやすいので、適宜コメントでどういうコードなのかを書いておくと後で修正する時に便利です。
基本構造に関係するタグ
htmlタグ
この文書がHTMLで書かれていることを明示するタグです。以下のように開始タグと終了タグに挟まれた部分がHTML文書とみなされます。
<html>
タグに挟まれた領域がHTML文書として認識されます。
</html>htmlタグの属性には、『lang』があります。
| 属性 | 意味 |
|---|---|
| lang | 文書がどの言語で書かれているのかを表記できます |
<html lang="ja">
タグに挟まれた領域がHTML文書として認識されます。
</html>headタグ
webページ内に直接表示されないwebページの情報やらCSSファイルとのリンクを書く部分を表したタグです。
<head>
headタグに挟まれた領域にwebページの色々な情報を書くことになります。
</head>bodyタグ
実際に表示されるコンテンツを書く部分を表したタグになります。
<body>
bodyタグに挟まれた領域には実際にwebページに表示されるものを書くことになります。
</body><!DOCTYPE html>
<html>
<head>
<!--ここのheadタグの中にはwebページに表示されるものは書きません-->
</head>
<body>
ここのbodyタグの中に書いたものは表示されます
</body>
</html>1行目の『<!DOCTYPE html>』は文書がhtmlで書かれていることを表している物なので毎回書いておきましょう。
確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
出力結果を見ていただいた方は文字化けしている人がほとんどだと思います。これはheadタグ内で文字コードを設定していないために発生しています。次の項目ではhead内で用いられるタグを学んでこの文字化け問題を無くしていきましょう。
ヘッダーで使うタグ
headタグの領域に書くものは直接表示されないので意味を知ってもらうのがメインになります。ただしこのヘッダー部分を疎かにすると文字化けしたり、CSSで書いたデザインが適応されなかったりと様々なトラブルを引き起こす原因になりかねないので理解はしておきましょう。
metaタグ
これはブラウザなんかにwebページの情報を伝えるためのタグで様々なめちゃくちゃ大事です。開始タグのみで終了タグはありません。そのため属性を伴って使うことになります。
属性に関しては非常に多いので、ここでは重要なものについてのみを扱います。
| 属性 | 意味 |
|---|---|
| charset | 文字コードを設定できます。これを指定しておかないと文字化けがおきます |
| name | プロパティの名前を指定します。基本的にはcontent属性とセットで用います |
| content | プロパティの値を指定します |
charset属性を用いることで文字コードを指定できます。ほとんどの場合は以下のように書いて文字コードUTF-8を使用しています。
<meta charset="utf-8">name属性とcontent属性については色々あるので詳しくは調べてもらうことにして、ここではわかりやすいものを扱ってこの2つの属性を見ていきます。
<meta name="description" content="ここにはこのwebページがどんなページなのかを書きます。ブラウザで検索した時にwebページのタイトルの下にそのページの説明が出ると思いますがあの文書をここで指定できるというわけです。">titleタグ
このタグは非常に単純明快ですね。webページのタグに表示されるwebページの名前を変えられます。書き方は以下のようになります。
<title>ここにwebページのタイトル名を書きます</title>ここで指定したものがページタブに表示されます。
linkタグ
これはブラウザにwebページの繋がりを伝えるために用いるタグになります。このタグについては第4回のCSSを勉強する時に詳しく扱います。よく用いられる属性は表の3つです。
| 属性 | 意味 |
|---|---|
| rel | 参照するファイルとの関係を表します |
| href | 参照するファイルの場所を示します |
| type | ファイルのタイプを指定します |
例えば以下のように書くとmainpage.cssというファイルが関連づけされ、CSSファイルの中身が適用されるようになります。
<link href="mainpage.css" rel="stylesheet">styleタグ
このタグを用いるとCSSのファイルを別に分けることなくhtmlファイル中にCSSが書き込めます。
<style>
body {
color: #888;
}
</style><!DOCTYPE html>
<html>
<head>
<!--ここのheadタグの中にはwebページに表示されるものは書きません-->
<meta http-equiv="content-type" charset="utf-8">
<title>HTML講座</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
ここのbodyタグの中に書いたものは表示されます
</body>
</html>確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
無事に文字化け問題が解消されましたね！
まとめ
次回はbodyタグの中身をまとめた記事を書きます。headタグの中については知識をつけてもらうのがメインだったのであまりwebページを作っている感じが得られなかったと思いますが、次回は見出しを作ったりリンクを入れたり、表や画像を挿入したりと目で見える部分を作ることになります！その前に今回の内容を簡単に復習しておきましょう。
- htmlはタグを用いて文書を制御してwebページを作る言語である。タグの中には開始タグしか持たないものもあるが基本的には開始タグと終了タグで挟んだ部分にタグの効果が適用される。
- 1行目には<!DOCTYPE html>を書き、その下にhtmlタグやheadタグbodyタグなどで構造を作る。
- headタグの中はwebページの情報を書く部分で、webページのコンテンツは書かない。
- headタグの中にはmetaタグでcharset=”utf-8″をしておかないと文字化けが発生する可能性がある。
次回はbodyタグの中に書くコンテンツ制作に関わってくるタグについて学びます。お楽しみに！！
最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。
