CSSとは?これを読めば初心者でも必ずCSSが書ける!

web開発

2016/06/06

web開発

WEBプログラミングを学習し始めると、HTMLの次にCSSを学習するというのが一般的です。

今回の記事は、HTMLは大体理解できたけど、CSSはまだ全くわからないという人のために、「CSSとは?」「CSSって何なの?」という疑問を解消して頂ける内容となっています。

本記事の特徴は、「プログラミングの学習サイトなどは、専門用語が多く使われていて分かりにくい」と感じている人でも理解できるように専門用語を使わずに解説していることです。

また、最後には自分でCSSを記述して、ブラウザに表示させるというCSS体験もご用意しました。この記事を読み終えた頃には「CSSとは?」という疑問は無くなっているでしょう。ぜひ最後までお読みください。

 

CSSとは?(初心者向け)

この章では、「CSSとは?」について専門用語を使わずに画像と共に解説していきます。

ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。

CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。

※HTMLやタグについては「HTMLとは?これを読めば初心者でも必ずHTMLが書ける!」をお読みください。

わかりやすいように画像で見ていきます。図1はHTMLだけを使ったブラウザです。そこにCSSを付け加えることで、図2のようにすることができます。

[図1]:HTMLだけの場合
CSSとは_HTMLのみの場合

[図2]:HTMLにCSSを付け加えた場合

CSSとは_HTML+CSS

つまり、CSSとは、HTMLに色や大きさや背景などを加えて見栄えを良くするものということになります。

CSSの書き方

この章ではCSSの書き方を紹介します。CSSの書き方はとてもシンプルで簡単です。それではさっそく解説していきます。

CSSはHTMLのタグの「何を」「どうするのか」を記述しています。

この関係性を図にまとめると以下のようになります。

CSSとは_書き方

また、この図に登場する、CSSを適応したいタグ(上図ではh1)のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「」と呼びます。(下図参照)

CSSとは_名称

プロパティと値は「{ }」で囲んであげることにだけ注意してください。そこだけ気を付ければ、CSSの書き方は難しくはないでしょう。

CSSを体験しよう!

以上から、CSSとは何なのかについておおよそ理解できてきたと思います。

ここからは、実際にCSSを記述してもらい、ブラウザに結果を表示させてみるということを体験していただきます。
簡単なのでぜひ以下の手順に沿ってCSSを体験してみて下さい。

【手順】

1.Windowsに標準搭載されているメモ帳を開きます。(macの場合はsublime textというエディタがオススメです。こちらからダウンロードしてください。)

CSSとは_メモ帳

2.まずは以下のようなHTMLをメモ帳(sublime text)に記述します。

<html>
<head>
<link rel=”stylesheet”href=”test.css”>
</head>

<body>
<h1>CSSを体験しよう!</h1>

<p>CSSでは、タグ・プロパティ・値を記述します。</p>
</body>
</html>

※<head>にある<link rel=”stylesheet”href=”test.css”>は、「test.css」というCSSファイル(後で作成します)をこのHTMLファイルに埋め込みますという宣言です。<link rel=”stylesheet”href=”ファイル名”>の「ファイル名」のところに読み込みたいCSSファイルを記述します。

 

3.左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。(sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。)

CSSとは_ファイル保存1

 

4.すると、以下の画面が出てくるので、

CSSとは_ファイル保存2①「デスクトップ」をダブルクリック

②ファイル名を「sample.html」にする(拡張子が「.html」であればファイル名は何でもかまいません。)

③ファイルの種類を「すべてのファイル」にする。(sublime textの場合はここは無視して大丈夫です。)

④「保存」をクリック

 

5.すると、保存先であるデスクトップに下の画面が表示されます。(※Google Chromeではなく、Internet Exploreなどブラウザのアイコンで表示される場合もあります。)

CSSとは_chromeアイコン

これをダブルクリックすると…

CSSとは_HTML記述結果

ブラウザに自分で記述したHTMLが表示されているのが確認できました。

次はいよいよCSSファイルを作成して、このHTMLの見栄えを変えていきます。

 

6.再びメモ帳を開き、先ほど作成したHTMLの見栄えを変更するコードを記述してみましょう。

CSSとは_CSS記述

※background-colorプロパティは、文字に背景を付けるためのプロパティです。

※font-sizeプロパティは文字の大きさを指定するためのプロパティです。

 

7.先ほどと同様に「ファイル」⇒「名前を付けて保存」を選択します。(sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。)

CSSとは_CSSファイル保存1

 

8.すると、以下の画面が出てくるので、

CSSとは_CSSファイル保存2①「デスクトップ」をダブルクリック

②ファイル名を「test.css」にする(拡張子が「.css」であればファイル名は何でもかまいません。)

③ファイルの種類を「すべてのファイル」にする。(sublime textの場合はここは無視して大丈夫です。)

④「保存」をクリック

 

9.すると、保存先であるデスクトップに下のようなCSSファイルが作成されます。

CSSとは_CSSファイル

 

10.そしてもう一度、HTMLファイルを作成したときにデスクトップに現れたブラウザを表示してみましょう。以下をダブルクリックします。

CSSとは_chromeアイコン2

 

11.すると、先ほど記述したCSSが反映されました。

CSSの反映結果

 

いかがでしたか?今回で、CSSとは?という疑問は解消されたのではないでしょうか。
udemyでも多くのCSSに関する講座がありますのでぜひ学習してみてください。

  

【75%OFF 2,400円!】CSSを含むサイトコーディングを自宅からオンラインでマスター!

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事