書こうと思ったきっかけ
最近、WebページのHTMLを解説することが多いなと感じ始めていました。そこで、HTMLのページを最低限作れる基礎知識をまとめておこうと思います。
対象
- 超初心者向け（めちゃ優しめ）
- 中学や高校などの授業でHTMLをやる人（ちょっと頑張ってみたい人）
この内容は基礎の基礎です。これが分からないとどのサンプルコードを読んでも何もわかりません。
環境構築
環境構築とは、HTMLやCSSでプログラミングを始めるための準備のことです。
PCには初めからプログラミングをできるツールが入っているわけではなく、誰かが作ってくれたものをインストールして初めてプログラミングをすることができます。
そこで今回は、快適にHTMLが書ける環境を構築していきたいと思います。
テキストエディターをインストール
テキストエディターとは、PCの中にあるテキスト形式（文字データだけ）のファイルを加工するためのアプリのことです。
みなさんのPC（windows）の中にはメモ帳が入っています。メモ帳でもHTMLは書けますが、テキストエディターのコーディングサポート機能を使用したほうが圧倒的に開発効率が爆上がりします。
本来テキストファイルはただの文字データのため、プログラミングをしやすくなるような補完機能がないです。
そのためミスタイプ（typo）や文法ミス（syntax error）が多々発生します。それを防ぐ支援機能をつけてくれるのがテキストエディターなのです。
Microsoft社の出している、wordという文書作成アプリがありますね？
実はワードのファイルは、ただのテキスト形式ではないのです。例えば画像の挿入をできますね？
実はwordのファイルは拡張子が「.docx」であり、画像や表など文字だけでは表現できないデータを入れるために「zip」ファイルのような形式を利用しているそうです。（確か）
wordは文書作成ツールであって、テキストエディターではないのでそこの違いをしっかりと覚えてください。
VScodeのインストール (windows)
先ほども紹介した通りVScodeはテキストエディターですがただのテキストエディターではありません。
Microsoft社が開発したテキストエディターであり、一般の人が開発した拡張機能を入れることでいろんなプログラミング言語対応します。HTMLに関わらずいろんな言語がサポートされているため、HTMLをきっかけに他のプログラミングにも挑戦してみたいと思う人にはとてもおすすめです。
- このサイトにアクセスして「windows」をクリックしてください。
vscode microsoftの公式DLページ
何秒か待つと、インストーラーと呼ばれるアプリをPCに入れてくれるものがダウンロードされます。
Google Chromeを使っている場合は、左下にこのようなものが出てきます。
ダウンロード中↑
- ダウンロードされたファイルは、ダウンロードフォルダに入っていますのでそれをダブルクリックして実行してください。
その後は、こんな感じで進めてください。
必ずPATHへの追加にクリックをしてください！
最後の画面でチェックをしておくと起動しますので、そのままで完了してください。
これでインストールはできました。
このほかに日本語拡張機能があります（デフォルトは英語）が、英語も難しくはないので僕はそのまま使っています。
入れたい人は下の手順で入れてください。
- 左の拡張機能マークをクリック
- japaneseと入力
- 拡張機能をクリック（必ず拡張機能の詳細を確認してください。なかには、いらないやつもあります。）
- installをクリック
その他のテキストエディター
そのたのテキストエディターには
- sublime text
- atom
- brackets
- intellij IDEA
- android studio
- pycharm
- vim
- neovim
- Visual Studio
- SAKURA editor
- 秀丸エディター
など沢山のエディターがあります。
HTMLとCSSのそれぞれの役割
簡単に言うとHTMLは、ボタンとかテキストとか入力欄とかの基本的な配置をしてCSSでデザインを決めるというのが一般的です。
HTMLにもスタイリングをするためのタグがありますが、そもそもCSSが作られた経緯はスタイリング（CSS）と基本的な要素の配置（HTML）を分離しようという考えから生まれたものです。ですからHTMLのファイル内に長々とコードを書くよりも、ファイルに分けて見やすいコードの管理を心がけましょう。
HTMLの基礎知識
HTMLは主に、タグというものを配置してボタンや入力欄などのいろんなものを作るファイルです。
HTMLはHyperText Markup Languageの略です。
ファイルの基本構成
ファイルを作る
まずは、ファイルを作りましょう。エクスプローラーを開いて、自分が分りやすいところにフォルダーを作りましょう。
プログラミングでファイルを命名するときは、必ず英語にしましょう。
英語は、アルファベットなので1バイト文字です。（半角）に対し、日本語は全角なので2バイトを使います。たまに、プログラミングをしてると日本語のフォルダーでは動かないことがあります。なので、フォルダ名は英語で命名するようにしましょう。（全角はあまり使わない方がいい。）
🔥智典の熱弁🔥～ファイルの管理～
プログラミングをするときは、HTMLに関わらず一つの作品は一つのフォルダーでまとめておくのが鉄則です。
なぜなら、ファイル管理をしっかりやっておくと後からコードを修正・改良するときにファイルを開くのが速くなります。そうすることで開発効率を爆上げすることができます。
また、HTMLでは画像を使います。いちいちPCのたくさんあるファイルの中から画像を探すよりも、ひとまとめにしておく方が、ファイルが探しやすくてとてもいいです。
必ずファイル管理はしっかりと行うようにしましょう！！
VScodeでフォルダーを開いた場合VScodeの下の部分が青になり、ファイルの場合は紫になります。
それでは先ほど作ったフォルダーを開いてください。その中は、なんのファイルも作っていませんから空になると思います。
※フォルダ内に「.vs」というフォルダーが作られていることがありますが、VScodeが残す設定ファイルなので消しても消さなくてもよいです。
Exploreの文字の下に大文字で何か書かれていますね？これが先ほどあなたが作ったフォルダーの名前です（必ず大文字で書かれてますのでダイジョブです）。
そこらへんにカーソルを持っていくと、矢印でさしているようなマークが出てきます。
これの左側を押すと、ファイルが作られますので「index.html」というで作成します。拡張子は絶対に間違えないでください。
そうしたら下にファイルが表示されますのでそれを押して開いてください。
そのファイルが、右側に開けたと思います。
そこに、「半角！」を入力してエンターを押してください。そうするとVScodeがかってにHTMLのひな型を作ってくれます。
そうしたら一度保存しましょう。（Ctrl + S）で保存できます。
上の方に開いているindex.htmlが書いてあり、その横に〇が書かれていますね？これはまだファイルが保存されていないことを表します。
ファイルはこまめに保存しましょう。（僕は、数行打ったら保存するという癖がつきました。）
そうしたら同じようにして、「index.css」というファイルも作ってください。（！はやらない）
HTMLの文章の構成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
VScodeでは、このようなものができたと思います。
簡単に言うと、HTMLは初めに「ドックタイプ宣言」があり、「このファイルはHTMLだっちゃ」と定義してます。
その下にHTMLタグがあり（この後解説）、その中にはさらにheadタグとbodyタグがあります。
| 要素 | 書き方 | 用途 |
|---|---|---|
| headタグ | <head> | ページの設定 |
| bodyタグ | <body> | 実際にブラウザに表示されるページの内容 |
| この基本構造を忘れないでください |
タグにつて
HTMLのタグには、Widget（ウィジェット）と呼ばれる要素（エレメントと呼ばれることもある。）を配置してボタンや入力欄、タイトルやテキストなどのUI（ユーザーインターフェース：ユーザーが押したり入力したり、操作するところのこと。）を構築するための様々なタグがあり、その一つ一つに役割がつけられています。
タグを使う時の基本文法
HTMLのタグには開始タグと終始タグがあります。
先ほどのHTMLタグを例に出しましょう。
<html></html>
<!-- 開始タグは/がない。
収支タグは/がつく。"-->
基本的にはこのように書きます。なお、タグが一つだけのものもありますので注意してください。
いろんなタグ
HTMLのタグにはいろんなものがあり、それぞれに用途があります。
名前を打ち間違えると、動きませんので要注意です。
headの中で使う設定系のタグ
| タグ | 用途 |
|---|---|
| <meta><\meta> | いろんな設定を書く |
| <link><\link> | CSSを読み込んだり、Webページのアイコンを設定したりする。 |
| <title><\title> | Webページのタイトルを設定する。 |
bodyの中で使うWidget系のタグ
| タグ | 用途 |
|---|---|
| <div></div> | 要素を囲うための基本的なタグ |
| <p><\p> | 文章を段落に分けるタグ |
| <h1><\h1> | 見出しを作るタグ（なお見出しの階層に応じてh1~h6まで用意されている。） |
| <button><\button> | ボタンを作るためのタグ |
| <input><\input> | 入力欄やデータ送信ボタンをつけるときに使う。 |
| <textarea><\textarea> | 入力欄（複数行）を作るときに使う。 |
まあまあHTMLタグとは一口に言っても、確かたくさんあるんで全部は紹介できません。
これくらいあれば、サイトは作れる？かもしれないです。
VScodeの便利機能
先ほどの「！」の機能もはじめVScodeには、デフォルトでいろんな機能がついています。
それを少し紹介したいと思います。
bodyタグの中に、「h1」と入力してみてください。
そうすると、下の写真のように入力候補が出てきます。
また＜＞も終始タグまで補完してくれます。
また、行の中間を編集してて次の行に改行したいときは（Ctrl + Enter）を押すと素早く改行できます。
CSSの基礎知識
CSSとは、前の方でも解説している通りHTMLの要素をスタイリングしてデザインするためのものです。
CSSはCascading Style Sheetsの略で、その名の通りデザインを変えます。
ここでは、デザインの変え方について紹介したいと思います。
CSSを書くための前準備
まずは、index.htmlに下の一行を追加してください。
<title>の上の行に一行開けて、「link」とうつと「link:css」という候補が出てきます。
そこでEnterを押して、href="style.css"のところを下のように変更してください。
※index.cssは先ほど作成した、CSSのファイルです。（異なる名前で作成した方は、その名前を指定してください。）
<link rel="stylesheet" href="index.css">
CSSのスタイリングをHTMLの要素に指定する方法
CSSはHTMLの要素のデザインを変えるといいましたが、「どこのデザインを変えてくれ～」という指定がないと動きません。
そこで指定の方法が大きく3つあります。
タグ名で指定
VScodeの機能で、HTMLのタグの候補が出てきます。
下のプログラムは、h1タグの中に書かれている文字の色を変更するプログラムです。
※僕のは拡張機能で、色や見え方が違う可能性があります。
idで指定
先ほどのh1タグの開始タグに、idというものを追加しました。（ちなみにidなどの項目はあらかじめ用意されていて、自分で新たに追加することはできません。）
idは、HTMLのサイトの中で同じものを使えないという特徴があります。
なので、必ず一つだけの要素に使ってください。
そうしたら、CSSの方に下のコードを追加してください。
# page-title {
color: green;
}
そうすると、しっかりと色が変わります。
classで指定
classもidと同じように特定の要素にスタイリングするためのものですが、idと違ってたくさんの要素に指定することができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<h1 class="page-title">Qiita 解説1</h1>
<h1 class="page-title">Qiita 解説2</h1>
</body>
</html>
指定方法のまとめ
- タグ名指定は、HTML内の同じタグすべてにスタイルがつく。
- id指定は、HTMLの指定されたidにスタイルがつく。（idは被らない。）
- classは、複数の指定された要素にスタイルがつく。（複数指定可）
ここから、サンプルコードを見ることができます。
https://codesandbox.io/embed/lucid-shape-oj35q?fontsize=14&hidenavigation=1&theme=dark
CodeSandBoxです。 ぜひ見てみてください。
CSSのいろんなプロパティー
CSSでは、文字の色のほかにも様々なものが変更できます。
これは、とても多すぎるので自分で調べてください。
まとめ
今回HTMLとCSSの基礎の基礎を紹介しました。
これが分からないと、最初のページすら作れないので頑張って理解するようにしましょう。
また、この記事を最後まで読んでいただいてありがとうございました。HTMLは一見難しそうで、手を動かすと簡単に習得できるので将来のスキルとして習得してみるのもいいかもしれませんね。
HTMLやCSSを理解してもまだJavaScriptやNodejsなどいろんなものがあるので、ぜひプログラミングを楽しんでいただけたらいいなと思っています。
それではあとは、GGRKS。Happy Hacking！