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

  • 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をコピーしました!
  • URLをコピーしました!
目次