質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2465閲覧

CSSで少しだけ異なるデザインの微調整を行う、ベストな方法は?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/24 07:09

https://teratail.com/questions/66996#reply-105993

こちらでCSSファイルの分割について質問しました。
今回は、CSSで、ほとんどデザインは一緒なんだけれども、少しだけデザインが異なる場合の、CSSの記述方法についてお聞きしたいです。

例えば以下の二つのページがあったとします。

html

1<!-- page1 --> 2 3<body> 4 5<div class="box"> 6</div> 7 8<div class="mini-box"> 9</div> 10 11</body>

html

1<!-- page2 --> 2 3<body> 4 5<div class="box"> 6</div> 7 8<div class="mini-box"> 9</div> 10 11</body>

このようにboxとmini-boxがあり、デザインを何かしらしているとします。
デザインは今の所一緒なので、一つだけCSSを記述すれば良いと思います(boxとmini-boxについて)。

page2のboxにのみ、少しだけ、変更を加えたい場合(例えばborderをつけるなど)はすでにあるboxのCSSはそのままで、追加で<div class="box line">するのが一般的かと思います。

ですが、page2のmini-boxも異なる修正を加えたい場合、boxとmini-boxをクラスで囲んで、セレクタ指定した方が良いのでしょうか?例えば以下のようになります。

html

1<!-- page2 --> 2 3<body> 4<div class="page2-wrapper"> 5 <div class="box"> 6 </div> 7 8 <div class="mini-box"> 9 </div> 10</div> 11</body>

このようにすると、CSSは以下のようにかけると思います。

css

1// page2.css 2 3.page2-wrapper > .box {} 4 5.page2-wrapper > min-box {} 6

こうすれば、共通で使っているCSSで、boxとmin-boxのデザインをしておけますし、page2.cssで異なる点だけ修正を追加すれば良くなると思います(lineを追加するだけなら、classでlineとした方が良いですが、もっとデザインが複雑となる場合などを想定)。

そしてもう一つ方法として考えられるのが、完全にCSSを分離するという方法です。

html

1<!-- page2 --> 2 3<body> 4 5<div class="page2-box"> 6</div> 7 8<div class="page2-mini-box"> 9</div> 10 11</body>

このようにすると、box,min-boxのcssを、page2-box,page2-mini-boxようにコピーして適時修正という感じになります。
ここでのデメリットとして、共通な部分を使いまわさないので


  • 記述量が増える。
  • CSSの重複度が増す
  • page3などが出来て、デザインが少し異なる場合、コード量がpage数の影響をかなり受ける

メリットとしては

  • CSSを見たときに、boxのcssのデザインを見なくて良い(page2-boxに全て記述しているので)

ぐらいかと思います。おそらくこの手法が現実的ではないですし、選ばれない手法だと思います。
かといって、前者の手法も、「ページごとに独自のラッパーで囲んで」と強引な気もします。

皆さんの意見を伺いたいです。宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

自分の場合、「<body>にページ特有のクラスをかける」という方法を取っています。そして、SCSS(ネストや変数など、拡張されたCSS)で書く際に、いちばん外側にその<body>を指定しておけば、絶対にほかと干渉しないので便利です。

このように細かく分けて書いたものをつなげて1本のファイルにしても、目的の箇所だけきっちり利いてくれます。

scss

1body.page-3{ 2 3 /* この中で、page-3専用のCSSを書いていく */ 4 5}

HTMLタグにIDやクラスを指定するワケ

投稿2017/02/24 07:25

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/02/24 07:32

ありがとうございます。 確かにbodyを使えば、無駄なdivが増えることもないので良さそうですね!
guest

0

すでに回答にあるbodyにクラスあるいはIDをふって振り分けるのがベストだと思います。
場合によっては、共通CSSは外部にもち、固有CSSはそのページのヘッダーに直接記述するのもありだと思います。
これは管理上どちらが楽か状況によって変わりますので、使い分けるています。

投稿2017/02/26 03:14

shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/02/26 05:24

ご回答ありがとうございます。 bodyにclassというのが一般的なのですね!
guest

0

classを複数指定してみるってのも方法の一つとしてはあるかもしれませんよ。
'class="box page2"'

投稿2017/02/24 07:22

Z-TALBO

総合スコア525

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/02/24 07:31

ありがとうございます。複数指定もbootstrapみたいで良いのかもしれませんね!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問