[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

1329users がブックマーク コメント 62

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

1329 users zenn.dev/necscat

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページ

記事へのコメント62

  • 注目コメント
  • 新着コメント
door-s-dev
新しくこうゆう書き方ができるは分かるんだけど、古い書き方をbadとされると別に悪くはないでしょとモヤる

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

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

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

その他
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/

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

その他
daizo1117
"Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい!」という内

その他
takatama
JavaScript は defer をつけて head で呼び出すんだ

その他
mohri
記事を書くのに中揃えしたいことがけっこうあって、place-contentとfit-contentとか、margin-inlineとか参考になる。いまだに油断するとcenterタグを使ってる記事とか目にすることあるしなあ。dtとddをdivでまとめるのは納得感ある

その他
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
後学のためブクマ。

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

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

その他
um-k3
覚えても覚えても数年で更新されるので疲れる世界だ...

その他
Helfard
へー。

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

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

2024年05月14日 リンク

その他
fukken
令和のJavaScriptの書き方: 書かない(TypeScriptを使おう)

その他
daira4000
参考程度に

その他
ishiduca
場合によっては配列よりSet、または他のイテラブルを使った方がいいのでは?

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

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

2024年05月14日 リンク

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

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

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

その他
hdampty7
ああ、これ、助かる

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

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

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「令和のHTML / CSS ...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • momori822025年10月10日 momori82
  • watatakahashi2025年10月04日 watatakahashi
  • espoirka2025年10月04日 espoirka
  • skypenguins2025年10月04日 skypenguins
  • nomaharu20132025年10月03日 nomaharu2013
  • futakami2025年07月11日 futakami
  • taiseiue2025年04月15日 taiseiue
  • wakametone2025年04月09日 wakametone
  • developing_24072025年01月07日 developing_2407
  • jyori_jyori-n2025年01月02日 jyori_jyori-n
  • refyanone2024年12月31日 refyanone
  • yurin722024年12月31日 yurin72
  • logic_and_mamo2024年12月28日 logic_and_mamo
  • kimizuka2024年12月27日 kimizuka
  • SonNa_BaNaNa2024年12月27日 SonNa_BaNaNa
  • xbwcx8392024年12月09日 xbwcx839
  • tmgo315w2024年12月09日 tmgo315w
  • r_abe012024年12月09日 r_abe01
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /