CSSの基本ルール
CSSは【初期値】【継承】【詳細度（優先度）】の3つの基本ルールがあります。これを押さえておくと、スタイルの記述時の迷いが減らせます。
初期値
タグは初期値を持ち、特に指定がない限りその初期値が適用されます。
例えば、以下のような初期値があります。
- h1
- 文字サイズが大きく、太字になります
- p
- 上下に余白(margin)が入ります
- a
- 青色、下線付きになります
- ul, ol
- リストマーカー（黒丸や数字）が付きます
継承
テキスト系のスタイルは親要素からスタイルを【継承】します。これにより、スタイルの一貫性が保たれます。
継承する例
リード文テキスト
box内テキスト
- bodyにcolor: gray;を指定しているため、どちらのpタグ内の文字も文字色がグレーになる
- #box内のpタグは【スタイルで指定されている背景色】＋【#boxから継承の文字サイズ】＋【bodyから継承の文字色】が適用される
継承しない例
一方、ボックス系のスタイルは継承されません。例えば、以下のような場合です。
リード文テキスト
box内テキスト
- bodyに枠線を入れているので、継承したらpや#boxにも枠線が入るはず
- #boxはwidth: 50%なので、継承したら中のpもwidth: 50%となり#boxの半分サイズになるはず
詳細度（優先度）
同じ要素に対して複数のスタイルが適用される場合、詳細度の高いスタイルが適用されます。詳細度は以下の順で決まります。
idセレクタ > classセレクタ > 要素セレクタの順で優先される
ID指定(id="xxx")が最優先、次にクラス指定(class="xxx")、次に要素(<div>など)の順で指定が優先されます。
細かく指定した方が優先される
より具体的にセレクタ指定した方が【順序に関係なく】優先されます。
具体例
同条件の場合は【後に書いたもので上書き】される
条件が同じ場合は後に書いたものが優先されます。
課題01
CSS継承・詳細度 理解度チェックプロパティの選び方
スタイルを構成するプロパティは大量にあるため、下記のポイントを押さえておくと選びやすくなります。
選び方手順
-
セクションごとにエリア分けを行う
-
エリア単位で、やりたいことを【○○の△△をxxxする】の形式でできるだけシンプルに考える
例：【お問い合わせ】エリアの背景色をグレーにする
-
2.で考えたことをエリアで分けて一行ずつ書き出す
-
【△△をxxxする】がどの分類に当たるのかを考えて、下記【CSSの選び方マニュアル】を見ながら適切なプロパティを見つける
CSSの選び方マニュアル-
領域を調整
-
レイアウトを決めたい
- 配置
- 並び方
-
サイズを決めたい
- 幅
- 高さ
-
余白を取りたい
- 内側の余白
- 外側の余白
- コンテンツ間の余白
-
装飾したい
- 線を引く
- 角丸にする
- 背景を指定
-
-
中身（主にテキスト、画像）を調整
-
配置を決めたい
- 横配置
-
文字を整えたい
- フォントスタイル
- サイズ
- 太さ
- 色
- 行間
- 文字間
-
-
-
実際にスタイルファイルに記述していく
例：【お問い合わせ】エリアの背景色をグレー(#f0f0f0)にする
背景をグレーにする → 【領域】を【装飾したい】
課題02
以前作成したサイトのデザインのCSSを上記手順に沿って改めて考えてみましょう。
<適用したいスタイルを日本語で記述>
記述例を確認する- 基本フォントサイズを16pxにする
- header,#aboutセクション,#bicycleセクションの幅を960pxにする
- header,#aboutセクション,#bicycleセクションを左右中央寄せにする
- h2見出しのフォントサイズを24pxにする
- h2見出しの下に見出しと同じ幅の線を引く
- h2見出しを左右中央寄せにする
ページ全体の共通ルールとして、下記ルールでCSSを記述してください。
-----
*** ここにルールを記述 ***
-----
<適用したいスタイルを日本語で記述>
記述例を確認する- ロゴの幅を120pxにする
- headerの中身を横並びにする
- headerの上下の余白を10pxにする
- headerの左右の余白を70pxにする
- headerの中身の上下を中央揃えにする
- headerの中身を左右両端寄せにする
- navのリンクの中身を横並びにする
- nav内リストのドットを消す
- nav内リストの間隔を20pxにする
- nav内リンクの文字色を黒にする
- nav内リンクの下線を消す
下記ルールでheaderのCSSを記述して
-----
*** ここにルールを記述 ***
-----
<適用したいスタイルを日本語で記述>
記述例を確認する- 高さを600pxにする
- 画像を見切れありで余白が出ないよう領域内いっぱいに広げる
下記ルールで#mainvisualのCSSを記述して
-----
*** ここにルールを記述 ***
-----
<適用したいスタイルを日本語で記述>
記述例を確認する- コンテンツの上側の余白を90px空ける
- image-textクラスの横幅を580pxにする
- image-textクラスを左右中央寄せにする
- image-textクラスの子コンテンツを横並びにする
- image-textクラスの子コンテンツを左右中央寄せにする
- image-textクラスの子コンテンツの間隔を30px空ける
- image-textクラスの子コンテンツの上下を中央揃えにする
- image-textクラスの上下の余白を60px空ける
- image-textクラス内画像の幅と高さを100pxにする
- image-textクラス内画像を円形でくり抜く
下記ルールで#aboutのCSSを記述して
-----
*** ここにルールを記述 ***
-----
<適用したいスタイルを日本語で記述>
記述例を確認する- コンテンツの上側の余白を98px空ける
- itemsクラスリストのドットを消す
- itemsクラスの子コンテンツを横並びにする
- itemsクラスの子コンテンツを左右中央寄せにする
- itemsクラスの子コンテンツを上下中央寄せにする
- itemsクラスの子コンテンツの間隔を20px空ける
- itemsクラスの子上側の余白を60px空ける
- itemsクラス内liの幅を260pxにする
- itemsクラス内li内のテキスト配置を中央にする
下記ルールで#bicycleのCSSを記述して
-----
*** ここにルールを記述 ***
-----
