CSSの概要

by

CSSの概要を紹介します。

目次

CSSとは

CSSとは、カスケーディング・スタイル・シートの頭文字です。HTMLのみでサイトを構築した場合文字列のみのサイトになりますが、CSSを使用することでサイトに色や、文字の配置などの設定を追加することができます。

テキストエディタの導入

CSSを使って学習したり、ホームページを作成する際はテキストエディタツールをパソコンに導入しましょう。Microsoft社が開発しているVisual Studio Codeの使用がおすすめです。

Visual Studio Codeのダウンロードはこちら。

CSSの書き方

CSSは次の構成で書きます。

セレクタ{
　プロパティ: 値 ;
}

セレクタ

CSSで装飾するHTMLを指定します。例えば、HTMLで<p>で囲われた文章をCSSで装飾したい場合、次のように記述します。この記述では、<p>で囲われている文章すべてが記述したCSSの影響を受けます。

p{
　プロパティ: 値;
}

次のことに留意しましょう。

  • classを指定する場合、.classA　のようにクラス名の前に「.」をつけます。
  • idを指定する場合、#abcのようにidの前に「#」を付けます。

プロパティ

HTMLをどのように装飾するかを指定します。例えば、colorは文字色を指定するCSSです。

値

指定したプロパティに対して、どのような変更をするのか値を代入して指定します。例えば、<p>で囲われている文字列をすべて赤色にしたい場合、次のような記述をします。

p{
 color: red;
}

CSSプロパティ一覧はこちら

CSSをHTMLファイルで読み込む

記述したCSSファイルをHTMLファイルで読み込みます。CSSをHTMLに反映させる方法は次の3通りです。

  1. HTMLファイルとCSSファイルを分け、HTMLファイルの<head>タグ内にCSSファイルのリンクを記述する
  2. HTMLファイルにstyleで囲ってCSSを記述する
  3. HTMLタグに記述する

詳しく説明します。

１．HTMLファイルにCSSファイルを紐づける

HTMLファイルとCSSファイルを別で作成します。.htmlファイルと、.cssファイルを用意しましょう。CSSファイルにCSSを記述した状態で、HTMLファイルの<head>～</head>で囲われている部分に次のコードを記述します。

<link rel="stylesheet" href="CSSファイルへのパス">

例えば次のようなファイルの構成であれば、「CSSファイルへのパス」部分に「style.css」と記述します。

２．HTMLファイルにstyleで囲ってCSSを記述する

HTMLファイル内にstyleでCSSを囲って記述します。次のコードは記述例です。

<head>
<style>
p{
　color: red;
}
</style>
</head>

３．HTMLタグに記述する

HTMLタグに直接CSSを書き込みます。

<div style="CSSを記述します">

適用される優先順位

CSSは、適用される優先順位があります。

  • 同じCSSについては、下の行の記述が優先
  • importantと記述したCSSは最優先になる

また、セレクタは次の順位で優先されます。

  1. important
  2. 直接HTMLタグに記述したCSS
  3. id
  4. class
  5. HTMLタグ

Google検索を使用する

CSSは、次のようなキーワードで検索することで円滑に記述が可能です。例えば、背景の色をCSSで変更したい場合次のように検索します。

CSS　背景色　変更

このように検索することで、CSSで背景の色を変更するコードをすぐに確認できます。

実際にCSSを記述する

CSSを学ぶために、実際にCSSを記述してみましょう。Visual Studio CodeとGoogle Chromeをパソコンにインストールし、次のコードが書かれたindex.htmlファイルを作成しましょう。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS 入門</title>
</head>

<body>

    <h1>見出し１です</h1>

    <p>これは第一段落の文です。この文には <span>span 要素</span>
と<a href="http://example.com">リンク</a>が含まれます。</p>

    <p>これは第二段落の文です。この文には <em>em 要素</em>が含まれます。</p>

    <ul>
        <li>一つ目の項目</li>
        <li>二つ目の項目</li>
        <li><em>三つ目</em>の項目</li>
    </ul>

</body>

</html>

index.htmlファイルを作成したら、<head></head>で囲われている部分に次のコードを記述します。このコードは、これから作成するCSSファイルと、今作成したHTMLファイルを紐づけるためのコードです。

<link rel="stylesheet" href="styles.css">

上記のコードを記述すると、index.htmlファイルのコードは次のようになります。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS 入門</title>

    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <h1>見出し１です</h1>

    <p>これは第一段落の文です。この文には <span>span 要素</span>
と<a href="http://example.com">リンク</a>が含まれます。</p>

    <p>これは第二段落の文です。この文には <em>em 要素</em>が含まれます。</p>

    <ul>
        <li>一つ目の項目</li>
        <li>二つ目の項目</li>
        <li><em>三つ目</em>の項目</li>
    </ul>

</body>

</html>

それでは、CSSファイルを作成しましょう。先程作成したHTMLファイル内の、<p></p>で囲われた部分の文字列の色を変更するCSSを記述します。Visual Studio Codeもしくはメモ帳（Windowsの場合）を開き、下記のコードを貼り付けてください。

p {
  color: green;
}

このコードは、<p></p>で囲われた部分の文字列を緑色にします。このコードを記述したら、「.css」形式にしてファイルを保存します。ファイルの保存場所は、HTMLファイルを作成した場所です。

最後に、最初に作成したHTMLファイルを右クリックしてブラウザで確認します。次のような画面が表示されていればCSSが問題なく動作しています。

また、<p></p>で囲われた部分のみならず、リスト化されている部分についても文字列の装飾を行う場合次のコードを記述します。

p, li {
    color: green;
}

参考：CSS入門 – MDN Web Docs

CSSの学習方法

CSSの学習は、本やWEBメディアを活用しましょう。どちらの媒体も、CSSを学習する場合実際にサイトを作るなどして手を動かす作業をしましょう。

まとめ

CSSの記述方法と、CSSの実装方法について紹介しました。CSSは、実装したい要素とCSSをGoogleで検索することで必要なコードを探すことができます。CSSを追記したい場合はGoogleで検索することになれましょう。