Webサイト・ブログ

CSSとは何か?使い方や組み込み方を解説【初心者でもわかる】

アイキャッチ画像

HTMLでサイトを作っていると、よく出てくる単語がCSS。「ウェブサイトを作りたいけど、CSSとは何なのかイマイチ分からない…」という初心者の方も多いと思います。

そこで今回は、初心者でもわかりやすく「CSSとは何か」をご紹介します。

CSSとは

CSSとは、「Cascading Style Sheetes」の略称表記で、これはHTMLファイルに書かれている文書のデザインや、サイトのレイアウトを整えることができるテキストファイルです。別名「スタイルシート」とも呼びます。

スポンサーリンク

CSSの基本的な書式

cssの基本構造

それでは、CSSの基本的な書式について解説していきましょう。

セレクタ

スタイルを適用する対象です。例えば、「h1」を指定した場合、指定したタグにCSSが適用されます。

波かっこ

セレクタの後、プロパティと値を囲む記号です。別名、「宣言ブロック」とも呼ばれています。波かっこ内に複数のプロパティを指定することができます。

プロパティ

適用するスタイルの種類となります。必ず、小文字で記述しないといけません。また、プロパティの最後にはコロンを忘れずに入れましょう。

コロン

プロパティと値を区切るための記号です。この記号によって、対象となる要素が「プロパティが指定した値」となります。

スタイルの細かな内容を数やキーワードで指定します。例えば、colorプロパティに「red」という値を入れた場合、colorプロパティを指定しているセレクタに「文章の文字の色を赤色にする」が適用されます。

セミコロン

値を入力した後、最後にこの記号を入れます。セミコロンを忘れると、CSSが正常に動作しないこともありますので、忘れずに入れましょう。

使い方

CSSの使い方は主に3つあります。

  • 単独のプロパティで指定する
  • 複数のプロパティで指定する
  • セレクタをグループ化してから指定する

単独のプロパティで指定したやり方

1つのセレクタの中に、単独のプロパティを指定します。最も簡単なやり方です。

h1{color: red;}

複数のプロパティで指定したやり方

1つのセレクタの中に、複数のプロパティを入れて設定することができます。

h1{ 
Font-size: 14px;
color: red;
}

セレクタをグループにしたやり方

応用ですが、セレクタにカンマ(,)を使うことで同時に複数のセレクタを使ってプロパティを指定することができます。

ul,
ol{
font-size: 14px;
color: red;
}

CSSをHTMLに組み込む

実際に、CSSをHTMLに組み込んでいきます。CSSをHTMLに組み込む方法は5パターンあります。

link要素を使う

最も基本的なやり方です。HTMLファイルとは別に用意したCSSファイル(いわゆる「外部スタイルシート」)をHTML文書のheadタグに囲まれている部分にlink要素を組み込みます。

HTML

<html>
<head>
<title>サンプルサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>ここにテキストが入ります</body>
</html>

CSS

body{ background-color: #ffe4b5 }

上記のコードを実際にブラウザで表すとこうなります。

cssサンプル

Style要素を使う

HTML文書内のheadタグに囲まれた所に、style要素を直接入れるやり方です。

<head>
<title>サンプルサイト</title>
<style type=”text /css”>
body{  background-color: #ffe4b5 }
</style>
</head>

上記のコードを実際にブラウザで表すとこうなります。

cssサンプル

Style属性を使う

HTMLのグローバル属性であるstyle属性を使ったやり方です。

<p>もうすぐ<span style=”color : #0000ff;”>ブルーベリー</span>の収穫時期ですね。</p>

@import規則を使う

CSSの文書内およびHTML文書のstyle要素内に記述し、外部スタイルシートを読み込むやり方です。

@import url(“style.css”)

@charset規則を使う

このやり方は文字コードのみとなりますが、CSS文書内の先頭に@charset規則を入れることで、CSSの文書内に日本語が入っても文字化けを防ぐことが出来ます。

@charset “shift_jis”;
/*ここにコメントが入ります*/

まとめ

CSSとは、HTMLファイルに書かれている文書のデザインや、サイトのレイアウトを整えることができるファイル。

CSSは以下の方法で組み込むことができる。

  • link要素
  • style要素
  • style属性
  • @import規則
  • @charset規則

というわけで、今回は「CSSとは何か」についてご紹介しました。CSSはHTMLと同様にWebサイトの制作に必要なファイルです。今回の記事が参考になれば幸いです。

出典
小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

ABOUT ME
みきてぃ東西線
20代大学卒業生です。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。
おすすめ記事