Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

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

アプリで開く

はてなブックマーク

  • Twitterでシェア
  • Facebookでシェア

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

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

ブックマークしました

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

Twitterで共有

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

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

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

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

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

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

      よく使うタグ

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

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

        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
                                                              secseekdlの下に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"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

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

                                                                            • ryoheif2025/11/17ryoheif
                                                                            • fushimatsu2025/11/12fushimatsu
                                                                            • tomk792025/11/11tomk79
                                                                            • momori822025/10/10momori82
                                                                            • watatakahashi2025/10/04watatakahashi
                                                                            • espoirka2025/10/04espoirka
                                                                            • skypenguins2025/10/04skypenguins
                                                                            • nomaharu20132025/10/03nomaharu2013
                                                                            • futakami2025/07/11futakami
                                                                            • taiseiue2025/04/15taiseiue
                                                                            • wakametone2025/04/09wakametone
                                                                            • developing_24072025/01/07developing_2407
                                                                            • jyori_jyori-n2025/01/02jyori_jyori-n
                                                                            • refyanone2024/12/31refyanone
                                                                            • yurin722024/12/31yurin72
                                                                            • logic_and_mamo2024/12/28logic_and_mamo
                                                                            • kimizuka2024/12/27kimizuka
                                                                            • SonNa_BaNaNa2024/12/27SonNa_BaNaNa
                                                                            すべてのユーザーの
                                                                            詳細を表示します

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

                                                                            同じサイトの新着

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

                                                                            いま人気の記事

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

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

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

                                                                            新着記事 - テクノロジー

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

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

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

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

                                                                            はてなブックマーク

                                                                            公式Twitter

                                                                            はてなのサービス

                                                                            • App Storeからダウンロード
                                                                            • Google Playで手に入れよう
                                                                            Copyright © 2005-2025Hatena. All Rights Reserved.
                                                                            設定を変更しましたx

                                                                            [8]ページ先頭

                                                                            ©2009-2025 Movatter.jp