意外と読めない・・・HTML/CSS/JavaScript/PHP/WordPressのコードの読み方
授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染みのない発音をするものも少なくありません。そのため、授業中に間違った読み方をしてしまい、「先生、それ違うのでは？」と指摘されてしまったことも正直あります（少し恥ずかしいですが）。こうした経験を重ねるうちに、「正しい読み方を一覧でまとめておけば便利だな」と思うようになりました。
この記事では、HTMLの要素や属性、CSSのプロパティと値について、正しい読み方を整理しました。またPHPに関しても、例えば htmlspecialchars や preg_match など、一見すると読み方に迷ってしまうような関数の名前を取り上げています。併せてWordPressやJavaScriptも加えました。
目次
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 値 | 日本語読み | 説明 |
|---|
bold | ボールド | 太字を指定します。 |
normal | ノーマル | 標準の文字の太さを指定します。 |
italic | イタリック | 斜体を指定します。 |
oblique | オブリーク | 文字を斜めに傾けるスタイル |
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%のサイズを指定します。 |
10px | じゅうピクセル | 10ピクセルのサイズを指定します。 |
2em | にエム | 2エム（フォントサイズの2倍）のサイズを指定します。 |
1rem | いちアールイーエム | 1リム（ルート要素のフォントサイズ）のサイズを指定します。 |
vh | ヴィーエイチ | ビューポートの高さの割合を指定します。 |
vw | ヴィーダブリュー | ビューポートの幅の割合を指定します。 |
JavaScriptの難読・読み方
| 値 | 日本語読み | 説明 |
|---|
| Promise.all | プロミス・オール | 複数のPromiseをまとめて処理し、すべての結果を取得します。 |
| JSON.stringify | ジェイソン・ストリンギファイ | JavaScriptオブジェクトをJSON文字列に変換します。 |
| fetch | フェッチ | リソース（例：API）を非同期で取得するためのメソッド。 |
| async | アシンク | 非同期関数を定義するキーワード。 |
| await | アウェイト | 非同期処理の完了を待つためのキーワード。 |
| ajax | エイジャックス | 非同期通信を指す技術の総称。Asynchronous JavaScript + XML の略。 |
| eval | イーバル | 文字列をJavaScriptコードとして評価・実行します。 |
| NaN | ナン | 「Not-a-Number（数値ではない）」を意味する特殊値。 |
| parseInt | パース・イント | 文字列を整数に変換します。 |
| encodeURIComponent | エンコード・ユーアールアイコンポーネント | URIの一部をエンコード（変換）します。 |
| decodeURIComponent | デコード・ユーアールアイコンポーネント | エンコードされたURIをデコード（復元）します。 |
| setTimeout | セット・タイムアウト | 指定した時間後に一度だけ関数を実行します。 |
| clearInterval | クリア・インターバル | setIntervalで設定されたタイマーを解除します。 |
| Math.random | マス・ランダム | 0から1未満のランダムな数値を生成します。 |
| document.querySelector | ドキュメント・クエリセレクタ | 指定されたCSSセレクタに一致する最初の要素を取得します。 |
| addEventListener | アド・イベントリスナー | 指定したイベントに対するイベントリスナーを追加します。 |
| removeEventListener | リムーブ・イベントリスナー | 指定したイベントリスナーを削除します。 |
| innerHTML | インナー・エイチティーエムエル | HTML要素の内容を取得または設定します。 |
| localStorage | ローカル・ストレージ | ブラウザにデータを永続的に保存するためのAPI。 |
| sessionStorage | セッション・ストレージ | ブラウザにデータを一時的に保存するためのAPI。 |
| XMLHttpRequest | エックス・エム・エル・エイチ・ティー・ティーピー・リクエスト | サーバーとデータをやり取りするための古い非同期通信API。 |
| Array.prototype.map | アレイ・プロトタイプ・マップ | 配列の各要素に関数を適用し、新しい配列を生成します。 |
| Array.prototype.filter | アレイ・プロトタイプ・フィルター | 条件に一致する要素を抽出して新しい配列を生成します。 |
| Array.prototype.reduce | アレイ・プロトタイプ・リデュース | 配列の要素を |
PHPの難読・読み方
| 値 | 日本語読み | 説明 |
|---|
| htmlspecialchars | エイチティーエムエルスペシャルキャラズ | 特殊文字をHTMLエンティティに変換します。 |
| htmlentities | エイチティーエムエルエンティティーズ | すべての適切な文字をHTMLエンティティに変換します。 |
| strtolower | ストローアワー | 文字列をすべて小文字に変換します。 |
| strtoupper | ストラッパー | 文字列をすべて大文字に変換します。 |
| ucwords | ユーシーワードズ | 各単語の先頭文字を大文字にします。 |
| isset | イセット | 変数が設定されているかどうかを判定します。 |
| empty | エンプティ | 値が空かどうかを判定します。 |
| explode | エクスプロード | 文字列を指定した区切り文字で分割し、配列を生成します。 |
| implode | インプロード | 配列の要素を文字列として連結します。 |
| preg_match | プレグマッチ | 正規表現に一致するかどうかを判定します。 |
| preg_replace | プレグリプレース | 正規表現に一致する部分を置換します。 |
| array_merge | アレイマージ | 複数の配列を結合します。 |
| array_slice | アレイスライス | 配列の一部を切り出して返します。 |
| array_key_exists | アレイキーイグジスト | 指定したキーが配列に存在するかを判定します。 |
| json_encode | ジェイソンエンコード | PHPのデータをJSON形式に変換します。 |
| json_decode | ジェイソンデコード | JSON形式の文字列をPHPのデータとして変換します。 |
| file_get_contents | ファイルゲットコンテンツ | ファイルの内容を全て読み込むか、URLからデータを取得します。 |
| file_put_contents | ファイルプットコンテンツ | ファイルにデータを書き込みます。 |
| fopen | エフオープン | ファイルを開きます。 |
| fclose | エフクローズ | 開いたファイルを閉じます。 |
| require | リクワイア | 指定したファイルを読み込みます（エラーが発生するとスクリプトを停止）。 |
| include | インクルード | 指定したファイルを読み込みます（エラーが発生してもスクリプトは続行）。 |
| require_once | リクワイアワンス | ファイルを一度だけ読み込みます（エラーが発生するとスクリプトを停止）。 |
| include_once | インクルードワンス | ファイルを一度だけ読み込みます（エラーが発生してもスクリプトは続行）。 |
| session_start | セッションスタート | 新しいセッションを開始するか、既存のセッションを再開します。 |
| session_destroy | セッションデストロイ | 現在のセッションを破棄します。 |
| header | ヘッダー | HTTPヘッダーを送信します。 |
| setcookie | セットクッキー | クッキーを送信します。 |
| count | カウント | 配列またはオブジェクトの要素の数を取得します。 |
| strlen | ストレン | 文字列の長さを取得します。 |
WordPressの難読・読み方
| 値 | 日本語読み | 説明 |
|---|
| the_title | ザ・タイトル | 現在の投稿またはページのタイトルを取得します。 |
| the_content | ザ・コンテント | 現在の投稿またはページの本文を取得します。 |
| the_excerpt | ザ・エクセプト | 投稿の抜粋を取得します。 |
| wp_enqueue_script | ダブリューピー・エンクキュー・スクリプト | JavaScriptファイルを登録し、キューに追加します。 |
| wp_enqueue_style | ダブリューピー・エンクキュー・スタイル | CSSファイルを登録し、キューに追加します。 |
| wp_register_script | ダブリューピー・レジスター・スクリプト | JavaScriptファイルを登録しますが、キューには追加しません。 |
| wp_register_style | ダブリューピー・レジスター・スタイル | CSSファイルを登録しますが、キューには追加しません。 |
| add_action | アド・アクション | WordPressの特定のタイミングで関数を実行します。 |
| add_filter | アド・フィルター | 特定のフィルターフックに関数を追加します。 |
| remove_action | リムーブ・アクション | 特定のアクションフックから関数を削除します。 |
| remove_filter | リムーブ・フィルター | 特定のフィルターフックから関数を削除します。 |
| is_singular | イズ・シンギュラー | 現在表示されているページが単一投稿ページかどうかを判定します。 |
| is_archive | イズ・アーカイブ | 現在表示されているページがアーカイブページかどうかを判定します。 |
| is_front_page | イズ・フロントページ | 現在表示されているページがフロントページかどうかを判定します。 |
| get_post_meta | ゲット・ポストメタ | 投稿のカスタムフィールド（メタデータ）を取得します。 |
| update_post_meta | アップデート・ポストメタ | 投稿のカスタムフィールド（メタデータ）を更新します。 |
| delete_post_meta | デリート・ポストメタ | 投稿のカスタムフィールド（メタデータ）を削除します。 |
| wp_head | ダブリューピー・ヘッド | テーマの<head>内にコードを挿入します。 |
| wp_footer | ダブリューピー・フッター | テーマの<footer>内にコードを挿入します。 |
| register_post_type | レジスター・ポストタイプ | カスタム投稿タイプを登録します。 |
| register_taxonomy | レジスター・タクソノミー | カスタム分類を登録します。 |
| get_template_part | ゲット・テンプレートパート | テーマのテンプレートファイルを分割して読み込みます。 |
| locate_template | ロケート・テンプレート | 指定されたテンプレートファイルをテーマ内で検索し、パスを取得します。 |
| the_permalink | ザ・パーマリンク | 現在の投稿またはページのURL（パーマリンク）を取得します。 |
| get_the_ID | ゲット・ザ・アイディー | 現在の投稿またはページのIDを取得します。 |
| wp_nonce_field | ダブリューピー・ナンスフィールド | フォームのセキュリティチェック用フィールドを生成します。 |
| wp_create_nonce | ダブリューピー・クリエイト・ナンス | 一意のトークン（nonce）を生成します。 |
| check_admin_referer | チェック・アドミンリファーラー | 管理画面のリクエストが正当かどうかをチェックします。 |
| wp_verify_nonce | ダブリューピー・ベリファイ・ナンス | 提供されたトークン（nonce）が有効かを確認します。 |
| wp_redirect | ダブリューピー・リダイレクト | 別のURLにリダイレクトします。 |
| get_option | ゲット・オプション | 設定オプションの値を取得します。 |
| update_option | アップデート・オプション | 設定オプションの値を更新します。 |
| delete_option | デリート・オプション | 設定オプションの値を削除します。 |
| current_user_can | カレント・ユーザキャン | 現在のユーザーが特定の権限を持っているかを判定します。 |
| wp_list_pages | ダブリューピー・リストページズ | ページのリストを生成します。 |
| wp_nav_menu | ダブリューピー・ナブメニュー | 登録済みのナビゲーションメニューを表示します。 |
| the_category | ザ・カテゴリー | 現在の投稿が属するカテゴリーを取得します。 |
| get_the_tags | ゲット・ザ・タグズ | 現在の投稿が属するタグを取得します。 |
| has_post_thumbnail | ハズ・ポスト・サムネイル | 現在の投稿がサムネイル画像を持っているかを判定します。 |
| get_post_thumbnail_id | ゲット・ポスト・サムネイルアイディー | サムネイル画像のIDを取得します。 |
| the_post_thumbnail | ザ・ポスト・サムネイル | 現在の投稿のサムネイル画像を表示します。 |
| wp_get_attachment_url | ダブリューピー・ゲットアタッチメントURL | メディアライブラリ内の添付ファイルのURLを取得します。 |
| add_menu_page | アド・メニューページ | 管理画面にカスタムメニューページを追加します。 |
| add_submenu_page | アド・サブメニューページ | カスタムメニューのサブメニューを追加します。 |
| remove_menu_page | リムーブ・メニューページ | 管理画面のメニューを削除します。 |
| remove_submenu_page | リムーブ・サブメニューページ | 管理画面のサブメニューを削除します。 |
| wp_schedule_event | ダブリューピー・スケジュールイベント | スケジュールされたイベントを登録します。 |
| wp_clear_scheduled_hook | ダブリューピー・クリアスケジュールドフック | スケジュールされたイベントを解除します。 |
