HTML5・CSSの記事をまとめています。CSSの記事はこちら↓
準備
・編集ソフトVisual Studio Code（VSCode）をインストールする
・Webサイト制作の準備・ファイル、フォルダ名のルール
・【テンプレート】・DOCTYPE・cssの関連付け・meta,body,head,title,header,main,footer・文字コード・スティッキーヘッダー・トップに戻るボタン
HTML・CSSの基礎知識
・HTML・CSSとは
・コメントアウトの使い方
・rem（単位）は指定したfont-sizeに対して×〇〇（remの数字）倍という意味
・MIMEとは
・カスタム要素とは（Javascriptでオリジナル要素を作る、既存の要素をカスタムする）
HTMLの基礎知識
・要素、親要素と子要素、先祖要素と子孫要素と兄弟要素
・相対パス・絶対パスとは
・id属性とは
・インラインボックスとブロックボックス
・グローバル属性とは（すべての要素で使用できる属性）
HTML・CSSの機能
・ページ内検索機能を付ける
・複数のボックスの並べ方や配置を操作できるフレックスボックス（メニューを横並びにする）・フレックスボックスを中央揃えにする・項目間のスペースを調整する
・レスポンシブデザインとは（端末によって見え方を変更する）
・ファビコンを設定する（タブの左隅にある小さなアイコン）
・フォントを変更する【font-family】Webフォント・Adobeフォントの設定方法
その他
・他のホームページのHTML・CSSを見る方法
・バックスラッシュが￥マークに勝手に変換される問題
・Googleマップを埋め込む方法
・ランディングページ（LP）とは・LPの作り方
・ページ完成！サーバーにアップだ！→何かがおかしい…全然表示が上手くいかない…オワタと思ったらキャッシュを削除しよう
HTMLのタグについて
| タグ名（要素） | 概要 |
| <html></html> | <html>の開始を宣言【必須】 |
| <head></head> | 大事な情報を各部分【必須】 |
| <title></title> | ホームページのタイトル（お気に入りとかタブに表示される文字） |
| <meta></meta> | レスポンシブデザインの宣言とかSEOに関することだったり |
| <main></main> | サイトのメインコンテンツ部分。１つのページに１つ。 article、aside、footer、header、navの子要素となる場所には配置不可。 |
| <link> | CSSファイルや関連するファイルの読み込み、正規ページの指定、 ホームページのアイコン（ファビコン）指定、メディアクエリの指定など（閉じタグなし、ヘッダーの最後に書く） |
| <a></a> | 内部リンク・外部リンクをする【絶対パス・相対パスについても知っておく必要あり】 リンクしたページを別タブで開くにはtarget=”_blank”を付ける必要がある |
| <map></map> | イメージマップ（クリッカブルマップ、画像上にクリックできるリンク）を設置する。 子には<a>と<img>を持つ |
| <area> | 閉じタグなし。<map>の中にリンク可能なスペースを生成する |
| <style></style> | 要素１つ１つにスタイルを付与する（ほぼ使わない） |
| <body></body> | ホームページの体（中心）となる部分【必須】 |
| <svg></svg> | SVG形式の画像を表示させる |
| <article></article> | ページの中心部分や１つの話題に関する見出しとテキストなどをまとめる |
| <script></script> | Javascriptを埋め込んだり外部のスクリプトを読み込む |
| <img> | 画像を埋め込む |
| <nav></nav> | そのサイトの主要なページに行けるリンクを集めたもの |
| <aside></aside> | ページ内のあまり重要でない（広告やブログのコメント欄など）コンテンツをまとめる |
| <h1><h2><h3> <h4><h5><h6> | 見出しを付ける |
| <hgroup></hgroup> | 見出しをまとめて１つのグループにする（いちもんじ～パスタを添えて～ のように副題を作れる） HTML5では廃止 |
| <header></header> | ヘッダー部分を加工 |
| <footer></footer> | フッター部分を加工 |
| <address></address> | 連絡先の表記をする（会社への問合わせ先とかフッター内でよく使用） |
| <section></section> | 通称汎用セクション。<div>より重要な意味合いを持たせたいときに使用 |
| <p></p> | 段落 |
| <hr> | 水平な線を付ける |
| <pre></pre> | ソースコードをそのまま表示させる（空白を含める） |
| <blockquote></blockquote> | 引用・転載であることを示す・引用先のリンクをする。長文対応 |
| <ol></ol> | オーダーリストの略、番号順のリストを表示 例1・◎◎～ <li>タグとセットで使用 |
| <ul></ul> | 箇条書きリストを表示 例・◎◎～ <li>タグとセットで使用 |
| <menu></menu> | 文字数が少ないリストを表示 例・メニュー <li>タグとセットで使用。今はほぼ使わないので説明は割愛 |
| <li></li> | List Itemの略。リストの項目の内容を表示。<ol><ul><menu>の中で使用 |
| <dl></dl> | 定義リストを作成する（辞書を作る際の準備のようなもの）<dl><dt><dd>はセットで使用 |
| <dt></dt> | 定義リストの項目を作成する（辞書に登録したい科目を登録 例)ゲーム制作 ） <dl><dt><dd>はセットで使用 |
| <dd></dd> | 定義リストの内容を作成する（ゲーム制作とは、◎◎で～）<dl><dt><dd>はセットで使用 |
| <figure></figure> | 写真、挿絵、図表、コードなどのまとまりを作る <figure><figcaption>はセットで使用 |
| <figcaption></figcaption> | 写真などの説明を足す <figure><figcaption>はセットで使用 |
| <search></search> | Webサイト内・外での検索機能を持たせる。<div>みたいな感じで、検索機能をまとめるイメージ |
| <div></div> | 通称汎用ブロック、どんな要素でもまとめられる。でかいブロックを作りたいときに良い。 イメージ的には縦の塊。 |
| <span></span> | <div>は縦の塊なら<span>は横の塊で、一部のみ表現方法をまとめて変えたいときに使う。 文字の装飾などに使う。小さい要素にまとまりを付ける。 |
| <em></em> | 意味を強調させる、文字を斜体にする（画面を見ている人に対して目立たせたいときに使用） |
| <strong></strong> | 強調(SEO的にも重みをもたせる) |
| <small></small> | 著作権の明記や注釈などに使う（文字を小さくするためだけには使わない） |
| <s></s> | 打消し線 |
| <strike></strike> | 打消し線（<s>よりもこちらの方が汎用的） |
| <cite></cite> | 作品名の引用をする <blockquote>タグ（作品の内容）をセットで使うこともあり |
| <q></q> | 引用された短い文章 <blockquote>は長文、<q>は短文 |
| <dfn></dfn> | 用語を定義する際に使用 例）りんごの解説なら<dfn>りんご<dfn> 使用頻度は少ない |
| <abbr></abbr> | 略語を表すためのタグ。（マウスポインタをあてると正式名称が表示など）SEO的には不向き |
| <ruby></ruby> | ルビを振るための大枠を指定 例）此れがルビ |
| <rp></rp> | <ruby>非対応ブラウザ（Internet Explorer）に対応するためのルビを振るタグ |
| <rb></rb> | ルビをふる対象の文字を指定するタグ |
| <rt></rt> | ルビの内容となるテキストを指定 |
| <data></data> | 検索ロボットさんに数字などの情報を伝える |
| <time></time> | 時間を表すためのタグ（ニュースなど時間が重要な記事にはSEO的にも効果あり）スぺニットにも表示 |
| <code></code> | コードを等幅で表示させる、検索エンジンにプログラムであることを伝える |
| <var></var> | 囲った文字が変数であることを宣言する 変数を実際に使うのはやっぱりJavascriptで |
| <samp></samp> | プログラムの出力内容をサンプルとして提示するタグ |
| <output></output> | プログラムの計算結果を表示するタグ |
| <kbd></kbd> | ユーザーがキーボードなどから入力すべきテキストを提示 |
| <sup></sup> | 上付き文字を表示（２乗など） |
| <sub></sub> | 下付き文字を表示（H2Oなど） |
| <i></i> | ただ斜体にする |
| <b></b> | ただ太字にする（strongとSEO的な効果は大差ないとの話だが多用はしないほうがいいかも） |
| <u></u> | アンダーバーを引く |
| <mark></mark> | 囲った場所に黄色いマーカーを引く |
| <bdo></bdo> | 文字の読む順番を変更する ※必ずdir属性とセットで使用 たけやぶやけのはら→らはのけやぶやけた になる |
| <bdi><bdi> | 右から読む言語と左から読む言語が混ざっている時に良い感じに調整してくれる（アラビア文字とかヘブライ語とか） |
| <br> | 改行※強制 |
| <wbr> | 改行可能要素。改行するかはブラウザに任せる |
| <aside></aside> | メインコンテンツとはかかわりの薄い補助的な内容を表示 navタグと組み合わせて使うことも多い |
| <del></del> | 削除された部分であることを表す（datetimeで日付もつけて検索エンジンに伝えることも可） |
| <ins></ins> | 追記された部分であることを示す |
| <video></video> | ネットにあげられている動画をページ内に直接埋め込む |
| <iframe></iframe> | ページ内にインラインのフレーム（枠）を作成する HTMLの文書内に別のHTMLファイルを埋め込むことが多い（Googleマップやyoutubeなど） |
| <audio></audio> | ネットにあげられている音声をページ内に直接埋め込む |
| <object></object> | 文書内に音声や動画などのデータを埋め込むためのタグ |
| <embed> | 終了タグなし、文書内に音声や動画などのデータを埋め込むためのタグ |
| <track> | 終了タグなし、<video>・<audio>タグ内で使用 動画内に字幕を付ける（字幕を流しているファイルを別途準備する必要あり。拡張子vttのWebVTTファイル） |
| <picture></picture> | 見る人の様々な条件に合わせて画像を切り抜いたり変更したりする（レスポンシブ的な） 見る人の画面に最も適合する画像を読み込むことで通信帯域を節約しページの読み込みをより速くする |
| <source> | 終了タグなし。<picture>タグや<audio>タグの中で使用する場合どの子要素よりも先に配置 ブラウザなど条件によっては表示されない可能性のあるものに対して複数の素材を準備できるタグ 環境に合ったものを選んでくれる |
| <form></form> | お問合せページなどの入力欄を作成する際の区間を示す（送り先のサーバーの情報などを設定） <input>などフォームを作るタグと一緒に使用。<output>で使用する際の説明はこちら |
| <input></input> | 入力フォームの作成をする <form>タグ内で使用 type→ hidden/text/search/tel/url/email/password/date/month/week/time/datetime-local/number/range/color/checkbox/radio/file/submit/image/reset/button 追加属性→（autocomplete・inputmode） |
| <label></label> | ボタンや入力フォームと関連付けたテキストを表示させる そこをクリックすることでその部品の操作が可能になる <form>タグ内で使用 |
| <button></button> | 送信ボタンなど、ボタンの作成をする |
| <textarea></textarea> | 住所などの入力情報が長くなるテキストを入力するためのフォームを作成 |
| <dialog></dialog> | ダイアログやアラートなどを表示させる |
| <fieldset></fieldset> | 区切られたフォームを作成・グループ化する <legend>とセットで使用 |
| <legend></legend> | 区切られたフォームに説明を付加する 例)性別を選択 など <fieldset>とセットで使用 |
| <select></select> | プルダウン形式のフォームを作成 <option>タグとセットで使用 （選択肢から選択） |
| <optgroup></optgroup> | <option>タグのグループ化をする。グループ名を付ければカテゴリ分けのようなプルダウンも作成可能 |
| <option></option> | <select>タグ内でプルダウン内の選択肢を作成 |
| <table></table> | 表の作成をする |
| <caption></caption> | 表にキャプションを付ける |
| <thead></thead> | 表のヘッダー要素をグループ化する（タイトルっぽいところ） |
| <tr></tr> | 表内に行を作成する |
| <th></th> | 表内に見出しを付ける |
| <colgroup></colgroup> | 列をグループ化する <col>タグとセットで使用 |
| <col></col> | 列を作成する |
| <tbody></tbody> | 表の本体部分をグループ化する |
| <td></td> | 表内の要素の作成 エクセルで言うならセルの作成 |
| <tfoot></tfoot> | 表のフッター要素をグループ化する（一番下の行） |
| <details></details> | 詳細を折りたたんだ状態で表示させる（折りたたむ要素を囲む大枠）<summary>タグとセットで使用 |
| <summary></summary> | 折りたたんだ詳細の内容を作成する（折りたたむ前の項目名を指定）<details>タグとセットで使用 |
| <datalist></datalist> | <input>タグの機能をより良くしてフォームを作成する <input><option>タグとセットで使用 （プルダウンは選択だけでなく入力も可） |