【CSS】CSSの書き方３種 - CSS HTML 初心者勉強中。

私が初めてCSSを見たのは、とある無料ブログで、CSSファイルとHTMLファイルが別になっていました。だからそれが原則なのかなと思っていたのですが、必ずしもそういうわけではなさそうで…。

まずはCSSの基本構造の話。以前の記事で以下のようなことを書いていました。

基本構造は、セレクタ、プロパティ、値からなります。

セレクタ：　どのタグの　　→h3の

プロパティ：何を　　　　　→colorを

値：　　　　どうするのか　→#F6FFE5にする。　

はじめに。CSS、HTMLて何でしょう。 - CSS HTML 初心者勉強中。

よく見かけるセレクタといえば、class セレクタと id セレクタがあるのですが、今回使い分けについては言及しません。

簡単にいうと、class セレクタは分類名の割り当て、id セレクタは、固有名の割り当てに使う感じです。

例えば、CSSに、「exampleの色は赤ですよ」

.example {

color: red;

}

としておくと、HTML側でこのように書くと、

赤い色になります。

例えばCSSに、「exampleの色は赤ですよ」

#example {

color: red;

}

としておくと、HTML側で使うときは、

と書きます。

id セレクタで指定したid名は、ページ内で一度しか利用することができません。

class 属性値の場合は「.」を使いますが、id 属性値の場合は「＃」を使います。

前述の、CSSファイルとHTMLファイルが別になっているもの。

CSSファイルにスタイルを定義して使用します。

例えばこのブログは、fontawesomeを使うために、head内に以下記載しています。

これでFontawesomeのCSSを呼び出しているんですね。

HTML内に、<style>タグでスタイルを定義します。内部CSSはそのHTMLファイルで有効ですが、他のHTMLファイルには影響しません。HTML側で、CSSを読み込んで、そこに記載している内容を適用させます。

<html>

<head>

<body>…

みたいな感じです。

HTMLに直接記載する方法です。このブログで「HTMLだけで○○」とかやっているのはこれですね。基本、styleの中にCSSを書きます。複数指定するときは、セミコロンで区切ります。

<p style="color: red; font-weidht: bold;"">赤い色に背景色</p>

これはこうなります。

赤い色に背景色

※ HTMLで文字の色を変えたり太字にするだけなら他の方法もありますが (strong使うとかですね)、今回はインラインCSSでやってみました。

以上、CSS3種でした。CSSには指令の優先順位があったりするので、その辺も踏まえてCSSを活用できたらいいかなと思っています。