デザイナー兼フロントをやってます。このところ作業が多くなってまして日々ゴリゴリコードを書いてます。CSSやhtmlって今は結構痒いところまで手が届くようになってるなと感心します。今回は最近試してよかった、面白かったコーディングをご紹介。【CSS、HTML、目から鱗だった対処法】Q：tableのtrをセル数関係なく繋ぎたいA：td colspan=”100″ 100は100％の意味で縦でも横でも無条件で一つのセルにつなげられます。 colspanでつなげる数を明確にするためjsを組む必要があると思ってたんですが これは1発でできて驚きました。セル数が不明なテーブルにも余裕です。Q：要素をtransform rotateで回転させたいけど基準点が都合つかないA：transform-originで設定できる transform rotateって回転点を設定できるんですね。驚きました。 文字を変形させて移動させるときに規則性をもたせたい場合は 重要だったり。用途は限られますが、助けられました。Q：ホバーのプルダウンを楽に出したいA：class_name1:hover .class_name2にabsoluteでopacity:1 やってみたら思いの外きれいにできたので楽しかったです。 驚きはないですがhover指定でやれば確かに出るよね、的な。 class_name1にrerative、2にabsoluteのbottom:0でwidth:100%。 transitionとかでフェードを入れれば立派なメニューの完成です。Q：背景パターンをレスポンシブでも均一化したいA：background-size:にvw指定。 これもやってみて面白かった載せ方です。パターン背景は pxや%ではリキッドの可変に対応できないけどこれなら大丈夫。Q:ジャギったwebフォントにアンチエイリアスをかけたいA:transform rotateで0.001deg以などの小さな数を当てる。 私の環境では効果は出なかったですが、上手いこと考える人もいる ものだなと感心しました。Q：背景を中央揃えの固定に配置したいA:background-pozitionにcalc（50% – 00px）。 幅が100％の中央を基準に設定すれば 今までできないと思っていた背景の中央基準固定。 calcでいとも簡単にできますね。よく使ってます。Q:画像に遅延ロードをかけたいけどjsとかめんどいA：img要素に loading=”lazy”を加える。 lazyをautoにすると状況によりブラウザが判断して遅延読込を掛けてくれます。 今はchromeだけの対応ですが今後は広がりそうな勢いです。他にも色々ありますが、合わせ技で効果を発揮するコーディングもあるので新しい知識も身につけつつ仕事で試してみたいと思います。
