ウェブサイトを構成するファイル
ウェブサイトは、大きく分けて3種類のファイルで構成されています。
- HTMLファイル（Hyper Text Markup Language）
ページの構成を示すファイル。
基本的には、上から順番にコンテンツを羅列していきます。 - CSSファイル（Cascading Style Sheets）
ページのスタイル（デザイン）を記述するファイル。
HTMLで作成したコンテンツを、どのように表示するかを指示するファイルです。 - メディアファイル
画像や音声、動画などのメディアファイル。
コンテンツとして必要なもの（ロゴ・タイトル画像・写真など）はHTMLに、デザイン的なもの（背景など）はCSSに記述します。
タグと要素
ウェブサイトを作るために利用するHTMLは、「タグ」と呼ばれる仕組みを使って記述する言語です。
例えば pタグ<p>や strongタグ<strong>などがあります。
タグには開始タグと終了タグがあり、開始タグから終了タグまでをまとめて「要素」と呼びます。
CSSセレクタ
デザイン部分はCSSに記述します。
CSSセレクタには複数の種類がありますが、よく使うものは4種類です。
- タグセレクタ
HTMLタグに対して指定するセレクタ。
例）h1 { color: #f00; }
<h1>で指定した文字列が赤色に - idセレクタ
id名の前に「＃（シャープ）」を付けることで指定できる。
ページの中で一度しか使えない。
例）#menu { background-color: #00f; }
id=”menu”で指定した部分の背景が青色に - classセレクタ
class名の前に「.（ドット）」を付けることで指定できる。
一番多く使われるセレクタ。
ページ内のあらゆる場所で、何度でも使用可能。
例）.f-bold { font-weight: bold; }
class=”f-bold”で指定した文字列が太字に - 子孫セレクタ
2つ以上のセレクタを、スペースで区切って記述するセレクタ。
例）p span { color: red; }
<p><span>で指定した文字列が赤色に
上記のセレクタを駆使して、サイトデザインを行います。