CSSについて書こうかな!

フリーランスのWebデザイナーになろうとしている男

　昨日は、HTMLについて書いたから、今日はCSSについて書こうかな。

　CSSとは、顔に化粧するイメージ。＝Webサイトの見た目をデザインする。

　CSSの記述は、セレクタ、プロパティ、値から成り立っている。

  1. セレクタ
    セレクタとは、選択する箇所という意味であり、装飾を適用したいHTML要素を指定することができる。
    セレクタには、HTML要素名のほか、クラスやIDなどを使用することができる。（クラスやIDの説明は後日）

  2. プロパティ
    色や大きさといった装飾の種類を指定する。文字の色を変更したい場合は、colorというプロパティを、背景色を変更したい場合は、background-colorというプロパティを、という具合。

  3. 値
    プロパティを具体的にどのように変更するのかを指定する。例えば、colorプロパティが設定されている場合、値にredと指定すると文字の色を赤にすることができる。

　上記を踏まえると、例えば、こんな感じ。
　h1{color:red;}
　プロパティと値を波括弧で囲んで、プロパティの後には「：」（コロン）を付けて、値の後には「；」（セミコロン）を付ける。

　これでいうと、h1がセレクタ、colorがプロパティ、redが値になる。
　h1要素（見出し）の文字の色を赤にする意味になる。

　こんな感じで、HTMLのこの部分にこういう装飾をする、という設定をするのがCSS。

　CSSに記載するコード（共通）はこんな感じ。

@charset "UTF-8"

　ただ、これだけだと、HTMLファイルとリンクされないから、HTMLにリンクするコードを記述しなければならない。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>ここにタイトルを入れる</title>
    <link rel="stylesheet" href="style.css"><!--hrefにはファイルのパスを入れる-->
</head>
<body>
    <header>
        <nav> <!--ここにul（番号なしリスト）とか入れてナビゲーションを作る-->
        </nav>
    </header>
    <main>
        <article>
        </article>
        <section>
        </section>
    </main>
    <aside>
    </aside>
    <footer>
    </footer>
</body>
</html>

　それが、７行目。それ以外のコードは昨日書いたものを引っ張ってきた。
　こうすることで、HTMLとCSSが連携する仕組みになっている。ただし、ファイル名が間違っていたり、パスが間違っていたりすると、リンクされないから、そこは留意が必要。

この記事が気に入ったらサポートをしてみませんか？