SukeBlog

プログラマーSukeによるブログ

【HTML/CSS】No.3 CSS入門

【HTML/CSS】No.3 CSS入門
この記事は約3分で読めます

CSSについて

CSSとは、Cascading Style Sheetsの略です。
HTMLが文書の構造を表現するのに対して、CSSではデザインを表現することができます。
HTMLとセットで使用します。
ファイルの拡張子は.cssです

CSSの書き方

大きく3パターンあります。

(1) HTMLタグ内に記入する

【例】
spanタグを<span style="color:#ff0000">使ってみる</span>テスト。

(2) HTMLのheadタグ内に記入する

【例】
<html>
<head>
<style type="text/css">
span {
    color:red;
}
</style>
</head>
<body>
spanタグを<span>使ってみる</span>テスト。
</body>
</html>

(3) cssを別ファイルに記入する

test.cssを作成し、下記の内容を記入します。

【例】
span {
    color: red;
}
test.htmlのheadタグ内で、test.cssファイルを読み込むようにします。

【例】
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
spanタグを<span>使ってみる</span>テスト。
</body>
</html>
(3)の方法がメジャーです。
HTMLとcssファイルを分かれるので、
  • 見やすい
  • 保守しやすい

セレクタ

下記の”span”のように、cssを適用する範囲を指定するものをセレクタといいます。
下記のように書くと、HTMLファイル内の全てのspanタグに、カッコの中の内容が適用されます。
span {
    color: red;
}

cssのコメント

cssにもコメントを書くことができます。
div {
    /* コメント
    複数行書くこともできます。 */
    color: red;
}