アフィリエイターとして、ＣＳＳの３つの要素を知るだけでスキルアップ！
CSSは、次の３つの要素でできているということです。
①セレクタ： デザインを適用させたい場所の指定
②プロパティ： スタイルの指定
③値： 具体的なデザインの指定
これだけではよく分からないので具体例で行きましょう。
セレクタ ：pタグ
プロパティ：色
値 ：赤
この場合、pタグのテキストを赤くするという意味になります。
この３つの要素の意味
なんとなく分かっていただけましたでしょうか？
実際にスタイルシートに書き込むときは、こうなります。
セレクタ{プロパティ:値;}
先ほどの具体例におきかえるとこうなります。
p{color:red;}
pタグのカラーをレッドにという感じになります＾＾
◆ポイント
・プロパティと値をカッコ「｛ ｝」でくくる。
・プロパティのあとにはコロン「:」を入れる。
・値のあとにはセミコロン「;」を入れる。
ちなみに、CSSでは人が見やすいよう
半角スペースや改行、tabを使って
次のように記載するのが一般的です。
セレクタ {
プロパティ:値;
}
これだけでは、特に見やすくなっていませんが、
次のようにプロパティが複数ある場合に見やすくなります。
セレクタ {
プロパティ1:値1;
プロパティ2:値2;
プロパティ2:値3;
}
１つのセレクタ内では、このように複数のプロパティを指定することもできます。
今日は、セレクタ、プロパティ、値の中のセレクタについてもう少し掘り下げて行きます。
セレクタは、デザインを適用させる場所を指定するものでしたね？
セレクタというのは、結構、バリエーションが豊富なんです。
今日は、その中でも最もよく使われる
代表的な３つのセレクタをご紹介します。
１．タグをそのまま指定する方法
これはそのままタグ名で指定するというものです。
html {プロパティ:値;}
body {プロパティ:値;}
h1 {プロパティ:値;}
p {プロパティ:値;}
こんな形で直接、セレクタの部分に
タグの名前を入れていきます。簡単ですね。
２．クラス属性で指定する
クラス分けされた特定のタグのみにデザインを適用させる方法です。
例えば、ページ内にある特定の
pタグだけにデザインを適用させたい場合などですね。
この場合、最初にHTMLファイルの
pタグにクラスを入れる必要があります。
＊＜＞は、シリウスの設定上カットしてます。
例：
pテキスト/p
pテキスト/p
p class="sample">赤いテキスト/p
最後の「赤いテキスト」のpタグだけクラスが入っています。
◆class属性のポイント
１．クラス分けは開始タグの中に入れる。
２．「class="クラス名"」という形で記入。
２．クラス名は任意で決めることができる。
使用できる文字は、大小アルファベットと数字。
ただし、数字を頭文字にすることはできません。
クラス分けができたら、次にCSSで次のようにデザインを適用させます。
p.sample{color:red;}
◆ポイント
１．CSSでクラス名を指定するときは「.クラス名」という形でドットを入れる。
２．この場合のタグ名とクラス名の間には半角スペースを入れては行けない。
p.sample{color:red;}
これはpタグの中の「sample」という
クラスが指定されていますが、
単純にクラス名のみの指定でも大丈夫です。
.sample{color:red;}
以上がクラス属性で指定する方法でした。
３．id属性で指定する
３つ目は特定のidに対して、スタイルを適用させる方法です。
ここでもクラス属性のときと同じく
最初にHTMLファイルを編集してidを付けましょう。
pテキスト/p
pテキスト/p
p id="sample">赤いテキスト/p
最後の「赤いテキスト」のpタグにidが入っています。
id属性のポイント
１．id属性は開始タグの中に入れる。
２．「id="id名"」という形で記入。
２．id名は任意で決めることができる。
使用できる文字は、大小アルファベットと数字。
ただし、数字を頭文字にすることはできません。
次にCSSでデザインを適用させます。
p#sample{color:red;}
◆ポイント
１．CSSでid名を指定するときはid名の前にシャープ「#」を入れる。
２．タグ名とid名の間には半角スペースを入れては行けない。
これはクラス属性とほとんど同じですね。
以上、３つの代表的なセレクタでした。
この３つを覚えておけばCSSの７割くらいは把握できると思いますよ。
頑張って覚えてくださいね！＾＾
