サービス
サービスを探す
プロ人材を探す
仕事を探す
ブログを探す
Web制作の基礎② HTMLを書いてみよう
記事学び
1. はじめに
日本語、英語、中国語、韓国語、スペイン語、イタリア語……。
世界には本当にたくさんの言語があります。
それぞれの言語には、それを使う人たちがいて、言葉を通じて想いや情報を伝え合っていますよね。
「Webの世界」にも独自の“言語”があります。
そのひとつが、今回のテーマである HTML です。
HTMLはWebページの内容や構造を作るための言語です。
正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」と言いますが、今は覚える必要はありません。
HTMLは人間が会話するための言語というよりも、Google ChromeやSafariといったWebブラウザに
「この部分は見出しだよ」
「ここは画像を表示してね」
と伝えるためのルールのようなものです。
つまり、私たちがブラウザに「こんなWebページを表示してほしい」と伝えるときに使う“共通言語”。
それがHTMLです。
Webサイトを「家」にたとえるなら、HTMLはその家の土台や骨組みを作り、テーブルや椅子といった最低限の家具を配置するような役割を担っています。
HTMLだけで作られた家は、まだ完成にはほど遠い状態です。
壁はコンクリートの打ちっぱなし、家具はとりあえず組み上げただけで、人を招くにはまだまだ整っていない…そんなイメージです。
でも、しっかりとした家を建てるには、まずこの“最低限の家”から着実に作っていく必要があります。
この記事では、HTMLを使ってその“最低限の家”をどう作るのか、という基本の基本から解説していきます。
また、実際に手を動かしながら、HTMLを「書いてみる」ことにもチャレンジしていきます。
「HTMLを書く場所はどこ？」「ファイルはどう保存するの？」といった内容から、ひとつひとつ丁寧に見ていきましょう。
まず前提として、「そもそもHTMLってなに？」という方は、先にこちらの記事をご覧いただくのがおすすめです。（無料でご覧いただけます）
2. HTMLを書いてみよう！
2-1. 必要な道具をそろえよう
どんな言語であっても、「書く」ためにはペンとノートが必要です。
最近はスマホのメモアプリなんかでも代用できますが、言葉を形にするには、まず書く場所が必要です。
HTMLというWebの言語も、それと同じです。
HTMLを書くためにも、「書き込むノート」のようなもの、つまりエディタソフトというものを準備する必要があります。
本来は、HTMLやCSSなどWeb制作専用のエディタソフトを使うのが理想ですが、いきなり新しいソフトをインストールするのはちょっと面倒だったり、ハードルが高く感じるかもしれません。
なので、今回はまずパソコンにもともと入っている“メモ帳”や“テキストエディット”などのエディタソフト使って、気軽に始めてみましょう！
2-2. エディタソフトを開いてみよう
では早速、エディタソフトを開きましょう。
使っているパソコンがWindowsかMacかによって、開き方が異なるので、それぞれの環境に応じて以下の方法を試してみてください。
■ Windowsの場合：
1. 「スタートメニュー」から「メモ帳」を開きます
（検索で「メモ帳」と入力するとすぐ出てきます）
■ Macの場合：
1. 「アプリケーション」→「テキストエディット」を開きます
2. メニューバーの「フォーマット」→「標準テキストにする」を選びます。
上記の方法でテキストエディタを開いたら、「新規作成」で新しいテキストファイルを作成しましょう。
2-3. 書き方の基本：HTMLってどんなふうに書くの？
では早速、htmlを書いてみましょう！！
…と言いたいところですが、その前に少しだけ、HTMLってどんな見た目の言語なの？というところを確認しておきましょう。
日本語は「ひらがな」「カタカナ」「漢字」の3種類の文字を使って書きますよね。
英語なら、「A〜Z」の大文字のアルファベットや、「a〜z」の小文字のアルファベットを使って文章をつくります。
では、HTMLという言語はどう書くのでしょう？
↓
↓
↓
↓
↓
<h1>こんにちは！</h1>
HTMLは、このように「タグ」と呼ばれる特別な記号の組み合わせで書かれています。
上記のように、<（小なり）と >（大なり）で囲んだ文字列を使って、「この部分はどんな役割を持っているのか」、「この部分は何を示しているのか」などをWebブラウザに伝えていきます。
この <h1> と </h1> の部分が「タグ」と呼ばれるものです。
この例では「これは見出しですよ」という意味をWebブラウザに伝えています。（今は覚えなくても大丈夫です！）
そして、タグには「開き」と「閉じ」があり、基本的に2つで1セットになっています。
<h1>こんにちは！</h1>
<p>これは段落です。</p>
・<h1> や <p> のように最初に書くタグを「開き（開始）タグ」
・</h1> や </p> のようにスラッシュ / をつけて書くタグを「閉じタグ」
このように、開きタグと閉じタグで内容をはさむ形で、HTMLを書いていきます。
HTMLでは、基本的に開きタグと閉じタグは必ずセットで使う必要があり、どちらか一方が抜けてしまうと、ブラウザが正しく読み込めなかったり表示が崩れてしまったりします。
一部例外もありますが、それについてはまた後の回で説明しますので、今は一旦上記の理解でOKです。
イメージとしては、
・開きタグが 「箱のフタ」
・閉じタグが 「箱の底」
のような感じです。
その箱の中に、見出しや文章、画像などの「中身」を入れていく感覚ですね。
HTMLという言語は、この箱をたくさん並べたり、マトリョーシカのように箱の中にさらに箱を入れたりしながら書いていくのが特徴です。
中身をしっかり整理しながら、箱（タグ）を使って少しずつWebページを組み立てていく。
これがHTMLという言語を書くときの基本的な考え方になります。
2-4. 一行目で「HTMLで書きますよ」と宣言しよう
では、いよいよ実際にHTMLを書いてみましょう！！
「2-2. テキストエディタを開こう」のステップで準備したテキストエディタに、これから一つずつタグを書き込んでいきます。
…とはいえ、いきなり「はい、書いてみて」と言われても、何から手をつければいいのか迷ってしまいます。
手紙でもブログでも、最初の一文って意外といちばん悩むものです。
でも、HTMLの場合はとてもシンプルなので安心してください。
まず最初の1行で「これからHTMLという言語で書いていきますよ」ということを、Webブラウザに伝えてあげる必要があります。
なので、HTMLファイルの一番最初の1行目はこのように書きましょう。
<!DOCTYPE html>
これは「DOCTYPE宣言（ドックタイプ宣言）」と呼ばれるもので、「このファイルはHTMLで書かれていますよ」とWebブラウザに伝える役割を持っています。
この <!DOCTYPE html> は、特別な意味や画面上での表示があるわけではありません。
イメージとしては、実際の会話で「今から日本語で話しますね」とか「これから英語で話すよ」とあらかじめ伝えてあげるようなものです。
相手（＝Webブラウザ）にとっても、どんな言語で話が始まるのかがわかっていたほうが、正しく理解しやすいですよね。
HTMLでも同じで、この一行があることで、ブラウザは「OK、これはHTMLの文書なんだな」と認識して、正しくページを読み込んでくれます。
「HTMLを書くときは、まず最初にこれを書く」と覚えておくだけでOKです！
2-4. 全体を包む外枠を作ろう
さて、<!DOCTYPE html> で「これからHTMLで書きますよ」と宣言したら、次はいよいよHTML文書の本体を書いていきます。
テキストエディタの2行目以降はこのように書いてみましょう。
<!DOCTYPE html>
<html></html>
<!DOCTYPE html> のすぐ下に、<html> </html>という"箱"を追加しました。
この <html> タグは、HTMLで書かれた内容をすべて包みこむための外枠のような役割を持っています。
家で例えると、骨組みのようなものです。
まず骨組みがないことには、壁や天井も作れませんし、家具も設置できません。
実際のWebページでは、見出しや文章、画像など、ページを構成するパーツはすべて、この <html></html> の中に書いていくことになります。
ここまでで、家の一番外側の枠ができあがりましたね！
今回は、一旦ここまでにしておきましょう。
2-5. 作ったhtmlファイルを保存しよう
まだたった2行だけとはいえ、ここまででせっかく作り上げたHTMLの土台。
それをこのまま閉じてしまって、なかったことにするのはもったいないです。
ということで、最後にこのファイルをきちんと保存する方法を紹介していきます。
保存しておけば、あとから見直したり、ブラウザで表示させたり、少しずつ編集を加えていくこともできます。
使用したテキストエディタの種類に応じて、以下の方法でファイルを保存してください。
■ Windows（メモ帳アプリを使用）の場合：
1. メニューから「ファイル」→「名前を付けて保存」を選択
2. 保存設定を変更
ファイル名： index.html（「.html」が大事！）
ファイルの種類： 「すべてのファイル」を選択
文字コード： 「UTF-8」を選ぶ（画面下のほうにあります）
3. 保存先を選んで「保存」
※デスクトップやドキュメントなど、わかりやすい場所に保存しましょう。
■ Mac（テキストエディットアプリを使用）の場合：
1. 現在のファイル形式を確認する
まず、今入力しているテキストファイルが「リッチテキスト」になっていないか確認しましょう。
メニューバーから「フォーマット」→「標準テキストにする」を選択
※選べない場合は、すでに標準テキスト（プレーンテキスト）になっています。
2. メニューバーから「ファイル」→「保存」または「名前を付けて保存」を選択
3. 保存設定を確認
ファイル名： index.html（「.html」が大事！）
ファイルフォーマット： 「標準テキスト」になっていることを確認
4. 保存先を選んで「保存」
※デスクトップや「ドキュメント」など、わかりやすい場所に保存しましょう。
これで、これまで記述した内容を保存して、次回以降もいつでも使えるようになりました！
次回からは、この家に壁や屋根などを追加しながら、少しずつ家の土台を作っていきましょう。
3. まとめ
今回は、HTMLがどんなふうに書かれているのかを、実際に手を動かしながら学んでみました。
重要なポイントをもう一度おさらいしておきましょう。
・HTMLは、タグという記号で構成されるWebの言語
・タグは <〇〇>（開き）と </〇〇>（閉じ）で1セット
・HTMLを書くためにはテキストエディタ（メモ帳やテキストエディット）を使う
・最初に <!DOCTYPE html> で「HTMLで書きます」と宣言
・<html>〜</html> でページ全体を包む外枠を作る
・タグの中にさらにタグを入れて、構造を組み立てる
・保存するときは「.html」という形式で保存すること
HTMLは、最初こそ見慣れない記号が並んでいて戸惑うかもしれませんが、「これは箱なんだ」「ルールに沿って組み立てていくものなんだ」と思えるようになると、ぐっと親しみやすくなります。
まずは書いてみること、そして「なんとなくわかってきたかも」と感じられることが、最初の大きな一歩です。
次回は、この<html>という骨組みの中に<head>と<body>という要素を設置します。
それぞれどんな用途なのか？といった内容も丁寧に解説していきます。
もしご興味がありましたら、次回もぜひ引き続きお楽しみいただけますと幸いです。
それでは、今回も最後までお読みいただきありがとうございました！
