7. CSSについて

研修概要

CSSはどのようなことができるのかを理解し、htmlへの適用方法やCSSの書き方を学ぶ

このチャプターでのゴール

CSSとは何か？どのようなことができ、どのように記述するのかを理解し、自己紹介ページに適用する。

CSSでは何ができるのか？

CSSとは（Cascading Style Sheets）とは、Webサイトのサイズや色、レイアウトなどを設定するためのプログラミング言語です。
eCSSは背景の色の変更や画像の設置、文字のフォントや色などの幅広いデザインを定義する際に使用されます。

CSSの書き方

CSSの基本的な書式は、セレクタ{プロパティ:値;}です。セレクタ、プロパティ、値がそれぞれ何を指すか、以下で解説します。

セレクタ

セレクタは、CSSで指定する対象を決める役割です。
英語で「select（選択する）」を意味しており、h1、h2、p、bodyなどのタグ要素の指定や、「id=”属性名”」「 class=”属性名”」などで対象にした属性の指定を行います。
セレクタには要素名を直接指定したり、CSSの記法を用いて指定したりする方法があります。

プロパティ

プロパティは、CSSに関するスタイルの種類を決める役割です。
セレクタの内容を「」で囲むことで、コードの内容を実行します。
たとえば、文字の色は「font-color」で指定し、背景画像の変更は「background-image」のように記載します。
CSSにはさまざまなプロパティがあるため、用途に応じて使い分けましょう。

値は、プロパティを調整する役割です。たとえば、文字の色の「font-color」のプロパティを調整する場合、「white」「#FFFFFF」のようにカラーネームやカラーコードで具体的な色を指定します。
「font-size」のプロパティであれば、「16px」「90%」のように数値で大きさを決めます。

それでは、実際にサンプルを通してCSSを書いてみましょう。

まず、CSSを適用するhtmlから作成します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <!--以下はお約束の書き方なので必ず覚えてください。※CSSファイルを読み込んでいます。 -->
        <link rel="stylesheet" href="Chapter7.css">
        <title>Chapter7_CSSの学習</title>
    </head>
    <body>
        <!--チャプター5で扱ったdivタグを使うとCSSの適用を一括でできるので非常に楽です。 -->
        <div class="Chapter7">
            <h1>Chapter7_CSSの学習</h1>
        </div>
    </body>
</html>

.Chapter7 {
    color: #2196F3; /*divタグの中にあるh1タグ内の「Chapter7_CSSの学習」の文字色を変更*/
}

これだけです。

今回、CSS側での文字色はカラーコードで変更してみましたが、それ以外の方法でも変更はできるので是非調べてみてご自身の一番やりやすい方法を探してみてください。

Web

CSSの読み込み

CSSの読み込みは非常に簡単です。

上記サンプルコードで扱ったようにhtml側のheadタグの中で以下１行追加するだけです。

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

これで、htmlにCSSファイルが適用され、文字色のスタイルを変更することができます。

研修課題７

今まで作成した自己紹介ページの文字色をcssを使い変更してみましょう。

また、文字色だけではなく自身でcssについて調べ、適用したいスタイルについて学び適宜自由にスタイルを変更してみましょう！！

目次​

研修概要​

このチャプターでのゴール​

CSSでは何ができるのか？​

CSSの書き方​

CSSの読み込み​

研修課題７​

目次