HTML/CSS

【HTML・CSS】全部正しく読める?現場で間違えると恥ずかしいタグ・プロパティの読み方

更新日:

【HTML・CSS】全部正しく読める?

HTMLCSSのタグやプロパティ名って、一人で作業している間はなかなか声に出すことってないですよね。(私も含めて独りごと言ってる人も結構いますが)

しかし、きちんと知っておかないと、思わぬところで恥ずかしい思いをしてしまうかもしれません。

クライアントやプロジェクトメンバーと会話する時、間違った読み方をしていると心の中で笑われてしまうかも・・・!(やめて~~!)

 

「いやいや、自分はWeb業界長いから。」

って油断は禁物ですよ!本当に正しく読めていますか?

後輩に「先輩、それ違います・・・」とか心の中で思われていたら泣きたくなりますよ・・・!

伝わればOKといえばOKですが、もごもごっとならないように正しい読みを身につけて、堂々と言葉に発していきましょう!

とはいえ、現場によって慣例化しているものもありますよね。その場合は周りに合わせる方が伝わりやすいので臨機応変に。

「+答え」をクリックすると解答が開きますよ~!難易度のレベルはあくまでも主観です。

 

 

HTML・CSSでよく使うコードの読み方【レベル:★☆☆】

a - リンクの出発点・到達点を指定

<a name="test"></a>

<a href="#test"></a>

+ 答え

正式: アンカー (anchor)

いつもの: 「エータグ」って言ってました。さすがに「アー」とか言う人はいないと思うので(?)ここは大丈夫でしょう。

href - リンク先を指定

<a href="#"></a>

+ 答え

正式: エイチレフ

初めて見たときは「れふ?ん?」って思ってました。

div - 単体では意味を持たないタグ、ひとまとまりを表すのに使用

<div id="container"></div>

+ 答え

正式: ディヴィジョン (division)

いつもの: 略の「ディヴ」を使います。

p - ひとつの段落

<p></p>

+ 答え

正式: パラグラフ (paragraph)

いつもの: 「ピー」ですよね!

alt - 代替テキスト情報

<img src="" alt="text">

+ 答え

正式: オルト (alternative)

img - 画像を表示

<img src="">

+ 答え

正式: イメージ (image)

hover - オンマウス時のスタイルやアクションを指定

div:hover { color: #0b3; }

+ 答え

正式: ホバー

 

HTML・CSSでちょっと読みにくいコード【レベル:★★☆】

src - 要素のソース(URLなど)を指定

<img src="">

+ 答え

正式: ソース (source)

br - 改行

<br>

+ 答え

正式: ブレーク (break)

いつもの: 「ビーアール入れて~」とか言ったりも!

ul - 番号なしリスト

<ul><li></li><li></li></ul>

+ 答え

正式: アンオーダードリスト (unordered list)

いつもの: 「ユーエルにして~」とか言ったり。「ウル」って読みたい・・・

ol - 番号つきリスト

<ol><li></li><li></li></ol>

+ 答え

正式: オーダードリスト (ordered list)

いつもの: 「オーエル」。「オル」って読みたい。

li - リスト

<ul><li></li><li></li></ul>

+ 答え

正式: リストアイテム (list item)

いつもの: リスト。さすがに「」とは言わないですよね・・・

 

height - 高さを指定

div { height: auto; }

+ 答え

正式: ハイト

「ヘイト」じゃないです。

hidden - 隠す

div { overflow: hidden; }

+ 答え

正式: ヒドゥン

 

 

読みにくすぎてみんな違う読みしちゃうコード【レベル:★★★】

width - 横幅を指定

div { width: 100%; }

+ 答え

正式: ウィッズ、ウィドゥス など

動画で見ても何て発音したらいいかわからないんですよね~。ちなみにチームでお仕事してた際は皆さん「ウィドゥス」でした。

動画で見る 英単語 width 発音と読み方

none - 「なし」を指定

div { display: none; }

+ 答え

正式: ナン

「ノン」はnonです。

align - 整列させる

div { text-align: center; }

+ 答え

正式: アライン

linear - 直線の

div { background: linear-gradient(#eee, #666);

+ 答え

正式: リニア

「ライナー」って読みたいですよね。

relative - 相対

div { position: relative;

+ 答え

正式: レラティブ

「リレイティブ」って読んじゃう。

justify - 水平方向の揃え指定

div { text-align: justify; }

+ 答え

正式: ジャスティファイ

「ジャスティフィ」って読めますよね。

 

まとめ

いかがでしたか?全部読めたでしょうか?

それにしても、読みにくいタグやプロパティが多いこと・・・!

読み方がわかれば、コーディングを始めたばかりの方も周りの方に質問しやすいですね。

 

-HTML/CSS
-, , ,

Copyright© Webjo blog , 2020 All Rights Reserved.