HTML/CSS

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

2021年6月22日

しの

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

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

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

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

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

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

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

結論

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

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

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

実際に見てみましょう。

記事の信頼性

改めてまして、しのと申します。

現在はWEB制作、およびWEB開発を行っている企業でディレクター兼フロントエンドエンジニアをしています。

現役のWEBエンジニアですので、より

実際に書いてみよう

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

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

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

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

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

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

<style>
#page1 .container p{
color:red;
}
</style>

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

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

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

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

おしまい。

  • この記事を書いた人
  • 最新記事

しの

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

-HTML/CSS
-