HTML実践学習14 CSSの書き方(後)

ITリテラシー学習
ITリテラシー学習

CSSの書き方についてご説明します。

こちらの記事は後編です。
*前編はこちら↓

HTML実践学習13 CSSの書き方(前)
CSSの書き方についてご説明します。こちらの記事は前編です。*後編はこちら↓CSSの文法例えばp要素に対して文字色を赤、文字の大きさを22px、太字とする場合は下...

スタイルの継承

ある要素に含まれている要素にのみスタイルをかける場合は「div img {}」のように親要素と子要素の間にスペースを空けて記述します。

また下記のように親要素と子要素に対してスタイルをかけたとします。

body {
  color: #ff0000;
  font-size: 16px
}

p {
  color: #000000;
}

この場合はp要素に記述された値(#000000)が優先されますが、文字サイズはbody要素に記述した16pxに変更されます。このように親となる要素(この場合はbody要素)から子となる要素(この場合はp要素)にスタイルが引き継がれることを「スタイルの継承」と言います。
ページ全体に必要なスタイルをかけてから、各細かい要素にスタイルを記述することで、文書の省略化にも繋がり、綺麗なソースに仕上げることができます。
ただし、継承されないプロパティ(border、background、paddingなど)も存在しますので注意してください。

idセレクタ

idに対してスタイルを記述する場合は「#id名 { }」と記述します。

例えばdiv要素内のidに対して文字を赤くする場合は下記のように記述します。

  <div id="name">木村太郎</div>
#name {
  color:red;
}

または

div #name{
  color:red;
}

classセレクタ

classに対してスタイルを記述する場合は「.class名 { }」と記述します。div要素に含まれるclassに対して文字を赤くする場合は下記のように記述します。

<div class="house">マンション</div>
.house {
  color:red;
}

または

div .house{
  color:red;
}

POINT

「スタイルの継承」とは親要素で記述したスタイルを子要素が引き継ぐことです。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました