CSS入門：文字色とフォント、余白やスタイリング、疑似クラス
デッドプール2を観てきました。宣伝通りのR-15ファミリー映画。
吹き替えで観たので、また時間が取れたら字幕で観たい。
前作は字幕と吹き替えのニュアンスが微妙に違っていて楽しかったので。
今日もCSS。やるぞ。ドットインストール「CSS入門」の続き。
#4
前回は「山田太郎」だけの文字色を変えたが、文書全体の文字色を統一したい。
そんなときはbodyタグに対して文字色を設定するとよい。
body
{
color : #333
}
bodyタグ全体のフォントも指定。
font-family: verdana,sans-serif;
と書くことで、「vardataフォントを使う、それがなければsans-serifフォントを使う」という意味になる。
次にヘッダーの背景色を設定。
header
{
background-color :
}
ここで ヘッダー部分をデベロッパーツールで確認してみる。
Computedタグを確認すると、
margin>border>padding>(ヘッダー本体)という構成になっていることが分かる。
このような設計はCSSのボックスモデルと呼ばれており、これらの要素をいじることで見た目を変えることができる。
#5
現在作成しているページはヘッダーの上に余白が存在する。
これはbodyのmarginの上下左右に数ピクセルの余白が設定されているからである。
ということで、bodyのプロパティを以下のように設定。
body{
color: #333;
font-family: verdana,sans-serif;
margin-top: 0px;
margin-bottom: : 0px;
margin-left: : 0px;
margin-right: : 0px;
}
なお、今回はmargin-top～margin-rightまでをすべて0ピクセルと設定したので
margin : 0px;
と略して書くことも可能。0の場合は単位のpxも省略できるので、最終的には
margin : 0;
としておく。
この状態で保存して再読み込みすると、左右の余白は消えたがページ上部の余白が消えていないことが分かる。デベロッパーツールで調べてみると、今回はヘッダーに使っているulタグに余白がついており、そのせいであることが分かる。ということで、
ul
{
margin : 0;
}
と設定。するとページ上部の余白が消えた。
#6
次はヘッダーに使っている「HOME」「ABOUT」を完成版のようにおしゃれにしていく。そのために、リストのスタイリングを行う。
まず、箇条書きになっているので項目の頭についている点がいらない。
list-type-styleプロパティをnoneとすれば点は消える。
次に、このリストの左側に余白があるので消したい。
デベロッパーツールで確認したところ、paddingで左に余白を持っているようだ。
padding-leftプロパティを設定し、余白を消してしまおう。
これらをまとめるとulのセレクタは以下のようになる。
ul{
margin: 0;
list-style-type: none;padding-left : 0;
}
今はリストが縦に並んでいるので、これを横並びにする。
左から順に横並びにしたいので、displayプロパティをinline-blockとする。
要素の間が詰まりすぎているので、paddingプロパティを設定していく。
paddingの上下(topとbottom)、左右(leftとright)が同じ値の場合はまとめて
padding : 4px 8px;
と書くこともできるので覚えておこう。
また、文字の大きさも調整する必要がある。
今回やったことをまとめると以下のようなコードになる。
li{
display: inline-block;
padding: 4px 8px;
font-size: 12px;
}
#7
完成形の「HOME」「ABOUT」と比較すると、現在のそれらにはリンクの下線がついている。この設定についてはaタグのプロパティをいじることで変更できる。
今回はtext-decorationプロパティをnoneとする。
リンクの文字色が今は紫となっており、これはbodyで設定した文字色ではない。
タグによってはbodyの設定を引き継ぐもの/引き継がないものがあるためである。
強制的に親要素の設定を引き継ぎたい場合は、プロパティにinheritと書けばよい。
完成版ではリンクにマウスカーソルを乗せると文字色が変わる。
これを実現するには疑似クラス(ある要素が特定の状態にあることを表現するためのセレクタ)を使う。
「a要素にマウスカーソルが乗った時」を表現するにはa : hoverと書き、そこに文字色を設定していく。
さらに、リストを右寄せにする。これは親要素であるheaderで設定し、text-alignプロパティを変更する。
今回追加/変更したコードをまとめると以下のようになる。
header{
background-color: pink;
text-align: right;
padding: 10px;
}a{
text-decoration: none;
color:inherit;
}
a:hover{
color:royalblue;
}
疑似クラスはマウスカーソルが乗っているときの他にもたくさんありそう。
今夜はここまで。明日からまた仕事だ～～
