タグ

javascriptとhtmlに関するhajimepgのブックマーク (2)

  • 令和のHTML / CSS / JavaScriptの書き方50選

    Web制作技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい!」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

    令和のHTML / CSS / JavaScriptの書き方50選
  • <a>か<button>か - hitode909の日記

    クリックできるものがあって,<a>にするか<button>にするか,という話をしていて,いろんな観点があるなと思ったのでメモ. 単なる画面遷移なら<a> 単にformを送信したいときは,<input type="submit">や<button> <button>はdisabled属性を使って無効状態にできるので,押せない場合もあるなら便利 リンクを<a>にしておくと,PCではホバーするとリンク先が見えるので,ユーザーにとっては何が起きるか予想できて便利 そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がする リンクを<a>にしておくと,:visitedを使って訪問済のリンクの色を変えることができて便利 モーダルウィンドウを出すとき,ウェルカムメッセージを開くボタンを<a href="#welcome">として,/#welcomeのときにウェルカムメッセージを出す,とし

    <a>か<button>か - hitode909の日記
  • 1