Unityアセットストアセール中!

枠線で囲むタブCSSデザインのhtmlコーディングで詰む。

<景品表示法に基づく表記 > 本サイトのコンテンツには、商品プロモーションが含まれている場合があります。
スポンサードリンク
目次

枠線で囲むタブCSSデザインのhtmlコーディングで詰む。

タブのCSSデザインが大変だったのでメモ。

文字で説明すると難しいのですが、タブとタブの間をあけて枠線で囲むけれど、タブの下はくっついているように見せるデザインの指定です。

目標デザイン

目標デザイン

「タブの下はくっついているように見せる」のが難関でした。タブの中身をborderで囲むと部分的に線を消すことはできないし、タブ側で囲むとすきまの線が描画できなかったからです。

NGケース

線が入る

これの解決策としては、タブの中身のborderはすべて描画し、タブの見出しになっているラベルを

ネガティブマージンで強制的に下げます。
(margin: 0 10px -1px 0;)

私はIE6,IE7で苦労した世代なのでネガティブマージンは基本的に拒否反応がでますが、今のブラウザだとガンガン使っても大丈夫なようですね。価値観のアップデートを進めないと時代についていけなくなりそうです。

なおjQueryのタブの設置は古いやり方で、今の流行りは

ラジオボタンを使ってCSSでデザインしていく!のが主流

のようです。jsを書かなくてよいので楽ですものね。これも旧WEB人類だと知らないと思いつかない手法なので覚えておきたいところです。


今回のコード

See the Pen Untitled by miccyome (@miccyome) on CodePen.

created by Rinker
¥2,654 (2023/09/13 19:05:36時点 Amazon調べ-詳細)
スポンサードリンク
[WordPressのライティング向けプラグイン]
ワードプレスオリジナルプラグイン >>

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

スポンサーリンク

コメント

コメントする

目次
閉じる