ランキングタグの適用されているＣＳＳを調べるよ。割烹よりあっさりしている感じ。まぁ相変わらず装飾難易度高いけどね……
まずは仕様調査です！
ランキングタグ欄の仕様を暴いていきましょう。まずは適用されているCSSについて調べていきます。例によってPCとスマホで分かれているので、それぞれ調べましょう。
活動報告みたいなへんてこりんな設定が適用されてないことを祈ります。pでくくられたり、ユニバーサルセレクタ先輩が染めてきたりしませんように。
■PC版
classにcenterとnovelrankingtagが指定されているdiv要素の中にランキングタグが格納されます。
活動報告みたいにpタグではありませんでした。よかった……。本当によかった……。
ブロック要素を入れても大丈夫ですね。途中から変になったりしませんね。
安心したところでこの部分にかかってるCSSの設定を見ましょうか。
それに適用されているのを見てみましょう。
font-family: 'Lucida Grande', sans-serif;
font-size: 14px;
background: #ffffff;
color: #444444;
line-height: 180%;
padding: 0;
margin: 0;
基本はこれ。まぁ普通の設定ですね。
ではclassに設定されているものはというと。
.center {
margin: 20px 0;
text-align: center;
}
novelrankingtagの方は特に何も設定されてないですね。
centerだけ有効になってる感じ。
中央寄せになるようです。
特に変な設定はないようですが、どうやら横幅が設定されていないので画面幅100%に広がるようです。
普通は大きい画面だとwidthやmax-widthで最大幅を制限したりするのですが、ランキングタグ欄だとしてくれないっぽいですね……。
またこれは厄介な。
CSSの記述を見ましたが、ほとんどがClassとIDで指定されていて、素の要素に適用されているものはなくほとんどブラウザのCSSが適用される感じですね。
PC版はこんなところ。
---------
■スマホ版
さて、スマホ版はというとclassにrankingtag_marginだけ適用されているdiv要素の中に格納されます。
こちらもdivでよかった。ほんとうに……、。
さて、活動報告で猛威を振るっている*先輩はどうかというと、
* {
direction: ltr;
unicode-bidi: bidi-override;
}
ん！ やったcolorが設定されていませんね！ これでタグを挟んでも文字色が変更されるということはないようです。安心です。
どうやら活動報告を作った人とは別のようですね。
さて、安心したところで適用されているタグを見ましょうか。
font-family: 'Lucida Grande', sans-serif;
color: #333333;
font-size: 14px;
line-height: 150%;
padding: 0px;
margin: 0px;
基本はこんなところ。
文字色とline-heightがPC版と若干違いますね。スマホの方が色が濃くて行間が狭くなる感じ。
まぁほとんど感じないレベルですけど。
ではrankingtag_marginにはどんな設定がかかっているかというと。
.rankingtag_margin {
margin: 30px 20px;
text-align: center;
}
中央寄せとマージンが設定されてますね。
ほぼPCのcenterと同じような物ですね。ただ、左右に20pxもマージン入れてますね。
こちらも横幅は指定されていないので100%になりますが、左右にmargin 20pxが入っているので40px分だけ減ります。
スマホの画面は小さいので結構margin取られますね……。
あとは他のCSSですが、こちらもほとんどclassとID指定なのでブラウザのCSSが適用されそうです。
スマホ版はこんなところ。
----------------
さて、どうしましょうかね。
ここまで見て、問題点はいくつかありますね。
1. 幅が指定されていない
2. text-align:centerが指定されているのですべてが中央寄せになる
3. スマホ版では左右にmargin20pxがあるので使用できる幅が小さい
こんなところ
これの何が問題なのかというのは、次で説明しましょう。
それを解決するための適用も考えてみます。
