投稿日:

    カテゴリー 日常 / プライベート

    最近やって面白かったコーディング

    デザイナー兼フロントをやってます。
    このところ作業が多くなってまして日々ゴリゴリコードを書いてます。
    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だけの対応ですが今後は広がりそうな勢いです。

    他にも色々ありますが、合わせ技で効果を発揮するコーディングもあるので
    新しい知識も身につけつつ仕事で試してみたいと思います。


    関連記事

    まだデータがありません。