【CSSは影響範囲を明確にすべき】
たとえばHTMLに＜div class="slide"＞というタグがあったとして、
CSSのサンプルが
.slide { ほにゃらら; }
だったとします。
局所的な対応としてはコピペで良いのですが、使用しているテンプレートや
プラグインに備わっているCSSとclass名が重ならないか調べることができる
「目」があったほうが安心してカスタマイズしていけます。
CSSはclass名を単独で指定するだけでなく、複合セレクタを使う場合もあるし、
コピーしたものとは違うclass名を使って同じタグにスタイルが掛けてある場合も。
「確実に重複を回避する書き方」
WordPressのようにテンプレートサイトの場合、
複数のページで同じテンプレートが適用されるため、
「このページにCSSを適用したい」
場合に、他のページにも影響してしまうことがあります。
そこで、各ページに固有（ユニーク）の情報を、各ページの一番外側のタグ、
つまり body タグに入れておくことで確実にそのページだけにしか影響しない
CSSを記述することができます。
例）プロフィールページ <body id="profile"> 例）お問い合わせページ <body id="contact">
HTMLがこのように出力されるようにして、CSSはこう書きます。
例）プロフィールページ専用スタイル body#profile .slide { ほにゃらら; } ★
こうしておけば、他のページで
.slide { ほにゃらら; }
と書いてしまっても、★のセレクタ条件に絶対に当てはまらないので、
プロフィールページだけのスタイルになります。
WordPressの場合、上記のテクニックを活用できるように設計されており、
各ページに固有の情報として「スラッグ」をテンプレートに埋め込むための
関数が用意されています。
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
