HTMLとCSSの概要 / Learch

HTMLとCSSの概要

HTML（HyperText Markup Language）は、Webページのレイアウトと構成を記述するためのマークアップ言語です。基本的な要素には以下のようなものがあります。

要素系
- 構造的要素: html, body, head - ページ全体の構造を定義。
- セクション要素: header, footer, section, main, article - ページ内の特定のセクションを定義。
- グループ化要素: div - コンテンツをグループ化し、スタイルを適用。
- リスト要素: ul (順序なしリスト), ol (順序ありリスト), li (リストアイテム) - リストを表示。
- テーブル要素: table, tbody, th, tr, td - テーブルを構築。
- インタラクティブ要素: input, button, select - ユーザー入力を受け取る。
文字系
- 見出し: h1, h2, h3, h4, h5, h6 - ページやセクションの見出し。
- テキスト: p (段落), span (インラインテキスト), strong (強調テキスト), em (強調テキスト), b (太字), i (イタリック) - テキストを整形。
その他
- リソースリンク: link (外部リソースへのリンク), script (JavaScriptコード), img (画像), iframe (埋め込みコンテンツ) - ページに追加リソースを埋め込む。

CSS（Cascading Style Sheets）は、Webページのデザインやレイアウトを指定するためのスタイルシート言語です。「カスケーディング」という言葉は、スタイルが上位から下位の要素へ「滝のように流れる」ことを意味します。主な概念は以下の通りです。

セレクタ: HTML要素をターゲットにしてスタイルを適用します。例えば、p セレクタは、すべての <p> 要素にスタイルを適用します。
詳細度: CSSルールの優先度を決定します。詳細度が高いスタイルルールほど、他のルールより優先されます。例えば、IDセレクタはクラスセレクタより詳細度が高いです。
カスケーディング: 複数のスタイルが同じ要素に適用される場合、詳細度の高いスタイルが優先されます。また、同じ詳細度のスタイルが競合する場合は、スタイルシートの後に書かれたスタイルが優先されます。

初心者に向けて、以下のようなステップでHTMLとCSSを学ぶことをお勧めします。

ウェブ上には多くの無料教材があります。W3SchoolsやMDN Web Docsは初心者にとって非常に有用なリソースです。