Chapter 1 - 3

CSSでwebページにスタイルをつけてブラウザで表示する

目標

CSSを用いてwebページにスタイルをつけることができる
作成したwebページをブラウザで表示できる

CSSとは

CSSを書くファイルの作成

VSCodeでwebフォルダを開く
New Filesから新たなファイルを作成し、style.cssと名前を入力する

CSSを表示させる

CSSをwebページで表示するにはHTMLでCSSファイルを読み込む必要があります。

headタグの中にlinkタグを追加し、作成したCSSファイルのリンクを追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="./style.css" />
    <title>Hoge Coffee</title>
  </head>

CSSを書いてみる

見出しの色を変更する

先ほど作成したstyle.cssを開きます。
見出しであるh1のテキストの色を赤に変更し、保存します。
```
h1 { color: red; }
```
ブラウザでindex.htmlを表示させます。
以下のように表示されれば成功です。

正しく表示されたのを確認したら、追加したテキストは削除しておきましょう。

CSSでwebページにスタイルを追加する

ページ全体のスタイルを設定

bodyタグにスタイルを追加します。

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  color: #cfc9c9;
  background-color: #272d31;
  text-align: center;
}

<margin>: 余白を設定する。
<font-family>: テキストのフォントを設定する。左から順に採用される。
<color>: テキストの色を設定する。色名やrgbや16進数で指定する。
<background-color>: 背景の色を設定する。色名やrgbや16進数で指定する。
<text-align>: テキストを左や中央、右などに揃える。

見出しのフォントサイズを設定

見出しであるh1、h2タグのテキストのフォントサイズを設定します。

h1 {
  font-size: 48px;
}
 
h2 {
  font-size: 20px;
}

<font-size>: フォントサイズを設定する。

メインコンテンツ全体のスタイルを設定

mainタグにスタイルを追加します。

main {
  max-width: 1024px;
  margin: 0 auto;
}

<max-width>: 横幅の最大値を設定する。

リンクの色を変更する

aタグのテキストの色を変更します。

a {
  color: #85a3b7;
}

トップページを作成する

.top-page {
  width: 100vw;
  height: 100vh;
 
  background-image: url(./top-page.png);
  background-size: cover;
  background-position: center;
 
  display: flex;
  justify-content: center;
  align-items: center;
}

<width>: 横幅を指定する。
<height>: 高さを指定する。
<background-image>: 背景の画像を指定する。
<background-size>: 背景の大きさを指定する。
<background-position>: 背景の位置を指定する。
<display>:
<justify-content>:
<align-items>:

コンテンツにスタイルを追加する

.about {
  margin: 80px 0;
}
 
.contents-box {
  width: 100%;
  display: flex;
  align-items: center;
}
 
.content {
  width: 50%;
}

フッターにスタイルを追加する

footer {
  background-color: #162025;
  padding: 48px 0;
  font-size: 12px;
}

<padding>: 余白を設定する。

今回のコード

今回の全体のコードは以下になります。

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  color: #cfc9c9;
  background-color: #272d31;
  text-align: center;
}
 
h1 {
  font-size: 48px;
}
 
h2 {
  font-size: 20px;
}
 
main {
  max-width: 1024px;
  margin: 0 auto;
}
 
a {
  color: #85a3b7;
}
 
.top-page {
  width: 100vw;
  height: 100vh;
 
  background-image: url(./top-page.png);
  background-size: cover;
  background-position: center;
 
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.about {
  margin: 80px 0;
}
 
.contents-box {
  width: 100%;
  display: flex;
  align-items: center;
}
 
.content {
  width: 50%;
}
 
footer {
  background-color: #162025;
  padding: 48px 0;
  font-size: 12px;
}

↓紹介 border position -:hover -:active -:disable -:checkbox

参考サイト：mdn wed docs

ここまでに学んだ技術

HTML
CSS