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だけで実装したもの
class等は適当にリファクタ必要。
やっていること自体は単純で、
:checkedでradioボックスが選択状態になったら、
隣接セレクタ~で隣接するulを見つけて、
>で子要素を探して対応するclassを持つ要素にcssを適応するということをしている。
CSSの個人的心得
CSS自体はとても単純なことしか行えないので、
難しく考えないように注意したい。
単純なことを組み合わせて難しいことをする、
というのはエンジニアにとって大切なことだと個人的には思う。
というわけで、CSSでとりあえず抑えておくと良い機能は
- 要素を消せる
- 要素の状態を取得してレイアウト変更できる(:hoverなど)
- 要素の隣、下の要素を取得できる(いわゆるセレクタ)
- 疑似要素で前後に要素もどきを出現させられる(:before, :after)
これら四つだと思う。
今回はこの中で
> 要素を消せる
> 要素の隣、下の要素を取得できる(いわゆるセレクタ)
この二つを組み合わせた、
単純なCSSで出来た。
タブ切り替えというと、
とても難しい処理をしているように感じるが、
実際は
-
- 全ての要素はデフォルトで非表示
-
- 要素を選択状態にする
-
- 隣接セレクタを使って対応する要素のみ非表示状態ではなくする
という単純なことしかしていない。
昔から難しいことは簡単なことに分解しろというが、
何かに詰まったらまず分解してみると良いと思う。
-
前の記事
BashコマンドTips2 2018.07.18
-
次の記事
World End 運命の力を束ねしルーンが見つからない時+α 2018.07.20
コメントを書く