PC用のCSSを流用したとき、SP版のCSSの制作がしづらいのをどうにか改善したい
要求
前提として
あまりCSSのコードをいじりたくありません。
理由としては、組織で使っているテンプレートなので、ある程度、原形を保ったまま制作したいです。
また、納期が短いということなので、PC版のメディアクエリを外しCSSを流用し、SP版はメディアクエリで調節しろとのことです。
問題
PC版では必要だが、SP版では必要ない疑似要素が多く毎回毎回消すのが難しいです。
例えば
pタグの前後にafter, beforeで疑似要素を埋め込んだとします。
SP版ではその疑似要素は必要なく、邪魔で干渉してしまい、ノーマルであれば適用される装飾が適用されなかったりします。
下記のPC版コードを実際に表示させてみると、変な風に表示されると思います。
html
1<div class="container"> 2 <p class="item">ダミーダミーダミーダミーダミー</p> 3</div>
CSS
1.container { 2 padding: 80px 0 0; 3 margin: 0 auto; 4 width: 725px; 5 position: relative; 6 text-align: center; 7} 8 9.item { 10 padding-top: 1px; 11 position: absolute; 12 width: 750px; 13 left: -430px; 14 top: 0; 15 color: #FFF; 16 font-size: 12px; 17 background-color: #a9c927; 18} 19 20.item:before { 21 width: 9999px; 22 height: 100%; 23 position: absolute; 24 right: 100%; 25 top: 0; 26 background-color: #a9c927; 27 content: ''; 28} 29 30item:after { 31 width: 9999px; 32 height: 100%; 33 position: absolute; 34 right: 100%; 35 top: 0; 36 background-color: #a9c927; 37 content: ''; 38 right: auto; 39 left: 100%; 40}
質問
上記のようなめんどくさい組織で使っているテンプレートを効率的に編集する方法はないのでしょうか?
回答1件
あなたの回答
tips
プレビュー