必ず覚えておきたい良く使うHTML、CSSの正しい読み方

僕は独学でHTMLやCSSの学んでいました。

HTMLタグやCSSプロパティのコードの書き方は分かるけど読み方はしっかりと覚えていませんでした。というより覚えようにも自分が参考にしていた教材には読み方は書いていませんでした。

読み方が分からなくてもコードは書けていたので何も気にしていなかったのですが、いざWEB制作会社に入ってみると社内の人と仕事の会話をする時にHTMLタグ名やCSSプロパティ名を言う場面がたくさんあります。

先輩達の会話を聞いて初めて「こうやって読むんだ…!」と思わされる英語ばかりでした。読み方が分からない以上自分の勝手な臆測で決めて読んでいましたからね。そうやって間違えた読み方のまま過ごしていくと大事な場面で恥ずかしい思いをしてしまうかもしれません。そこで今回はよく使われるHTMLタグ、CSSプロパティの正しい読み方をまとめてみました。

<スポンサードリンク>

 

良く使うHTMLタグ編

 

div

ディブ」と読みます。divisionの略

 

h1、h2、h3、h4

「エイチワン」「エイチツー」「エイチスリー」 …etcと読みます。

 

p

ピー」と読みます。

 

a

エー」と読みます。

 

href

エイチレフ」と読みます。僕は最初「ハレフ」と読んでいました。

 

img

イメージ」と読みます。「アイエムジー」と読むところもあります。

 

src

ソース」と読みます。僕は最初「エスアールシー」と読んでました。

 

alt

オルト」と呼びます。僕は最初「アルト」と読んでいました。

 

 br

ブレーク」と読みます。僕は最初「バー」と読んでいました。

 

footer

フッター」と読みます。

 

ul

ユーエル」と読みます。正式名称はアンオーダーリスト

順序リストのolは「オーエル」と読みます。

 

li

リスト」と読みます。上のulとセットで良く使いますね。

 

 

良く使うCSSプロパティ編

 

width

ウィズ」と読みます。他には「ウィドゥス」「ウィトス」といった読み方も。

僕は最初「ワイズ」って読んでました。withと区別するためにわざと「ワイズ」と読む事もあるらしいのですが僕の所では「ウィズ」と統一して読んでいました。

 

height

ハイト」と読みます。僕は最初「ヘイグヒト」と読んでました…恥ずかしい

 

margin

マージン」と読みます。

 

padding

パディング」と読みます。僕は最初「パッディング…!」と力強く読んでました。

 

text-align

テキスト アライン」と読みます。僕は最初「テキスト アリジン」と読んでました。

 

vertical-align

バーティカル アライン」と読みます。僕は最初「バーチカル アリジン」と読んでました。

 

relative

リレイティブ」と読みます。「レラティブ」とも読めるようです。

 

absolute

アブソリュート」と読みます。僕は最初「アブソルト」と読んでました(塩か

 

visibility

ビジビリティ」と読みます。

 

hidden

ヒドゥン」と読みます。僕は最初「ハイデン」と読んでました。

 

clear

クリア」と読みます。

 

text-decoration

テキスト デコレーション」と読みます。

 

text-indent

テキスト インデント」と読みます。

 

letter-spacing

レタースペーシング」と読みます。

 

font-weight

フォント ウェイト」と読みます。

 

display

ディスプレイ」と読みます。

 

both

ボース」と読みます。僕は最初「ボス」と読んでました。

 

間違った読み方で覚えないように

Top_view

学校や人に教えてもらうと読み方も一緒に覚えれますが独学だと中々読み方までは意識がいきません。

実際、間違った読み方をしている人も少なくありません。自分もそうですが読み方に全くの自信が無いので職場の人が間違った読み方をしていても「それ間違ってないか?」「もしかしてその読み方もあるのか?」なんて思っちゃって迂闊に突っ込む事ができませんよね、自分の場合はバンバン突っ込まれましたけど。

何気なく使っているHTMLタグとCSSプロパティですが読み方にも気をつけましょう。

 

※読み方について

日本で使用される「カナ読み」から掲載しているのでネイティブの発音に近い読みを掲載しているわけではありませんのでご注意を。

 

 

スポンサードリンク

WEBデザインのオススメ本・教材

Powered by amaprop.net