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

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

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

らくらく

カラカラカラ…
実際にCSSを使うときと、同じ形にしてるよ~

 今回のポイント
  • CSSを実際に書いてみる(★ここがメイン)
  • クラスとは?
  • CSSプロパティと値
  • 間違いやすい記号や書き忘れに注意!
スポンサーリンク

早速書いてみよう!

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

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

.text-red {
  color: red;
}

ここに書いてください。

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

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

らくらく

カラカラカラ…
文字が赤色に変わった?
変わらない時は、下をチェックしてみてね!小さい記号や似た記号があるから、忘れてたり、タイプミスがあるのかも(;; )

 文字の色が変わらない場合はココをチェック
  • 「text-red」の前に「.半角ドット)」はありますか?
  • 半角コロン)」と「半角セミコロン)」を間違っていませんか?
    「color」の後ろが「:(半角コロン)」で、「red」の後ろが「;(半角セミコロン)」です
  • 括弧は「{ }(中括弧)」です。違う括弧になっていませんか?
  • 入力ミスがないか確認してください
    一度「このように書いてみてください。」の内容をコピーして、「ここに書いてください。」に貼り付けてみてください。それで文字の色が変われば入力ミスの可能性が高いです。

説明

 こちらの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=”~”」で設定します。

らくらく

カラカラカラ…
タグはサイト上では見えないよ、
タグ部分は人じゃなくて機械への言葉だと思ってOK♪

「color: red;」とは?

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

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

らくらく

カラカラカラ…
最初は地道に調べながらだけど、よく使うプロパティ名は自然に覚えちゃうよ^^

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

まとめると

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

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

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

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

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

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

ここに書いてください。

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

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

らくらく

カラカラカラ…
今度は文字の色と大きさが変わるよー
もし変わらない時は、上にある「 文字の色が変わらない場合はココをチェック」を確認してみてね!

CSSを2行以上書くと、行末の「;(半角セミコロン)」を忘れるとCSSが効かなくなるので注意しましょう

まとめ

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

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

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

 今回のポイント
  • CSSを実際に書いてみる(★ここがメイン)
  • クラスとは?
  • CSSプロパティと値
  • 間違いやすい記号や書き忘れに注意

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

スポンサーリンク