初心者のためのCSSルール

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

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

CSSとは


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



CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。
日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて１週間です。
原理原則、現在の傾向といろいろあるWebの技術ですが、初めてなのだからプロに笑われるようなことでも、ひとつひとつ丁寧に記述し理解して行きましょう。
慌てる必要はありません。シンプルにいきましょう。

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」と呼びます。