CSS超入門 – DeNnie.Lab

cssについて理解する前に、簡単なcssを使用してcssを使用しない場合の問題点から、cssを使用するメリットを理解します。
htmlの基本を分かっていることを前提とします。

CSSの例

概念や理由を理解する前に、簡単なcssを使用してみます。
以下のhtmlファイルとcssファイルをデスクトップに用意し、ブラウザで表示して見ましょう。
文字の色が赤くなります。

index.html

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>

    <body>
      <div class="test">ああああ</div>
    </body>

</html>

test.css

.test {
  color:red;
}

実行結果

ああああ

スタイルとは

実際にcssを使ってみたところで、cssを使用せずにhtmlファイルだけでweb画面を作成して見ましょう。
先ほどのindex.htmlを以下のように書き換えて下さい。結果は同じとなります。
今回はcssファイルのtestクラスを使用せず、style属性に文字の色を赤くするスタイルを指定しました。

index.html

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>

    <body>
      <div style="color:red">ああああ</div>
    </body>

</html>

実行結果

ああああ

問題点

CSSを使用しない場合の問題点は以下です。

・style属性の記述が長くなり、コードが汚くなる。
・違うタグのstyle属性に同じ記述をしなければならない。

文字の色を変えるぐらいであればstyle属性は短い記述で済みますが、実際はフォントやマージンなど色々なスタイルを割り当てることになります。そうなると、style属性の記述が長くなり、コードが汚くなります。
また、違うタグに同じスタイルを割り当てることも多くあります。そうなると、以下のようにstyle属性に同じ記述をしなければなりません。

<div style="color:blue;font-size: 20px;font-family: 'serif';">ああああ</div>
<div style="color:blue;font-size: 20px;font-family: 'serif';">いいいい</div>
<div style="color:blue;font-size: 20px;font-family: 'serif';">うううう</div>
<div style="color:blue;font-size: 20px;font-family: 'serif';">ええええ</div>

CSSのメリット

スタイルをcssファイルに切り出すことにより、上記の問題点を解決してくれます。

・style属性がhtmlに記載されない為、コードがスッキリする。
・スタイルの使い回しができる。

以下は、スタイルをsample_styleクラスに記述した例です。
スタイルの使い回しができ、ソースコードも綺麗になりました。

.sample_style {
  color:blue;
  font-size: 20px;
  font-family: 'serif';
}

<div class="sample_style">ああああ</div>
<div class="sample_style">いいいい</div>
<div class="sample_style">うううう</div>
<div class="sample_style">ええええ</div>

CSSとは

cssとは何かを一言で言うと、htmlのスタイルを記述するファイルです。

まとめ

特にありません。