「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）
そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、今回の記事は、
以下、別記事でご紹介した知識前提で書いています。
-
-
【基礎から学ぼう！】『HTML（エイチティーエムエル）』学習、超基本のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
『テキストエディタ』・『タグ』。
これらの単語を聞いてピンと来ない方は、
ぜひ上記の記事を先にご参考下さい。
[toc]
<head（ヘッド）>タグ内に書くこと
<head>タグ内には、
HTMLそのものの情報を書きます。
例えば、タイトルや文字コード、
ページ内容を説明するテキスト、
CSS（※）ファイルへのリンク指定等です。
※『CSS（シーエスエス）』とは、『HTML』を装飾する言語のことです。
『HTML』と『CSS』を組み合わせることで、
いつも皆さんが見ているWebサイトのような表示が出来ます。
CSSについてもっと知りたい！という方は、
以下、別記事をご参照下さい。
-
-
【プログラミング初心者必見！】『CSS（シーエスエス）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
<head>タグ内に必ず書くのは、
以下3点です。
- 文字コードの指定（文字化けを防ぐ）
- ページのタイトル
- CSSの読み込み
他にも書くことは出てきますが、
まずはこの3点をおさえましょう。
それでは、
具体的に見ていきましょう！
<meta（メタ）>タグで文字コードを指定しよう
まずは以下をご覧下さい。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
</body>
</html>
4行目で記述しているのが、
<meta>タグでの文字コード指定です。
<meta>タグとは、
Webサイトの情報をブラウザに伝える為のもの。
ここで文字コードを指定します。
文字コードとは、
コンピュータで処理しやすいように、
文字の種類に番号を割り振ったものです。
たまにWebサイトを開いたら、
「縺ゅ＞縺?∴縺翫°縺阪￥縺代％縺輔＠縺吶○縺」
みたいな表示になっていることはありませんか？
文字コードを指定することで、
こういった文字化けを防ぐことが出来ます。
「charset（キャラセット、もしくはチャーセット）」
と書いていますが、
これを「属性」と言います。
「属性」とは、
タグに情報を付け加えるもので、
タグによって使える「属性」が決まっています。
また、「"utf-8"（ユーティーエフエイト）」部分は、
「属性値」と言います。
名前の通り、「属性」に設定する値です。
「属性」に続けて「＝（イコール）」を書き、
「"（ダブルクオート）」で囲む形で書きます。
今回でいうと、文字コードが何なのかを表しています。
「utf-8」はHTMLで推奨されている文字コードの種類です。
全体感を整理してまとめると、
HTMLの情報を書き込む「<meta>タグ」に、
「charset」で文字コードを指定しますよ〜と情報を付け加え、
「= "utf-8"」で文字コードはutf-8ですよと値を設定している感じですね。
なお、<meta>タグには終了タグが要らない点も
おさえておきましょう。
<title（タイトル）>タグで、ページのタイトルをつけよう
<title>タグで、
ページのタイトルを指定します。
実際に見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
</head>
<body>
</body>
</html>5行目が<title>タグの書き方です。
<title>タグで挟まれた、
「プログラミング学習のツボ」が、
Webページのタイトルとなります。
また、このタイトルは、
Google等で検索した際のタブに表示されます。
Webページに書いてある内容が、
良く分かるタイトルを表示させたいですね。
こんな感じ↓
<link>タグで、『CSS』の読み込みを設定しよう
『HTML』を装飾する『CSS』も、
ここで読み込みを設定します。
『CSS』の詳細については今回は触れませんので、
『HTML』から『CSS』を読み込むのはこうするんだな、
ということだけおさえておきましょう。
書き方を早速見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
</body>
</html>
6行目が『CSS』の読み込みに関する記述です。
「href」の前には半角スペースをいれましょう。
「rel = "stylesheet"」という部分で、
これから読み込むファイルはstylesheetですよ〜とブラウザに伝え、
「href = "読み込みたいCSSのファイル名"」という部分で、
これが読み込みたいファイルですよ〜とブラウザに伝えています。
（「=" "」には、読み込みたいURLを入れることもあります。）
<meta>タグと同様、
<link>タグも終了タグが無い点もおさえておきましょう。
ちなみに、
「rel（レル）」は「relation」の略で、
「関係」を意味し、
「href（エイチレフ）」は「hypertext reference」の略で、
「ハイパーテキストの参照」を意味しています。
前述の<meta>タグ部分でも解説しましたが、
「rel」・「href」が属性、
「"stylesheet"」・「"読み込みたいCSSのファイル名"」が属性値です。
『CSS』の読み込み以外にも、
<link>タグで出来ることはありますが、
そちらの解説はまたの機会に。
難しいことはさらっと流して構いません。
大事なのは、
<head>タグ内、
<link>タグで『CSS』を読み込むということです。
まとめ
・<head>タグ内で書く基本は3つ。
①文字コードの指定（文字化けを防ぐ）
②ページのタイトル
③CSSの読み込み
・<meta>タグで文字化けを防ぐ
・<title>タグでページのタイトルを表示する
・<link>タグで『CSS』を読み込もう
いかがでしたでしょうか？
少しずつ『HTML』の世界が広がってきましたでしょうか？
覚えることも多いですが、
何度も振り返りながら、
ゆっくり学習していきましょう！