図書館で借りる本のセレクトミス
秋が深まるにつれ、学習意欲も深まってきました！ドットインストールに加え、書籍からも情報を得ようと、図書館のポータルサイトのキーワード検索に「CSS」と入力し、比較的新しい出版年の本を一冊借りてみました。
2017年10月発行の「はじめてのWebページ作成 HTML・CSS・JavaScriptの基本」です。
Chapter1に『Webページの作成手順』という章があり、手順のはじめにエディタを起動する、とあるのですが、なんと！図示されているエディタがWindowsのメモ帳だったのです！！
嫌な予感がしたので慌ててamazonのレビューを確認すると、
「ここ数年で一番ひどいWEB制作関連本」
「いまでは非推奨の古いタグが堂々と書かれていたりします。20年程前の知識そのまま？と思いたくなる内容です」
「素人が作った本という感じです」
など、散々な感想ばかり。ショックでした。購入した本じゃなくてよかったけれど。
よく図書館で借りるのは小説なので、他者のレビューは気にしたことがなかったのですが、ハウツー本や専門書はレビューを参考にしてから借りたいと思いました。
はじめてのことに失敗はつきもの！ということで、改めて探してみたらより実用的かつ実践的な書籍が見つかったので、こちらを図書館で予約してみました。
他にもCSSの基本が身につく本をご存知の方がいらっしゃいましたら、ぜひお教えください！
余談が長くなりましたが、学習日誌にうつります。CSS入門の第6回から第8回まで。合計視聴時間は7分44秒。
#06 リストのスタイリングをしてみよう
今回は「HOME」「ABOUT」というリストを調整するレッスンでした。
リストの左の空白（写真上の左隅）を削除する指示を書くと……
わーい、消えた！（写真上の左隅）
次に縦に並んでいたリストを横並びへと変更（写真上）。
間が詰まり過ぎていたので、上下左右に余白を作りました（写真上）。
最後に文字のサイズを小さくするため、フォントサイズを12pxに設定したら終了でした。
#07 aタグのプロパティを操作しよう
この回では第6回に続きリストの調整を行いました。CSSでは要素によって設定が引き継がれるプロパティと引き継がれないプロパティがあるので注意が必要とのこと。
以前、bodyタグのcolorを黒（color:#333）に設定しましたが、colorはaタグに引き継がれていないので、改めて設定をしました。
上の通り、黒に変わりました！
次に初めて出てくる用語「疑似クラス」という仕組みを勉強しました。疑似クラスとは、ある要素が特定の状態にあることを表現するためのセレクタのこと。
例えば上のa:hoverはa要素にマウスカーソルが乗ったとき、という状態を表現するセレクタです。これを使い、マウスカーソルが「HOME」「ABOUT」に乗ったらロイヤルブルーに文字色が変わるよう設定し直しました（写真下）。
最後にheaderを右揃えに直して、余白も足してデザインを修正したら完了でした！
#08 セレクタの適用範囲を限定しよう
第8回も第7回の続きのレッスンでした。ここまでのスタイル指定はすべての範囲の要素（ul、a、liなど） に反映されてしまうので、指定したスタイルを適用するのはheaderの範囲だけだよと指定してあげる方法を習いました。
上のように各要素の前に半角空白をあけてheaderと書きます。これで各スタイル指定はheaderの範囲内に限定したことになります。
これを行う前が上図です。footerにもheaderと同じスタイル（リストが横並びになっているなど）が適用されています。
それが先程の指定により、footerにはスタイルが解除され、リストが縦並びに戻りました！
セレクタの適用範囲はさらに狭めることができるそうで、そのやり方も練習しました。
上の「header li > a」とは、header内にあるすべてのli要素の直下にあるaタグという意味になります。半角空白で区切るとheader内のすべての要素という意味で、不等号記号で区切るとこの要素の直下にあるa要素という意味です。
なんだかちょっと複雑になってきたかも？でもまだモチベーションは維持しているので、引き続き勉強していきます。
この記事が気に入ったらサポートをしてみませんか？