前回CSSの基礎ということで、セレクタ、プロパティ、値の基本を学びました。
今回は、指定可能なセレクタの紹介や様々なプロパティの指定を見ていきながらどのような表示になるかを確認し学習していきたいと思います。
指定可能なセレクタ
タグで指定する方法
タグでの指定方法はHTMLタグ名を書く方法です。
そうすることで該当タグの箇所全てに対して有効となります。
ブラウザでの表示
idで指定する方法
idでの指定方法は先頭に#（シャープ）を付加します。
このidで指定された箇所に装飾（デザイン）が適用されます。
ブラウザ表示
classで指定する方法
classでの指定方法は先頭に.（ドット）を付加します。
このclassで指定された箇所に装飾（デザイン）が適用されます。
ブラウザ表示
色々なプロパティの書き方
プロパティは、例えば、文字色、背景、文字の大きさなど、「何を変えるのか」でしたね。
では実際にCSSの記述とブラウザの表示で確認していきましょう。
文字色の変更
これは先ほどもあったようにcolorというプロパティを使います。
値は#000000などの記述やカラーネームで色指定をします。
ブラウザ表示
背景の変更
background-colorというプロパティを使います。
値は#000000などの記述やカラーネームで色指定をします。
ページ全体の背景色を変える場合はbodyタグをセレクタに指定します。
ブラウザ表示
文字の大きさ
font-sizeプロパティを使用します。
値は以下の方法があります。
・数値にpxやemやexなどの単位をつけて指定：18pxなど
・％値で指定：10%など
・キーワードで指定：xx-small、x-small、small、medium、large、x-large、xx-large
ブラウザ表示
その他膨大なプロパティがありますが、色々なデザインを作りながら、また他のサイトなども参考にしながら知識を増やしていってください。