本文へスキップ
スキルアップカレッジ

用語集

HTML・CSS入門コースで使われる主要な用語(68語)をまとめています。

開始タグ・終了タグ (かいしたぐ・しゅうりょうたぐ)
HTMLのタグは原則として、開始タグ `<タグ名>` と終了タグ `</タグ名>` のペアで構成される。両者の間に書いた内容が、そのタグの効果を受ける。
→ レッスン2
開発者ツール(かいはつしゃつーる)
ブラウザに標準で備わった、Webページの構造やCSSを確認できるツール。F12キーや右クリックの「検証」から開ける。要素のHTML・CSSを確認したり、ボックスモデルを視覚化したりできる、Web制作の必須ツール。
→ レッスン4
カラーコード(からーこーど)
`#ff0000` のように `#` で始まる6桁の16進数で色を指定する形式。Web制作では最もよく使われる色指定の形式。
→ レッスン3
関連属性 (かんれんぞくせい)
タグの中に書く追加情報。「属性名="値"」の形で書く。例:`<a href="...">` の `href="..."` の部分。
→ レッスン2
交差軸 (こうさじく)
Flexboxにおいて、主軸に直交する方向。デフォルトでは縦方向。整列は `align-items` で制御する。
→ レッスン5
子要素・親要素 (こようそ・おやようそ)
HTMLの入れ子構造で、外側にある要素を親要素、内側にある要素を子要素と呼ぶ。
→ レッスン5
クラス(くらす)
HTMLのclass属性。CSSのセレクタで `.クラス名` の形で参照し、特定の要素群に共通のスタイルを当てるときに使う。1要素に複数指定でき、同じクラス名を複数要素に付けられる。
→ レッスン3
コメント (こめんと)
HTMLでは `<!-- -->`、CSSでは `/* */` で囲んで書く、ブラウザに無視されるメモ書き。コードの可読性を高めるために使う。
→ レッスン3
自己終結タグ (じこしゅうけつたぐ)
`<img>` や `<br>`、`<meta>` のように、終了タグを書かないタグの種類。空要素とも呼ばれる。
→ レッスン2
子孫セレクタ (しそんせれくた)
セレクタを半角スペースでつないで書くことで、特定の要素の子孫にスタイルを当てる書き方。例:`.card h3` は「.cardの中のすべてのh3」を指す。
→ レッスン4
主軸 (しゅじく)
Flexboxにおいて、要素が並ぶ方向。デフォルトでは横方向(左から右)。整列は `justify-content` で制御する。
→ レッスン5
属性 (ぞくせい)
タグの中に書く追加情報。「属性名="値"」の形で書く。例:`<a href="...">` の `href="..."` の部分。
→ レッスン2
セマンティクス (せまんてぃくす)
文章の意味に合ったタグを選んでマークアップする考え方。検索エンジンへの情報伝達やアクセシビリティ向上に役立つ。
→ レッスン2
セマンティックなタグ (せまんてぃっくなたぐ)
意味のあるマークアップを実現するためのHTMLタグ。`<header>`・`<nav>`・`<main>`・`<article>`・`<section>`・`<footer>` などが代表例。
→ レッスン7
セレクタ (せれくた)
CSSで「どの要素にスタイルを当てるか」を指定する部分。`h1`、`p`、`.クラス名`、`#id名` などがある。
→ レッスン3
相対単位 (そうたいたんい)
`%`・`rem`・`em`・`vw` など、ほかのサイズを基準にした相対的なサイズ指定。レスポンシブデザインと相性がよい。
→ レッスン6
相対パス (そうたいぱす)
現在のファイルから見た位置を基準にした、ファイルの場所の指定。`assets/css/style.css` のように、フォルダを `/` で区切って書く。
→ レッスン7
タグ (たぐ)
`<` と `>` で囲まれた文字列。要素の開始や終了、属性などを示す。例:`<h1>`、`</p>`、`<img>`。
→ レッスン2
デスクトップファースト(ですくとっぷふぁーすと)
PC向けのレイアウトを先に作り、`max-width` のメディアクエリでスマートフォン用の調整を加えていくレスポンシブ設計の方針。本コースで採用しているアプローチ。
→ レッスン6
内部スタイル (ないぶすたいる)
HTMLの `<style>` タグの中にCSSを書く方法。本コースでは外部スタイルシートを推奨し、内部スタイルは限定的に紹介。
→ レッスン3
ブレークポイント(ぶれーくぽいんと)
レスポンシブデザインで、レイアウトを切り替える画面幅の区切り点。一般的には480px・768px・1024pxなどがよく使われるが、コンテンツに応じて調整する。
→ レッスン6
プロパティ (ぷろぱてぃ)
CSSにおいて、何を変えるかを指定する部分。`color`・`font-size`・`margin` などが該当する。
→ レッスン3
ブロック要素 (ぶろっくようそ)
横幅いっぱいに広がり、前後で改行されるHTML要素の種類。`<h1>`〜`<h6>`、`<p>`、`<ul>`、`<div>` などが該当する。`width` や `height` の指定が効きやすい。
→ レッスン4
ボックスモデル(ぼっくすもでる)
HTMLの各要素を「四角いボックス」として捉え、内側から content・padding・border・margin の4層で構成すると理解する考え方。CSSレイアウトの最重要概念。
→ レッスン4
マークアップ(まーくあっぷ)
文章のひとつひとつに「これは見出し」「これは段落」と意味の印を付ける作業。HTMLの中核となる作業内容。
→ レッスン1
marginの相殺(まーじんのそうさい)
縦に並ぶブロック要素同士の `margin-bottom` と `margin-top` が重なり、大きいほうだけが反映される現象。
→ レッスン4
メディアクエリ (めでぃあくえり)
画面幅などの条件に応じて適用するCSSを切り替える仕組み。`@media (max-width: 768px) { ... }` のように書く。
→ レッスン6
モバイルファースト(もばいるふぁーすと)
スマートフォン向けのレイアウトを先に作り、`min-width` のメディアクエリでデスクトップ用の装飾を加えていくレスポンシブ設計の方針。実務で推奨されることが多い。
→ レッスン6
要素 (ようそ)
開始タグから終了タグまでの全体のかたまり。例:`<h1>こんにちは</h1>` 全体が「h1要素」。
→ レッスン2
余白 (よはく)
ボックスモデルでは、内側の余白を padding、外側の余白を margin で表現する。
→ レッスン4
リンク先 (りんくさき)
`<a>` タグの `href` 属性で指定する移動先のURLやファイル名。
→ レッスン2
レスポンシブデザイン (れすぽんしぶでざいん)
1つのHTML・CSSで、デスクトップ・タブレット・スマートフォンなど複数の画面サイズに対応するデザイン手法。現代のWeb制作では基本となる考え方。
→ レッスン6
align-items
Flexboxで交差軸(デフォルトでは縦方向)の整列を制御するプロパティ。`stretch`(デフォルト)、`flex-start`、`center`、`flex-end` などの値を取る。
→ レッスン5
a要素 (aようそ)
リンクを作るためのタグ。`href` 属性にリンク先のURLを指定する。anchor(錨)の頭文字に由来する。
→ レッスン2
body要素(ぼでぃようそ)
HTMLにおいて、ブラウザの画面に実際に表示されるページ本文を記述する場所。
→ レッスン1
border-radius
要素の角を丸めるCSSプロパティ。`50%` を指定すると正方形が完全な円になる。
→ レッスン4
box-sizing
要素の `width` と `height` がどこまでの範囲を含むかを切り替えるプロパティ。`border-box` を指定すると、widthがborderを含めた外側の幅を指すようになる。
→ レッスン4
CSS
Cascading Style Sheetsの略。Webページの装飾を担当する言語。色・背景・フォント・余白・レイアウトなどを指定する。
→ レッスン3
display: flex
Flexboxを開始するためのCSS指定。並べたい要素を囲む親要素に書く。
→ レッスン5
div要素 (でぃぶようそ)
意味を持たない汎用のブロック要素。装飾やレイアウトのために要素をまとめるときに使う。
→ レッスン4
DOCTYPE宣言
HTMLファイルの先頭に書く `<!DOCTYPE html>`。そのファイルがHTMLであることをブラウザに伝える。
→ レッスン1
Flexbox
正式名称はFlexible Box Layout。要素を横並び・縦並びに整え、整列・余白配分などを柔軟に行えるCSSのレイアウトシステム。
→ レッスン5
footer要素(ふったーようそ)
ページ下部に表示する情報(コピーライト・連絡先など)を表すセマンティックなタグ。
→ レッスン7
gap
Flexbox(およびGrid)で子要素間の余白を指定するプロパティ。最初・最後の要素には余白が付かないため `margin-right` より使いやすい。
→ レッスン5
Grid
2次元(行と列)のレイアウトを組むためのCSSのレイアウトシステム。Flexboxが1次元向けなのに対し、Gridはダッシュボードや雑誌レイアウトのような複雑な配置を得意とする。
→ レッスン5
head要素 (へっどようそ)
HTMLにおいて、文字コードやタイトルなどページのメタ情報を記述する場所。本文には表示されない。
→ レッスン1
h1〜h6
見出しを表すタグ。h1がもっとも大きい大見出し、h6がもっとも小さい小見出し。装飾目的ではなく、文章の論理的階層に合わせて使う。
→ レッスン2
HTML
HyperText Markup Languageの略。文章にマークアップ(意味の印)を付けて構造を表現するための言語。Webページの骨格を作る。
→ レッスン1
img要素(いめーじようそ)
画像を表示するための自己終結タグ。`src` 属性で画像の場所、`alt` 属性で代替テキストを指定する。
→ レッスン2
index.html
Webサイトのトップページとして使われる慣例的なファイル名。サーバーはフォルダを指定されると自動的にindex.htmlを表示する。
→ レッスン1
inline要素(いんらいんようそ)
文章中に流し込まれ、必要な分の幅しか占めない要素。前後で改行されない。`<a>`・`<span>`・`<strong>` などが該当。
→ レッスン4
justify-content
Flexboxで主軸(デフォルトでは横方向)の整列を制御するプロパティ。`flex-start`(左寄せ)、`center`(中央寄せ)、`space-between`(両端寄せ)などの値を取る。
→ レッスン5
li要素 (えるあいようそ)
リストの各項目を表すタグ。`<ul>` または `<ol>` の中で使う。
→ レッスン2
link要素 (りんくようそ)
HTMLから外部ファイル(CSSなど)を読み込むためのタグ。`<link rel="stylesheet" href="...">` の形で外部CSSを読み込む。
→ レッスン3
main要素 (めいんようそ)
ページのメインコンテンツを表すセマンティックなタグ。1ページに1つだけ書くのがルール。
→ レッスン7
margin
ボックスモデルで、要素の外側の余白を指定するプロパティ。
→ レッスン4
max-width
要素の最大幅を指定するプロパティ。中身が短くてもこの幅を超えない。レスポンシブデザインでよく使う。
→ レッスン4
nav要素 (なびようそ)
ナビゲーション領域(メニューなど)を表すセマンティックなタグ。
→ レッスン5
object-fit
画像や動画を、指定したサイズにどう収めるかを指定するプロパティ。`cover` を指定すると、縦横比を保ったまま要素を埋め尽くす。
→ レッスン7
ol要素(おーえるようそ)
順序ありリスト(ordered list)を作るためのタグ。番号付きの項目を並べる。
→ レッスン2
padding
ボックスモデルで、要素の内側の余白を指定するプロパティ。
→ レッスン4
p要素(ぴーようそ)
段落(paragraph)を表すタグ。1つのまとまった文のかたまりごとに `<p>` で囲む。
→ レッスン2
rem
ルート(html要素)のフォントサイズを基準にした倍率を表す相対単位。デフォルトでは1remがおよそ16px。
→ レッスン6
text-decoration
テキストの装飾(下線など)を指定するCSSプロパティ。`text-decoration: none` でリンクのデフォルトの下線を消せる。
→ レッスン5
ul要素(ゆーえるようそ)
順序なしリスト(unordered list)を作るためのタグ。中点付きの並列項目を並べる。
→ レッスン2
Visual Studio Code (VSCode)
Microsoftが無料で配布しているテキストエディタ。本コースで使う標準のエディタで、世界中のWeb制作者が使っている。
→ レッスン1
viewport
ブラウザの表示領域。スマートフォン対応のために `<meta name="viewport" ...>` の指定が必要になる。
→ レッスン6
vw
ビューポート(画面)の幅を基準にした相対単位。`100vw` は画面幅いっぱい。
→ レッスン6
← HTML・CSS入門 に戻る