#css

転職にともないフルスタックエンジニアとして仕事をするようになったので、フロントエンド技術にも手を出すことが増えてきた。この領域は不得手で苦労している。 先日、仕事の一部としてボタン画像 (i.e., <button /> の中に <img /> を入れて、画像をクリック可能にしたもの) を実装した。このとき、クリック後のボタンには「選択済み」であることを示すために枠線をつけたいという要望があり、この課題にどうアプローチしたかについて、メモを残そうと思う。 パターン1 (JavaScript を使わないパターン) 先に実装を示す。 See the Pen VEYRqX by mahata (@mahata) on CodePen. ボタンの縦幅と横幅を 104px 取っている。これは 100px の画像に、二本ずつ 2px のボーダーを入れるため 100 + (2 * 2) で 104px と計算している。 初期状態ではボタンに透明なボーダーを入れており、ボタンが押されたとき (= :focus 擬似クラスが有効になったとき) にボーダーの色を red に変更している。 次の部分はボタン内の画像を中央寄せするために書いている。 .button { display: flex; justify-content: center; align-items: center; ... } 画像は縦幅と横幅が 100px で表示しているため、透明なボーダーの中にぴったり収まる。 パターン2 (JavaScript を使うパターン) こちらも先に実装を示す。 See the Pen VEYRqX by mahata (@mahata) on CodePen. [Read More]