GLOW YOUR BUSINESS
WEB TOTAL PRODCTION FROM NARA

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

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

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

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

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

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

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

結論

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

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

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

実際に見てみましょう。

記事の信頼性

改めてまして、still.代表のしのと申します。

主にWEBディレクター兼フロントエンドエンジニアをしています。

現役のWEBエンジニアですのでCSSは常日頃から使用しているため記事の信頼性の担保になるのではないかと思います。

実際に書いてみよう

ここでは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を変える際の参考にしてみてください。

おしまい。

 

著者画像

執筆者 しの

still.代表。 奈良市出身奈良市在住。 SEOはじめ、マーケティング成果を出せるWEB制作を得意としています。ディレクションから制作まで一気通貫でご対応。 クライアント様にとってスムーズで気持ちの良いコミュニケーションを常日頃から心がけております。 これまでコーポレイトサイト、サービスサイト、ランディングページ、ECサイトなど多数のサイト、プロジェクトに携わらせていただき、サイトを作成させて頂いております。 その他サーバーの構築、メールのトラブルの対応、コンテンツマーケティングなど幅広くご対応しておりますのでまずはお気軽にご相談ください。