初心者のためのCSS記述ルール

多すぎる情報に惑わされない

  • 基本を理解することを優先する
  • プロの方法を真似しない（プロの方法は、プロになってから！）

CSSとは

つまり、どう表示したいかというイメージに向かって値を記述していきます。

CSSのコーディング規約（Google）

CSSはどこに書くか？

  • 外部ファイルにCSSを書く方法
  • styleタグを使ったCSSを書く方法
  • HTML要素にCSSを書く方法
外部ファイルにCSSを書く方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>


《style.css》

h1 {
    color: red;
}
styleタグを使ったCSSを書く方法
  • styleタグにtype属性は不要
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<style>
  h1 {
    color: red;
  }
</style>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>
HTML要素にCSSを書く方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
</head>
<body>
<h1 style="color: red">大見出し</h1>
<p>こんにちは！</p>
</body>
</html>

CSSの書き方の基本

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは！</p>
</body>
</html>


《style.css》

/* 
セレクタ
プロパティ
値
*/

h1 {
    color: red;
}
  • 値を複数並べる必要がある書き方をする場合には、複数の値を識別できるように半角スペースが必要です
h1 {
    border: 1px solid #F00;
}

セレクタを理解する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは<span class="test">！</span></p>
<div id="main">メインです！</div>
</body>
</html>


《style.css》

/* セレクタ */

h1 {
    color: red;
}

/* ID要素 */

#main {
    font-size:36px;
}

/* class要素 */

.test {
    font-size: 9px;
}

/* 複数の要素 */

#main, .test {
    border: 1px solid #CCC;
}

《サンプル》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リセットCSSを記述する前に</title>
<style>
h1,p,ul {
  color: #FFF;
}
h1 {
  background-color: #95CCE2;
}
p {
  background-color: #EFB15F;
}
li {
  background-color: #98DC77;
}
</style>
</head>
<body>
<h1>ページのテーマ</h1>
<p>ここに本文が入る</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</body>
</html>


《プレビュー》

  • 各要素間が、指定していないにもかかわらず空いているのがわかります
  • リストも２文字分インデントされています


これは、ブラウザが初期値としてもっている空きの値を利用してプレビューしているからです

ブラウザ固有のCSSの値をリセット

《空きをなくす記述》

h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}



この状態から、自分の空けたい値を指定することにより、思い通りのレイアウトにするということが「リセットCSS」の目的です。


《ブラウザとの空きもなくす記述》

body,h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}


これからページを構築していく段階で、「初期値：0」であることにより、指定した値が反映されていることが確認しやすくなります。


この設定の意味を拡張（値を初期値に設定し直す）した設定を「リセットCSS」と呼びます。