こんにちは、津山です。

今回は珍しく（？）技術ネタでも書いてみようかと思います。

複雑な技術を取り上げてしまうとどうしても話が長くなってしまいそうなので、
今回とりあげるネタは初歩的で、非常に簡単な裏技。

普段、私はUIの担当をしているので、よく触るのがHTML・CSS、たまに触るのがjavascriptやPHPといったところです。

なかでも、CSSのフレームワークであるbootstrapは入社当時から触れてきたため かなり馴染みのあるものとなりました。(最近は新しいフレームワークも取り入れ始めていますが)

そこで、今回注目したのがbootstrap4の「タブ」について。

最近、業務でも使う機会があったのですが、一点つまずいた点がありました

それが「タブの数が多くなってしまえばしまうほど、下に折り返してしまう」点。

bootstrap4の公式サイトを参照すれば、上記のようなタブを簡単に作ることができます。
タブが少ない場合はUIも綺麗で快適に使えるのですが…

このようにタブが多くなってしまうと、下に折り返してしまうのが悩みどころです。

そこで考えたのが、「タブを折り返さず、横スクロールで一行にまとめる」方法です。
特に複雑な修正は不要で、HTML要素とCSSを一部追加するだけで簡単にできます。

やりかた

①bootstrapのタブ部分にあたるHTML
デフォルトだとul>li>a の構造になっているのですが

(※見た目の問題なので、今回はタブの処理に関わる属性を省いています。)

このul要素を、以下のようにdivで囲みます。

また、今回cssの指定もするので、divとulに好きなクラスをつけておきます。

②cssの指定を行います

div につけたクラスにoverflow-x:scroll;を
ul につけたクラスにwidthを指定します。

ここのwidthは、タブが折り返さず一行になる長さを指定します。
今回のサンプルタブの場合はwidth:63em;の指定で一行に収まりました。

以上です！

結果は以下画像のようになります

この方法は独自にたどり着いた方法なので、
あくまで、参考程度にどうぞ。