More than 3 years have passed since last update.

【HTML初心者】 HTML基礎知識総まとめ

HTML

Posted at 2021-05-31

HTMLを学習する上で最低限必要な知識をまとめました。
「これからプログラミングを学習する方」や「基礎知識復習したいわ！」
って方の参考になればと思います！

都度学んだことを更新していきます。

ー基礎知識ー

##【HTML（HyperText Markup Language）】

ウェブサイトに表示される情報を記載する言語。
「〇〇.html」 という名前のファイルに記述します。

##【拡張子】

(ファイル名).(拡張子)　→ application.html

拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。
htmlのファイルを作成する場合は 「〇〇.html」 となり、CSSの場合は 「〇〇.css」 となる。
このように、言語ごとに拡張子が異なります。

##【要素】
HTMLにおける要素は、HTMLを構成するために必要な成分。いくつもの要素が積み重なって、HTMLは構成される。

##【タグ】
HTMLにおける要素のかたまりを示す記述。
タグには、要素の始まりを示す開始タグと、終わりを示す終了タグがあります。
なお、終了タグが無い要素も存在します。

<タグ>要素</タグ>

#ーHTMLはどのように構成されるのかー

##【head要素】

<head>...</head>

ウェブサイトの情報や、装飾用のCSSファイルの情報を記載する部分。
ここに記述した情報は画面上に表示されない。

##【body要素】

<body>...</body>

画面上に表示したい情報を記載する部分。
ブラウザ上に表示されている情報は、body要素の中に記述されたもの。

この2つの要素は、HTMLを構成する上では必須。したがって、WebサイトのHTMLには必ずhead要素とbody要素がある。

##【DOCTYPE(ドックタイプ)】

<!DOCTYPE html>

DOCTYPEは「ドキュメントタイプ」の略で、この文章がHTML文章であることを宣言する要素。終了タグはなし。
実際に記述する場合は、****のようにする。この要素を記述しないとレイアウトが崩れ、正しく表示がされない場合がある。

##【html要素】

<html>...</html>

HTML文章の始まりと終わりを示す要素。html要素もHTMLを書く際に必要。

##【meta要素】

<meta 属性="属性値">
      ↓↓↓↓↓
<meta charset="UTF-8">

HTML文章に関する情報を指定する時に使用。終了タグなし。charset=はmeta要素の属性。

##【属性】
属性は、要素に情報を付け加える役割を持つ。属性のあとには属性値が続く。

##【属性値】
どのような属性なのかを示す値を属性値。

##【charset(キャラセット)属性】
メタ要素にて、どのような文字コードを用いるか示すことができる属性。「キャラセット」と読むことが多い。

##【title要素】

<title>...</title>

ウェブサイトのタイトルを指定する要素。title要素内にタイトルを記述してもウェブサイトの画面上には表示されない。Googleでの検索結果や、ブラウザのタブに表示するタイトルとして使用される。

##【h1 〜 h6要素（見出し要素）】

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

hから始まる h1 / h2 / h3 / h4 / h5 / h6 の要素は文章の見出しを作るための要素。
見出し要素は h1 〜 h6 まで存在する。
h1 〜 h6 のタグに囲まれたテキストは見出しとして強調され、h1 から順に文字の太さと大きさが小さくなる。

##【p要素】

<p>...</p>

文章の段落を表すもの。上記で囲むとひとかたまりの段落として認識されます。Webページ内では、見出しを除くテキストのほとんどが、このp要素を使って作られる。

##【br要素】
br要素はテキストを改行するための要素です。br要素をテキストの中で用いることで、改行ができる。br要素は終了タグが不要。

##【b要素】

<b>...</b>

文字を太くする要素です。上記で囲まれている部分だけ太字になる。

##【a要素】

<a>...</a>

上記で囲ったテキストをリンクにすることができる。a要素をクリックすると特定のページに移動。aタグのhref属性に、移動させたいページのURLを指定。

##【href(エイチレフ)属性】

<a href="URL">リンクのテキスト</a>

href属性はリンクの移動先を指定。
属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できる。

##【コードの差分の確認】
コードの差分を比較するには、VSCodeの標準機能が便利。
以下の手順で確認と修正が可能。

① 見本のコードをコピー
② 自分のコードがあるファイルを開く
③ command + shift + Pでコマンドパレットを開く
④ >に続けてcompareと入力し、Compare Active File With Clipboardを選択
⑤ 赤字でハイライトされている見本と異なる部分を確認する
⑥ 編集したいファイルを選択して、誤字や抜けているコードを修正する

#ーHTMLの構造ー
##【HTMLは左上に重力のある積み木】
HTMLは積み木の集合体であると言えます。
左上に重力があるため、、何もなければ積み木（=要素）は左上から収まっていく。

##【入れ子構造】
HTMLはすでに作成した要素の中に、さらに要素を追加することが可能です。
これを入れ子構造といいます。

##【HTMLの要素は中身に応じて高さが変動】
積み木の1つ1つは中身によって、高さの変わる「箱」であると言えます。

##【ブロックレベル要素】
HTMLの積み木を構成する要素。
1つのブロックレベル要素が、1つのHTMLにおける積み木として存在します。
特徴は以下の通りです。

① 横幅MAXで表示される四角い箱
② 箱の中にテキストなどが表示される
③ 中身に関係なく横幅MAXになる
④ 高さは中身によって変わる
⑤ 縦並びで表示される

####【代表的な要素】

<h1>...</h1> 見出しのブロックを構成する要素
<p>...</p> 段落を構成する要素
<div>...</div> HTMLにおけるブロック要素を構成することを専門にする要素

##【インライン要素】
インライン要素とは、「テキストの一部」として扱われる要素です。
基本的にブロック要素の中で使用され、「テキストの一部を太文字にする」など、主に文字の装飾などに使用します。
特徴は以下の通りです。

①中身のテキスト量の分だけ横幅が広がる
②高さは中身によって変わる
③連続すると横並びで表示される

####【代表的な要素】

<b>...</b> 太字にする要素
<a>...</a> 文字を別ページへのリンクにする要素

#ー親要素と子要素ー

##【親要素】
親要素とは、ある要素の１つ上位の階層にある要素。

##【子要素】
子要素とは、親要素から見てその下位階層にある要素。

##【header要素】

<header>...</header>

header要素とは、Webページ最上部のヘッダー専用のブロックレベル要素です。
(head要素とは別です。)

##【div要素】

<div class="〇〇">...</div>

「特定の意味が無い」要素です。汎用的に様々な用途で使うことができ、レイアウトを作成する際に重宝されます。classセレクタを付与して使用します。最も使用する頻度が高いブロックレベル要素です。

##【footer要素】

<footer>...</footer>

footer要素とは、Webページ最下部のフッター専用のブロックレベル要素です。

#ーサイズの調整ー

##【heightプロパティ】
要素の**「高さ」**を指定することができるプロパティです。

##【widthプロパティ】
要素の**「幅」**を指定することができるプロパティです。

##【%】
%（パーセント）とは、親要素のサイズを100%としたとき子要素のサイズを親要素に対して何%で設定するかを決められる指定方法。

#ー背景色を指定ー
##【background-colorプロパティ】
background-colorプロパティは、**「背景色」**を指定する際に使用します。値で自由に色を指定することができます。

#ー箇条書きリストのHTMLー

リスト表示をするためには、ul要素とli要素を用います。

<ul class="lists">
  <li class="list">リスト1</li>
  <li class="list">リスト2</li>
  <li class="list">リスト3</li>
  <li class="list">リスト4</li>
</ul>

##【ul要素】
順序のないリストを示すブロックレベル要素。li要素と組み合わせて使用します。

##【li要素】
リストの項目を示すブロックレベル要素。ul要素の子要素として記述します。

##【list-styleプロパティ】
**「リストのスタイル」**を変更することができます。
li要素の箇条書きのマークも変更できます。
値として 「square」 を指定すると箇条書きの黒点を ■ で表現できます。
値として 「none」 を指定していると、箇条書きの黒点を消すことができます。

#最後に
まだまだHTMLの基礎知識は多くあリます。

今後も学んだ内容は更新していきます。
学習頑張っていきましょう！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【HTML初心者】 HTML基礎知識 総まとめ

ー基礎知識ー

【HTML初心者】 HTML基礎知識総まとめ