Study

HTMLとCSSの基本用語20選 英語フレーズで学ぶ

Webサイトを作るうえで欠かせないのがHTMLとCSS。
今回は、初心者がまず覚えておきたい基本用語20個を英語フレーズと一緒に紹介します!
英語で理解すると、ドキュメントやチュートリアルを読むのもずっと楽になりますよ。


1. HTML(HyperText Markup Language)

“HTML is the backbone of the web.”
HTMLはウェブの骨組みです。

Webページの構造を作るためのマークアップ言語。


2. CSS(Cascading Style Sheets)

“CSS adds style to your content.”
CSSはコンテンツにスタイルを加えます。

HTMLで作った構造にデザインやレイアウトを与える言語。


3. Tag(タグ)

“Tags define the structure of HTML.”
タグはHTMLの構造を定義します。

例:<p><h1>など、要素を囲む記号。


4. Element(要素)

“An element consists of a start tag, content, and an end tag.”
要素は開始タグ・コンテンツ・終了タグで構成されます。

ページの中のひとまとまり。


5. Attribute(属性)

“Attributes provide additional information about elements.”
属性は要素に追加情報を与えます。

例:hrefsrcなど。


6. Selector(セレクタ)

“Selectors target HTML elements in CSS.”
セレクタはCSSでHTML要素を指定します。


7. Class(クラス)

“Use classes to apply the same style to multiple elements.”
クラスは複数の要素に同じスタイルを適用するのに使います。

例:class="menu-item"


8. ID(アイディー)

“IDs should be unique within a page.”
IDはページ内で一意であるべきです。

例:id="header"


9. Div(ディブ)

“A <div> is used to group content together.”
<div>はコンテンツをグループ化するために使われます。


10. Span(スパン)

“Use <span> to style inline text.”
<span>はインラインテキストを装飾するのに使われます。


11. Margin(マージン)

“Margin is the space outside an element’s border.”
マージンは要素の外側の空間です。


12. Padding(パディング)

“Padding is the space inside an element’s border.”
パディングは要素の内側の空間です。


13. Border(ボーダー)

“Borders surround the padding and content.”
ボーダーはパディングとコンテンツを囲みます。


14. Box Model(ボックスモデル)

“The box model consists of content, padding, border, and margin.”
ボックスモデルはコンテンツ、パディング、ボーダー、マージンで構成されます。


15. Responsive Design(レスポンシブデザイン)

“Responsive design adapts to different screen sizes.”
レスポンシブデザインは異なる画面サイズに対応します。


16. Flexbox(フレックスボックス)

“Flexbox helps align items easily.”
フレックスボックスはアイテムの整列を簡単にします。


17. Grid(グリッド)

“Grid allows complex layouts with rows and columns.”
グリッドは行と列で複雑なレイアウトを可能にします。


18. Media Query(メディアクエリ)

“Media queries apply styles based on device conditions.”
メディアクエリはデバイスの条件に応じてスタイルを適用します。


19. Link(リンク)

“The <a> tag creates a hyperlink.”
<a>タグはハイパーリンクを作成します。


20. Color Code(カラーコード)

“Colors can be defined by hex codes like #FF5733.”
色は#FF5733のような16進数コードで指定できます。

ABOUT ME
Murolog
English study blog