「ページ別で部分的に違う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を変える際の参考にしてみてください。
おしまい。
