CSSの記述について！

8547 ワード
CSS HTML HTML テキストリンク

結論！

CSSの記述は、セレクタ・プロパティ・値から成り立っている！

セレクタを用いて、CSSを適用する箇所を決める！

プロパティはCSSで何を装飾するのかを決める！（文字の色や大きさ、余白などなど）

classセレクタを用いることで、特定の箇所だけにCSSを適用することができる！

span要素を使うことでテキストの一部分にCSSの装飾を加えられる！

以上が答えだと思います！

では、細かく書いていきたいと思います！

①.セレクタ

セレクタとは、CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述です！

下記の記述例で『body』の部分がセレクタです！

.body {
    color: red;
}

②.プロパティ

プロパティとはセレクタで指定したHTMLの「何を変えるのか」を選択するための記述です！

背景の色や文字の大きさ、要素同士の余白など様々なプロパティが用意されています！

また、複数プロパティがある場合は順序は問いません！

下記の記述例で『color』の部分がプロパティです！

.body {
    color: red;
}

下記の記述例で『プロパティは2つあっても順番は問いません！

.body {
    height: 100px;
    color: red;
}

.body {
    color: red;
    height: 100px;
}

どちらの記述でも問題ありません！

③.値

プロパティで設定する内容を決めるための記述です！

背景の色を指定するプロパティであれば、値でどんな色にするのかを決めることができます！

プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力します！

下記の記述例で『red』の部分が値です！

.body {
    color: red;
}

④.class属性

class属性とはHTML要素に対して個別に名前を指定することができる属性です!

class属性の属性値をclass名と言います！

下記の記述例で『class』の部分がclass属性です！

『first-content』の部分がclass名です！

<p class="first-content">

次に、CSSではclass名をセレクタと指定して、装飾することが出来ます！

例えば、<　p　>...<　/p　>に対して"first-content"というclass名を付与する時は、

下記のように記載します！

<p class="first-content">
  テストテストテスト
</p>

これでCSSに指定して装飾する事が出来ます！

⑤.classセレクタ

HTMLで指定したclass名をCSSのセレクタとして使用することができます！

classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します！

classセレクタを使うことによって、特定のHTMLだけに装飾をすることができます！

下記のように記載します！

test.css
.first-content {
  color: red;
}

これで特定のHTMLだけに装飾をすることができます！

⑥.span要素

span要素は、テキストの一部だけを装飾するために使用される要素です！

部分的にテキストのフォント調整、文字色・背景色を変更するのに頻繁に使用されます！

『見出し』の前後を<　span　>...<　/span>　で囲む！

span要素に例として、blueクラスを設定する！

CSSファイルで、例としてblueクラスにプロパティを設定する！

以上を踏まえて、下記のように記載します！

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML勉強用ウェブサイト</title>
   <link rel="stylesheet" href="style1-1.css">
  </head>
  <body>
    <h1>
      ここは<span class="blue">見出し</span>です
    </h1>
    <p>
      1つ目の段落
    </p>
    <p>
      2つ目の段落
    </p>
    <p>
      3つ目の段落<b>この部分は太字になる</b>
    </p>
      <a href="https://www.google.com/">クリックすると、Googleへアクセスします</a>
  </body>
</html>
test.css
.blue {
  color: blue;
}

これで適用されます！

これにより、『見出し』の部分が青文字で表示されます！

まとめ

意味合いと記述を理解出来ていれば問題ないかと思います！

記述の基礎となる部分なので、ここはしっかり覚えていきたいと思います！

まだまだ基礎中の基礎ですが汗

何か説明で間違っていたらご指導お願い致します(_ _)

org.gjt.mm.mysql.Driver
闘地主発札システム