Loading...
CSSを理解しよう

CSSを理解しよう

公開
2018.06.18
更新
2018.10.29
  • 講座

  • CSS

本講座ではCSSの概要を学んでいきます。

CSSの構造

styleタグを使ったCSSの構造を見てみましょう。
(これまでに私たちが書いてきたindex.htmlの中から抜粋しています)

h1 {
  color: red;
}

これはCSSの規則と慣習に則って書かれています。

では、改めてこのCSSの構造を見ていきましょう。

記述位置と名称

以下の3つはそれぞれ決められた位置に記述されています。

  • h1
  • color
  • red

それぞれの位置には名称があり、また記述できる内容も異なります。

selector

h1 {
  color: red;
}

h1の部分をselector(セレクタ)と呼びます。

selectorには任意の文字列を指定できます。

property

h1 {
  color: red;
}

colorの部分をproperty(プロパティ)と呼びます。

propertyには、propertyとして定義されているいずれかの文字列を指定できます。

value

h1 {
  color: red;
}

redの部分をvalue(バリュー・値)と呼びます。

valueにはpropertyに対応した(決められた)文字列を指定できます。

名称で書くCSS

各名称でCSSを書くと以下のようになります。

selector {
  property: value;
}

規則と慣習

各名称で書かれたCSSを例に見ていきます。

selector {
  property: value;
}

規則

CSSを書く上で必ず守らなければならない規則は以下の3つです。

  1. selectorの後には{}が必要です
  2. propertyの後には:;が必要です
  3. valueは:;の中に書きます

この規則に則っていない場合、CSSとして認識されない可能性があります。 ※


※ 間違った記述があってもブラウザ側で補完され、正しく効いているように見えることがありますが、他の場所で表示が崩れるなどの不具合が生じる可能性があります

慣習

規則だけで見れば、以下のCSSは何の問題なく、表示上も問題ありません。

selector{property:value;}

しかし、CSSの記述量が多くなるとかなり見辛くなってしまいます。

そこで、以下のような書き方がCSSの慣習になっています。

1. selectorの後ろに半角スペースを入れ、{}を書く

  selector {}

2. {}の間に空行を入れる

selector {

}

3. 2の空行にインデントしてからpropertyと:;を書く

selector {
  property:;
}

4. :;の間に半角スペースを入れ、valueを書く

selector {
  property: value;
}

CSSを書いてみよう

index.htmlにCSSを追加してみましょう。

フォームに薄く背景色を敷いてみたいと思います。
これから使うCSSプロパティ・バリューはここで覚えなくても問題ありません。

慣習に則り順番に書いてみましょう。

1. selector(form)の後ろに半角スペースを入れ、{}を書く

form {}

2. {}の間に空行を入れる

form {

}

3. 2の空行にインデントしてからproperty(background-color)と:;を書く

form {
  background-color:;
}

4. :;の間に半角スペースを入れ、value(#f3f3f3)を書く

form {
  background-color: #f3f3f3;
}

表示を確認してみましょう。

ご意見フォーム表示例

はい、完璧です!

まとめ

本講座では

  • selector(セレクタ) property(プロパティ) value(バリュー・値)
  • CSSの規則と慣習

について学びました。

これでCSSの概要は理解できました!
CSSの技術もこれからどんどん身に着けていきましょう!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  form {
    background-color: #f3f3f3;
  }
  </style>
</head>
<body>
  <!--
    これはGieerの講座で作成したHTMLです。
    実サービスには使えません。
  -->
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <h2>ご意見フォーム</h2>
  <!-- ダミーフォーム -->
  <form action="./index.html" method="post" class="opinionForm">
    <div>
      お名前:<input type="text" name="name" required>
    </div>
    <div>
      ご意見:
      <textarea name="opinion" required></textarea>
    </div>
    <div>
      回答:
      <input type="radio" name="lottery" value="need">希望する
      <input type="radio" name="lottery" value="notNeed" checked>希望しない
    </div>
    <div>
      メールアドレス(回答を希望する方のみ):<input type="text" name="email">
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!