論理属性の multiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。この属性は email と file の入力型と <select> に対して有効です。ユーザーが複数の値を選択する方法は、フォームコントロールに依存します。 <label for="recipients">領収書の送り先は？</label> <input id="recipients" name="recipients" type="email" multiple /> <label for="shakes">どのシェイクをご注文されますか？</label> <select id="shakes" name="shakes" multiple> <option>バニラシェイク</option> <option>ストロベリーシェイク</option> <option>

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年1月. Learn more See full compatibility Report feedback Mathematical Markup Language (MathML) は、数学的表記を記述するための XML マークアップ言語です。 MathML は元々、ブラウザー、オフィススイート、数式処理システム、EPUB リーダー、LaTeX ベースのジェネレーター向けの汎用仕様として設計されました。しかし、この手法はウェブにはあまり適していませんでした。意味づけに重点を置いたサブセットはブラウザーに実装されたことがなく、数学

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or su

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback <script> は HTML の要素で、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script> 要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することがで

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣の

<form> <fieldset> <legend>好きなモンスターを選んでください</legend> <input type="radio" id="kraken" name="monster" value="K" /> <label for="kraken">クラーケン</label><br /> <input type="radio" id="sasquatch" name="monster" value="S" /> <label for="sasquatch">サスカッチ</label><br /> <input type="radio" id="mothman" name="monster" value="M" /> <label for="mothman">モスマン</label> </fieldset> </form> 上記の例にあるように、<fieldset> 要素は H

////////////   ////////////   ////////////   ////////////   ////////////   ////////////   ////////////  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++{{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}     ../../    ../../    ../../    ../../    ../../    ../../    ../../<></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> AI HelpGet real-time assis

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨December 2021⁩. Learn more See full compatibility Report feedback The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appr

クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。 もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。 しかし、クライアント側の検証はセキュリティ対策とは考えられません。アプリは常にサーバー側でもクライアント側と同様に送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。 フォーム検証とは何か 有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。 次のようなメッセージが

Resources for Developers, by Developers Documenting CSS, HTML, and JavaScript, since 2005. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { { { { } } } } { { { { } } } } { { { { } } } } { { { { }

HTTP ガイド HTTP の概要 典型的な HTTP セッション HTTP メッセージ MIME タイプ（IANA メディア種別） HTTP の圧縮 HTTP キャッシュ HTTP 認証 HTTP Cookie の使用 HTTP のリダイレクト HTTP 条件付きリクエスト HTTP 範囲リクエスト コンテンツネゴシエーション HTTP/1.x のコネクション管理 HTTP の進化 プロトコルのアップグレードの仕組み プロキシサーバーとトンネリング HTTP クライアントヒント HTTP セキュリティ サイトの安全化 HTTP Observatory Permissions Policy コンテンツセキュリティポリシー (CSP) オリジン間リソース共有 (CORS) Cross-Origin Resource Policy (CORP) Strict-Transport-Securit

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 p1�Ϊ�View in English @ eΪ�Always switch to English 概念と使用法 開発者ならご存知でしょうが、可能な限りコードを再利用することは良い考えです。しかしこれは、以前から、カスタムのマークアップ構造にとって、それほど簡単なことではありませんでした。複雑な HTML （と一連のスタイルやスクリプト）を考えてみて下さい。ときに、カスタム UI の制御をレンダリングするために、コードを書かなければなりません。それに、注意していないと、それらの制御をどう使い回すかで、ページが複雑なものになってしまいます。 ウェブコンポーネントは、上記の問題の解決を目指しています。 ウェブコンポーネントは、3 つの主要な技術から

Web Platform Dive into the web platform, at your pace.

shadowrootclonable この要素を使用して作成した ShadowRoot の clonable プロパティの値を true に設定します。 設定されている場合、シャドウホスト（この <template> の親要素）の複製を Node.cloneNode() または Document.importNode() で作成すると、コピーにシャドウルートが含まれます。 shadowrootdelegatesfocus この要素を使用して作成した ShadowRoot の delegatesFocus プロパティの値を true に設定します。 これが設定されていて、シャドウツリー内のフォーカス可能でない要素が選択されている場合、フォーカスはツリー内の最初のフォーカス可能な要素に譲られます。 この値は false が既定値です。 shadowrootreferencetarget Exp

Webページをレスポンシブ対応にする時、悩ましいコンテンツの一つがテーブルではないでしょうか。単にセルの幅を狭くするだけでは、一行に一文字しかない妙に縦長なテーブルになってしまいます。 省略したり、プルダウンを利用したりなどいろいろなアイデアがありますが、もっとシンプルで簡単に、そして実用的な賢い実装アイデアを紹介します。 Responsive table layout レスポンシブ対応のテーブルのデモ レスポンシブ対応のテーブルの実装 レスポンシブ対応のテーブルのデモ デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。