記事の詳細
【レスポンシブ対応】CSSでメニュー表のように単語と単語を点線で結ぶリストを作る CSSでのタブリーダーの作り方
点線を可変にして文字の大きさはそのまま、点線だけが伸縮してレスポンシブ。
目標は以下の通り。
PC版
タブレット版
スマホ版
スマホ版では点線を取っ払って上下にテーブル的に見せる、でもいいかもしれません。
こんな感じ。
タブリーダーを作るときのHTMLタグ、CSSタグ
HTMLはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="tab-reader"> <li class="flex"> <span class="tab-reader-box1">タイトル</span> <span class="tab-reader-box2"><hr class="tab-r-line"></span> <span class="tab-reader-box3">500円</span> </li> <li class="flex"> <span class="tab-reader-box1">タイトルタイトル</span> <span class="tab-reader-box2"><hr class="tab-r-line"></span> <span class="tab-reader-box3">500円</span> </li> <li class="flex"> <span class="tab-reader-box1">タイトルタイトルタイトル</span> <span class="tab-reader-box2"><hr class="tab-r-line"></span> <span class="tab-reader-box3">500円</span> </li> </ul> |
リスト表記にしたかったのでli要素の中をflexで横並びにしていきます。
CSSタグはこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.flex { display: flex; display: -ms-flexbox; -ms-flex-flow: row wrap; flex-flow: row wrap; width: 100%; } hr.tab-r-line { position: relative; top: calc(50% - 1px); margin: 0 10px; border: none; border-top: dotted 2px #CCC; } .tab-reader-box2 { flex: auto; } |
解説
ポイントはflexプロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。
flexプロパティは一括指定プロパティです。
分割すると以下のような指定値になります。
1 2 3 4 5 |
.tab-reader-box2 { flex-grow: 1; /*フレックスアイテムをどれだけ伸ばすか、どれだけ長くするか*/ flex-shrink: 1; /*フレックスアイテムをどれだけ縮めるか、どれだけ短くするか*/ flex-basis: auto; /*フレックスアイテムの初期の寸法はどれくらいにするか*/ } |
つまり、tab-reader-box2については「伸びるし縮むよ! 初期のサイズは他のフレックスアイテムに応じるよ!」という指定にしているんですね。
そして、その中に入っているhrの指定ですが、
1 2 3 4 5 6 7 |
hr.tab-r-line { position: relative; /* 君「ここ」にいてね */ top: calc(50% - 1px); /*「ここ」ってのは親要素の一番上から50%と1px下がったところだよ */ margin: 0 10px; /* 左右の余白は10pxとってね */ border: none; /* とりあえず線はいらないよ */ border-top: dotted 2px #CCC; /* でもやっぱりtopのborderだけだしてね */ } |
borderで2pxを指定していますが、box-sizing: border-box;をしていても、いずれにせよ線はきれいにセンター揃いになりません。
2pxで指定しても、1px上にあげることでセンタリングしています。(top: calc(50% – 1px);の「-1px」はborder-topの太さの1/2です)
また、hrはブラウザのデフォルトでborder-widthを1px持っていることがありますので、これをborder: noneで一度打ち消しています。hrのリセットって忘れがちなんですよね……。
結果
こんなふうになりました。
また、レスポンシブでテーブルのようにしたい場合は、以下のCSSを上記に付け加えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media (max-width: 600px) { span.tab-reader-box2 { display: none; } span.tab-reader-box1, span.tab-reader-box3 { width: 100%; text-align: center; border: 1px solid #CCC; } span.tab-reader-box1 { background: #CCC; } } |
今のところこれが一番効率よくレスポンシブしてくれるような気がします。
他にやり方があったら追記していきます。