CSS（カスケーディングスタイルシート）について

WebサイトはHTMLから成り立っていますが、そのHTMLに欠かせないのが「CSS」です。そもそも「CSS」とは何でしょうか？今回は「CSS」について分かりやすく説明していきます。

CSSとは（スタイルシート）

CSSとは「Cascading Style Sheets」の略で、色や大きさなどデザインに関する装飾するためのスタイルシート言語です。
CSSはHTMLと組み合わせて使用し、視覚的なデザイン部分で見栄えを変えていきます。また、音声による読み上げを行う指示などもできます。

この様にCSSを組み込むことで文字の大きさ、色、そして見出しのデザインなど見た目が大きく変わります。

HTMLにCSSを組み込むには

HTMLにCSSを組み込むには３つの方法があります。

外部スタイルシート

link要素でCSS専用ファイルを読み込ませる方法です。
CSSをHTMLから分離させてまとめて一元管理する事ができ統一されたレイアウトを維持できます。

下記のように<link rel="stylesheet" href="styles.css">を配置して指定します。CSSは外部ファイルなので別記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○○</title>
<link rel="stylesheet" href="styles.css">
</head>

内部スタイルシート

HTMLの＜head＞タグの中にstyle要素を配置して要素内容として記述する方法です。

下記のように＜style＞と＜/style＞の間にそのままCSSを書き込むことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○○</title>
<style>
h1 {
  color: black;
  font-size: 24px;
}
</style>
</head>

インラインスタイルシート

HTMLの各タグにstyle属性を書き加えて直接記述する方法です。
タグ共通で設定したい場合は、各タグ個別に設定する必要があります。

下記のように、各タグにstyle属性とプロパティ：値；を書き込むため「 style="color: black; font=size: 24px;" 」セレクタと｛　｝は必要ありません。

<h1 style="color: black; font=size: 24px;">△△△△</h1>

CSSの書式と名称

CSSにもHTMLと同様に書式と名称があります。

「セレクタ」・・・適用先を示す部分
「プロパティ」・・・何を（指定された部分の何を変えるのか）
「値」・・・どうする（どのように見た目を変えるのか）
「｛　｝」の間には、プロパティと値が入り「：」「；」で区切ります

基本的なプロパティ

プロパティには多くの種類があります。
ここで基本的なプロパティを一部紹介します。

文字とテキスト関するプロパティ

color(文字の色)
font-size(文字の大きさ)
font-weight(文字の太さ)
font-family(文字の字体)
text-decoration(テキストの装飾)
line-height(行の高さ)
text-align(水平方向の位置)

線と影に関するプロパティ

border(枠線)
border-radius(枠の丸さ)
box-shadow(ボックスの影)
text-shadow(テキストの影)

背景に関するプロパティ

background-color(背景の色)
background-image(背景の画像)
background-repeat(背景の画像の繰り返し)
background(背景全般)

サイズに関するプロパティ

width(横幅)
height(高さ)
margin(外部余白)
padding(内部余白)

HTMLとCSSを組み込む

HTMLの文章をCSSでどのように指示するのかを見てみましょう。

<body>
<p>テキストをCSSで指示します。</p>
</body>
</html>

CSSの指示なしでブラウザで見ると・・・

次にCSSで「ｐタグの文字サイズを20px・文字色を赤色に」と指示します。

p {font-size: 20px; color: red; }

CSSで指示してブラウザで見ると・・・

文字サイズも大きくなり、文字色も赤色に変更しました。

まとめ

今回はCSSについて少し触れてみましたがいかがでしょうか。プロパティは多くの種類がありますが、ある程度理解できれば簡単なWebページは作成できると思います。人気のCMSを利用すれば更に作成しやすいでしょう。
まずはドメインを取得し、新規Webページを作成してみてはいかがでしょうか。