HTML実践学習13 CSSの書き方(前)

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

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

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

HTML実践学習14 CSSの書き方(後)
CSSの書き方についてご説明します。こちらの記事は後編です。*前編はこちら↓スタイルの継承ある要素に含まれている要素にのみスタイルをかける場合は「div img ...

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 Pゴシック","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の文法は「セレクタ{ プロパティ: 値;}」と記述します。

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をコピーしました