CSSの書き方色々①

スポンサーリンク

はじめに

前回の記事でCSSについて触れたので、基本的なCSSの書き方について紹介たいと思います。

CSSの元になるHTMLの書き方

元となる文章

例えば下記のようなhtmlがあったとします。

<p>こんにちは</p>
<p>今日はいい天気ですね。</p>

この文章になにもCSSを加えない場合は下記のように表示されます。

こんにちは

今日はいい天気ですね。

文字に色を付けるCSS

CSSの元になるhtmlではclassという表現を使ってCSSを反映させる部分を指定していきますので、その書き方をお伝えいたします。先程のhtmlに文字色をつけるCSSを書いていきます。CSSでは効果を付けたい部分に「class」というものを付けるのですが、例えば下記の文章の「こんにちは」に色を付けるためにpタグの頭の方に「class」を付けます。

<p class="mojiiro">こんにちは</p>
<p>今日はいい天気ですね。</p>

classの書き方はタグの頭の<>の中に半角スペースを空けて「class=”自由な名前”」のように書きます。”自由な名前”の部分には分かりやすい名前を好きに付けることができます。今回は文字色を変えたいので”mojiiro”と付けました。そして色を変える効果をCSSで書いていきます。CSSの書き方は下記のようになります。

p.mojiiro{color:#ff0000;}

これはpタグのmojiiroという名前が付いている部分に「color:#ff0000;」という効果を適用するという書き方になっています。

htmlでclassと書いた部分ですが、CSSに書く時は「.(ピリオド)自由な名前」という書き方をします。今回はpタグの中の「class=”mojiiro”」なのでCSSに書く時は「p.mojiiro」という書き方になります。

そして後ろについている「{}」ですが、CSSではこの中に書いてある内容を「p.mojiiro」に反映させることになっています。

文字色を変える時は「color」という記述を使います。{}内に「color:色のコード;」という書き方をすることで、指定した色のコードに文字色が変わります。「#ff0000」は赤を示す色のコードになります。色のコードを使う時は頭に半角の「#(シャープ)」を使用します。

上記のhtmlとcssを反映させたものが下記のものになります。

こんにちは

今日はいい天気ですね。

CSS

Posted by koyasu