HTMLやCSSのタグやプロパティ名って、一人で作業している間はなかなか声に出すことってないですよね。(私も含めて独りごと言ってる人も結構いますが)
しかし、きちんと知っておかないと、思わぬところで恥ずかしい思いをしてしまうかもしれません。
クライアントやプロジェクトメンバーと会話する時、間違った読み方をしていると心の中で笑われてしまうかも･･･！(やめて～～！)
「いやいや、自分はWeb業界長いから。」
って油断は禁物ですよ！本当に正しく読めていますか？
後輩に「先輩、それ違います･･･」とか心の中で思われていたら泣きたくなりますよ･･･！
伝わればOKといえばOKですが、もごもごっとならないように正しい読みを身につけて、堂々と言葉に発していきましょう！
とはいえ、現場によって慣例化しているものもありますよね。その場合は周りに合わせる方が伝わりやすいので臨機応変に。
※「＋答え」をクリックすると解答が開きますよ～！難易度のレベルはあくまでも主観です。
このページで紹介している内容
HTML・CSSでよく使うコードの読み方【レベル：★☆☆】
a - リンクの出発点・到達点を指定
<a name="test"></a>
<a href="#test"></a>
href - リンク先を指定
<a href="#"></a>
div - 単体では意味を持たないタグ、ひとまとまりを表すのに使用
<div id="container"></div>
p - ひとつの段落
<p></p>
alt - 代替テキスト情報
<img src="" alt="text">
img - 画像を表示
<img src="">
hover - オンマウス時のスタイルやアクションを指定
div:hover { color: #0b3; }
HTML・CSSでちょっと読みにくいコード【レベル：★★☆】
src - 要素のソース(URLなど)を指定
<img src="">
br - 改行
<br>
ul - 番号なしリスト
<ul><li></li><li></li></ul>
ol - 番号つきリスト
<ol><li></li><li></li></ol>
li - リスト
<ul><li></li><li></li></ul>
height - 高さを指定
div { height: auto; }
div { overflow: hidden; }
読みにくすぎてみんな違う読みしちゃうコード【レベル：★★★】
width - 横幅を指定
div { width: 100%; }
none - 「なし」を指定
div { display: none; }
align - 整列させる
div { text-align: center; }
linear - 直線の
div { background: linear-gradient(#eee, #666);
relative - 相対
div { position: relative;
justify - 水平方向の揃え指定
div { text-align: justify; }
まとめ
いかがでしたか？全部読めたでしょうか？
それにしても、読みにくいタグやプロパティが多いこと･･･！
読み方がわかれば、コーディングを始めたばかりの方も周りの方に質問しやすいですね。