記事の詳細

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

目標は以下の通り。

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を上記に付け加えます。

 

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

 

 

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

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


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

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

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る