CSS の基礎を初心者にわかりやすく解説

Yasshi

プログラム系記事第二弾です。
今回はhtmlと並んで使われるcssの基礎です。
こいつを覚えなきゃhtmlは使えないってくらい重要です。
この記事では、cssの記入方法、htmlとの同期の仕方を解説していきます。


CSSとは何か

cssは、Webサイトのサイズの大きさ、色、レイアウトの指定などの
装飾ができるプログラミング言語です。
ファイルの作り方は、テキストファイルの拡張子を.cssに変えるだけです。
ある程度の装飾はcssだけでできますが動的なページはJavaScriptを使用します。
cssの雛形はこちらです。

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

セレクタ、プロパティ、値。よくわかんないのがいっぱい出てきましたね。
これをわかりやすく解説していきます。

cssの書き方。

セレクタ


セレクタっていうのは、cssの中身をどのhtmlに適応させるかを決めるものです。
htmlについているタグ（<body>,<h1>,<a>）などや、
Id、クラスというものを指定できます。また新しい単語が。。。

今後htmlの記事で詳しく説明しますが、
idはタグにつけれる名前です。
idは他のタグに重複はできないので、1つのタグだけにcssを適応させたい時は
idを使うと良いです。

クラスというのは、タグにつけれる属性です。これは重複できるので、
複数のタグに同じcssを適応させたいときは、クラスを使うと良いです。
タグ、id、クラスのセレクタの書き方はこうです。

a{
 プロパティ:値;
}
#アイディー{
 プロパティ:値;
}
.クラス{
 プロパティ:値;
}


上からタグ、id、classの書き方です。
タグはそのまま指定したいタグの名前を書きます。
idの場合は指定したいidの前に#をつけます。
classは指定したいclassの前に.をつけます。
これでどのセレクタにcssを適応するか決めれましたね。
でもどんな装飾をするのかは決めてません。
そこでプロパティです。
これ先にidクラスの説明の記事作ればよかったな

プロパティ

きましたプロパティ。cssで何を装飾するかを決めることができます。
よく使われて、簡単なプロパティはこちら。

  • color（文字の色の指定）

  • background-color（背景色の指定）

  • font-size（フォントサイズの指定）

他にもたくさんありますが、今回は割愛。
書いてみるとこんな感じ。

a{
 color:値;
}
#アイディー{
 background-color:値;
}
.クラス{
 Font-size:値;
}

さて、どのセレクタにどんなプロパティにするか決めましたね。
でも、どんな色にするか、どれくらいのサイズにするか。
まだ指定されていません。そこで値を入力することになります。

値

値は、プロパティの中身を決めることができます。
例えばcolorだったら、カラーコードの指定や、色単体での指定ができます。
フォントサイズだったらpxのサイズを指定することができます。
書いてみるとこんな感じ。

a{
 color:red;
}
#アイディー{
 background-color:#ff0000;
}
.クラス{
 Font-size:60px;
}

これでcssの指定ができましたね。
上から

  • pタグの色を赤に指定

  • アイディーというidの色を赤に指定

  • クラスというclassフォントサイズを60pxに指定

こんな感じです。

cssとhtmlの同期方法

css記述したけどhtmlと合わせるにはどうしたらいいの！？
ってなってますよね。
二種類あるので説明します。

Html内に記載する方法

これはhtmlのなかに直接cssを書き込む方法です。
メリットとしては、1画面で終わらせることができることでデメリットは
コードが長くなることです。
記載方法は、html内の<head>タグの中に
styleタグというものを使って記載します。
見本を書いてみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        #アイディー{
        background-color:#ff0000;
        }
        a{
        color:red;
        }
        .クラス{
        Font-size:60px;
        }
    </style>
</head>
<body>
    <p id="アイディー">hello</p>
    <a>hellored</a>
    <p class="クラス">hello60px</p>
    <p class="クラス">helloooooo</p>
</body>
</html>

headタグの中にstyleタグを記入して、その中にcssを書いていく感じです。
実行するとこんな感じ


上はid
次はaタグ
その下２つはclass


アイディーって名前のidはhelloの背景が赤くなってますよね。
aタグのフォントも赤くなってる。
クラスって名前のクラスはfontサイズが60pxになってる。
cssがちゃんと起動してる証拠です。

cssファイルを読み込ませる方法

メリットはコードが見やすくなって
デメリットは1つのファイルで機能しなくなること。
使い方は、htmlのheadタグの中に
<link rel="stylesheet" href="cssファイルの名前">
これを書くだけで完成です。うーん簡単。
ちなみに私は前者で終わらせてます。めんどくさいんだもん。

これでcssの基礎は完璧です。
これからも記事書いていくので今後もよろしくお願いします。

有料エリアには雑談くらいしか書かれてないんですが、
それでもいいって人はぜひお願いします。

ここから先は

137字

¥ 500

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