---
layout: "@/layouts/MarkdownLayout.astro"
---

import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";
export const title = "HTMLを装飾するCSS";

# {title}

## TOC

## CSSでスタイルを当ててみる

前回、fontタグで色を付けましたが、このタグは現在非推奨となっています。  
代わりに、CSS (Cascading Style Sheets) を使って見た目を整えていきましょう。

CSSは、HTMLに装飾を加えるための言語です。  
装飾を加える方法はいくつかありますが、そのうちの1つは`<style>`タグの中に書く方法です。  
これにより、実際の見た目を自由に変更できます。

例として、buttonタグの見た目を変えてみました。

```html file=public/sample/html/button-with-style.html
button-with-style.html
```

<RenderFile path="public/sample/html/button-with-style.html" />

`<style>`タグの中に`button { ... }`と書くことで、全てのbuttonタグにスタイルを当てることができます。  
中括弧`{}`の中には、様々なプロパティ(見た目の設定)を書くことができます。

```css
button {
  background-color: blue; /* 背景色 */
  color: white; /* 文字色 */
  padding: 10px 20px; /* 内側の余白 */
  border: none; /* 枠線なし */
  border-radius: 5px; /* 角を丸く */
}
```

## CSSと`class`属性

さて、buttonタグにスタイルを当てると、全てのbuttonが同じ見た目になってしまいました。  
でも実際には、ボタンごとに違う見た目にしたいことがありますよね。

そんなときに便利なのが`class`属性です。

```html file=public/sample/html/button-with-class.html
button-with-class.html
```

<RenderFile path="public/sample/html/button-with-class.html" />

何が書かれているかを見てみましょう。  
まずボタンタグがあり、そこに`class`という属性が付いています。その値は、各々`primary`や`danger`が設定されています。

一方CSSでは、`.primary { ... }`や`.danger { ... }`と書かれています。これはHTMLの`class`の値につけられた名前と一致していますね。

これが意味するのは、`class`属性で指定された名前に対応するスタイルを当てる、ということです。  
あくまでも`class`の値しか見ていないので、このような書き方も可能です。

```html file=public/sample/html/tag-with-class.html
tag-with-class.html
```

<RenderFile path="public/sample/html/tag-with-class.html" />

`button`タグとは別に、同じクラスを`a`タグにもつけてみました。  
別物のタグにも関わらず、同じ見た目になっていますね。

また、`class`属性は、値をスペースで区切ることで**複数のクラス**を指定することもできます。

```html file=public/sample/html/multiple-classes.html
multiple-classes.html
```

<RenderFile path="public/sample/html/multiple-classes.html" />

`.btn`クラスに対しては共通のスタイルを当てています。  
これに加えて、`.primary`や`.danger`クラスで文字色や背景色を変えていることがわかりますね。

## CSSと`id`属性

HTMLには、`class`属性の他に`id`属性というものもあります。  
`id`属性は、表示しているページのなかで**特定の一つの要素**を指し示すために使います。

なお、このidは**ページ内で一意**である必要があります。

```html
<button id="submit">送信</button>
```

```css
#submit {
  background-color: green;
}
```

CSSで`id`を指定すると、そのスタイルを当てる優先順位が`class`よりも高くなります。

```html file=public/sample/html/button-with-id.html
html-with-id.html
```

<RenderFile path="public/sample/html/button-with-id.html" />

`class`属性への指定で背景色が青くなる設定を、`id`属性への指定で赤くなるように上書きされていることがわかりますね。

## `div`タグと`span`タグ

タグに最初からスタイルが当たっていると、ときにそれが邪魔になることがあります。  
例えば、buttonタグは最初からボタンらしい見た目になっていますよね。

そんなとき便利なのが、`div`タグと`span`タグです。  
これらは**スタイルを持たない**空の入れ物のようなタグで、自由にスタイルを当てることができます。

```html file=public/sample/html/div-and-span.html
div-and-span.html
```

<RenderFile path="public/sample/html/div-and-span.html" />

`div`は**ブロック要素**で、前後に改行が入ります。  
`span`は**インライン要素**で、文章の中に埋め込むことができます。

```html
<div class="container">
  これは<span class="highlight">強調</span>された文章です。
</div>
```

## スタイル指定の組み合わせ

CSSでは、要素の指定を組み合わせることもできます。

```html file=public/sample/html/combined-style.html
combined-style.html
```

<RenderFile path="public/sample/html/combined-style.html" />

見慣れない指定が多いかもしれませんが、ここで注目してほしいのはこの部分です。

```css
.x .icon {
  ...
}
.line .icon {
  ...
}
```

これは、`.x`クラスの中にある`.icon`クラス、`.line`クラスの中にある`.icon`クラス、という意味です。  
そのため同じ`.icon`クラスでも、親要素のクラスによって見た目が変わっていますね。

他に最もよく使う組み合わせとして、以下のようなものがあります。

```css
/* a と b 両方のクラスを持つ要素 */
.a.b {
  ...
}

/* a クラスの直下にある b クラスの要素 */
.a > .b {
  ...
}
```

## その他のCSSの書き方

### linkタグで外部のCSSを読み込む

CSSはHTMLファイルの中に直接書くだけでなく、外部ファイルとして分けて管理することもできます。  
拡張子は`.css`で、`<link>`タグで読み込みます。

このCSSファイルは、`<style>`タグの中に書くときと同じ書き方をします。

```css title="path/to/styles.css"
button {
  background-color: purple;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
```

<br />

```html title="path/to/index.html"
<link rel="stylesheet" href="./styles.css">`
<button>装飾されたボタン</button>
```

`href`は、読み込むCSSファイルのパスを指定します。  
`rel`は、読み込むファイルがCSSであることを示すために`stylesheet`を指定します。

### タグに直接スタイルを書く

ほぼすべてのHTMLタグには、`style`属性を使って直接スタイルを書くこともできます。  
これはスタイルを当てた要素だけに適用され、他の要素には影響しません。

```html
<button style="background-color: orange; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
  直接スタイルが書かれたボタン
</button>
```

## 名称

検索エンジンなどで調べるときに便利なように、今回出てきた用語の名称をまとめておきます。

```css
セレクタ {
  プロパティ: 値;
}
```