ブックマーク / zenn.dev/kagan (3)

  • 【JS】「ただの {}(ブロック文)」を使うと嬉しいこと

    JavaScript の 「ブロック文」 をご存知でしょうか。 波括弧(ブレース)で囲む、コレです。 if ブロック if () {} や、for ブロック for () {} として目にすることが多いですが、 {} 単体でもブロック文になります。 これだけだとオブジェクトと思ってしまうかもしれませんが、ブロック文になります。 (オブジェクトとブロック文の解釈については javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない - メモを揉め が詳しいです) なんの意味もないように見える「ただの {}(ブロック文)」ですが、意外と便利なことがあるのでこの記事ではそれを紹介します!

    【JS】「ただの {}(ブロック文)」を使うと嬉しいこと
    umai_bow
    umai_bow 2024/04/15
    ワイも好きだけどいきなり使うとギョッとするかなと思って遠慮してる。まあでもブロックの返り値が欲しくはなってしまう…
  • strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった

    「strongもbも太字になるのにどう違うんだ…?」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…?」 「strongの重要と、emの強調って何が違うんだ…?」 などなど、使い方がよくわからなくなりがちな HTML 要素(主にテキストレベルセマンティックスに分類される要素)の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみいしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01

    strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった
    umai_bow
    umai_bow 2023/08/20
  • 【CSS】まだホバー時のスタイルを :hover だけで指定してるの?

    はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう! @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス(正確には、ホ

    【CSS】まだホバー時のスタイルを :hover だけで指定してるの?
    umai_bow
    umai_bow 2023/08/07
  • 1