PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【CSS】CSSの書き方

CSSを用いてのHTMLをスタイリングしていきます。


CSSを書く場所

CSSは一般的に外部ファイルとしてHTMLに読み込ませます。
その場合headの中に、以下のように記述します。

<link rel="stylesheet" href="style.css">


また、直接CSSをheadの中に書き込むこともできます。

<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<style>
  h1 {
    color: red;
  }
</style>
</head>

CSSの基本的な記述方法

CSSの基本的な書き方は、セレクタ、プロパティ、値の順に書き込みます。

例:

h1 {
  color: red;
}

上記の内容だととh1の文字色を赤に指定するという意味になります。


セレクタの書き方

セレクタをより具体的に書くことによって、部分的にスタイルを適応させることができます。
先に親となる親要素を書き、跡に子となる子要素を書きます。

h1 span{
  color: red;
}

上記の内容だと、h1の中にあるspanの文字色を赤に指定すると言う意味になります。


IDやクラスを使用する書き方

HTML内でIDやクラスを指定することで、直接その要素にスタイルを適応させることができます。

HTML内での指定

HTML内にIDとクラスを書くには、それぞれの開始タグの中に「id」と「class」を埋め込みます。


例:

<div id="header">
<h1 class="caption">テスト</h1>
</div>

CSS内での指定

CSS内にIDとクラスを書くには、IDは「#」クラスは「.」を付け加えます。


例:

#header h1.caption{
  color: red;
}