【試して学習！CSS】CSSを実際に書いてみよう

CSSを使うとサイトの見た目を変更することができます。たとえば、文字の色や大きさ、背景の色や線を引いたりと、多くのことが出来ます。

ここでは何種類かCSSを実際に書いてもらいながら、慣れていただければと考えています^^

スポンサーリンク

早速書いてみよう！

説明は後ほど行いますので、まずは書いてみましょう！

これを実際に書いてみましょう。

.text-red {
  color: red;
}

ここに書いてください。

書いたら、下の文字をクリックしてみてください。

★このテキストに書いたCSSが適応されるよ★

説明

 こちらのCSSについて説明します。

.text-red {
  color: red;
}

「.text-red」とは？

まずは1行目の「.text-red」についてです。これはCSSセレクタの1つで「text-red」というクラス名を持つものに対してのCSS設定ですよという意味です。

「{ }（中括弧）」で囲まれた部分がその範囲になります。これで1行目と3行目の内容が分かりました。

クラス名を持つ？

「★このテキストに書いたCSSが適応されるよ★」という文字は「text-red」というクラス名を持っています。ウェブサイトはタグというもので囲まれていて、そのタグにクラス名が設定されています。

見た方が分かりやすいと思います。

<p class="text-red">★このテキストに書いたCSSが適応されるよ★</p>

<p>～</p>がタグです。文章などの段落には「p」タグを使います。クラスは「class=”text-red”」←ここです。このようにタグの中に「class=”～”」で設定します。

「color: red;」とは？

colorの後ろが「:（半角コロン）」、redの後ろが「;（半角セミコロン）」です。先ほども書きましたが、間違いやすいです。キーボード上も隣にあるので打ち間違いが多い記号です^^;

説明に戻りますね。「:（半角コロン）」の左側はCSSプロパティ名を設定します。文字の色を変更したい場合は「color」、文字の大きさを変更したい場合は「font-size」を指定します。このCSSプロパティ名は役割によって決められているので、「何を変更したいか」によって該当するCSSプロパティ名を探すことになります。

「:（半角コロン）」の右側はCSSプロパティ名に対する値を設定します。文字の色を赤にしたい場合は「red」、青にしたい場合は「blue」を指定します。CSSプロパティ名に対して設定できる値も決まっています。CSSプロパティ名と同様、値も探すことになります。

まとめると

まとめると、CSSの設定はが１セットとなります。

「CSSプロパティ名 」「:（半角コロン）」「値」「;（半角セミコロン）」

CSSプロパティを2つ書いてみよう！

今度は2つ以上のCSSを書いてみましょう！単純に２つ並べて書けばOKです（※改行しなくても大丈夫ですが、改行した方が見やすいです）。

これを実際に書いてみましょう。

.text-blue {
  color: blue;
  font-size: 36px;
}

ここに書いてください。

書いたら、下の文字をクリックしてみてください。

★このテキストに書いたCSSが適応されるよ★

まとめ

今回はここまでにします。

いかがでしょう？少しはCSSを設定することに慣れていただけたのであれば嬉しいです^^

最後にも今回のポイントをまとめておきます。

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク