C-1. CSS基礎

2021.12.14

CSSの設定を理解しておこう！

Cascading Style Sheetsの略語、Webページのデザインやレイアウトなど「見た目」に関する指定をしたものです。

CSSに記述するセレクタとプロパティの書式を理解しておこう。

1
2
3
セレクタ {
  プロパティ名 : プロパティ値;
}

セレクタ：html内のどこを（html:html全体を、body:body要素を、li:リスト要素を）

プロパティ名：セレクタで選んだ要素の何を（文字の大きさを、色を、背景を）

プロパティ値：どう変更したいか（文字の大きさを20pxにしたい、色を赤くしたい）

CSSの記述例を見ておこう。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
  background:#FFFFFF;
}
/* ツールバー */
#toolbar > ul {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background: #444444;
}

style要素でHTMLファイルに直接CSSを記述してみよう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS styleサンプル</title>
  <style media="screen">  ⬅style要素は、要素内容にCSSを記述することができる要素です。
    h1 {
      color: white;
      background-color: blue;
    }
    
    p {
      color: #000000;
      background-color: #00FFFF;
    }
  </style>
</head>
<body>
  <h1>これは表題です</h1>
  <p>これは本文です</p>
</body>
</html>

ブラウザでの実行結果

外部ファイルにCSSを記述しlink要素でHTMLファイルに読み込む方法を理解しておこう！

ファイル名：index.html

XHTML
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS linkサンプル</title>
  <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
  <p>これは本文です</p>
</body>
</html>

外部ファイルにCSSを記述し@importで別のCSSに読み込む方法を知っておこう。

  • @importを利用して、CSSの中から外部CSSファイルを読み込むことができます。
  • @importの後ろには、ダブルクォーテーションやシングルクォーテーションで囲ったURLやファイルパスを記述します。

ファイル名：style.css

1
2
3
4
5
6
7
8
9
10
11
12
@charset "UTF-8";
@import "css/style.css" screen;
 
h1 {
  color: white;
  background-color: blue;
}
 
p {
  color: #000000;
  background-color: #00FFFF;
}

ブラウザでの実行結果

※css/style.css 指定している場合、CSSファイル直下にstyle.cssを入れる必要はありませんが、

以下のようなディレクトリ構造でファイルをいれる必要があります。

ディレクト構造を理解しておこう！

TeX
1
2
3
4
5
6
.
├── css
│   └── style.css
└── index.html
 
1 directory, 2 files

style属性でHTMLファイルに直接CSSを記述してみてください。

以下のように直接記述するのも可能です。

XHTML
1
2
  <h1 style="color: white; background-color: blue;">これは表題です</h1>
  <p style="color: #000000; background-color: #00FFFF;">これは本文です</p>

課題

CSSをつかって<h1>内の文字色を赤（ff0000）

文字を太く、斜体にしてください。作成したファイル名をindex_2_11.htmlにして送ってください。

実行結果

ヒント

：以下の宣言を利用してください。

1
color: red;<br>font-weight: bold;<br>font-style: italic;

課題・復習用検索キーワード

検索例
🔍CSS　文字　色つける
🔍CSS　文字　太く
🔍CSS　文字　傾ける