WEB制作でよく使う、ちょっとしたコーディングテクニック

皆さん、こんにちは。
AIコミュニケーション制作部の伊藤です。

今日は、最近htmlでよく使う技法を数点紹介します。

上下左右中央揃え

上下左右中央揃えは、かつてはmarginやpaddingを詳細に用いて作ったり、positionを用いて作ることもありました。
ほぼ完全にfloatに取って代わられつつあるdisplay:flexを用いることで、上下左右中央揃えが簡単に実現できます。

CSSに
「display:flex;」……フレックスボックスを使う。
「align-items:center」……フレックスボックス内をY軸に中央揃え
「justify-content:center」……フレックスボックス内をX軸に中央揃え

上記３点を設定することで、上下左右中央揃えが実現できます。
この方法は非常に汎用性が高く、リンクボタンなどを作る際にも非常に少ない手間で実装することができます。
また、フレックスを用いるのでレスポンシブを想定する場合にも工数が圧縮できるので、ぜひ覚えておきたいテクニックです。

ただし、IE11を使用することを想定する場合や、古いスマートフォンに対応するときは、ベンダープレフィックスを忘れないように！

②アニメーションのちらつきを抑える

ウェブサイトに一手間かける演出として、CSSアニメーションはうってつけです。
しかし、ホバーにアニメーションをかけると、なぜか要素がちらつくという陰惨な事件に見舞われることがあります。
これってどうにかなりませんか……？

以下のCSSでどうにかなります。
「backface-visibility:hidden」

これでどうにかなる理由ですが、ようわかりません。

https://developer.mozilla.org/ja/docs/Web/CSS/backface-visibility

アニメーションは立体だった！？ほんとによくわからんです。
遠近感のない23の変換には効果ないよ！って書いてあるんだけども、まあ大人の事情でしょうか。。。

今回は簡単だけどすごく使うテクニックを２点紹介しました。
もし、他にも簡単だけどもめっちゃ便利！みたいなのがあれば教えて頂けると幸いです！
では。