こんにちは、ひつじのジョージです。
大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。
このレッスンから2つのファイルに記述する必要がります。
クラス名はindex.htmlに、CSSはstylesheet.cssに記述します。
正解として記述するクラス名とCSSは2つのファイルにまたがっていますが、紐付いています。
このレッスンではクラス名の付け方とそのクラス名を指定してスタイリングする方法をマスターしましょう。
- HTMLタグのクラス名の付け方
- CSSでクラスを指定してスタイリングする方法
目次
タグに名前をつけるレッスンの答え
このレッスンの回答はindex.htmlとstylesheet.cssの2つのファイルに記述する必要があります。
まず、index.htmlでは以下のようにselectedクラスを記述します。
<h2>レッスン一覧</h2> <ul> <!-- 1つ目の<li>要素にselectedというclassを与えてください --> <li class="selected">HTML</li> <li>PHP</li> <li>Ruby</li> </ul>
次にstylesheet.cssで以下のようにクラスをスタイリングします。
li {
color: #444;
}
/* selectedの文字の色を#ff0000にしてください */
.selected {
color: #ff0000;
}
よくあるミス
このレッスンではクラス名の付け方やCSSセレクタの付け方でよくミスがあります。
HTMLタグのクラス名をつける時にダブルクォーテーションがつけていなかったり、CSSでクラスを指定する時にCSSセレクタの先頭にドットをつけていなかったりします。
- ダブルクォーテーション（"）をつけていない
- クラスのドット（.）をつけていない
よくあるミス1：ダブルクォーテーション（"）をつけていない
HTMLタグにクラス名を付けるときはクラス名をダブルクォーテーション（"）で囲む必要があります。
以下のコードではクラス名であるselectedをダブルクォーテーションで囲んでいないので、クラス名がつけれられていない状態となります。
<!-- クラス名にダブルクォーテーション（"）をつけていない --> <li class=selected>HTML</li>
よくあるミス2：クラスのドット（.）をつけていない
CSSでクラスを指定するにはドット（.）を先頭に付ける必要があります。
以下のコードでは先頭にドットがついていないのでクラスを指定できていません。
この状態ではHTMLタグを指定している状態となります。
/* クラスを指定するときは先頭にドット（.）を付ける */
selected {
color: #ff0000;
}
HTMLタグを指定してスタイリングする方法はこの記事を参考にして下さい。
HTMLタグとクラス名を指定する方法の違いをマスターしておきましょう。
まとめ：クラスの付け方とクラスのスタイリングをマスター
このレッスンではクラス名の付け方とそのクラスをCSSでスタイリングする方法を学びました。
- HTMLタグのクラス名の付け方
- CSSでクラスを指定してスタイリングする方法
HTMLタグのクラス名をつける時にダブルクォーテーションがつけていなかったり、CSSでクラスを指定する時にCSSセレクタの先頭にドットをつけていなかったりするミスがよくあります。
- ダブルクォーテーション（"）をつけていない
- クラスのドット（.）をつけていない
CSSセレクタの先頭にドットをつけていないとHTMLタグを指定していることとなります。
HTMLタグを指定してスタイリングする方法はこの記事を参考にして下さい。
