【部分的に変えたい】ページごとに違うCSSを適用する方法

2021年6月22日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位１位を約50件獲得(2023年6月時点)。

「ページ別で部分的に違うCSSを加えたいんだけど、どうやってやるんだろう」

「ヘッダーの一部をAというページだけ変えたいんだけどなあ」

上記のようなお悩み、疑問にお答えします。

WEBサイトを作っていると、特定のページのみ、CSSの仕様を変えたい瞬間というのはたまにありますよね。

「このページでは表示したいけど、このページでは表示したくない」といった状況もそうです。

今回はこちらの解決策をご紹介します。

結論

では早速結論ですが、結論は「bodyタグにid名もしくはclass名を振って、CSSで調整しましょう」というものです。

ページが分かれて入れば基本的にはHTMLファイルやPHPファイルも分かれていると思いますが、bodyタグは必ず一つのファイルにつき一つあると思います。

なので、bodyタグにid名やclass名を割り当ててあげて、それをCSSで調整してあげれば特定のページにのみCSSを当てる事が可能です。

実際に見てみましょう。

現在現役のWEBエンジニアとして勤務しており、HTMLや CSSを日常的に使用していますので記事の信頼性の担保になると考えております。

ここではpタグのテキストの色をページごとに変える仕様にしたいと思います。

まず初めにページごとに分けない場合の記述です。

<body>
<div class ="container">
  <p>こんにちわ</p>

この状態ではbodyごとにページを判別する事が出来ませんので、ページごとに仕様を変えるというのは難しくなります。

では以下のような場合はいかがでしょうか。

<body id ="page1">
<div class ="container">
  <p>こんにちわ</p>

#page1 .container p｛
color:red;
｝

これだと、bodyにid名が振られているためCSSで上記のように記述すれば特定のページのみCSSを変える事が出来ます。

例えば上記の場合であればpage1というid名が振られているページ以外のpタグのテキストが赤くなる事はありません。

というわけで今回はHTMLとCSSでWEBページごとに特定のCSSをかける方法について見てきました。

ページごとにCSSを変える際の参考にしてみてください。

おしまい。