HTMLぐらいなら分かるけど、CSSってなんか難しそう。そんな貴方のための記事です。
CSSを学ぶ上で躓きやすいのはセレクタです。今回はセレクタを中心にCSSを紹介します。
CSSとは
CSSは、Cascading Style Sheetsの略です。HTMLからデザインを分離させることを目的として策定されました。
2000年ごろのWebの世界では、HTML自体にデザインを記述していました。しかし、これでは、ページごと、タグごとにスタイルを記述することになり、デザインの変更は大変な労力を伴うものとなりました。そこで、HTMLでは文章構造だけを表現し、デザインはCSSとして分離する方式が主流になりました。
セレクタとは
英語で書くとselector、つまり何かを選択するためのものです。CSSにおいては、特定のタグを選ぶための記述のことをセレクタ呼びます。CSSを使うとセレクタで選択したタグに対してさまざまな視覚効果を与えることができます。
タイプセレクタ
タグの種類を指定するセレクタです。指定した種類のタグ全てにスタイルが適用されます。影響範囲が広く、予想外の部分のスタイルに影響を与えるので、タイプ単独でのスタイル指定はお勧めしません。
1 2 | h1{color:black;} /* h1タグの文字色を黒にします */ body {background-color:#fff;}. /* 全体の背景色を白にします */ |
クラスセレクタ
特定クラスのタグを指定するセレクタです。クラスはタグ内にclass=” *** “の形式で指定します。同じclassを指定することで、複数のタグに同じスタイルを適用できます。
上記のタグにスタイルを指定するには、次のように記述します。
1 2 | .title{ /*スタイルの指定*/ } # titleクラスが指定されている部分全体が対象 h2.title{ /*スタイルの指定*/ } # h2タグの中でtitleクラスが指定されている部分だけが対象 |
一意セレクタ
特定のIDを持っているタグを指定するセレクタです。IDはタグないにid=” *** “の形式で指定します。同じIDを持ったタグは1つのHTML内に1つしか存在してはいけません。
上記のタグにスタイルを指定するには、次のように記述します。
1 | #title{ /*スタイルの指定*/ } # IDがtitleのタグだけに適用 |
文脈セレクタ
タグの包含関係を利用するセレクタです。
1 2 3 4 5 6 7 8 |
次のように記述すると、divタグ内のliタグだけにスタイルを適用できます。
1 | div.article li{ /*スタイルの指定*/ } |
まとめ
CSSのセレクタって難しそうなイメージがあるのは事実ですが、基本を押さえておけば意外と簡単ですよ！このブログの中で私の記事には固有のスタイルが設定されていますが、CSSのセレクタさえ理解すれば、こういうことも簡単にできるようになります！
宿題
キバンインターナショナルのメンバーへの宿題です。ブログの自分の記事のスタイルを変更してください。strong、em、h2、h3、h4、ul、liなどにスタイルを指定するのがお勧めです。追加するスタイルはテーマのstyle.cssに書き込むこともできますが、テーマの切り替えでリセットされてしまうのでお勧めしません。Entry Wrapperプラグイン内で追加指定を記述できますので、プラグイン内に記述するようお願いします。既に数名分の記述があるので参考にしてみてください。
