コーディングの前知識ーhtml5のお勉強0回

わたしのメモ書きみたいなものです。

コーディングの前知識

HTML <要素名 属性=”値”>テキスト
CSS セレクタ{ プロパティ:値;}

CSSの基本的な例

.sample
クラス
#sample
id

コーディングでのポイント

要素名にスタイルを指定しない

<div class=”container”>
<h1>サンプルテキスト</h1>
<p>サンプルテキスト</p>
</div>

.container{
color:red;
}

要素名ではなくクラスに対してスタイルを指定しておけば、HTMLに多少の変更があってもCSSがその影響を受けにくくなるので保守性があがる。

<h1>最も重要なサンプルテキスト</h1>

<div class=”container”>
<h2 class=”heading”>サンプルテキスト</h2>
<p>サンプルテキスト</p>
</div>

.heading{
color:red;
}

CSSのセレクタにはIDではなくクラスを使用する

IDを避けたほうがいい理由
(1)スタイルの使い回しができない
→IDはクラスと違って、同じページの中では1つのIDを複数回使えない。
(2)スタイルの上書きが難しい。
→IDはクラスよりもCSSの詳細度が高いのであとからクラスでスタイルの上書きが難しい。
(3)HTMLやJavascriptと影響範囲を分離する。

投稿者プロフィール

466548
京都在住のWEB屋さんです。
最近はデザインより構築やディレクションが多いです。
最近お酒はお休み中です。