CSSの基本的な書き方【初心者向け】

HTML,CSS,Javascript
2023.02.18

皆さんHTMLを勉強しているだけで満足していませんか？

HTMLでWEBページ作成を実施する際にCSSを使用しないというのは考えられないことです。

HTMLのみで作成したWEBページはどうしても単調となってしまします。

そのような単調なWEBページに色を付けてくれるのがCSSというものです。

今回の記事はCSSの大切さと使用方法について解説したものとなっていますので、ぜひ最後まで読んでいってください。

CSSとは何か？

ではそもそもCSSとは何なのか？

先ほどWEBページに色を付けてくれると記載しましたが、あれは比喩ではなく文字通り色を付けてくれる機能もあります。

CSSはCascading Style Sheetsの略でWEBページのレイアウトを整えてくれる機能があります。

例えば下記はHTMLのみで記述したWEBサイトです。

とても簡単なページですが、黒一色となっていて、なんとも華やかさに欠けるページで訪れたいと思えるものではありません。

そこでCSSを使用すると下記のようなページとなります。

このように文字色や背景色を変更することができます。

上記は数秒で作成可能なレベルのページでしたので、そこまでこったモノにはなっていませんが、CSSを使用することでカラフルな見た目に変更することができるということは分かっていただけたかと思います。

CSSの書き方

では次はCSSの使用方法について解説していきます。

先ほどの解説で使用した下記ページですが、これのコードを基に解説していきます。

コードは下記の通りとなっています。

<!DOCTYPE html>
<html>
    <head>
        <title>CSSを試してみる</title>
        <style>
            h1{
                color: red;
            }
            p{
                color: green;
                background-color: coral;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <h1>CSSを使用するとこんなことが可能です！！</h1>
        <p>CSSを使ってみましょう</p>
    </body>
</html>

<body>～</body>の間で画面に表示させたい文章などを記述し、<head>～</head>部分にタイトルとCSSを記載しています。

CSSは<style>～</style>の内部に必要な情報を記述しています。

ここではh1タグで記述した文の文字色を赤色に、pタグで記述した文の文字色を緑色としています。

またpタグは横幅200pxのコーラル色の背景色も指定しています。

基本的な記述方法としては下記のようにまず<style></style>内にセレクタと呼ばれるどこの要素を変更するのかという情報を記述します。（今回はh1でした。）

そしてその内部にプロパティという何を変更するのかという情報に当たる部分を記述します。（今回はcolor→つまり色ですね）

そして最後にどのように変更するのかという値を記述します。（今回はred→つまり赤色です）

そしてこれらの情報を<head>～</head>内に記述することでCSSを使用することが可能となります。

<style>
    h1 {
        color:red;
    }
</style>

現実で例えるとセレクタを人だとすると、プロパティはその人の情報、そして値はその情報の詳細です。

青木さん(セレクト)という方の電話番号(プロパティ)はXXX-XXXX-XXXX(値)というような具合です。

基本的な記述方法は以上となりますが、他にも下記の通りいくつかの記述方法があります。

  • class名で指定
  • id名で指定
  • 複数のセレクタを指定
  • 子孫セレクタの指定

それぞれ簡単に解説していきます。

class名で指定

下記のように「.class名」と記述することでそのクラス名の所のみのレイアウト変更を行うことができます。

<!DOCTYPE html>
<html>
    <head>
        <title>CSSを試してみる</title>
        <style>
            h1{
                color: red;
            }
            .ex1{
                color:rgb(255, 0, 238);
                background-color: rgb(208, 255, 80);
                width: 200px;
            }
        </style>
    </head>
    <body>
        <h1>CSSを使用するとこんなことが可能です！！</h1>
        <p>CSSを使ってみましょう</p>
        <p class="ex1">class名で指定</p>
    </body>
</html>

id名で指定

「#id名」と記述することで同様のid名の所のみのレイアウト変更が可能となります。

<!DOCTYPE html>
<html>
    <head>
        <title>CSSを試してみる</title>
        <style>
            h1{
                color: red;
            }
            #ex2{
                color:rgb(229, 255, 0);
                background-color: rgb(100, 80, 255);
                width: 200px;
            }
        </style>
    </head>
    <body>
        <h1>CSSを使用するとこんなことが可能です！！</h1>
        <p>CSSを使ってみましょう</p>
        <p id="ex2">id名で指定</p>
    </body>
</html>

複数のセレクタを指定

「セレクタ1,セレクタ2・・・」と「，」区切りで指定することで複数のセレクタのレイアウトをすべて変更することが可能となります。

<!DOCTYPE html>
<html>
    <head>
        <title>CSSを試してみる</title>
        <style>
            h1,p{
                color:rgb(43, 0, 255);
            }
        </style>
    </head>
    <body>
        <h1>CSSを使用するとこんなことが可能です！！</h1>
        <p>複数セレクタを指定</p>
    </body>
</html>

子孫セレクタの指定

入れ子構造になっている要素を「親要素 子要素」のように半角スペースを入れて指定することでそこだけのレイアウトを変更することが可能となります。

<!DOCTYPE html>
<html>
    <head>
        <title>CSSを試してみる</title>
        <style>
            p strong{
                color:rgb(255, 106, 0);
            }
        </style>
    </head>
    <body>
        <h1>CSSを使用するとこんなことが可能です！！</h1>
        <p>CSSを使ってみましょう</p>
        <p><strong>子孫セレクタの指定</strong></p>
    </body>
</html>

CSSは別ファイルで記述できる

ここまでCSSについて解説してきましたが、CSSは別ファイルとして作成することも可能です。

【HTMLファイル】
<!DOCTYPE html>
<html>
    <head>
        <title>CSSを試してみる</title>
        <link rel="stylesheet" href="CSS別ファイル.css">
    </head>
    <body>
        <h1>CSSを使用するとこんなことが可能です！！</h1>
        <p>外部CSSファイルを使用してみる</p>
    </body>
</html>
【CSSファイル】
@charset "utf-8";
p{
    color:rgb(255, 0, 25);
    font-size:40px;
}

HTMLファイルには「<link rel=”stylesheet” href=”CSS別ファイル.css”>」という記述をしました。

これは外部CSSファイルを読み込むのに必要な記述方法です。

rel属性には外部CSSを示す「stylesheet」と記述をし、href属性には外部CSSファイルのファイル名を記述します。

そして外部CSSファイルは内部CSSで記述していた時とほぼ同様の記述方法となっています。

「@charset “utf-8”;」と記述している部分は文字化けを防ぐために記述しています。

そして外部CSSファイルは「ファイル名.css」のように拡張子はcssとします。

以上で外部CSSを使用することが可能となります。

まとめ

この記事ではCSSについて下記項目で解説してきました。

  • CSSとは何か？
  • CSSの書き方
  • CSSは別ファイルで記述できる

HTMLの内容がある程度理解できるようになったら今度はCSSに挑戦してみることをオススメします。

仮に仕事で使うとなった場合HTMLとセットでCSSやJavascriptが使用できることが当たり前となっています。

ですので、本格的にそういった仕事をしたいという方はCSSの勉強も実施してきましょう。

以上で今回の解説は終了となります。

コメント

タイトルとURLをコピーしました