エンジニア転職日記

エンジニア転職に向けての日記です

HTMLとCSSを勉強していて気になった用語たち

概要

タイトルの通り、HTML&CSSを学習していると出くわす用語たちについて読み方や意味を説明をしていきます。

 

なぜこの記事を書こうと思ったか

理由:備忘録、まとめとして

HTMLやCSSを勉強していると、hrefやrelなど「何の略なの?」って用語が出てきますよね。私自身、毎回調べていて手間だったのでまとめたら役に立つかな?と思ってこの内容にしました。

 

一覧

用語 読み方 もとの意味
HTML エイチティーエムエル HyperText Markup Language
CSS シーエスエス Cascading Style Sheets
h1 エイチワン Heading
p ピー Paragraph
a エー、アンカー Anchor
b ビー Bold
br ビーアール、ブレイク Break
div ディブ Division
href エイチレフ Hypertext Refference
rel レル Relation
px ピクセル Pixel

 

 

 

HTML(エイチティーエムエル)

Webページを書くためのプログラミング言語です。例えばこんな感じ。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLの説明</title>
  </head>
  <body>
    <h1>
      これは見出しです
    </h1>
    <p>
      本文です
    </p>
  </body>
</html>

このようなフォーマットで書くとWebブラウザGoogle Chromeなどの検索用アプリケーション)が読み込み、文章やリンクなどを画面に表示できるようになります。

ちなみにHTMLはHyperText Markup Languageの略で、

HyperText:ハイパーリンク(いわゆるリンク)をもつテキスト

Markup:HTMLにおいては、h1やpなどのタグを用いて文章を構造化すること

Language:言語

つまり、リンクをもつ文章や画像をタグで構造化して(コンピュータにわかりやすいように区切ってあげて)コンピュータに読み込ませるための言語であると言えます。

 

CSS(シーエスエス

HTMLで記述した文章を装飾するための言語です。例えばこんな感じ。

p {
  color: yellow;
}

CSSCascading Style Sheetsの略です。Cascadeという英単語は「階段状の滝」「段々になっているもの」という意味らしいです。調べてみたのですがマニアックな内容そうだったので詳細は後日。。。

HTMLをわかりやすくきれいに見せるための言語だと覚えておけばOKです。

 

拡張子(かくちょうし)

○○.htmlや○○.jpgなどのファイル名についている文字列のことです。この拡張子があることによって、コンピュータがそのファイルの形式(文章なのか画像なのか等)を理解できるようになります。

 

<h1>タグ(エイチワンタグ)

HTMLにおける一番大きな見出しのことです。h1〜h6まであり、徐々にフォントが小さくなっていきます。heading(見出し)の略です。

 

<p>タグ(ピータグ)

段落を意味するタグです。<p>〜</p>とすることで囲まれた部分が1段落になります。

Paragraph(段落)の略です。

 

<a>タグ(エータグ、アンカータグ)

ページ遷移(Webページでリンク先に飛ぶこと)の際に使うタグです。

Anchor(いかり)の略です。

 

<b>タグ(ビータグ)

 文字を太字にする際に使うタグです。

Bold(太字)の略です。

 

<br>タグ(ビーアールタグ、ブレイクタグ)

改行をする際に使うタグです。

Break(改行)の略です。

 

<div>(ディブタグ)

<h1>や<p>、画像などの要素をひとつのかたまりとしてまとめる際に使用するタグです。<div>タグを使用することでそのかたまり自体の幅や高さなどをCSSで指定できるようになります。

Division(分割、境界)の略です。

 

href(エイチレフ)

href属性は、<a>タグ内でリンクの移動先を指定します。例えば、

<a href="https://www.google.com/">Google</a>

のように記述すると、<a>タグ内で囲まれた「Google」の文字が

https://www.google.com/のリンクになります。

HyperText Refference(ハイパーテキストの参照、引用)という意味です。

 

rel(レル)

rel属性は<link>タグ内で使用します。一番よく使うものとして、 

    <link rel="stylesheet" href="stylesheet.css">

のようにスタイルシートの指定があります。rel属性は関係を表すものなので、「stylesheet.cssをstylesheetとして読み込んでくださいね」という意味になります。

Relation(関係)の略です。

 

px(ピクセル

デジタル画像を構成する最小単位です。デジタル画像は小さな点が集まってできています。10pxとは、小さな点10個分という意味です。

CSSにおいては主にフォントの大きさや要素の高さ、幅を指定する時に使用します。

Pixel(ピクセル)の略です。

 

最後に

とりあえず思いつくだけまとめてみました。また遭遇したら追加していこうと思います。

 

参考

https://www.itra.co.jp/webmedia/what-is-html.html

https://qiita.com/snakada/items/067859034546b85426d6

https://www.weblab.co.jp/staff/design/8436.html