この記事では、Progateの初級、中級、上級までのHTML学習レッスンの内容を簡潔にまとめる。
プログラミング初学者に活用していただきたい。
本記事を書く目的はプログラミングをそれほど使わない私が、コードを書く時の参考に見たり、一度覚えた内容を忘れないよう留めておく程度である。
HTML コード一覧

Progateの初級、中級、上級のレッスンに出てきたコードの一覧を羅列する
見出し heading
<h1></h1>
<h2></h2>
…
段落 paragraph
<p></p>
見出し以外の文
コメント 表示されない
<!– — >
・リンク
<a> </a>
<a href=”url”> ※開始タグに設定でURLを表示
※属性タグ指定の時にはダブルクオーテーション
画像
<img src=”url”>※閉じタグなし
リスト
<li></li>→子要素
※<ul></ul>で囲むと先頭に黒点がつく
※<ol></ol>で囲むと数字が連番でつく
→親要素
要素
<○○ class=””>
※CSSの要素特定に使用
構成タグ
<!DOCTYPE html>→HTMLのバージョン指定※定型文
<html>
<head>→WEBページの設定、表示されない
<meta charset=”utf-8”> ①文字コード指定
<title>~~~~</title> ②ページタイトル※ブラウザ上タブで現れる
<link rel=”stylesheet” href=”url”> ③cssの読み込み(読み込む宣言とファイルの指定)
</head>
<body>
</body>
<footer>
</footer>
</html>
要素のグループ化 division
<div> </div>
同じ行で装飾を変える インライン要素
<span> </span>
1行のテキストを受け取る
<input> ※閉じタグ不要
<input type=”submit” value=”○○”> ※送信ボタン、デフォルトで”送信”
複数行のテキスト入力を受け取る
<textarea> </textarea>
クラスの簡易表現
<header> </header> =<div class=”header”>
<footer> </header> =<div class=”footer”>
複数のクラスを指定
<div class=”btn, blue”>…
アイコンフリー素材の使用
①headタグ中に、CSSを読み込むための記述をする
②spanタグにfaクラスとfa-アイコン名クラスを指定する(サイトに掲載)

レスポンシブデザインを適用する
viewportを設定することでスマホ、タブレットでメディアクエリを機能させる
headタグ中に下記コードを入れる。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
※メディアクエリ記述のCSSファイルの読み込みコード(<link rel=…)より上に記述
追記

これまで、HTMLコードでウェブサイトを作成する中で、追加でコードを覚える必要性が出てきたため、追記する。
ウェブフォントを入れる
Google Fontsdがおすすめ。Noto Sans Japanese よく使われるおしゃれフォント
Stylen regular400 bold700が基本。選んで、<link>→出てきたコードをコピー
→headタグの中にそのまま張り付け
→font-family・・・のほうをコピーしてCSSファイルに張り付け
※ネット環境によっては指定のフォントが読み込まれないことがある。その時の代替フォントを自動で切り替えてくれるコードをネットから探して、同様にCSSファイルに張り付け。
リンクを別タブで開く設定
aタグ中にtarget=”_blank”を入れる
例)
<a target = “_blank” href=・・・>
idで要素を指定する
class=”・・・”で要素を指定しているところをid=”・・・”とすることができる
CSSではidで指定した場合下記の通り、頭に#がつく。
idは一つのファイルに同名のidは1つしか存在できない。高速処理時に有効
→CSSではidはいらない
#id名 {
表示内容
}
<dl>データリスト タグの使い方
小見出しとデータ(画像)を紐づける
ddの前にdtを置く必要がある
<dd>, <dt>
例)
<dl>
<dt></dt>
<dd></dd>
</dl>
※display: flex、flex-direction: row-reverse;でdt, ddの表示を反転できる
table タグの使い方
tr, th, tdをセットで使う
trタグ→Table row
th→Table head line
td→Table data
<tr>
<th>
<label for=”name”>
</th>
<td>
<input id=”name”>
</tr>
※thタグの中にlabelタグを入れて、for属性を持たせる。tdタグ中のidと同じ名前にすると同じ名前にすると、ラベルにクリックしてもフォームにフォーカスされる
<tr>
<th>
もしくは、tdでまとめてしまっても、同じ機能を持つ
</th>
<td>
<label>
name
<input id=”name”>
</label>
</tr>
※th, tdのグルーピングにデフォルトでtbody
<select>プルダウンメニュー
セレクトされたメニューをバックエンドに通信するときにvalue値を渡す
<select>
<option value=”menu-1”> </option>
<option value=”menu-2”> </option>
</select>
※半角スペース、大文字はない方がいい
カーソルが要素の上にある時に、カーソルポインターを指マークにする
cursor: pointer; を使用する
googleマップの埋め込み
外部ソースの要素をもってくる(別のHTML等)
<iframe src=”URL”>
Googleマップのshare(共有)をクリック→Embed a map(埋め込み地図)→COPY HTML
そのままペースト
svg画像
svg画像とはベクターファイルをHTMLに変換したもの
文字情報で画像を読み込むので、軽い。Javascriptと組み合わせてつかうとすごいことができる?リアルな画像には向いていない
pathが本体で、線情報。
gタグはグルーピングに使う
titleタグは画像の代替テキスト
<svg width=”” height=”” viewBox=”” fill=””>
<path d=”9890…” file=#fff”></path>
</svg>
※fillは背景色
videoタグ
<video src=”URL”></video>
おすすめはvideoタグの中に<souce src=”URL” type=”video/mp4”>
sourceタグの中に入れると並列でいくつかの動画を並べられる
ブラウザによって代替動画を提示する設定になる
<video>タグだけでは勝手に再生されない
<video autoplay loop muted preload>
autoplay→自動再生 loop→繰り返し再生 muted→音なし preload→HTMLが読み込まれたらすぐに動画の読み込みを開始
videoタグのサイズ装飾(CSS)
width: 100vw; height: 100vh;
主要タグまとめ
navタグ
主要なナビゲーションメニューを囲むタグ
ヘッダーメニューに使う
strongタグ
文字を強調する
一ページに1,2回推奨
<small>タグ
コピーライトを囲うためだけのタグ
<hr>タグ
ラインを作るタグ
閉じタグはあってもなくてもいい
<address>タグ
住所を囲うためだけのタグ
<aside></aside>
メインの保管をするために使うタグ。サブ的なもの
セクションタグに近い
<bottom>タグ
aタグはリンクを設置してページ遷移をする目的、ボタンタグは何かしらのアクションを起こすのに設置する。
formタグ
入力欄の設定の際にはformタグを用いる。バックエンドとの連携がうまくいく
<time></time>タグ
時間を表す要素に使用する。date_time属性は、yyy-mm-ddの形式で日付を入れる
例)<time class=”card_time” date_time=”2022-01-01”>2022.01.01<./time>
<figure></figure>
画像とそれを説明するを表示するためのタグ
<figcaption>
図のキャプションを入れる
コメント