[CSS]スクリプト無しで実装する、タブUIのスタイルシート

パネルをタブで変更するUIをスタイルシートで実装するチュートリアルをCSS-Tricksから紹介します。

デモのキャプチャ

CSS3-Only Tabbed Area

使用しているCSSはCSS3で、デモページは対応ブラウザでご覧ください。
※キャプチャはChrome

デモのキャプチャ

デモページ

タブの実装は、タブがリスト要素、パネルがdiv要素で、下記のものがベースとなっています。

HTML

タブのハイライト処理もCSSで行われています。
ただし、一点だけ積み残しがあり、タブの切り替えにハッシュ「#box-one」を使用しているため、ページ内アンカーが有効になってしまいます。
現時点ではページの下部に配置することで、とりあえず移動はなくなります。

sponsors

top of page

©2018 coliss