新入社員が勉強しているHTML5とCSS3 part0 ~前段階~

こんにちは、田中でございます。

まだまだ新人でわからないことだらけの僕が、今勉強している内容をブログに書いていこうと思います!
本で勉強しているので、本に書かれている抑えるべきポイントもここに書いておきます!

まず最初に、これから書いていくコーディングの前知識として
ここでは下記の名称で解説していきます。

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

基本的なセレクタ
p 要素型
.sample クラス
#sample id

コーディングする上でのポイント

・要素名にスタイルを指定しない
一度コーディングが終わっても、後から部分的な仕様の変化や対象のブラウザの変化などによってHTMLのマークアップが変更される場合があります。そのような場合に要素名に対してスタイルを指定していると、HTMLの編集と同時にセレクタを変更するためにCSSファイルも修正しなくてはならなくなります。

・CSSのセレクタにはIDではなくクラスを使用する
IDを避けた方が良い3つの理由

①スタイルの使い回しができない
IDはクラスと違って、同じページの中では1つのIDを複数回使えないと言う決まりがあります。

②スタイルの上書きが難しい
CSSには詳細度という概念があります。詳細度とは、スタイルが適用される優先順位を決める仕組みです。IDはクラスよりも詳細度が高いので、IDで指定したスタイルは後からクラスで指定したスタイルで上書きすることができません。

③HTMLやJavaScriptと影響範囲を分離させる
CSSセレクタはスタイルを指定したい要素をCSSから特定するためのものですが、要素の特定が必要な場面はCSS以外でも発生します。HTMLでページ内の特定の場所を指定してリンクする場合にはIDを使いますし、JavaScriptの処理で特定の1つの要素を取得したい場合にもIDを使用すると効率がいいです。前述したIDのルールに従い同じIDの要素が複数存在しないことを前提にできるので、絞り込みや重複確認をせずピンポイントで1つの要素を特定できるからです。
そこで、IDはHTML、JavaScriptからの特定にしようし、CSSセレクタでは使用しないというようにルールを作ると、影響範囲を分離できるので、管理がしやすくなりメリットがあります。

文字ばかりになってすみません・・・
僕もまだまだ理解できていない部分がありますので、
これを完全に理解した上で、
一緒に頑張りましょう!

関連記事一覧

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP