いますぐwebを構築したい!CSSとは何か疑問を解決

  • 2017-11-30

CSSとは何でしょう?CSSを理解すると、単調なウェブページを簡単に見栄え良いサイトにすることができます。 今回はCSSの基本を初心者でも理解できるよう説明していきます。 CSSを学んで、素敵なウェブページ作成の一歩を踏み出しましょう。

CSSとは何か?

ビジネス,kuguru,クグル,くぐる
スタイルシートとは、HTML文書のスタイル(例えば色、フォント、レイアウトなど)の指定に使われる言語で、広く普及しているものがCSS(カスケーディング・スタイル・シート)です。CSSはHTMLで書かれた文書の色やフォントなどのスタイルを定義しているたけなので、プログラミング言語とは異なります。

CSSの使い方


CSSは次の3つの要素を使用します。

  • セレクタ:どこのスタイルを変えるのか?
  • プロパティ:何を変えるのか?
  • 値:どう変えるのか?

書き方は、次のようになります。

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

最初は間違えやすいので、次のことをしっかり覚えて下さい。

  • プロパティと値は「{ }」(波カッコ)で囲む。
  • プロパティと値の間は「:」(コロン)で区切る。
  • プロパティと値を記載した行末には「;」(セミコロン)。

次は簡単なスタイルシートの例です。

body {
background-color: black;
}

このコードは、bodyタグ内の背景(background-color)を黒(black)にするという指定です。ここでは、bodyがセレクタ(どこのスタイルを変えるのか?)、background-colorがプロパティ(何を変えるのか?)、blackが値(どう変えるのか?)となります。

さらに、bodyの中の文字を赤にしたいという場合は、文字を変更するプロパティは何かを調べて、(この場合はcolorになります)値を設定してあげれば、スタイルが適用されます。

body {
background-color: black;
color: red;
}

webを作成してみよう


ここからは簡単なwebを作成してみましょう。まず、HTMLだけの簡単なファイルを作成します。お手持ちのエディタで以下のコードを記述して下さい。

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”test.css”>
<title>CSSを使ってみよう</title>
</head>
<body>
<h1>CSSを使ってみよう</h1>
<p>段落です。</p>
</body>
</html>

作成したファイルをtest.htmlとしてデスクトップに保存します。まず、デスクトップに格納したtest.htmlをダブルクリックしてみましょう。白い背景に黒字で文字が表示されています。

次にCSSファイルを用意します。同様にエディタで以下のコードを記述し、test.cssでデスクトップに保存してください。

test.css
p {
background-color: black;
color: red;
}

このコードは、pタグ内の背景(background-color)を黒(black)、文字色(color)を赤(red)にするスタイルシートです。

もう一度、test.htmlをダブルクリックして表示して見て下さい。pタグで囲まれている「段落です。」の部分の背景が黒、文字の色が赤になったのがお分かりでしょうか?

まとめ

いかがでしたか?簡単にHTMLのスタイルを変更することができました。

セレクタの指定方法は今回説明した以外にも記載方法がありますが、書き方が異なるだけで、どこのスタイルを変えたいかという指定であることは変わりません。プロパティの種類も沢山ありますので、自分が変更したいプロパティを調べて、スタイル変更する練習をしてみてください。

ページ上部へ戻る