NEW ARTICLE
夏イベント「青く燃ゆる心」攻略感想②【アークナイツ】
  • cssとradioボタンを使ってタブのような挙動を実装する。

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

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で出来た。
タブ切り替えというと、
とても難しい処理をしているように感じるが、
実際は

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

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

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