本日の学習範囲

ドットインストール

・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"の場合、文書の概要を指定し、検索エンジンに表示される