サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Google I/O
developer.mozilla.org
Images are everywhere on the web. Every day, I view, create, send, and edit multiple images, and add images to my applications in several different ways. But what makes images look the same or look different and in which cases? I've even written blog posts about images, and the more I learn the more I discover how much happens behind the scenes to make an image look right. In this blog post series
この節では、 JavaScript のサンプルコードを書く際に留意すべき一般的なガイドラインを説明します。後の節では、より具体的な詳細について説明します。 正しいインデント、ホワイトスペース、行の長さに関する意見は常に論争の的となってきました。このようなトピックに関するディスカッションは、コンテンツを作成したり維持したりすることの妨げになります。 MDN Web Docs では、コードスタイルの一貫性を保つために（そしてトピック外の議論を避けるために）、コード整形ツールとして Prettier を使用しています。現在のルールについては設定ファイルを参照し、 Prettier のドキュメントを読んでください。 Prettier はすべてのコードを書式化し、スタイルの一貫性を保ちます。とはいえ、従わなければならない追加のルールがいくつかあります。
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured
Implementations of the new JavaScript Temporal object are starting to be shipped in experimental releases of browsers. This is big news for web developers because working with dates and times in JavaScript will be hugely simplified and modernized. Applications that rely on scheduling, internationalization, or time-sensitive data will be able to use built-ins for efficient, precise and consistent d
This feature is not Baseline because it does not work in some of the most widely-used browsers. Learn moreSee full compatibilityReport feedback The Temporal object enables date and time management in various scenarios, including built-in time zone and calendar representation, wall-clock time conversions, arithmetics, formatting, and more. It is designed as a full replacement for the Date object. U
キーボード API Experimental Keyboard Experimental インスタンスメソッドgetLayoutMap() Experimental lock() Experimental unlock() Experimental 継承EventTargetKeyboard API に関連するページKeyboardLayoutMap Experimental Navigator.keyboard Experimental
このページでは、提案されているまたは最先端のウェブプラットフォーム標準を含む、 Firefox の実験的かつ部分的に実装された機能を一覧にしています。また、それらの機能が搭載されているビルドの情報、「既定で」有効になっているかどうか、有効または無効にするためにどの環境設定を使用すべきかについても説明しています。 これにより、機能がリリースされる前に、その機能をテストすることができます。 新機能は、最初に Firefox Nightly ビルドに登場し、多くの場合、既定で有効化されます。 その後、 Firefox Developer Edition に引き継がれ、最終的にはリリースビルドになります。 リリースビルドにおいて既定で有効化された機能は、もはや実験的なものではないので、このトピックから削除してください。 実験的な機能は、 Firefox 設定エディター (Firefox のアドレス
オリジンプライベートファイルシステム (OPFS) は、ファイルシステム API の一部として提供されるストレージエンドポイントです。これは、パフォーマンスのために高度に最適化され、その内容へのその場での書き込みアクセスを提供する特別な種類のファイルへのアクセスを提供します。 ファイルシステムアクセス API は、ファイルシステム API を拡張したもので、は、ピッカーメソッドを使ったファイルへのアクセスを提供します。例えば、 Window.showOpenFilePicker() では、ユーザーがアクセスするファイルを選択することができ、その結果、 FileSystemFileHandle オブジェクトが返されます。 FileSystemFileHandle.getFile() を呼び出してファイルの内容にアクセスし、 FileSystemFileHandle.createWritabl
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsCSS はどう働くかCSS 入門経歴ページのスタイル設定CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデルカスケード、詳細度、継承CSS の値と単位CSS によるサイズ設定背景と境界線要素のオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ基本的な CSS の理解美しいレターヘッド付きの便箋の作成かっこいいボックスCSS text styling基本的なテキストとフォントのスタイル設定リストの装飾リンクのスタイル設定ウェブフォントコミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスグリッドレスポンシブデザインメディアクエ
In its lifespan, Mozilla's HTTP Observatory tool has scanned over 6.9 million websites, providing useful, actionable insights into how developers can improve web security and guard their sites against would-be attackers. The HTTP Observatory tests website compliance with security best practices, mainly concerning the correct usage of HTTP headers. When a scan is complete, it provides a report to t
New JavaScript Set methods are arriving! Since Firefox 127, these methods are available in most major browser engines, which means you won't need a polyfill to make them work everywhere. This article is a good read for people who are new to Set in JavaScript and are looking to find out how to use these new JavaScript methods. I'll highlight some advantages of using these methods with basic example
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript. A very common pattern on the web is to show content over the top of other content, drawing the user's attention to specific important information or actions t
When we launched the MDN Blog in May 2023, we were excited and curious to see what our readers would think and how the blog would look like one year on. We're thrilled to see that there's a wonderful variety of articles from the MDN team, guests, and partners that we think help developers build for the web. We launched the blog with the intention of having a channel that's separate from our usual
This feature is not Baseline because it does not work in some of the most widely-used browsers. Learn moreSee full compatibilityReport feedback JSON.rawJSON() 静的メソッドは、 JSON テキストの一部を含む「生の JSON」オブジェクトを生成します。 JSON にシリアライズされた場合、生の JSON オブジェクトは既に JSON の一部であるかのように扱われます。このテキストは有効な JSON であることが求められます。
最上位レイヤーは、ビューポートの幅と高さ全体にわたり、ウェブ文書内に表示される他のすべてのレイヤーの最上位に位置する固有のレイヤーです。これは、ページ上の他のすべてのコンテンツの上に現れるべき要素を含むために、ブラウザーによって作成されます。 最上位レイヤーに配置された要素は新しい重ね合わせコンテキストを生成し、対応する ::backdrop 擬似要素も生成します。 最上位レイヤーに現れる要素は以下の通りです。 全画面要素、つまり Element.requestFullscreen() の呼び出しが成功して全画面モードで表示するように指定された要素。 <dialog> 要素が、 HTMLDialogElement.showModal() の呼び出しに成功してモーダルとして表示された場合。 HTMLElement.showPopover() の呼び出しに成功して表示されたポップオーバー要素。
Interoperability on the web means ensuring that web platform features work in a spec-compliant way across as many devices and browsers as possible. With Interop 2024 having just kicked off, this post explains what the Interop project is, recaps what's landed on MDN based on Interop 2023, and offers a glimpse into what's coming next to the web platform. The Interop project is a benchmark and test s
テキストフラグメントは、URL フラグメントの特定の構文を使用することにより、作成者が ID で注釈を付けなくても、ウェブ文書内のテキストの特定の部分に直接リンクできるようにするものです。対応しているブラウザーは、リンクされたテキストに注意を引く方法を自由に選べます。例えば、色の強調表示やページ上のコンテンツへのスクロールなどです。これは、ウェブコンテンツの作成者が、使用可能な ID が存在しなくても、制御下にない他のコンテンツに深くリンクすることができるため有益なものです。さらに、ユーザーが互いに交換するための、より効果的なコンテンツ共有リンクを生成するために使用することもできます。 歴史的には、ウェブの主要な機能の1つは常に、異なる文書間のリンクを指定して提供する能力でした。これがウェブをウェブたらしめているのです。 次のように、文書の URL にリンクすることで、その文書の先頭にリン
Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the
ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。この記事では、この機能のすべてを使用するための詳細なガイドを提供します。
Invalid slug for templ/sidebar: View Transitions API ビュー遷移 API は、異なるウェブサイトのビュー間のアニメーション遷移を簡単に作成するための仕組みを提供します。これには、単一ページアプリケーション (SPA) における DOM 状態変化のアニメーション、および複数ページアプリケーション (MPA) における文書内の移動時のアニメーションを含みます。 ビュー遷移は、ユーザーがアプリケーションの状態またはビューの間を移動する際に、ユーザーの認知的負荷を縮小し、コンテキストにとどまることを支援し、読み込み待ちの知覚時間を短縮するための有力な設計の選択肢です。 しかし、ウェブ上でビュー遷移を作成するのは、従来は困難なことでした。 単一ページアプリ (SPA) で状態変化の遷移を行うには、かなりの CSS と JavaScript を書かな
The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them. Styling text ranges on a webpage can be very useful. For example, text editing web apps highlight spelling or grammar errors, and code editors highlight syntax errors. The CSS Custom Highlight API extends the concept of other highlight p
Today we're updating the Baseline widget and rolling it out for more pages to align with the refined Baseline definition and help developers understand the status of web platform features better. First introduced in May 2023, Baseline offered a new way of looking at the state of the web platform. It established a common measure for new features coming to the web and existing ones. The idea was sim
As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layouts? Do we still need media queries? Let's find out. To understand how container queries are helpful, let's look at an example news feed layout and see where we could apply them. The news feed is a collection of articles, each with an image, a headli
ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。 ウェブでは、他のコンテンツの上にコンテンツを示し、ユーザーにとって重要な情報や導くべき操作の詳細を示すというのが、とても一般的なパターンです。このコンテンツは、オーバーレイ、ポップアップ、ポップオーバー、ダイアログなど、さまざまな名称で呼ばれます。私たちは、このドキュメントを通して、これらをポップオーバーと呼ぶことにします。一般的に、これらは次のようなものがあります。 モーダルというのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択が
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation. Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.
Scroll-linked animations can often add a touch of class to a website, but have long been the preserve of JavaScript. Now a brand new specification is being implemented to enable us to create rich scroll-driven experiences with CSS! When we think of scroll-driven animations, we generally mean one of two things: An animation that occurs as the user scrolls, with the progress of the animation explici
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsWhat is CSS?Getting started with CSSChallenge: Styling a biography pageBasic CSS selectorsAttribute selectorsPseudo-classes and pseudo-elementsCombinatorsThe box modelHandling conflictsCSS values and unitsSizing items in CSSBackgrounds and bordersOverflowing contentImages, media, and form elementsStyling tablesDebuggin
次のページ
このページを最初にブックマークしてみませんか？
『MDN Web Docs - Mozilla』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
