サイト名変更・お引越しのお知らせ

CSSとは何かと基本を解説

SHARE

WEBサイトのレイアウトや色などの見た目を作り上げる言語のCSSについて解説します。

目次

CSSとは何か

CSSとはCascading Style Sheetsの略でデザインのための言語です。

一般的にHTMLと組み合わせて利用します。

HTMLは構造を作る言語、対してCSSは色や配置などのスタイルを調整する言語となります。

HTMLについて知りたい人や復習したい方はこちらをみてみてください。

用語の説明等もしていますので、この記事の理解も深めることができると思います。

HTMLとは何かを解説

CSSを覗いてみよう

実際のCSSを見てみながらどんなものなのか理解していきましょう。

Google Chromeのブラウザを開き、Googleのページを開きます。

そして右クリックをすると検証というメニューがあるので押してみてください。

google_menu

すると、DevToolsという画面が表示されます。

Stylesというものを選択している箇所がCSSです。

なんとなくわかるかもしれませんが、width(幅)やheight(高さ)をpxで指定してスタイルを調整しているのが分かります。

google_developer_tool_showing

補足
DevToolsとは、HTML/CSSなどを確認し、修正作業を行えたりするもので、開発者(エンジニアやプログラマ)は頻繁に利用しています。

Chromeだけでなくて、多くのブラウザで利用できます。

DevToolsに関してはこちらでチュートリアルと一緒に解説しているので気になる方はどうぞ！

ChromeDevToolsの使い方
【必須ツール】 Chrome DevToolsの使い方チュートリアル

実際に作ってみよう

続いて実際に作ってみて理解を深めていきましょう。

最初に紹介したこちらの記事で作ったHTMLにCSSを作って、スタイルを調整してきましょう。

HTMLとは何かを解説

まずは、sample.htmlというファイルを作ります。

<!DOCTYPE html>
<html>
  <head>
    <title>モグモグ</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>サンプルHTML</h1>
    <p>サンプル段落</p>
  </body>
</html>

そのファイルをブラウザで表示すると下記画像のように表示されると思います。

sample_html

ここまでで、HTMLを作成し表示できました。

続いてCSSを作成していきましょう。

sample.htmlと同じフォルダにsample.cssというファイルを作成してください。

.cssという拡張子をつけるとCSSと認識されます。

内容は下記のようにしてみましょう。

h1 {
  color: red;
}

p {
  margin-top: 10px;
}

次が最後です。

HTMLに対して、CSSが当たるようにHTMLからCSSを読み込みます。

sample.htmlを下記のように修正します。

<!DOCTYPE html>
<html>
  <head>
    <title>モグモグ</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="sample.css"> => 追加
  </head>
  <body>
    <h1>サンプルHTML</h1>
    <p>サンプル段落</p>
  </body>
</html>

<link>というHTMLタグを追加しました。このタグはCSSを読み込むためのものです。ファイル名は作成したsample.cssを指定します。

これでHTMLから読み込むことができたので、再度sample.htmlを表示しましょう。

sample_css_result

<h1>の色が黒から赤に変更されていますね。分かりにくいですが、<p>の要素も上に少しスペースが加わっています。

sample.cssの説明

それでは、sample.cssについて説明していきます。

h1 { ①
  color: red; ②
}

p {
  margin-top: 10px;
}

① h1 {}

ここのh1をセレクタと呼びます。セレクタは、HTMLの要素を指定することができます。このケースだと、HTMLタグh1に対してスタイルを当てますよという意味になります。

セレクタの後は必ず波括弧{}で囲みます。

② color: red;

colorをプロパティと呼びます。

プロパティはたくさんあり、役割がたくさんあります。

colorというプロパティは、色を変更する役割をもつプロパティになります。

redはプロパティに対する値ということになります。プロパティごとに指定できる値が決まっています。

このようなサイトでプロパティと値の一覧が載っています。

参考 CSSリファレンスクイックリファレンス

ちょっと応用

sample.htmlを少し変更してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>モグモグ</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h1>サンプルHTML</h1>
    <p>サンプル段落</p>
    <p>サンプル段落2</p> => 追加
  </body>
</html>

<p>が2つになりました。

2つめは、文字を少し大きくしたいとします。

sample.cssだと以下のようになりますが、これだと1つめの<p>のサイズも変わってしまいます。

h1 { 
  color: red;
}

p {
  margin-top: 10px;
  font-size: 30px;
}

このような場合のために、HTMLタグに対してID と クラスというものをつけることができます。基本的には、それらをつけることが一般的です。

<!DOCTYPE html>
<html>
  <head>
    <title>モグモグ</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h1 id="title">サンプルHTML</h1> => idを追加
    <p>サンプル段落</p>
    <p class="big">サンプル段落2</p> => classを追加
  </body>
</html>

CSSはidとclassをセレクタとして指定できるので

下記のようにsample.cssを修正してみます。

#title { ①
  color: red;
}

p {
  margin-top: 10px;
}

.big { ②
  font-size: 30px;
}

① #title

idを指定するときは、#を使ってid名を指定します。

② .big

classを指定するときは、.を使ってclass名を指定します。

すると、<h1>は赤色のままで<p>の2つめだけが、文字が大きくなっていることが確認できます。

sample_css_with_id_and_class_result

最後に

まとめます。

  • CSSはHTMLとセットで利用し、スタイルを調整する言語
  • クラスタに対して、プロパティでスタイルを変更できる
  • idやclassを指定して柔軟にスタイルを当てることができる

あのイケてるサイトもHTMLとCSSを組み合わせて作られています。

CSSを覗いてみようの手順でいろいろなサイトのCSSを覗けるので、興味があれば覗いてみてください。

前の記事

HTMLとは何かを解説

次の記事

【図解】UIとUXとは？違いや意味を簡潔に解説