記事の詳細

点線を可変にして文字の大きさはそのまま、点線だけが伸縮してレスポンシブ。

目標は以下の通り。

PC版

CSSでのタブリーダーの作り方

タブレット版

CSSでのタブリーダーの作り方

スマホ版

CSSでのタブリーダーの作り方

スマホ版では点線を取っ払って上下にテーブル的に見せる、でもいいかもしれません。

こんな感じ。

CSSでのタブリーダーの作り方

 

タブリーダーを作るときのHTMLタグ、CSSタグ

HTMLはこちら

リスト表記にしたかったのでli要素の中をflexで横並びにしていきます。

CSSタグはこちら

 

解説

ポイントはflexプロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。
flexプロパティは一括指定プロパティです。
分割すると以下のような指定値になります。

 

 

つまり、tab-reader-box2については「伸びるし縮むよ! 初期のサイズは他のフレックスアイテムに応じるよ!」という指定にしているんですね。

そして、その中に入っているhrの指定ですが、

 

 

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でのタブリーダーの作り方

 

また、レスポンシブでテーブルのようにしたい場合は、以下のCSSを上記に付け加えます。

 

今のところこれが一番効率よくレスポンシブしてくれるような気がします。
他にやり方があったら追記していきます。

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

インクループ株式会社は、データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現する会社です。WEBサイトをもっと活用したい、ECサイトの売上をもっと増やしたいなどのお悩みをお持ちの方はぜひお気軽にお問い合わせください。

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る