HTMLのコード一覧【Progate初級～上級 ₊α 】

この記事では、Progateの初級、中級、上級までのHTML学習レッスンの内容を簡潔にまとめる。

プログラミング初学者に活用していただきたい。

本記事を書く目的はプログラミングをそれほど使わない私が、コードを書く時の参考に見たり、一度覚えた内容を忘れないよう留めておく程度である。

HTML コード一覧
追記

HTML コード一覧

Progateの初級、中級、上級のレッスンに出てきたコードの一覧を羅列する

見出し　heading

…

段落　paragraph

<p></p>

見出し以外の文

コメント　表示されない

<!– — >

・リンク

<a href=”url”>　※開始タグに設定でURLを表示

※属性タグ指定の時にはダブルクオーテーション

画像

<img src=”url”>※閉じタグなし

要素

<○○ class=””>

※CSSの要素特定に使用

構成タグ

<!DOCTYPE html>→HTMLのバージョン指定※定型文

<html>

<head>→WEBページの設定、表示されない

<title>~~~~</title>　②ページタイトル※ブラウザ上タブで現れる

</head>

<body>

</body>

</footer>

</html>

要素のグループ化　division

同じ行で装飾を変える　インライン要素

1行のテキストを受け取る

<input> ※閉じタグ不要

<input type=”submit” value=”○○”>　※送信ボタン、デフォルトで”送信”

複数行のテキスト入力を受け取る

クラスの簡易表現

複数のクラスを指定

<div class=”btn, blue”>…

アイコンフリー素材の使用

①headタグ中に、CSSを読み込むための記述をする

②spanタグにfaクラスとfa-アイコン名クラスを指定する（サイトに掲載）

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

レスポンシブデザインを適用する

viewportを設定することでスマホ、タブレットでメディアクエリを機能させる

headタグ中に下記コードを入れる。

※メディアクエリ記述のCSSファイルの読み込みコード(<link rel=…)より上に記述

追記

これまで、HTMLコードでウェブサイトを作成する中で、追加でコードを覚える必要性が出てきたため、追記する。

ウェブフォントを入れる

Google Fontsdがおすすめ。Noto Sans Japanese　よく使われるおしゃれフォント

Stylen regular400 bold700が基本。選んで、<link>→出てきたコードをコピー

→headタグの中にそのまま張り付け

→font-family・・・のほうをコピーしてCSSファイルに張り付け

※ネット環境によっては指定のフォントが読み込まれないことがある。その時の代替フォントを自動で切り替えてくれるコードをネットから探して、同様にCSSファイルに張り付け。

リンクを別タブで開く設定

aタグ中にtarget=”_blank”を入れる

例）

idで要素を指定する

class=”・・・”で要素を指定しているところをid=”・・・”とすることができる

CSSではidで指定した場合下記の通り、頭に#がつく。

idは一つのファイルに同名のidは１つしか存在できない。高速処理時に有効

→CSSではidはいらない

#id名 {

表示内容

}

<dl>データリスト　タグの使い方

小見出しとデータ（画像）を紐づける

ddの前にdtを置く必要がある

例）

<dl>

</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>

</th>

<td>

</tr>

※thタグの中にlabelタグを入れて、for属性を持たせる。tdタグ中のidと同じ名前にすると同じ名前にすると、ラベルにクリックしてもフォームにフォーカスされる

<tr>

<th>

もしくは、tdでまとめてしまっても、同じ機能を持つ

</th>

<td>

<label>

name

</label>

</tr>

※th, tdのグルーピングにデフォルトでtbody

<select>プルダウンメニュー

セレクトされたメニューをバックエンドに通信するときにvalue値を渡す

</select>

※半角スペース、大文字はない方がいい

カーソルが要素の上にある時に、カーソルポインターを指マークにする

cursor: pointer;　を使用する

googleマップの埋め込み

外部ソースの要素をもってくる（別のHTML等）

Googleマップのshare(共有）をクリック→Embed a map（埋め込み地図）→COPY HTML

そのままペースト

svg画像

svg画像とはベクターファイルをHTMLに変換したもの

文字情報で画像を読み込むので、軽い。Javascriptと組み合わせてつかうとすごいことができる？リアルな画像には向いていない

pathが本体で、線情報。

gタグはグルーピングに使う

titleタグは画像の代替テキスト

</svg>

※fillは背景色

videoタグ

おすすめはvideoタグの中に<souce src=”URL” type=”video/mp4”>

sourceタグの中に入れると並列でいくつかの動画を並べられる

ブラウザによって代替動画を提示する設定になる

<video>タグだけでは勝手に再生されない

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>

図のキャプションを入れる