ロジコヤ

11. CSSとは

オンライン教材 > HTML＆CSS超入門

CSSとは

CSS（Cascading Style Sheets） は、Webページの見た目を変更するスタイルを指定するための言語です。HTMLやWordなどの文章にスタイルを設定する技術をスタイルシートといいます。

CSSがない場合

有名企業のWebサイトは見た目がとても綺麗なページになっていますが、これはCSSを最大限に活用しているからです。例えば、AppleのページでCSSあり/なしで比較してみましょう。

CSSあり

HTMLとCSS で作成されたページです。

CSSなし

CSSを除いたHTML構造だけで表示した場合、とてもみづらいページになりました。

CSSの仕様

HTML/CSSの仕様は、W3Cという世界的な機関で決められており、CSSはCSS Namespaces Module Level 3に最新情報が記載されています。2022時点でのバージョンはCSS3です。

UI/UX

このようにCSSはHTMLの見栄えを変更しますが、見た目だけでなくユーザの使いやすさも考える必要があります。これをUI/UXといいます。

UI/UXの意味

用語	読み方	説明
UI	ユーザインターフェイス	ユーザ目線の見た目
UX	ユーザエクスペリエンス	ユーザ目線の体験

CSSの使い方

ファイル構成

mypage/
├── css/
│   └── style.css
├── index.html
└── profile.html

CSSの利用法は大きく２つ

HTMLにCSSを反映させるには、大きく2つの方法があります。

HTMLファイルに記述
CSSファイルに記述して、HTMLファイルで読み込む

styleタグとstyleプロパティ

HTMLにCSSを記述してスタイルを反映させますが、これも大きく2つの方法があります。

styleタグで記述
styleプロパティで記述

styleタグ

headタグ内にstyleタグを記述し、CSSプロパティを設定する方法です。

<head>
  ...
  <style>
    CSSプロパティを記述
  </style>
</head>

styleプロパティ

HTMLタグにstyleプロパティを記述し、CSSプロパティを設定する方法です。

<div style="CSSプロパティを記述"></div>

styleプロパティが優先

スタイルはCSSとstyleプロパティを両方設定できますが、同じ設定をした場合はstyleプロパティが優先されます。

CSSファイル

HTMLからCSSファイルを外部読み込んでスタイルを反映できます。大規模システムでたくさんのページが発生する場合、この方法が一般的です。

linkタグ

CSSファイルの外部読み込みは、linkタグのhrefでCSSファイルをパス指定します。linkタグはheadタグの中に記述するのが一般的です。

<head>
  ...
  <link rel="stylesheet" href="CSSファイルパス">
</head>

CSSとセレクタ

セレクタとは

CSSはスタイルを反映するHTMLタグの指定が必要です。このHTML要素の指定方法をセレクタといいます。また、セレクタはCSSだけでなくJavaScriptでも利用する記述方法です。

CSSの記述方法

CSSはセレクタと { } を使って記述します。

セレクタ {

}

セレクタの指定方法

セレクタは、主につぎの組み合わせで指定します。

セレクタ	指定方法	例
HTMLタグ	HTMLタグ名	main
idプロパティ	#	#top
classプロパティ	.	.list
親子	>	#top > li
子孫	半角スペース	#top .list

セレクタ（HTMLタグ）

HTMLタグ名でセレクタを指定できます。

HTMLタグ名の例

HTML上のすべてのsectionタグをを選択します。

css/style.css

section {

}

index.html

<main id="top">
   <!-- sectionタグが選択 -->
   <section class="banner background">
   </section>

   <!-- sectionタグが選択 -->
   <section id="latest-posts" class="container">
   </section>
</main>

<!-- sectionタグが選択 -->
<section>
</section>

セレクタ（idプロパティ）

HTMLタグのidプロパティは、CSSセレクタ # で指定します。id=latest-posts を選択する例です。

css/style.css

#latest-posts {
    
}

index.html

<main id="top">
   <section class="banner background">
   </section>

   <!-- 指定したid名のsectionタグが選択 -->
   <section id="latest-posts" class="container">
   </section>
</main>

<section>
</section>

セレクタ（classプロパティ）

HTMLタグのclassプロパティは、 . で指定します。

css/style.css

.banner {
    
}

この場合、classプロパティにbannerが設定されたsectionタグが指定され、他のsectionタグは選択されません。

index.html

<main id="top">
   <!-- 指定したclassのsectionタグが選択 -->
   <section class="banner background">
   </section>

   <section id="latest-posts" class="container">
   </section>
</main>

<section>
</section>

セレクタ（親子要素）

HTMLタグの子要素は > で指定します。親要素mainタグの子要素sectionタグを選択する例です。

css/style.css

main > section {
    
}

index.html

<main id="top">
   <!-- mainタグの中にあるsectionタグが選択 -->
   <section class="banner background">
   </section>

   <!-- mainタグの中にあるsectionタグが選択 -->
   <section id="latest-posts" class="container">
   </section>
</main>

<section>
</section>

セレクタ（子孫要素）

HTMLタグの子孫要素は 半角スペースで指定します。親要素navタグの子孫要素liタグを選択する例です。

css/style.css

header li {
    
}

index.html

  <header>
    <nav>
      <ul>
        <!-- headerタグの子孫要素 liタグを選択 -->
        <li>
          <a class="active" href="./">Top</a>
        </li>
        <!-- headerタグの子孫要素 liタグを選択 -->
        <li>
          <a href="./profile.html">Profile</a>
        </li>
      </ul>
    </nav>
  </header>

演習

問題1

CSSについて「間違っている」内容はどれですか？

HTMLにスタイルを反映して見栄えを変更する
styleタグで、CSSプロパティを設定する
styleタグで、外部のCSSファイルを読み込む
linkタグで、外部のCSSファイルを読み込む

問題2

CSSのセレクタについて「正しい」内容はどれですか？

CSSのセレクタは必ず記述する必要がある
CSSのセレクタは必ず「HTMLタグ名」をつけて記述する必要がある
CSSのセレクタで「id」は「 . 」をつけて記述する
CSSのセレクタで「class」は「 # 」をつけて記述する

ここからは、以下のHTMLを参考に回答してください。

index.html

<header>
    <nav>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>

<main id="top">
    <section class="banner background">
    </section>

    <section id="latest-posts" class="container">
    </section>
</main>

<section></section>