これからhtmlを学ぶ初心者入門者のあなたのために「最初に読むならコレ！」というhtml入門記事を作りました。
htmlとはなにか？という基本と使い方を丁寧に解説。
さらに画面上で実際にコードを書いて練習ができるので、htmlの初歩を簡単にマスターできます！
初心者の方でもつまずかないようイラストを使ってわかりやす〜く丁寧に解説していくので安心して読み進めてください。
htmlとは？
htmlとはwebサイトを作成する時に必ず書く必要があるコンピューター言語です。
| 読み方 | html（エイチティーエムエル） |
|---|---|
| 正式名称 | HyperText Markup Language（ハイパーテキストマークアップランゲージ） |
webサイトを作るときwebブラウザ対して「ここは見出しを表示したい」「ここは画像を表示したい」と直接指示をすることはできません。
そのためhtmlというルールに基づいた言語を使用し、ブラウザに対して指示をだす必要があります。htmlとは、いわばコンピューターと私たちを繋ぐ共通言語のようなものです。
それではhtmlがどういったはたらきをしているのか見てみましょう。
htmlのはたらき
この画像をみるとわかるように
- h2と書けば見出し
- imgと書けば画像
- p書けば段落（文章）
とブラウザ側で表示されています。このように「どのタグを使えばどのように表示される」とあらかじめルールが決まっており、それを適切に伝えることでwebブラウザがコードを変換して表示してくれるという仕組みになっています。
このhtmlを何行も書いていくことによってwebサイトは成り立っており、htmlを何行も書いてwebサイトの骨組みをつくっていくことを「文書構造を定義する」なんていったりします。
htmlはプログラミング言語ではない
htmlはプログラミング言語ではなくマークアップ言語に分類されるよ。
- プログラミング言語：コンピューターに計算などの処理を命令する言語
- マークアップ言語：webサイトを作る時に文書構造を定義する言語
難易度的には プログラミング言語 > マークアップ言語で、htmlのほうがカンタンに覚えることができるんだ！
htmlだけ覚えればwebサイトをつくれる？
残念ながらhtmlを覚えただけではwebサイトをつくることができません。なぜならhtmlでは見た目を変更する指示を出すことができないからです。
webサイトの見た目を変更するにはcssという言語を使用する必要があるので、cssを使わない場合とcssを利用した場合を比較してそれぞれの役割の違いを確認しましょう。
htmlだけだと各要素はデフォルトで左寄せとなり、フォントの大きさや色なども指定できません。しかし、cssを使用することで
- テキストの配置位置（左寄せ・中央寄せ・右寄せ）
- フォントの大きさや色
- 丸いボタンの色
- 背景の色
など見た目に関する様々な処理を命令することができます。
htmlとcssの違い
- html：その部分をどのように表示するか定義（文書構造の作成）するための言語
- css：レイアウト、大きさ、色など見た目を整えるための言語
学習する順番はhtml→cssです。htmlもcssも難しいものではないので、ルールさえ覚えてしまえば簡単にマスターすることができます。焦らずまずはhtmlから覚えていきましょう。
続いてhtmlを練習するために必要なものを紹介します。
htmlを記述するために必要なもの
本来htmlでwebサイトを作成する時には
- テキストエディタ – htmlを書くところ
- webブラウザ – 書いたhtmlを表示するもの
この２つが必要となります。
それぞれの役割と機能を解説するので、このステップで両方用意しましょう。
テキストエディタとは
テキストエディタとはhtmlやcss、プログラミング言語を記述する際に利用する専門のノートのようなものです。
テキストエディタのいいところ
- よく使うタグを自動補完
- コードを見やすいように色分け
など、テキストエディタにはhtmlやcssを書いていく上で便利な機能がたくさんあります。
世の中には何種類ものテキストエディタがあり、それぞれ対応OS（windows/mac os/linux）やデザインや機能が異なります。
最初は人気のテキストエディタである「Sublime Text」か「Atom」のどちらかの使っておけば間違い無いでしょう。
この２つはオープンソース（無料のソフト）とは思えないほどデザインや機能面で優れており、利用者が多いため導入や使い方でつまずくことがありません。
これらのテキストエディタを使ってみて慣れてきたら自分好みのテキストエディタを探してみるとよいでしょう。
今回は下の記事をみながらsublime textをダウンロードしてみましょう。
webブラウザとは
webブラウザとは普段みなさんがwebサイトを見る時に利用しているものです。
- Google chrome（グーグルクローム）
- Internet Explorer（インターネットエクスプローラー）
- Fire Fox（ファイヤーフォックス）
- Safari（サファリ）
- Opera（オペラ）
などが有名ですね。webブラウザにはwebサイトを検索するという機能だけでなく、htmlなどのソースを読み取って表示するという機能があります。
プロのwebサイト制作現場では、こうしたwebブラウザでhtmlの記述が実際にどう反映されるかをチェックしながら作業を進めていくというのが基本となります。
今回は下の記事をみながらGoogle Chromeをダウンロードしてみましょう。
htmlをwebブラウザで表示する流れ
htmlを表示するために必要なものが用意できたら、実際にテキストエディタで書いたhtmlをwebブラウザ表示する方法を見ていきましょう。
まずはダウンロードした「sublime text」を開きましょう。
インストールした場所がわからない
- windows：「設定」→「検索窓にsublime textと入力」
- Mac：「アプリケーションフォルダ」→「sublime text.app」
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
<meta name="description" content="サイトの説明文">
</head>
<body>
<h1>大見出し１</h1>
<p>文章文章文章文章</p>
</body>
</html>次に、開いたテキストエディタに以下の定型文をコピーして貼り付けましょう。
コピペのショートカット
コピー
Ctrl + C / Command + C
貼り付け
Ctrl + V / Command + V
この定型文はhtmlを書くときに必ず書く必要のある呪文のようなものです。
この文章の一つ一つがどういった意味を持つのかは後ほど解説します。
htmlの定型文を貼り付けたらファイルを保存します。
この時「ファイル名.html」と拡張子（.jpgとか.mp3とかのこと）が「html」になっているか確認しましょう。
拡張子がhtmlとなっていることでwebページとしてブラウザで表示することができます。
保存先は覚えやすいように「デスクトップ」を選んでおくといいでしょう。
保存ができたら、webブラウザを立ち上げましょう。
今回は「Google chrome」を使用していきます。
立ち上げたchromeに先ほど保存したhtmlファイルをドラッグ&ドロップでwebブラウザの上に落とします。
ファイルを右クリック→「開く」を選択でもOK
すると起動画面から表示がかわりhtmlファイルの内容がブウラザに表示されましたね。
htmlの定型文の解説
それでは先ほど貼り付けた定型文について詳しく解説していきます。
まずは定型文に書かれていたそれぞれのコードについてざっくりとまとめたイラストを見て見ましょう。
全体像を確認したところで、それぞれコードの意味について解説していきます。
!DOCTYPE html
<!DOCTYPE html>（読み：ドックタイプ エイチティーエムエル）
テキストエディタの最初の行に必ず書く一文です。これを書くことによって「今からhtmlを書いていくよ」という宣言をする必要があります。
htmlタグ
<!DOCTYPE html>の下に書きます。この<html>〜〜</html>でコード全体がhtmlで書かれているという意味になります。ドックタイプでもhtmlであることを宣言していますがこちらも必ず書きます。
headタグ
<head>〜〜</head>（読み：ヘッド）
イラストの「ブラウザに表示されない領域」の部分です。このタグの中に書いたものはwebブラウザには表示されません。ここにはGoogleやYahooといった検索エンジンに対して伝えたいサイトの様々な情報を記述します。
たとえばheadの中身には
- サイトのタイトル
- 説明文
- サイトオーナーの名前
- そのページで読み込んでいるファイルパス
などページの様々な情報を書きます。
head内に書いたコードはwebブラウザには表示されませんが、Googleなどの検索結果の「タイトル」「説明文」に使用されたり、ページのタブの名前に使用されたりします。
head内のその他のコード解説
- <meta charset=”utf-8″>：そのサイトの文字コード（深く考えずコピペでOK）
- <title>〜〜</title>：そのwebサイトのタイトル
- <meta name=”description” content=”サイトの説明文”>：そのwebサイトの説明文
head内に書くコードについては以下の記事で詳しく説明しています。
bodyタグ
<body>〜〜<body>（読み：ボディ）
イラストの「ブウラザに表示される領域」の部分です。bodyの中に書いたものがブラウザに表示されます。
サイト制作をする時は基本的にこの<body>〜〜</body>の中にhtmlをどんどん書いていくことになります。
例えば以下の画像ではbodyの中に書かれたh1とpが表示されていますよね。
一度htmlの基礎をおさらい
htmlについての堅苦しい説明はここまで。次は書き方とhtmlの基本的なタグを書いていきます。
というわけでボリュームのあった説明の要点をおさらいして頭を整理しておきましょう。
htmlとは？ / cssとの違い
- htmlとは文書構造を定義するコンピューター言語
- htmlは見た目を調整できないのでcssで見た目を整える必要がある
htmlを書くために必要な２つのもの
- テキストエディタ：htmlを書くために必要。コーディングの専門機能が豊富
- webブラウザ：htmlで書いたファイルをwebページとして表示するために必要
htmlの定型文と構造まとめ
- htmlを書くには必ず書かなければいけないコード（定型文）がある
- <!DOCTYPE html>はhtmlを書くときに必ず1行目に書く宣言文
- <html>〜</html>で囲まれている部分はhtmlであることを伝えるため
- <head>〜</head>で囲まれている部分はブラウザで表示されないサイトの詳細情報
- <body>〜</body>で囲まれている部分はブラウザで表示されるコンテンツ
この記事を書いた人
web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。
