⛴️
HTMLとCSSの用語集（英訳付き）
HTMLのタグやCSSのプロパティであれば、分からないタグ名やプロパティ名でそのまま検索すればよいのですが、そうではなくもっと抽象的なことを調べたい場合に、あれ？何て検索すれば良いんだ？となるので、HTMLやCSSの概念的な用語についてまとめました。英訳も付いているので英語でも調べられます。
こんな概念もあるよ！よく調べるよ！などがありましたら、コメントで教えていただけると嬉しいです！
HTML
| 日本語 | 英語 | 概要 |
|---|---|---|
| 要素 | element | HTMLを記述するときの構成単位 |
| 空要素 | empty element | 要素の内容を持たない要素 |
| タグ | tag |
<>で囲まれている部分 |
| 開始タグ | start tag | 要素の開始を表すタグ。<>で記述する |
| 終了タグ | end tag | 要素の終了を表すタグ。</>で記述する |
| 属性 | attribute | 要素の性質を示すために、要素に付加される情報 |
| ブロック要素 | block box | 1つの幅いっぱいの長方形として扱われる要素 |
| インライン要素 | inline box | 行内の一部として扱われる要素 |
なお、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