当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

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

アイキャッチ画像
みきてぃ

HTMLでサイトを作っていると、よく出てくる単語がCSS。

「ウェブサイトを作りたいけど、CSSとは何なのかイマイチ分からない…」という初心者の方も多いと思います。

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

CSSとは

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

別名「スタイルシート」とも呼びます。

CSSの歴史

CSSの歴史を簡単にまとめると、以下の通りとなります。

CSSにおける出来事
1994年スイス・ジュネーブのCERNに勤めていたホーコン・ウィウム・リー氏が、CSSを提唱した。
1996年8月Microsoftのブラウザ『Internet Explorer 3』がCSSをサポートするようになった。
ただし、当初はW3CからCSSの勧告が発表されていなかったため、ボックスモデルなど一部機能は導入されなかった。
1996年12月CSS Level1(CSS1)が、W3Cから勧告された。(CSSの誕生)
1998年5月CSS Level2(CSS2)が、W3Cから勧告された。
2011年6月CSS2.1がW3Cから勧告された。

なお、CSS3(CSS Level3)以降はモジュール単位で新機能が実装される形になっています。

2021年7月現在はCSS Level4が最新規格となっていますが、CSSがモジュール化したため、CSS4という定義は存在しません。

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の組み込み方法CSSは、
link要素
style要素
style属性
@import規則
@charset規則
の5つの方法で組み込むことができる。

というわけで、今回は「CSSとは何か」についてご紹介しました。

CSSはHTMLと同様にWebサイトの制作に必要なファイルです。今回の記事が参考になれば幸いです。

出典

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

この記事を書いた人

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

スポンサーリンク
記事URLをコピーしました