読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSSは影響範囲を明確にすべき】

コーディングテクニック

f:id:wp-lesson:20161029005901j:plain

たとえば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
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!