CSSの書き方 #CSS

この記事は自分用にCSSの書き方（主にHTMLとCSSの対応方法）を書いたものです。

・CSSはHTMLで設定した文字の大きさや色、レイアウトなどを決めることができる言語である。使うにはHTMLと対応させる(紐づける)必要がある。

1.HTMLとの対応させる方法

①HTMLのheadタグにCSSのリンクを追加する。
この方法ではHTMLファイルとは別にCSSを作成し、そこにCSSの記述を書く方法である。この方法が一番オーソドックスな適用方法であり、基本的にこの方法をとっているという前提で書いていく、そしてそのHTMLとCSSの対応方法は下の通りである。

example.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="ここにCSSのファイルへのリンク名">
        <title>ページタイトル</title>
    </head>
~~~~中略~~~~
</html>

このようにHTMLファイルのheadタグに
<link rel="stylesheet" href="ここにCSSのファイルへのリンク名">を入力することによってHTMLとCSSを紐づけることができる。

※注意
href内に書くファイルへのリンク名はHTMLと同じフォルダにある場合はCSSのファイル名を入力するだけでよいが、別ファイルにある場合はリンクを適切に入力しなければ適用されないので注意。

②<style>タグを使用する。
こちらはHTMLの<head>タグにCSSを記述するものである。

example.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
        <style>
            h1 { color: #ffffff; }
            p  { background-color: #000000; }
        </style>
    </head>
~~~~中略~~~~
</html>

このように入力することによってCSSを適用させることができる。
今回の場合すべての<h1>タグに文字の色を白、すべての<p>タグに背景色を黒とさせている。

③タグの中に直接CSSを書き込む
最後の方法は適用させたいCSSをHTMLのタグに直接書き込む方法である。

example.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
        <meta name="description" content="ページの説明">
    </head>

    <body>
        <h1 style="color: #ffffff;">こんにちは</h1>
        <p sytle="background: #000000;>おやすみなさい</p>
    </body>
</html>

このようにHTMLのタグ内に直接CSSを書き込むことによってCSSを適用させる。

しかし、②の<style>タグや③のHTMLのタグ内に直接書き込む方法は、CSSを管理するのが難しいことや単純に見づらいのでできるだけ①のCSSリンクを追加させる方法の方が良い。

CSSファイルの書き方

次にCSSの書き方を述べていく。
CSSは、装飾したい場所 { 何を変えるのか: 具体的な変更; } のように変える。例としては

example.css

 /* 装飾したい場所にh1タグを指定*/
 h1 {
    /*何を変えるのかをcolor(文字の色の変更)を指定*/
    /*そして具体的な変更内容として#ffffff(HTMLのカラーコードの白)を指定*/
    color: #ffffff;
}

このように書いていく。
ただし、この方法ではすべてのh1タグに適用されるため、細かく個々のタグで個別に変更することはできない。

個々にCSSを適用させるには、さらにHTMLにclassやidなどを指定し、それとCSSを紐づける必要がある。

example.html

    <!--タグで指定する場合-->
    <h3>メインコンテンツ</h3>

    <!--classを指定-->
    <h1 class="title">タイトル</h1>
    <h2 class="title">サブタイトル</h2>

    <!--idを指定-->
    <p id="sentence">文章１</p>

example.css

    /*タグで指定する場合、タグ名を入力するだけで紐づけられる。*/
    h3 {
    font-size: 20px;
}

    /*classで指定した場合、指定した名前の前にピリオド(.)を入力すると紐づけられる。*/
    .title {
    color: red;
    background-color: white;
}

    /*このようにclassで指定した後にタグだけを引っ張ってきて、classの中の指定のタグだけを変更するということもできる。*/
    .title h2 {
    font-size: 10px;
}

    /*idで指定した場合、指定した名前の前に#を入力すると紐づけられる。*/
    #sentence {
    color: silver;
}

CSSは以上のように書いていく。