⛴️

HTMLとCSSの用語集(英訳付き)

2022/10/31に公開

HTMLのタグやCSSのプロパティであれば、分からないタグ名やプロパティ名でそのまま検索すればよいのですが、そうではなくもっと抽象的なことを調べたい場合に、あれ?何て検索すれば良いんだ?となるので、HTMLやCSSの概念的な用語についてまとめました。英訳も付いているので英語でも調べられます。
こんな概念もあるよ!よく調べるよ!などがありましたら、コメントで教えていただけると嬉しいです!

HTML

日本語 英語 概要
要素 element HTMLを記述するときの構成単位
空要素 empty element 要素の内容を持たない要素
タグ tag <>で囲まれている部分
開始タグ start tag 要素の開始を表すタグ。<>で記述する
終了タグ end tag 要素の終了を表すタグ。</>で記述する
属性 attribute 要素の性質を示すために、要素に付加される情報
ブロック要素 block box 1つの幅いっぱいの長方形として扱われる要素
インライン要素 inline box 行内の一部として扱われる要素

HTMLの構成要素

なお、HTML5ではブロック要素、インライン要素という概念は廃止されていますが、スタイリングはCSSに任せるということに重点が置かれただけで、考え方自体はなくなっていません。
このあたりはHTML5で再定義された要素と属性が分かりやすく解説されているかと思います。

CSS

日本語 英語 概要
セレクタ selector スタイルを適用したい要素
プロパティ property スタイルの要素。幅(width)や色(color)など
プロパティ値 property value プロパティに割り当てる値
ショートハンドプロパティ shorthand property 特定のプロパティにおける、プロパティ値を一括して指定する簡略化表記
疑似クラス pseudo class セレクタに付加するキーワード。:hoverなど
レスポンシブウェブデザイン responsive web design 画面の大きさに合わせてレイアウトを柔軟に調整するウェブデザイン手法
メディアクエリ media query 画面の解像度といった条件に対応して、コンテンツの描画を行えるようにするCSS3のモジュール
フルードグリッド fluid grid ページの構成要素を任意のグリッドにそって配置するグリッドデザインと、ブラウザのウィンドウサイズに応じて各要素の大きさを伸縮させるリキッドレイアウトを組み合わせたレイアウト手法
フルードイメージ fluid image ブラウザのウィンドウ幅に合わせて、画像のサイズをフィットさせる手法
フレックスボックス flexbox アイテムを行または列に並べるためのレイアウト手法。CSS3より導入された新しいレイアウト手法
ワイヤーフレーム wireframe ウェブページのレイアウトやコンテンツの配置を定めた設計図

Discussion