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

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

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

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

ブックマークしました

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

Twitterで共有

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

244users がブックマーク コメント 20

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

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

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

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

よく使うタグ

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

244 users www.tak-dcxi.com

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

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

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

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

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント20件

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

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

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

その他
shingo-sasaki-0529
以前見たときは開閉制御に JavaScript いるのかぁって思ってたけど使い勝手だいぶ良くなってそう。ESCや背面クリックで閉じるとかも楽にキレイに実装できるのは嬉しい。

その他
hush_in
closedby属性知らなかった

その他
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を書かないと言っているが、Polyfill使ってる時点で結局はJavaScriptが動くということなので、タイトルちょっとどうなのって気がします

その他
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」を使用しています

リンクを埋め込む

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

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

関連記事

usersに達しました!

さんが1番目にブックマークした記事「JavaScriptを書か...」が注目されています。

気持ちをシェアしよう

ツイートする

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

2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで... 2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および

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

  • techtech05212025年09月12日 techtech0521
  • milk1000cc2025年09月03日 milk1000cc
  • toyama_gf2025年08月08日 toyama_gf
  • manaten2025年07月25日 manaten
  • shingo-sasaki-05292025年07月03日 shingo-sasaki-0529
  • heatman2025年06月24日 heatman
  • knj29182025年06月10日 knj2918
  • okyawa2025年06月03日 okyawa
  • stntaku2025年06月01日 stntaku
  • sanko04082025年06月01日 sanko0408
  • xeiger2025年06月01日 xeiger
  • lugecy2025年05月31日 lugecy
  • sskoji2025年05月30日 sskoji
  • hush_in2025年05月29日 hush_in
  • kamada-math2025年05月28日 kamada-math
  • adgjmptw44102025年05月28日 adgjmptw4410
  • paulownia2025年05月28日 paulownia
  • phoope2025年05月28日 phoope
すべてのユーザーの
詳細を表示します

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

同じサイトの新着

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

いま人気の記事

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

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

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

新着記事 - テクノロジー

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

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

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

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

はてなブックマーク

公式Twitter

はてなのサービス

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

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