TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～CSS第1の2回～

# アジェンダ
* CSSを書いてみる
    * 外部ファイルに記載
    * HTMLファイルのheadタグの中に記載
    * HTMLファイルの各タグの中に記載

# CSSを書いてみる
以下のindex.htmlに、CSSを使用して見た目を変えてみる。
内容は、以下の三点。

* h1タグで指定している見出しのフォントサイズを20pxにする
* pタグで指定している段落の文字色を灰色にする。
* pタグで指定している段落のフォントサイズを10pxにする。

```html:index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのCSS</title>
  </head>
  <body>
    <!-- 見出しのフォントサイズを20pxにする. -->
    <h1>Lorem Ipsum</h1>
    <!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
    </p>
  </body>
</html>
```

ちなみに、CSS無しだとこんな感じ。
![index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/f4bf57b6-0643-e229-0631-4e3a1267fcaa.png)

## 外部ファイルに記載
見た目の編集内容をCSSファイルに記述する。
以下のstyle.cssを作成した。

```css:style.css
h1 {
  font-size: 20px;
}

p {
  font-size: 10px;
  color: darkgrey;
}
```

そして、CSSを反映させるため、index.htmlにlinkタグを追記する。

```html:index_use_cssfile.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="./style.css">
    <title>はじめてのCSS</title>
  </head>
  <body>
    <!-- 見出しのフォントサイズを20pxにする. -->
    <h1>Lorem Ipsum</h1>
    <!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
    </p>
  </body>
</html>
```

これをWebブラウザに表示させるとこんな感じ。
![index_use_cssfile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/1e0b0a3d-e512-6628-f039-1655d2a2bdc5.png)
見た目を変更することができた。

## HTMLファイルのheadタグの中に記載
index.htmlにstyleタグを追記し、見た目の編集内容も記載する。

```haml:index_write_head.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのCSS</title>
    <style type="text/css">
      h1 {
        font-size: 20px;
      }
      p {
        font-size: 10px;
        color: darkgray;
      }
    </style>
  </head>
  <body>
    <!-- 見出しのフォントサイズを20pxにする. -->
    <h1>Lorem Ipsum</h1>
    <!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
    </p>
  </body>
</html>
```

これをWebブラウザに表示させるとこんな感じ。
![index_write_head.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/3520d954-1c18-7325-c27f-45461cf92f20.png)
見た目を変更することができた(2回目)。

## HTMLファイルの各タグの中に記載
index.htmlの各タグにstyle属性を追記し、見た目の編集内容も記載する。

```html:index_write_tag.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのCSS</title>
  </head>
  <body>
    <!-- 見出しのフォントサイズを20pxにする. -->
    <h1 style="font-size: 20px;">Lorem Ipsum</h1>
    <!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
    <p style="font-size: 10px; color: darkgray;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
    </p>
  </body>
</html>
```

これをWebブラウザに表示させるとこんな感じ。
![index_write_tag.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/b5d5e33b-ef90-ca62-a293-e99f2c391e15.png)
見た目を変更することができた(3回目)。

# おわりに
今回は、実際にCSSを書いてみてHTMLファイルの見た目を編集した。
基本的には、CSSファイルを使用することになるだろう。

次回 >> [ここ](https://qiita.com/MakoMakoMakotsu/items/e1c7bb61ade3571913ac)

## 参考
[1-3 style属性によるスタイル適用（はじめてのCSS）](https://www.youtube.com/watch?v=RxSCeu7CyvQ&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=3)
[1-4 styleタグによるスタイル適用（はじめてのCSS）](https://www.youtube.com/watch?v=gKJMKmIZ-7A&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=4)
[1-5 外部ファイルによるスタイル適用（はじめてのCSS）](https://www.youtube.com/watch?v=hGB9mCC9Kwc&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=5)