本日の学習範囲
ドットインストール
・HTML/CSSの学習環境を整えよう [macOS編] #01〜#05
・はじめてのHTML #01〜#07
（学習時間：2時間）
環境構築
ドットインストールで推奨していた
・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）
・Ricty Diminished(フォント)
を準備した
Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Microsoftが提供しているコードエディター
Windows以外でも動作する
Ricty Diminished
https://rictyfonts.github.io/diminished
プログラミング用フォント
HTML学習メモ
HTML
Hyper Text Markup Languageの略
Webページ作成に使用するマークアップ言語
マークアップ
文章をタグで囲むことで、文章を構造化すること
要素
開始タグと終了タグを用いて構成される全体
属性
要素に対して性質を与える
index.html
サイトのトップページ
ブラウザで確認する方法
エディターのタブをブラウザのタブにドラッグ&ドロップする
h1タグ
<h1>文字</h1>
最上位の見出しを記述するタグ
h…headingの略、h1〜h6の6段階
pタグ
<p>文字</p>
paragraphの略
一つの段落を記述する
imgタグ
<img src="URL">
画像を表示する
src属性
<img src="URL">
Sourceの略
画像のあるURLを指定する
width属性
<img src="URL" width="数値">
画像の幅をピクセル単位で指定する
height属性
<img src="URL" height="数値">
画像の高さをピクセル単位で指定する
alt属性
<img src="URL" alt="文字">
画像が表示されない場合の代替テキストを指定する
DOCTYPE宣言
<!DOCTYPE html>
文書の先頭に記述する、文書がHTMLで作成されていることを示すための宣言
htmlタグ
<html></html>
HTML文書であることを示すルート要素
lang属性
<html lang="言語"></html>
languageの略
headタグ
<head"></head>
文章のヘッダー部分を指定する
bodyタグ
<body></body>
ブラウザ画面に表示する内容を指定する
字下げ(インデント)
コードを読みやすくするため、文章の先頭に一文字分空白を入れること
字下げしたい部分を選択して[tab]を押すと、その部分が字下げできる
metaタグ
<meta 属性>
head要素内に記述し、文書に関する情報を指定、 ブラウザや検索エンジンに知らせる
charset属性
<meta charset="文字コード">
head要素内に記述し、文書の文字コードを指定する
UTF-8
世界的にポビュラーな文字コード
titleタグ
<title>文字</title>
head要素内に記述し、文章のタイトルを表示する
ブラウザのタブや検索エンジンに表示される
favicon
ブラウザのタブに表示されるアイコン
linkタグ
<link 属性>
head要素内に記述し、そのページと関係する他のページを関連付ける
rel属性
<link rel="">
relationshipの略
リンク先の位置付けを示す
href属性
<link href="URL">
Hypertext Referenceの略。
リンク先を示す
name属性
<meta name="">
要素の名前を指定する
content属性
<meta name="" content="">
メタデータの内容を指定する
name="description"の場合、文書の概要を指定し、検索エンジンに表示される