cssとradioボタンを使ってタブのような挙動を実装する。

最近GoogleがSEO等でスピードを重視し始めている。
そうなってくると重要なのがAMPや、画像のWEBP化、
そして何よりjQueryやjsといったロードに影響を与えがちな処理の軽量化である。

今回はその一環として、
タブ切り替えをCSSだけで行う。

実装したもの

早速実装したものを載せる。

jQueryも使用

See the Pen KBMVYM by blue (@aoiBlue) on CodePen.0

まずはjQueryを使ってオーソドックスにhide(); show();を使ったパターン。
メリットはclass名が少なく済むことと、
要素の位置に依存しにくいので、
後からDOMの変更などがあった時に修正を入れる可能性が低そう。
デメリットは速度が落ちること。

cssだけ

See the Pen タブメニュー by blue (@aoiBlue) on CodePen.0

CSSの個人的心得

CSS自体はとても単純なことしか行えないので、
難しく考えないように注意したい。
単純なことを組み合わせて難しいことをする、
というのはエンジニアにとって大切なことだと個人的には思う。

というわけで、CSSでとりあえず抑えておくと良い機能は

• 要素を消せる
• 要素の状態を取得してレイアウト変更できる(:hoverなど)
• 要素の隣、下の要素を取得できる（いわゆるセレクタ）
• 疑似要素で前後に要素もどきを出現させられる(:before, :after)

これら四つだと思う。
今回はこの中で

> 要素を消せる
> 要素の隣、下の要素を取得できる（いわゆるセレクタ)

この二つを組み合わせた、
単純なCSSで出来た。
タブ切り替えというと、
とても難しい処理をしているように感じるが、
実際は

• 全ての要素はデフォルトで非表示
• 要素を選択状態にする
• 隣接セレクタを使って対応する要素のみ非表示状態ではなくする

という単純なことしかしていない。

昔から難しいことは簡単なことに分解しろというが、
何かに詰まったらまず分解してみると良いと思う。