意外と読めない・・・HTML/CSSのコードの読み方

2024年7月19日2024年12月10日

URLをコピーしました！

生徒さんによく質問されるHTMLやCSSの読み方をまとめてみました。意外と特殊な読み方をするHTML要素や属性、そしてCSSのプロパティや値があります。「え？こんな読み方？」と思うものも少なくありません。授業で間違った読み方をしないように調べて説明するのですが、思い込みで読んでしまい、「先生、それ違うのでは？」と言われたこともあります（恥）。私自身の備忘録としても確認できるように、下記にHTML要素や属性の読み方、CSSのプロパティとその値の読み方をまとめてみました。

HTML要素の読み方

バージョン宣言

HTML要素	日本語読み
`<!DOCTYPE html>`	ドキュメントタイプ宣言（DOCTYPE宣言）
`DOCTYPE`	ドックタイプ

一般要素

HTML 要素	日本語読み
`<a>`	エー
`<b>`	ビー
`<i>`	アイ
`<u>`	ユー
`<p>`	ピー
`<h1>`	エッチワン
`<h2>`	エッチツー
`<h3>`	エッチスリー
`<div>`	ディブ
`<span>`	スパン
`<img>`	イメージ
`<br>`	ビーアール
`<hr>`	エイチアール
`<ul>`	ユーエル
`<ol>`	オーエル
`<li>`	エルアイ
`<table>`	テーブル
`<tr>`	ティーアール
`<td>`	ティーディー
`<th>`	ティーエイチ
`<form>`	フォーム
`<input>`	インプット
`<button>`	ボタン
`<label>`	ラベル
`<select>`	セレクト
`<option>`	オプション
`<textarea>`	テキストエリア

メタ要素

HTML 要素	日本語読み
`<meta>`	メタ
`<title>`	タイトル
`<link>`	リンク
`<style>`	スタイル
`<script>`	スクリプト
`<head>`	ヘッド
`<body>`	ボディ

セマンティック要素

HTML 要素	日本語読み
`<header>`	ヘッダー
`<nav>`	ナビ
`<section>`	セクション
`<article>`	アーティクル
`<aside>`	アサイド・エーサイド
`<footer>`	フッター
`<main>`	メイン
`<figure>`	フィギュア
`<figcaption>`	フィグキャプション
`<details>`	ディテール
`<summary>`	サマリー
`<time>`	タイム
`<mark>`	マーク

その他の要素

HTML 要素	日本語読み
`<audio>`	オーディオ
`<video>`	ビデオ
`<canvas>`	キャンバス
`<svg>`	エスブイジー
`<iframe>`	アイフレーム

HTML属性の読み方

一般属性

HTML 属性	日本語読み
`id`	アイディー
`class`	クラス
`style`	スタイル
`title`	タイトル
`lang`	ラング
`dir`	ディレクション
`data-*`	データ

イベント属性

HTML 属性	日本語読み
`onclick`	オンクリック
`ondblclick`	オンダブルクリック
`onmousedown`	オンマウスダウン
`onmouseup`	オンマウスアップ
`onmouseover`	オンマウスオーバー
`onmouseout`	オンマウスアウト
`onmousemove`	オンマウスムーブ
`onkeydown`	オンキーダウン
`onkeypress`	オンキープレス
`onkeyup`	オンキーアップ
`onfocus`	オンフォーカス
`onblur`	オンブルー
`onchange`	オンチェンジ
`oninput`	オンインプット
`onsubmit`	オンサブミット
`onreset`	オンリセット
`onresize`	オンリサイズ
`onscroll`	オンスクロール

フォーム属性

HTML 属性	日本語読み
`action`	アクション
`method`	メソッド
`enctype`	エンタイプ
`autocomplete`	オートコンプリート
`name`	ネーム
`value`	バリュー
`placeholder`	プレースホルダー
`required`	リクワイアード
`readonly`	リードオンリー
`disabled`	ディセーブルド
`maxlength`	マックスレングス
`minlength`	ミンレングス
`pattern`	パターン

リンク属性

HTML 属性	日本語読み
`href`	エイチレフ
`target`	ターゲット
`rel`	レル
`download`	ダウンロード

画像属性

HTML 属性	日本語読み
`src`	ソース
`alt`	オルト
`width`	ウィズ
`height`	ハイト

テーブル属性

HTML 属性	日本語読み
`colspan`	コルスパン
`rowspan`	ロウスパン
`cellpadding`	セルパディング
`cellspacing`	セルスペーシング

その他の属性

HTML 属性	日本語読み
`charset`	キャラセット
`srcset`	ソースセット
`sizes`	サイズ
`type`	タイプ
`media`	メディア
`defer`	ディファー
`async`	アシンク
`content`	コンテンツ
`http-equiv`	エイチティーティーレブ

CSSプロパティの読み方

基本プロパティ

CSS プロパティ	日本語読み
`color`	カラー
`background`	バックグラウンド
`background-color`	バックグラウンドカラー
`width`	ウィズ
`height`	ハイト
`margin`	マージン
`padding`	パディング
`border`	ボーダー
`font-size`	フォントサイズ
`font-family`	フォントファミリー
`text-align`	テキストアライン

レイアウト

CSS プロパティ	日本語読み
`display`	ディスプレイ
`position`	ポジション
`top`	トップ
`right`	ライト
`bottom`	ボトム
`left`	レフト
`float`	フロート
`clear`	クリア
`z-index`	ゼットインデックス

ボックスモデル

CSS プロパティ	日本語読み
`box-sizing`	ボックスサイジング
`margin-top`	マージントップ
`margin-right`	マージンライト
`margin-bottom`	マージンボトム
`margin-left`	マージンレフト
`padding-top`	パディングトップ
`padding-right`	パディングライト
`padding-bottom`	パディングボトム
`padding-left`	パディングレフト
`border-top`	ボーダートップ
`border-right`	ボーダーライト
`border-bottom`	ボーダーボトム
`border-left`	ボーダーレフト
`border-radius`	ボーダーレディアス

フォントとテキスト

CSS プロパティ	日本語読み
`font-weight`	フォントウェイト
`font-style`	フォントスタイル
`text-decoration`	テキストデコレーション
`line-height`	ラインハイト
`letter-spacing`	レタースペーシング
`text-transform`	テキストトランスフォーム

背景と境界

CSS プロパティ	日本語読み
`background-image`	バックグラウンドイメージ
`background-repeat`	バックグラウンドリピート
`background-position`	バックグラウンドポジション
`border-width`	ボーダーウィズ
`border-style`	ボーダースタイル
`border-color`	ボーダーカラー

フレックスボックス

CSS プロパティ	日本語読み
`display`	ディスプレイ
`flex-direction`	フレックスディレクション
`flex-wrap`	フレックスラップ
`justify-content`	ジャスティファイコンテンツ
`align-items`	アラインアイテム
`align-content`	アラインコンテンツ

グリッドレイアウト

CSS プロパティ	日本語読み
`display`	ディスプレイ
`grid-template-columns`	グリッドテンプレートカラム
`grid-template-rows`	グリッドテンプレートロー
`grid-gap`	グリッドギャップ
`justify-items`	ジャスティファイアイテム
`align-items`	アラインアイテム

トランジションとアニメーション

CSS プロパティ	日本語読み
`transition`	トランジション
`transition-property`	トランジションプロパティ
`transition-duration`	トランジションデュレーション
`transition-timing-function`	トランジションタイミングファンクション
`animation`	アニメーション
`animation-name`	アニメーションネーム
`animation-duration`	アニメーションデュレーション
`animation-timing-function`	アニメーションタイミングファンクション
`animation-delay`	アニメーションディレイ
`animation-iteration-count`	アニメーションイテレーションカウント

その他

CSS プロパティ	日本語読み
`opacity`	オパシティ
`visibility`	ビジビリティ
`overflow`	オーバーフロー
`cursor`	カーソル

CSSの「値」の読み方

カラー関連

CSS 値	日本語読み	説明
`red`	レッド	赤色を指定します。
`blue`	ブルー	青色を指定します。
`green`	グリーン	緑色を指定します。
`black`	ブラック	黒色を指定します。
`white`	ホワイト	白色を指定します。
`gray`	グレー	灰色を指定します。
`rgba(0, 0, 0, 0.5)`	アールジービーエーゼロ, ゼロ, ゼロ, ゼロポイントファイブ	赤、緑、青、および透明度を指定する色。0から1の範囲で透明度を設定します。
`#ffffff`	シャープエフエフエフエフエフエフ	16進数の白色を指定します。
`#000000`	シャープゼロゼロゼロゼロゼロゼロ	16進数の黒色を指定します。

文字関連

CSS 値	日本語読み	説明
`bold`	ボールド	太字を指定します。
`normal`	ノーマル	標準の文字の太さを指定します。
`italic`	イタリック	斜体を指定します。
`small-caps`	スモールキャップス	小さい大文字で表示します。
`uppercase`	アッパーケース	すべて大文字に変換します。
`lowercase`	ローワーケース	すべて小文字に変換します。
`underline`	アンダーライン	下線を引きます。
`line-through`	ラインスルー	文字に取り消し線を引きます。
`none`	ノーン	テキストデコレーションを除去します。

ディスプレイ関連

CSS 値	日本語読み	説明
`block`	ブロック	ブロックレベル要素として表示します。
`inline`	インライン	インライン要素として表示します。
`inline-block`	インラインブロック	インライン要素として表示し、ブロック要素の特性も持ちます。
`flex`	フレックス	フレックスボックスコンテナとして表示します。
`grid`	グリッド	グリッドコンテナとして表示します。
`none`	ノーン	要素を非表示にします。

ポジション関連

CSS 値	日本語読み	説明
`relative`	リレイティブ	要素を通常の位置から相対的に配置します。
`absolute`	アブソリュート	最も近い位置決めされた先祖要素に対して絶対位置に配置します。
`fixed`	フィクスト	ビューポートに対して固定位置に配置します。
`sticky`	スティッキー	スクロールに応じて要素を固定します。
`static`	スタティック	通常のフローに従って配置します。

テキスト配置関連

CSS 値	日本語読み	説明
`left`	レフト	左揃えにします。
`right`	ライト	右揃えにします。
`center`	センター	中央揃えにします。
`justify`	ジャスティファイ	両端揃えにします。

フレックスボックス関連

CSS 値	日本語読み	説明
`flex-start`	フレックススタート	主軸の先頭に揃えます。
`flex-end`	フレックスエンド	主軸の終端に揃えます。
`center`	センター	中央に揃えます。
`space-between`	スペースビトウィーン	要素間に均等にスペースを配置します。
`space-around`	スペースアラウンド	要素間および要素の周りに均等にスペースを配置します。
`wrap`	ラップ	フレックスアイテムを複数行に折り返します。
`nowrap`	ノーラップ	フレックスアイテムを単一行に配置します。

その他の値

CSS 値	日本語読み	説明
`auto`	オート	自動で計算された値を指定します。
`inherit`	インヘリット	親要素から値を継承します。
`initial`	イニシャル	初期値を指定します。
`hidden`	ヒドゥン	要素を表示しないようにします。
`visible`	ビジブル	要素を表示します。
`scroll`	スクロール	コンテンツがはみ出すとスクロールバーを表示します。
`fixed`	フィクスト	要素を固定位置に配置します。

サイズ関連

CSS 値	日本語読み	説明
`100%`	ひゃくパーセント	親要素の100%のサイズを指定します。
`50%`	ごじゅうパーセント	親要素の50%のサイズを指定します。
`0`	ゼロ	ゼロのサイズを指定します。
`10px`	じゅうピクセル	10ピクセルのサイズを指定します。
`2em`	にエム	2エム（フォントサイズの2倍）のサイズを指定します。
`1rem`	いちアールイーエム	1リム（ルート要素のフォントサイズ）のサイズを指定します。
`vh`	ヴィーエイチ	ビューポートの高さの割合を指定します。
`vw`	ヴィーダブリュー	ビューポートの幅の割合を指定します。

よかったらシェアしてね！

URLをコピーしました！