【初心者向け】HTMLやCSSを勉強している時に困る「タグの読み方」を教えます!

プログラミング
スポンサーリンク

プログラミングを勉強しているといろんなタグ?が出てきます。

なんとなく読んで覚えていますが、本当に読み方が合っているのか不安です。

読み方一覧とか合ったら嬉しいなと思っていますがそう言うのないでしょうか?

こんばんは。

としひこです。

今回はこのような疑問にお答えしていこうと思います。

この記事を読むことで、代表的な「HTMLとCSS」のタグの読み方がわかるようになります。

私もプログラミング勉強をしている中で、読み方がわからなくて覚えにくいタグがたくさん合ったので、同じような悩みを持つ人に役立つコンテンツを提供しようと思いました。

この記事を活用していただき、タグの正しい読み方を身につけて勉強効率をさらに加速していただけると幸いです。

スポンサーリンク

HTMLタグの読み方

最初は基本中の基本であり、一番よく使うと思うHTMLのタグについてお話をしていきます。

a

このタグは、<a></a>のように使う物です。

リンクの出発点や到達点を指定するためのタグです。

読み方は、「アンカー」です。

私はずっと「エータグ」と言ってましたw

p

このタグは、<p></p>のように使います。

段落を指定するためのタグです。

読み方は、「パラグラフ」です。

いわゆる「ピータグ」ですね。

href

このタグは、<a href=“#”></a>のように使います。

リンク先を指定するタグです。

読み方は、「エイチレフ」とです。

div

このタグは、<div></div>のように使う物です。

コンテンツを一つのグループ化するために使うタグです。

読み方は、「ディビジョン」です。

いつもの読み方は、「ディブタグ」と言ってます。

alt

このタグは、<img src=“リンク名” alt=“テキスト”>のように使います。

画像にテキスト属性を持たせることができる代替テキストのタグです。

読み方は、「オルト」とです。

img

このタグは、<img src=“リンク名”>のように使います。

画像を表示するためのタグになります。

読み方は、「イメージ」です。

src

このタグは、<img src=“リンク名”>のように使います。

表示したい画像があるリンクを指定するタグです。

読み方は、「ソース」です。

br

このタグは、<br>のように使います。

文章の改行をする時に使うタグです。

読み方は、「ブレーク」です。

ul

このタグは、<ul>のように使います。

番号をつけないリストにしたい時に使うタグです。

・〇〇〇〇

・〇〇〇〇

・〇〇〇〇

のようなリストにしたい時に使います。

読み方は、「アンオーダードリスト」です。

いつもの読み方は、「ユーエル」です。

ol

このタグは、<ol>のように使います。

番号をつけるリストにしたい時に使うタグです。

1.〇〇〇〇

2.〇〇〇〇

3.〇〇〇〇

のようなリストにしたい時に使います。

読み方は、「オーダードリスト」です。

いつもの読み方は、「オーエル」です。

li

このタグは、

<ul>

<li></li>

<li></li>

<li></li>

</ul>

のように使います。

Ulタグかolタグの中に入れて使うタグで、リストを増やしたい分だけ追加できる物です。

読み方は、「リストアイテム」です。

いつもの読み方は、「リスト」です。

CSSプロパティの読み方

HTMLの装飾に使うCSSもかなりよく使うので

hover

このタグは、btn:hover{ などのように使用します。

マウスをアイコンの上などに置いた時の変化を指定するタグです。

読み方は、「ホバー」と言います。

height

このタグは、

div{

Height:auto;

}

のように使います。

高さを指定する時に使うタグです。

読み方は、「ハイト」です。

hidden

このタグは、

div{

overflow:hidden

}

のように使います。

このタグは、表に表示されない情報をデータとして送信できるようにするタグです。

読み方は、「ヒドゥン」です。

width

このタグは、

Div{

Width:50%;

}

のように使います。

横幅を指定するために使用します。

読み方は、「ウィドゥス」です。

私は、間違って「ワイズ」と読んでいましたw

none

このタグは、

Div{

Display:none;

}

のように使います。

要素を非表示にしたりする時に使います。

読み方は、「ナン」です。

今までずっと「ノーン」って読んでましたw

align

このタグは、

Div{

Text-align: left

}

のように使います。

Left、right、centerなどのように指定するとその通りに整列できるタグです。

読み方は、「アライン」です。

今まで、「アリギン」って読んでて恥ずかしい思いをしましたw

タグの読み方を正しく覚える重要性について

ここまででいかがでしたでしょうか?

ほとんどのタグは正しく覚えていましたか?

私はかなり間違った読み方で覚えていたので、しっかりと覚え直しました。

これ以外にもまだまだたくさんのタグがあります。

なぜタグを正しく読むことが大切なのか?

これは、単独で作業をしているなら関係ないのですが、チームで仕事をしたりお客さんから仕事をもらう際に必ずコミュニケーションが必要になってくるからです。

言葉がしっかりと通じないと、設計ミスや伝達ミスによる仕事のミスが連発します。

これでは、まともに仕事ができないので共通認識である読み方をしっかりと覚えておく必要があります。

プログラミングを教える上でも重要

タグの読み方は、プログラミングを教える人にも必要です。

生徒に教えるときは必ず読まないと伝わらないので、正確な読み方を伝える義務もあります。

生徒たちが間違えて覚えないようにしっかりと読み方をマスターする必要があります。

タイトルとURLをコピーしました