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を反映させたものが下記のものになります。
こんにちは
今日はいい天気ですね。