独学で未経験からWebデザイナーになるためにやった全てを公開

Webデザイナーが読めないと恥ずかしいHTML・CSSの正しい読み方

Webデザイナーが読めないと恥ずかしいHTML・CSSの正しい読み方

 

HTMLタグやCSSプロパティのコードの書き方は完璧だけど、読み方はあやふやだったりしませんか?

自分の場合は独学だったので、覚えようにも自分が参考にしていた教材には読み方は書いていませんでしたし、周りに聞ける人もいませんでした。

 

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

先輩達の会話を聞いて初めて「こうやって読むんだ…!」と思わされる英語ばかりでした。

読み方が分からない以上自分の勝手な臆測で決めて読んでいましたからね。

そうやって間違えた読み方のまま過ごしていくと大事な場面で恥ずかしい思いをしてしまうかもしれません。

そこで今回はよく使われる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

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

display:none;は「ディスプレイ ナン」と読みます。

nonは「ノン」ですが、noneは「ナン」なんです。

both

ボース」と読みます。

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

 

HTML・CSSを間違った読み方で覚えないように

 

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

実際、Webデザイナーでも間違った読み方をしている人も少なくありません。

自分もそうですが読み方に全くの自信が無いので職場の人が間違った読み方をしていても

  • それ間違ってないか?
  • もしかしてその読み方もあるのか?

なんて思っちゃって迂闊に突っ込む事ができませんよね、

自分の場合はバンバン突っ込まれましたけど。

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

 

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

 

プロが教える!Webデザインスクール選びの決定版

webデザインスクールを探す

デザインスクール選びで困っていませんか? | gifmagazine.net

  webデザイナーとして就職するには、次のスキルが必須でしょう。  
  • illustrator、photoshop
  • HTML・CSS
  • JavaScript

これを見て、「全部できる」人は学校に行く必要はありません

独学でWebデザイナーになれるイメージが 面接や書類選考で必要になるポートフォリオを作成して、就職活動を始めてください。

逆に、「全然イメージが沸かない!」人は学校に行くことをお勧めします。

デザインスクールは時間とお金はかかりますが、この先に好きなことを仕事にするわけですから、先行投資は当然必要で、それも将来取り返すことができるものです。

このサイトでは「WebCamp」がおすすめです。

他にもプロが厳選したおすすめのWebデザインスクールを紹介しているので、ぜひチェックしてみて下さい。

詳細はこちら

↓ ↓ ↓

業界のプロが教えるおすすめWebデザインスクール5選