CSSとは?〜初心者でも理解できる基礎知識〜

こんにちは!sirobako大城です。

梅雨入りでジトジトしますね。こんな時期は喉が潤ってカラオケがいいそうですよ〜♪( ´θ`)

さて、前回に引き続き、CSSについて簡単にご説明していきたいと思います!

 

 

CSSとは?

CSSとは、Cascading Style Sheet(カスケーディング・スタイル・シート)の略で、WEBページのHTMLにデザインを持たせるための言語です。

 

WEBサイト制作するにあたって、コーディング「HTML」、「CSS」は基礎となっております。今私達がスマホやPCでみている画面(WEBページ)は、基本的にはこのHTMLという言語(文字)によって作られています。

 

CSSファイルの作り方

CSSファイルで指定するHTMLのタグを「セレクタ」、どんな内容のデザインを施すのかを示すのが「プロパティ」、そのプロパティをどうするのかを指定するのが「値」です。

これらを設定することでCSSを適用することができ、プロパティを追加することで見出しにデザインを追加することができますし、セレクタを追加することで見出し以外にデザインを設定することもできます。

 

 

実際にボタンを例にHTMLを使ってCSSを作成してみましょう!

 

まずは、シンプルな作りのボタンをHTMLで作成します。

 

 

1、【HTMLファイル】

3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <meta httpequiv=Content-Type” content=text/html; charset=UTF-8″>
    <title>sample</title>
</head>
<body>
    <br />
    <input type=button” value=“ボタン1” />
    <input type=button” value=“ボタン2” />
    <input type=button” value=“ボタン3” />
</body>
</html>

 

 

 

2、HTMLファイルにCSSを適用する

 

次に、CSSを読み込み、各ボタンにCSSを適用するための記述を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta httpequiv=Content-Type content=text/html; charset=UTF-8″>
    <link rel=stylesheet type=“text/css” href=“Main.css” />
    <title>sample</title>
</head>
<body>
    <br />
    <input type=button” class=“btn” id=“blue_btn” value=“ボタン1” />
    <input type=button” class=“btn” id=“pink_btn” value=“ボタン2” />
    <input type=button” class=“btn” id=“yellow_btn” value=“ボタン3” />
</body>
</html>

 

 

今回は、classに「btn」、各ボタンにそれぞれ「blue_btn」、「pink_btn」、「yellow_btn」のidを設定しました。

1
    <link rel=stylesheet type=“text/css href=Main.css />

 

 

3、CSSファイルを作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn {
    padding: 2px 4px;       /*余白を設定*/
    color: #FFF;            /*文字の色*/
    borderradius: 3px;     /*角を丸める*/
}
#blue_btn {
    background: #8cfffa;    /*ボタン色を設定*/
}
#pink_btn {
    background: #feaec7;    /*ボタン色を設定*/
}
#yellow_btn {
    background: #fdeca6;    /*ボタン色を設定*/
}

 

以下の用に適用して装飾されます!

 

 

ボタンの印象がだいぶ変わりましたね!

 

このようにセレクタ、プロパティ、値の関係性読み込む方法さえ知っていれば簡単にCSSをデザインに適用することができます!

いかがでしたでしょうか?^ – ^

 

 

 

まとめ

・CSSとは、WEBページのHTMLにデザインを持たせるための言語。

 

・CSSファイルでの中で使用する「セレクタ」、「プロパティ」、「値」で構成され、HTMLにデザインを設定し、適用させる。

 

 

この記事を書いた人

oshiro

oshiro

うるま市出身!海とコーヒーをこよなく愛する3人の子を持つママです(*^^*) 建設業の事務を5年間勤務努。他、転々とし職業訓練でIllustratorとphotoshopを学び現在はsirobakoのデザイナー見習いとして日々奮闘中です٩( 'ω' )و皆様に楽しんで頂ける記事をこちらでご紹介させていただきます!