CSSが担う「見た目」の具体例

CSSは、HTMLで定義された要素に対して、様々なスタイルを適用することができます。例えば、以下のような指定が可能です。

例えば、H1タグ（見出し）の色を青色にしたい場合、CSSでは以下のように記述します。

h1 { color: blue; }

さらに、CSSを使えば、要素の配置も細かく制御できます。画面の中央に配置したり、左右に並べたり、余白を調整したりといったことが可能です。これにより、ウェブサイトは、単なる情報の羅列から、視覚的に分かりやすく、魅力的なデザインを持つものへと変化します。

CSSの指定は、まるで絵の具で色を塗ったり、部屋の家具を配置したりするような作業に似ています。HTMLというキャンバスに、CSSという絵の具や道具を使って、美しい絵を描いていくイメージです。

HTMLの「要素」とCSSの「プロパティ」

HTMLでは、コンテンツのまとまりを「要素」と呼びます。例えば、

タグで囲まれた部分は「段落要素」です。

一方、CSSでは、要素のどのような性質を変更するかを「プロパティ」と呼びます。例えば、文字の色を指定する `color` や、文字の大きさを指定する `font-size` がプロパティにあたります。

この二つを組み合わせて、「この要素のこの性質を、このように変えたい」という指示を出すのがCSSの基本的な考え方です。例えば、HTMLの段落要素（

）の文字色を赤にしたい場合、CSSでは以下のように記述します。

p { color: red; }

このように、HTMLが「何を」表現するか、CSSが「どう見せるか」を定義することで、ウェブページは意味とデザインを兼ね備えたものになるのです。

HTMLの「属性」とCSSの「値」

HTMLには、要素にさらなる情報や意味を付け加えるための「属性」があります。例えば、 タグでは `src` 属性で画像の場所を指定し、`alt` 属性で画像が表示されない場合に表示される代替テキストを指定します。

CSSでは、プロパティに対して実際に設定する具体的な内容を「値」と呼びます。例えば、`color: blue;` の場合、`blue` が値です。

このように、HTMLの属性が要素に付随する情報であるのに対し、CSSの値はプロパティという「性質」に対して具体的な「内容」を指示するものです。

CSSセレクタ：どの要素にスタイルを適用するか

CSSで最も重要な概念の一つに「セレクタ」があります。セレクタとは、「どのHTML要素に対してスタイルを適用したいか」を指定するためのものです。

例えば、HTMLにたくさんの

タグ（段落）があったとして、そのうち特定の段落だけ色を変えたい、という場合があります。そんな時に、セレクタを使って対象の要素を絞り込むことができます。

セレクタには様々な種類がありますが、代表的なものをいくつか紹介します。

• 要素セレクタ：HTMLタグ名を直接指定する（例： p , h1 ）
• IDセレクタ： id 属性で指定された一意の要素を指定する（例： #main-title ）
• クラスセレクタ： class 属性で指定された複数の要素にまとめてスタイルを適用する（例： .important-text ）

CSSのコードは、このセレクタで対象を指定し、その後に波括弧 `{}` で囲んで、適用したいスタイル（プロパティと値の組み合わせ）を記述します。

まとめ：両者の連携でウェブサイトは完成する

HTMLとCSSは、ウェブサイトという一つの成果物を作るために、お互いに協力し合っている関係です。HTMLがウェブページに「何があるか」を定義し、CSSがその「見せ方」を整える。この二つがなければ、現代の魅力的なウェブサイトは成り立ちません。 css と html の 違い を理解し、それぞれの得意なことを活かして、一緒にウェブサイトを作り上げていきましょう！