#目的
このシリーズではhtmlとcssを完全に理解するまでの道筋を大まかに書いていきます．対象は初めてウェブページを作成したいけど何をすればよいかわからない人です．このシリーズを読み終わるころには，あなたはウェブページ作成マスターだ！
各記事は以下の表から飛べます．
| html編 | css編 | ||
|---|---|---|---|
| 第1回 | 導入 | 第9回 | 文字 (coming soon) |
| 第2回 | 環境構築 | 第10回 | 罫線 (coming soon) |
| 第3回 | タグ Part1 | 第11回 | inlineとblock (coming soon) |
| 第4回 | タグ Part2(coming soon) | 第12回 | リスト (coming soon) |
| 第5回 | 画像 (coming soon) | 第13回 | テーブル(表) (coming soon) |
| 第6回 | テーブル(表) (coming soon) | 第14回 | レスポンシブデザイン (coming soon) |
| 第7回 | リンク (coming soon) | 第15回 | 各ブラウザへの対応 (coming soon) |
| 第8回 | レイアウト (coming soon) |
#実行環境
このシリーズでは以下の実行環境で動作を確認しています．それ以外の環境では正常に動作しない場合がありますので，コメントにてお知らせいただくと幸いです．
- windows 10
- Google Chrome (version 95.0.4638.69)
- Microsoft Edge (version 95.0.1020.44)
また，解説はwindowsを使用していることを前提として記述しています．macの人はゴメンナサイ．
#htmlファイルの作成
これから作業をする上で，必要なファイルや画像があっちこっちにあると面倒なので，1つの作業フォルダを作りましょう．今回はC:\Users\{username}\Desktop\Sampleを作業フォルダにしました．{username}はそれぞれのパソコンによって異なります．要はパソコンを起動して一番最初に見えるゴミ箱とかがある画面の上に作りました．
このフォルダの中に移動したら，htmlファイルを作成します．htmlファイルはただのテキストファイルです．メモ帳とかで書けるやつ．拡張子が.htmlなだけです．
フォルダ上で右クリック→新規作成→テキストドキュメントをすることでファイルが生成されます．ファイル名は何でもいいですが，index.htmlを強く推奨します．ブラウザの内部的なアレによってindex.htmlが優遇されているため，topページとして認識してくれます．
今後ウェブページはこのindex.htmlから木構造のようにファイルを作っていきます．
#htmlの書き方
2021/11/12現在のhtmlの標準規格はWHATWGによるHTML Living Standardに統一されています．今後，この規格に準拠した書き方で記述していきます．
#"たぐ"とはなんぞや？
htmlはタグによって文字や画像の表示命令を指定します．例えば，「ここタイトルにして！」という命令は
<h1>ここはタイトルにする</h1>
のように指定します．<h1>，</h1>が命令を指定するタグです．特に，前者を開始タグ，後者を終了タグと呼んだりします．また，
<img src="ここにURLが入る" alt="これは画像だよ(代替テキスト)">
のように，開始タグだけのものもあります．
これらのようなタグで囲まれたものやタグ自身は要素(element)と呼ばれます．
htmlファイルはこの要素をいくつも使い，複雑に組み合わせて作成されます．
詳しいタグの種類については，html5ですが以下のチートシートがわかりやすくまとめられています．
また，htmlは入れ子構造(マトリョーシカみたいなやつ)について，いくつかの制限を掛けています．htmlを書いているときになぜかうまくいかない原因の一つですので，その場合は以下のチートシートで確認してみるといいかもしれないです．
#htmlを書いてみる
前述の通りhtmlはテキストファイルなので，タグを使わずとも文字を入力し表示することができます．しかし，今後htmlとcssを書いていくあなたがそんなことをしてはいけません．htmlの書き方にのっとって書いていきましょう．
以下は，htmlを書いていくうえでおまじないとなるテンプレートです．コピペしていろいろ遊んでみましょう．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>htmlとcssを完全に理解する</title>
</head>
<body>
</body>
</html>
コードの詳しい解説はコチラ
- 1行目では，「このファイルはhtmlだよ！」と宣言しています．ブラウザさんにわかってほしくて書きます．
- 2行目と10行目はhtmlタグです．「このタグの中はhtmlとして表示してね」という命令です．
lang="ja"は「このファイルは日本語が読める人のためのものだよ」という属性を付与しています．
それぞれのタグは決まった属性を持っており，これによって表示方法を変えます． - 3行目と6行目はheadタグです．ここで，ウェブページを表示するための前提条件を
metaタグなどを用いて書いていきます．文字の装飾はこのファイルを使って，URLはここで，．．．など． - 5行目のtitleタグは，ブラウザのタブの中に書く文字を指定します．
- 7行目と9行目はbodyタグです．この中にウェブページのコンテンツを書いていきます．
##参考文献
高橋朋代，森智佳子，"作りながら学ぶ HTML/CSSデザインの教科書"，SBクリエイティブ，2019年
次回はhtml編2回目です．<body>~</body>の中について詳しく解説していきます．
htmlとcssを完全に理解する【環境構築】#2←前回 次回→coming soon