目次
どうも。お久しぶりです。
17.04.30追記:「そっか、最初っから全部パーセンテージで設定すればいいやん…」と気づき修正。
17.05.02追記: 書き忘れてましたが当然HTMLの方も項目を増やしてあげる必要があります。
最近はEC-CUBEなんぞをいじっており、jQueryのスクリプトを設置したりしていちいち感動しております。まだまだそんなレベルの技術。
今日はその際ちょっと苦労した部分を書いてみようと思います。使わせていただいたのはこちらのコード一式。いやぁ素晴らしい。
PCでの表示を100%にしたい
幅いっぱいに表示させたかったので#tabAccordionのwidthを100%に。CSSの600pxの部分を100%にしてあげます。
#tabAccordion {
margin: 0 auto;
width: 100%;
height: 400px;
font-size: 12px;
border: #999 1px solid;
position: relative;
}
#tabAccordion dl {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
「やった！これで幅いっぱいだ！」と思いきや、タブの幅も固定なので変える必要あり。ここからが手間のかかるポイント。
タブの数も増やしたい
設置したい項目が7つあり、デフォルトの5つに2つ足すことに。レスポンシブなので幅をパーセントで指定してあげます。100÷7…なんとも中途半端な数字。ここに倍数を足していきます。ああ苦手な計算！でも電卓があるから大丈夫。
#tabAccordion dl:nth-child(2) dt {
left: 14.2857143%;
}
#tabAccordion dl:nth-child(3) dt {
left: 28.5714286%;
}
#tabAccordion dl:nth-child(4) dt {
left: 42.8571429%;
}
#tabAccordion dl:nth-child(5) dt {
left: 57.1428572%;
}
#tabAccordion dl:nth-child(6) dt {
left: 71.4285715%;
}
#tabAccordion dl:nth-child(7) dt {
left: 85.83%;
}
85.7142858%で「計算通り！」と思いきやこれだとズレが。右端で帳尻を合わすべく85.8%にしてみるとEdgeではぴしゃりと合うんですけどまたもFirefoxとChromeでズレが。85.9%にすると今度ははみだしてしまう。そして微調整に微調整を重ねついに見つけましたぴったりの数字！85.83%でございます。
こんな感じで増やしたいだけ増やしましょう。
次はタブレットとか向けの表示部分。
@media only screen and (max-width: 800px) {
#tabAccordion {
width: 100%;
box-sizing: border-box;
}
#tabAccordion dl {
width: 100%;
box-sizing: border-box;
}
#tabAccordion dl dt {
width: 14.2857143%;
}
#tabAccordion dl:nth-child(2) dt {
left: 14.2857143%;
}
#tabAccordion dl:nth-child(3) dt {
left: 28.5714286%;
}
#tabAccordion dl:nth-child(4) dt {
left: 42.8571429%;
}
#tabAccordion dl:nth-child(5) dt {
left: 57.1428572%;
}
#tabAccordion dl:nth-child(6) dt {
left: 71.4285715%;
}
#tabAccordion dl:nth-child(7) dt {
left: 85.83%;
}
スマホ表示も忘れず
アコーディオンの数も増やしておきましょう。
#tabAccordion dl:nth-child(2) dt,
#tabAccordion dl:nth-child(3) dt,
#tabAccordion dl:nth-child(4) dt,
#tabAccordion dl:nth-child(5) dt,
#tabAccordion dl:nth-child(6) dt,
#tabAccordion dl:nth-child(7) dt {
left: auto;
}
これでスマホ表示でもメニューが増えてくれます。
コメント