何かの条件に当てはまるページのスタイルを変えたいとき

CMSを使ってスタイルを当てていくと、このページだけは共通部分で表示しているこの項目いらないなと思うことがあります。

その場合cssわざわざ共通部分を変更したりしなくてもcssで非表示にしたりできるのでやり方を調べてみました。

特定のURLではこの部分にはこれを表示させたいという場合、URLを指定して適応するスタイルを書きます。下のような感じです。
この中にもともと表示されていた要素を非表示にする処理を書いて、表示させたい要素を書けば1ページだけ違うレイアウトを作れます。

URL毎にcssを変更する場合

iframe[src*="tekiou.com"]{
width: 600px;
height: auto;
}

タグ名[属性名="指定したURL"]{
/ 適用するCSSの内容 */
}

排除したいURLを指定することもできます。

タグ名[属性名^="排除したいURL"]{
/ 適用するCSSの内容 /
}

cssの切り替えでもうひとつべた名シーンといえば、レスポンシブデザインにするときかと思います。

横幅などを％で切り替えることもできますが、より細かい厳密なスタイルを当てたいときはディスプレイのサイズでスタイルを変更したほうがよいです。

ディスプレイの大きさで変える場合はこのように書きます

htmlにスタイルを読み込ませるコードを書きます

cssのほうにはこれがディスプレイサイズいくつのときのものなのかを記載します。
@media screen and (max-width: 320px) {
/ 表示領域が320px以下の場合に適用するスタイル /
div#sidebar { width: 100%; }
}
@media screen and (min-width: 800px) {
/ 表示領域が800px以上の場合に適用するスタイル /
div#sidebar { width: 240px }
}

599pxまではモバイル
600～959pxまではタブレット
960～1280pxはパソコンまたは横向きにしたタブレット
これ以上はディスプレイパソコン