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

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

[door-s-dev]

新しくこうゆう書き方ができるは分かるんだけど、古い書き方をbadとされると別に悪くはないでしょとモヤる

[anonymighty]

このまとめ自体はとてもありがたいのだが、W3Cがダメになってから仕様策定に参加してる大手が有利になるように勝手に仕様がバンバン決まって他の新規の参入をはじいてるのは邪悪だなあと感じるようになった。

[hase0510]

ふむふむと眺めてたけど最後の「FetchかAxiosを使います」で今までのすべてが怪しく見えてきた／Axiosが古いってことじゃなく、この文脈でAxiosが断りなく出てくるのに違和感があり、よくわからずに書いてる...？って疑いが

[secseek]

dlの下にdivって気持ち悪いですね。実用性を考えたらいいんでしょうけど。セマンティックウェブの理想ははるか遠く…って感じですね

[miguhe25]

ここでは書いてないけどCSSネストが全ブラウザ対応になったのは嬉しい／この令和の職場でfontタグ使ってた昭和人が居てまじビビったことがある

[d-matchon]

こうみるとiOS Safariが足引っ張ってるのがわかりやすい。JSからカスタムプロパティ読めるの知らなかったから今度試す

[sigwyg]

知らんのいっぱいあったGJ。とはいえgood/badよりbetter/best使ったほうが良いのになーと思うところがいっぱいある。個人的にはobject-fitのために装飾画像をimg要素に置くのはBad。構造と表示の分離が基本概念だと思う

[kijtra]

載ってないけどコンテナクエリも便利だよ。

[fujibay1975]

Picture要素でwebpやスマホ用を出し分けするとobject-fit使えなくなるじゃん。みんなどうしてるの？

[Outrast]

id:renowan 400 系をエラーにしたいなら、Axios を使わなくても、fetch の薄いラッパーである ky を使えば出来ますね。 https://github.com/sindresorhus/ky/

[t02026yi]

“GSAP”

[minetty99]

“details”

[browneyes]

レガシーな元ウェブデザだからイマドキの書き方の勉強だーって眺めてたけどDL（しかもDl）あたりからbadの絵文字が引っかかり、後半はイラっとしてはてブに来てしまった。より新しい技術は大事だけど書き方も大事ネ。

[tadatada1980]

令和はもう6年目なので「令和の」って書かれると新しいのか古いのかよくわからないです。

[nankichi]

“<img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります”こういうのって生成系AIが吐き出すhtmlではどうなっているんだろう？

[chabooooo]

平成WEBデザイナーワイ、カルチャーショックを受ける

[sucelie]

margin-inlineなんて、RTLとか考えながら作らないといけない人がどれほどいるのか？

[qinmu]

知らないのが沢山。

[jamg]

dl,dt,ddは定義リストという扱いで書くなら良くない？（イニシエのHTMLおたく）

[nekonyantaro]

後学のためブクマ。

[anonruru]

id:ttkazuma 試してないので間違ってたらすいませんが、sizesを使うか可変する方をCSSのmin-(height / width)で最小サイズを指定すると上手くいくと思います。/ セマンティックであるかの確認にはcaninclude.glitch.meが便利ですよ。

[Lhankor_Mhy]

hgroup、生きとったんかワレ / CSSネストや:nth-child( of S)やカスケードレイヤーが書いてないけど、その辺りは平成時代でも常識、ということなのかしら。

[ukayare]

どんどん新しい（というか外部ライブラリで実現してた）ことがネイティブでできるようになっても既存のサイトを保守する場合ってめちゃくちゃ困るんよな・・・

[um-k3]

覚えても覚えても数年で更新されるので疲れる世界だ…

[Helfard]

へー。

[kskb]

vw はスクロールバーの幅も含むので、あれを使って画面いっぱいに広げるとズレを隠すために overflow-x:hidden; を無理矢理用いたりするから良いともいえない

[fukken]

令和のJavaScriptの書き方: 書かない（TypeScriptを使おう）

[daira4000]

参考程度に

[otchy210]

デザイン寄りの人ぽいので JS まわりで叩かないであげて、という気持ち。

[hanajibuu]

うわー俺全然ついていけてない。反省。ブコメ含めて勉強になります。

[wakuworks]

margin-inline: auto は参考元にも書いてあるけど書式の向きで変わるから、左右中央寄せの意図としては margin-left, margin-right の方が明確な気がする

[udddbbbu]

知ってるものばかり svh だの、あの辺がこんがらがる

[hdampty7]

ああ、これ、助かる

[chris_llp]

とてもありがたいまとめ。古いものを大幅に更新するにあたって、この項目やる/やらないとか決められ、作業量の見積もりがしやすくなる。

[forestk]

言いたいことはわかるが、色々と偏見がひどい

[yarumato]

“アコーディオンの実装には<details>を使います。画面幅に応じて画像を出し分ける時は<picture>を。モーダルウィンドウの実装には<dialog>を。CSSはレイアウト手法のGrid Layoutに慣れることからスタート”

[Akkiesoft]

<marquee>なんかいろんなのあるんやなあ</marquee>

[vlxst1224]

なんとか頑張ってついていく。ついていけなくなったら終わり……そう考えながら令和を迎えたのだからな……