• はてなブックマーク
  • テクノロジー
  • JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
  • Twitterでシェア
  • Facebookでシェア

JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG

テクノロジー カテゴリーの変更を依頼 記事元:www.tak-dcxi.com
適切な情報に変更
226users がブックマーク コメント 18

    記事へのコメント18件

    • 注目コメント
    • 新着コメント
    anonymighty
    HTMLの役割に装飾を侵食させるのはどうですかねえ。width=100px"とかcolor="red"とかタグに書くのをなくしてCSSに分離しようってやってきたのは何だったのか。せめてCSSでやったらいいのに。

    その他
    spark7
    labelのfor属性みたいなもんだと思えばそう不自然でも無いような。

    その他
    diveintounlimit
    もうHTMLも構造記述言語じゃなくなってきてるし、CSSもスタイル記述言語じゃなくなってきた。

    その他
    Kanasansoft
    『ボタンを div や span で作成する罪は今更語ることは無いが、そういった実装を自然と防ぐことができる。』

    その他
    xlc
    dialogは入力をページ内で処理したい場合に使うと思うので、ページをまたがったformとは異なり必然的にJavaScriptで処理ことになるよね。

    その他
    otchy210
    HTML 上の記述は別に装飾では無いような。form 要素や a 要素の target 属性とか、label 要素の for 属性の仲間だと思う。

    その他
    yarumato
    “方針としては極力JavaScriptを書かないことを目指す。<button>要素のcommand 属性 / commandfor 属性は新しいHTML属性。<dialog>要素の開閉および Light dismiss 機能が有効に。showModal() や close() するために JavaScript を書く必要はない。”

    その他
    ultimatebreak
    知らん間にdialog変わってたのか。それはそれとしてiOSさんさあ

    その他
    Masamune_903
    セマンティックウェブ、読みやすいHTMLになりつつあるなと好印象。それに合わせて勉強し続けていかないとな……

    その他
    hatest
    Polyfill使って隠ぺいしているが、結局はJavaScript必要なので、ブラウザ限定の案件でなければまだ使うのは早い気がします

    その他
    spark7
    spark7 labelのfor属性みたいなもんだと思えばそう不自然でも無いような。

    2025/05/27 リンク

    その他
    diveintounlimit
    diveintounlimit もうHTMLも構造記述言語じゃなくなってきてるし、CSSもスタイル記述言語じゃなくなってきた。

    2025/05/27 リンク

    その他
    mag4n
    へー

    その他
    ejointjp
    便利な反面、モーダルといいカルーセルといい、文書構造の機能のみとすべきhtmlの領域に見た目の機能がどんどん逆流してるな。cssでやれ

    その他
    anonymighty
    anonymighty HTMLの役割に装飾を侵食させるのはどうですかねえ。width=100px"とかcolor="red"とかタグに書くのをなくしてCSSに分離しようってやってきたのは何だったのか。せめてCSSでやったらいいのに。

    2025/05/27 リンク

    その他
    Kanasansoft
    Kanasansoft 『ボタンを div や span で作成する罪は今更語ることは無いが、そういった実装を自然と防ぐことができる。』

    2025/05/27 リンク

    その他
    nicht-sein
    ちょうど今度こんなダイアログを実装しなきゃいけないところだったので、試してみよう

    その他
    eightbeeeaaat
    >2025年5月現在も iOS で完全にスクロールを無効にすることはできません

    その他
    kijtra
    ポリフィル使うくらいなら checkbox 使ってCSSのみで作っちゃうなあ

    その他
    strawberryhunter
    「全コアブラウザでサポートされていない」

    その他
    Shinwiki
    “極力”

    その他
    yasu-log
    DOMの挙動に対するPolyfillは昔からあまり信用していないのですが（エンバグの経験あり）、command/commandforに対しては問題ないかしら？

    その他

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

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

    関連記事

    JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG

    2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで...

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

    • midas365452025/05/28 midas36545
    • ohchang2025/05/27 ohchang
    • dhrname2025/05/27 dhrname
    • hogege2025/05/27 hogege
    • sora05132025/05/27 sora0513
    • locke-0092025/05/27 locke-009
    • pere_ponta2025/05/27 pere_ponta
    • nitamago_monster2025/05/27 nitamago_monster
    • sushichan0442025/05/27 sushichan044
    • mizdra2025/05/27 mizdra
    • xlc2025/05/27 xlc
    • solHa2025/05/27 solHa
    • o_hiroyuki2025/05/27 o_hiroyuki
    • n3142025/05/27 n314
    • move0tofu2025/05/27 move0tofu
    • diptypop2025/05/27 diptypop
    • sakimoridotnet2025/05/27 sakimoridotnet
    • otchy2102025/05/27 otchy210
    すべてのユーザーの
    詳細を表示します

    同じサイトの新着

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

    いま人気の記事

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

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

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

    新着記事 - テクノロジー

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

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

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

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

    はてなブックマーク

    公式Twitter

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2025 Hatena. All Rights Reserved.