CSSの書き方についてご説明します。
こちらの記事は前編です。
＊後編はこちら↓
CSSの文法
例えばp要素に対して文字色を赤、文字の大きさを22px、太字とする場合は下記のように記述します。
p {
color: #ff0000;
font-size: 22px;
font-weight: bold;
}以前制作した下記のindex.htmlに対して実際に記述してみましょう。
common.cssのheader pとh2の記述の間にスタイルを記述してみましょう。
・
・
・
header p {
width: 900px;
width: 900px;
}
p {
color: #ff0000;
font-size: 22px;
font-weight: bold;
}
h{
color: #3b3b3b;
font-size: 22px;
padding: 40px 20px 0;
font-weight: 100;
}
・
・
・p要素で囲っていた文字が変化しました。p要素に対してスタイルを記述したため、headerに記述しているp要素とfooterに記述しているp要素の2箇所の見た目が変わりました。
「*（アスタリスク）」の使い方
「*（アスタリスク）」をセレクタとして記述することで、全ての要素に対してスタイルをかけることができます。
下記のようにcommon.cssのh2の上に「*（アスタリスク）」を記述してみましょう。前回の問題で記述したpタグの指定は削除しましょう。
・
・
・
header p {
width: 900px;
margin: 0 auto;
}
* {
color: aqua;
}
h2 {
color: #3b3b3b;
font-size: 22px;
padding: 40px 0 20px 0;
font-weight: 100;
}
・
・
・
p要素とh1要素が青色に変わりました。ナビゲーションのul要素やh2要素の色が変わらないのは、別でul要素とh2要素に対して「color: #3b3b3b;」を指定しているためです。「*（アスタリスク）」よりも要素に対して記述したスタイルが優先されます。
CSSファイルの記述の順番
CSSファイルの記述の順番は状況や人により好みが分かれます。ただWEBサイトの構造と同様に上から記述していくことをお勧めします。理由はスタイルを記述した場所を誰が見ても探しやすくするためです。
下記の順番を確認してみましょう。このように上からbody→header→h2→nav→div→footerと記述されています。また要素の中の要素（header pなど）を指定する場合は親要素の近くに記述することで見つけやすくなります。CSSは下に書かれている記述の方が優先されるという特性を持っているため、ルールに沿って記述していくことで、バグを見つけやすくなることにも繋がります。
body {
font-family: "Helvetica","Verdana","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
color: #555;
line-height: 1.3;
background-color: #F3F3F0;
}
body div:nth-child(2) {
background-color: #FFFFFF;
}
header {
background-color: white;
padding: 20px 0 0 0;
}
header h1{
width: 900px;
margin: 0 auto;
font-size: 32px;
}
header p {
width: 900px;
margin: 0 auto;
}
h2 {
color: #3b3b3b;
font-size: 22px;
padding: 40px 0 20px 0;
font-weight: 100;
}
nav {
background-color: #f7f0da;
margin: 30px 0 0 0;
}
nav ul {
width: 900px;
margin: 0 auto;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
font-size: 12px;
text-decoration: none;
margin: 0 30px 0 0;
display: block;
padding: 20px 0;
font-weight: 900;
color: #3b3b3b;
}
nav ul li a:hover {
color: #bababa;
}
div {
text-align: center;
}
div img {
width: 960px;
padding: 20px 0;
}
div ul {
max-width: 900px;
margin: 0 auto 50px auto;
list-style: none;
}
div ul li {
width: 240px;
padding: 30px 15px;
margin: 10px;
display: inline-block;
background-color: #fff;
border: 1px solid #e8e8e8;
font-size: 16px;
}
div ul li img {
width: 50%;
}
div ul li a {
text-decoration: none;
color: #3b3b3b;
line-height: 45px;
display: block;
}
div ul li a:hover {
color: #bababa;
}
footer {
clear: both;
text-align: center;
background-color: #2D2D2D;
color: #fcfcfc;
padding: 30px 0;
font-size: 12px;
}POINT
CSSの文法は「セレクタ{ プロパティ: 値;}」と記述します。
コメント