Web業界の仕事Tips

あなたの読み方はあっている?よく耳にするHTML/CSS用語の誤った読み方

Web制作の現場で必須のHTMLタグやCSSプロパティ。仕事中に、効率的かつ適確に記述されたうつくしいコーディングを書いて、「○○さんのコードって、本当にキレイですよね。」と、褒められたら何ともうれしい気持ちになりますよね。しかし、いざ説明する場面で言い間違えてしまったら…、ちょっと恥ずかしい思いをしてしまうかも。英語とも少し違う独自の読み方も存在するので、仕事中に自分独自の読み方で覚えてしまっているなら、今が見直すチャンスです。読み間違いを指摘される前に、用語の読み方と語源も一緒にマスターしてしまいましょう。

01.HTMLタグとCSSプロパティの言い間違いって恥ずかしい!

Web制作の現場で必須のHTMLタグやCSSプロパティ。仕事中に、効率的かつ適確に記述されたうつくしいコーディングを書いて、「○○さんのコードって、本当にキレイですよね。」と、褒められたら何ともうれしい気持ちになりますよね。しかし、いざ説明する場面で言い間違えてしまったら…、ちょっと恥ずかしい思いをしてしまうかも。英語とも少し違う独自の読み方も存在するので、仕事中に自分独自の読み方で覚えてしまっているなら、今が見直すチャンスです。読み間違いを指摘される前に、用語の読み方と語源も一緒にマスターしてしまいましょう。

02.【HTMLタグ】今さらだけど読み方をおさらいしよう!初級編

02-01 a

一般的に「エータグ」と読みます。「anchor(アンカー)」は英語で船の碇を意味し、リンクを指定するHTMLタグです。

02-02 href

読み方は「エイチレフ」。使用頻度の高いタグですが、正しく読めていますか?「ハーフ」や「ヘーフ」ではありませんのでご注意を。「href(エイチレフ)」は「Hypertext REFerence」の略語です。

02-03 img src

正しい読み方は「イメージ」です。正式名称を完全に無視して「がぞう」とそのままで呼ぶ人も。「img」の属性である「src」は「source」の略語で、日本語では出典や資料など、情報源を意味します。GIF、JPEG、PNGなどの画像ファイルを指定します。

02-03 DOCTYPE

文章の先頭に記述される宣言の種類を表す予約名のことで、「ドックタイプ」と読みます。正式にはタグではありませんが、htmlの前に記述されます。文書型宣言であることを示しているので、あえて正式名称を使わずに「宣言文」と言ってみましょう。Web制作現場のプロっぽくなります。

02-04 その他基本的なHTMLタグ一覧を復習!

当たり前すぎて、スペルで認識しているHTMLタグを今一度再確認!一緒に読み方も覚えてしまいましょう。

alt属性

読み方は「オルト」。キーボードにもありますが、「アルト」と正しい読み方をスルーしたまま覚えている人が多いかもしれません。画像の代わりとなるテキストを指定可能です。

br

読み方は「ビーアール」が一般的で、「Break」の略です。自己流で覚えた場合、「バー」と頭の中で読んでいるかも。改行を指定するHTMLタグです。

ol

「オーエル」、「オーダードリスト」と読みます。と読みます。「Ordered List」の略で、順序のあるリスト表示する際に使用するHTMLタグです。

ul

「アンオーダードリスト」と読みます。「unordered list」の略で、番号抜きのリストを作るHTMLタグです。

em

「エンファシス」と読みます。「Emphasis」の略で、英語での意味は重点。強調斜体文字を指定するHTMLタグです。

q

読み方は「クォート」です。「Quote」の略で英語では見積もりという意味です。引用文であることを示すHTMLタグです。

sup

「スーパースクリプト」と読みます。「Superscript」の略語で上付き文字を表示するHTMLタグです。

dfn

読み方は「ディフィニション」で、「Definition」の略語です。定義する用語を明示するHTMLタグです。

03.【CSSプロパティ】プロでも読めない?!難易度高め編

03-01 width

HTMLコーダーや、Webエンジニアの間で真っ先に話題になるが「width」。読み方は「ウィズ」、または「ウィドゥス」が正解です。「ワイズ」や「ウィドス」なんて呼んでいませんか?発音も難しいので、音声付きのオンライン辞書で一度確認してみましょう。語尾の「ス」は聞こえるか聞こえないかくらいの発音です。横幅を設定する使用頻度の高いプロパティで、使い勝手も抜群です。

03-02 absolute

読み方は「アブソリュート」です。単独で使うことはほぼありません。ボックスの基準位置を、相対位置か絶対位置か指定するときに使用する、positionとセットで使われる値です。「アブソルート」と“r”の発音を忘れてしまいそうになりますが、意外に読めている方が多いプロパティです。

03-03 relative

シンプルに「レラティブ」と読みます。相対的な・相関的な、という意味を持ち、子要素にabsolute(絶対位置)を設定する場合によく使用されます。そのまま読むと「リレイティブ」と発音したくなりますが違うので注意しましょう。

04.【CSSプロパティ】ローマ字読みそのままで読んでしまうスタイル編

04-01 height

読み方は「ハイト」が正解です。「ヘイト」など、「orange」=“オランゲ”的なローマ字読みで「ヘイグヒト」とも読みたくなりますがご注意を。縦幅を設定する際に使用し、widthほどではありませんが使用頻度の高いプロパティです。

04-02 hidden

「ヒドゥン」と読みます。「ヒデン」と発音してしまいそうですが、カッコ悪いのでしっかりここで覚えてしまいましょう。プログラムに値を渡したいけれど、ブラウザには表示させたくない場合に使用します。頻度は多くありませんが、displayプロパティの値に設定することも可能です。

04-03 align

読み方は「アライン」が正解です。「アリグン」や「オリジン」は間違いですよ!“g”は発音しないので注意しましょう。単語の意味は「整列」という意味で、行揃えの位置や均等割付を指定するときに使います。

04-04 justify

「ジャスティフィー」と読んでしまっている人が多いかもしれませんが、正解は「ジャスティファイ」です。プロパティの使い方は、Chrome・Safari・Firefoxの場合は「text-align: justify」を指定すれば均等割付できます。IEの場合は、「text-align: justify」に加えて「text-justify: inter-ideograph」を指定しましょう。

04-05 border-radius

「レイジアス」、「レイディアス」と読むのが正解です。「ラディアス」、「ラディウス」と読み間違えている人も多いのでは。画像でボックスのコーナーを角丸にしていたのを、「border-radius」を使えば簡単に表現が可能です。

05.基本用語の読み方や語源もおさらいしてみよう!

HTMLタグ、CSSプロパティに関わらず、IT用語は略して呼ばれるパターンが多いですよね。用語は何となく理解できるけど、正式名称や語源はさっぱり、という言葉も多いはず。何かあったときに役立つ案外と知らない用語をご紹介します。

05-01 Dreamweaver

読み方は「ドリームウィーバー」で、「ドリームウェーバー」ではありませんよ。ホームページ作成の機能がひとまとめになっている統合ソフトウェアのことです。「weaver」には糸を紡ぐ織工という意味があり、Webサイトで夢を紡ぎ出す、というような説があります。

05-02 columns

読み方は「カラム」で、Excelのセルが柱状に縦方向に並ぶことを示し、指定したセル範囲や配列の列番号を返します。「コムルス」や「カラムン」と読んでしまいそうですね。

05-03 RGBa

読み方は「アールジービーエー」。ローマ字をそのままストレートに読みます。ディスプレイで色を表現する際に用いられる、Red・Green・Blueの3色と、「Alpha(アルファ)」という透過度の情報を合わせた意味を持ちます。

05-04 W3C

「World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)」の略称で、読みは「ダブリュー・スリー・シー」とそのままローマ字読みです。技術の標準化を推進する国際的な非営利団体で、企業だけではなく、大学や研究所、個人などで構成されています。

06.仕事で恥ずかしい思いはしたくない!正しい発音がベスト

今回は特に言い間違い、読み違いの多いタグやプロパティをご紹介しましたが、いかがでしたでしょうか。このプロパティはそう読むんだぁ…と気付いた項目も多かったのでは。国によってイントネーションが違うケースもありますが、一般的なイギリス・アメリカ英語の発音をカタカナで表記してあります。読み間違いで恥ずかしい思いをしたことのあるHTMLコーダーやWebエンジニアの人は意外にも多いのです。同僚や後輩の前で正しい知識を披露して、仕事のレベルアップに役立ててくださいね。

  • HTML
  • CSS
  • コーディング
    UPDATE:
    GUIDE
    Web業界の仕事Tips