-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into ko/description-list
- Loading branch information
Showing
64 changed files
with
2,186 additions
and
543 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| --- | ||
| title: Flow relative values (フロー関連値) | ||
| slug: Glossary/Flow_relative_values | ||
| l10n: | ||
| sourceCommit: 63249f6b1e89f42e172878c54a2f9674bee50904 | ||
| --- | ||
|
|
||
| {{GlossarySidebar}} | ||
|
|
||
| CSS において、**フロー関連値**は、要素のブロック軸とインライン軸に対する方向のキーワード値です。これらの値には、`block-start`、`block-end`、`inline-start`、`inline-end`、`start`、`end` があります。 | ||
|
|
||
| CSS において、{{glossary("physical properties","物理的プロパティ")}}は、要素の物理的な方向と特定の辺の参照に基づいた位置を定義します。 | ||
|
|
||
| 一方で、 CSS の{{glossary("logical properties","論理的プロパティ")}}は、ビューポートの物理的な寸法ではなく、文書の書字方向や方向に基づいてスタイルを定義します。論理的プロパティはコンテンツの流れに関連し、ブロック軸とインライン軸に関連する方向キーワードを使用します。 | ||
|
|
||
| ## ブロック方向 | ||
|
|
||
| **ブロック軸**とは、ブロックレイアウトにおける要素の積み重ね順序を定義する軸を参照します。段落 ({{htmlelement("p")}})、見出し、div ({{htmlelement("div")}}) などのコンテンツのブロックがウェブページにレイアウトされる方向です。これはブロック方向とも呼ばれます。左書きの言語や右書きの言語では、ブロックの方向はコンテンツの流れの垂直方向で、上から下に進みます。 | ||
|
|
||
| **ブロック先頭** (`block-start`) 方向と**ブロック末尾** (`block-end`) 方向は、それぞれブロック軸に沿ったコンテンツの先頭と 末尾、または "from" 方向と "to" 方向を表し、横書き方向ではブロック先頭が上端 (`top`)、ブロック末尾が下端 (`bottom`) に相当します。 | ||
|
|
||
| ## インライン方向 | ||
|
|
||
| **インライン軸**はブロック軸に垂直です。インライン軸は、ブロック内でテキストなどのインラインコンテンツが流れる方向を表します。これはインライン方向とも呼ばれます。英語のような左書きの書字方向では、**インライン方向**は左から右への横方向です。アラビア語やヘブライ語のような右書きの言語では、インライン方向は水平で右から左です。 | ||
|
|
||
| **インライン先頭**と**インライン末尾**は、それぞれインライン軸に沿ったコンテンツの開始端と 終了端を表し、インライン先頭と インライン末尾のプロパティと値は、横書き方向では左右のプロパティと値に相当します。右と左のどちらに相当するかは、書字方向によって異なります。例えば、インライン先頭は左書きの言語では左 (`left`) に、右書きの言語では右 (`right`) に相当します。 | ||
|
|
||
| ## 先頭と末尾 | ||
|
|
||
| CSS プロパティの効果には、一次元的なものと二次元的なものがあります。例えば、 {{cssxref("text-align")}} はテキストのインライン方向だけに関係するので、一次元です。文脈上、一次元に制約される場合、フロー関連のキーワードは、先頭 (`start`) または末尾 (`end`) に短縮されます。 | ||
|
|
||
| ## 関連情報 | ||
|
|
||
| - [CSS 論理的プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール | ||
| - [論理的プロパティと値の基本概念](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,19 @@ | ||
| --- | ||
| title: Regular expression (正規表現) | ||
| slug: Glossary/Regular_expression | ||
| l10n: | ||
| sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 | ||
| --- | ||
|
|
||
| {{GlossarySidebar}} | ||
|
|
||
| **正規表現** (または _regex_) は、検索でどの文字の連続が出てくるのかを決めるルールです。 | ||
|
|
||
| 正規表現はさまざまな言語で実装されてますが、一番有名な実装は Perl による実装です。それは PCRE (_Perl Compatible Regular Expression_) といわれる独自の実装エコシステムを生み出しました。ウェブ上では、{{glossary("JavaScript")}} は {{jsxref("RegExp")}} オブジェクトを介して別の正規表現の実装を提供します。 | ||
| 正規表現はさまざまな言語で実装されてますが、一番有名な実装は Perl による実装です。それは PCRE (_Perl Compatible Regular Expression_) といわれる独自の実装エコシステムを生み出しました。ウェブ上では、{{glossary("JavaScript")}} は {{jsxref("RegExp")}} オブジェクトを介して別の正規表現の実装を提供します。 | ||
|
|
||
| ## 関連項目 | ||
| ## 関連情報 | ||
|
|
||
| ### 一般知識 | ||
|
|
||
| - Wikipedia の [正規表現](https://ja.wikipedia.org/wiki/正規表現) | ||
| - [Interactive tutorial](http://regexone.com/) | ||
| - [正規表現](https://ja.wikipedia.org/wiki/正規表現)（ウィキペディア） | ||
| - [Interactive tutorial](https://regexone.com/) | ||
| - [可視化された正規表現](http://regexper.com/) | ||
|
|
||
| ### 技術リファレンス | ||
|
|
||
| - [JavaScript で正規表現を書く](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) | ||
| - [JavaScript で正規表現を書く](/ja/docs/Web/JavaScript/Guide/Regular_expressions) |
40 changes: 40 additions & 0 deletions
40
files/ja/web/api/characterboundsupdateevent/characterboundsupdateevent/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| --- | ||
| title: "CharacterBoundsUpdateEvent: CharacterBoundsUpdateEvent() コンストラクター" | ||
| slug: Web/API/CharacterBoundsUpdateEvent/CharacterBoundsUpdateEvent | ||
| l10n: | ||
| sourceCommit: a6f2a5b313727d983c369dec91c4c7418b1b4f74 | ||
| --- | ||
|
|
||
| {{APIRef("CharacterBoundsUpdateEvent API")}}{{SeeCompatTable}} | ||
|
|
||
| **`CharacterBoundsUpdateEvent()`** コンストラクターは、新しい {{DOMxRef("CharacterBoundsUpdateEvent")}} オブジェクトを返します。 | ||
|
|
||
| ## 構文 | ||
|
|
||
| ```js-nolint | ||
| new CharacterBoundsUpdateEvent(type) | ||
| new CharacterBoundsUpdateEvent(type, options) | ||
| ``` | ||
|
|
||
| ### 引数 | ||
|
|
||
| - `type` | ||
| - : イベントの種類を表す文字列です。とりうる値は `"characterboundsupdate"` です。 | ||
| - `options` {{optional_inline}} | ||
| - : 省略可能なオブジェクトで、以下のプロパティを持ちます。 | ||
| - `rangeStart` | ||
| - : 編集可能なテキスト領域内のこのイベントが関係する始点の文字のオフセットを設定する数値です。 | ||
| - `rangeEnd` | ||
| - : 編集可能なテキスト領域内のこのイベントが関係する終点の文字のオフセットを設定する数値です。 | ||
|
|
||
| ## 仕様書 | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## ブラウザーの互換性 | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## 関連情報 | ||
|
|
||
| - 属する {{DOMxRef("CharacterBoundsUpdateEvent")}} インターフェイス |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| --- | ||
| title: CharacterBoundsUpdateEvent | ||
| slug: Web/API/CharacterBoundsUpdateEvent | ||
| l10n: | ||
| sourceCommit: a4675b9077ae32f989c7ecac94f454db2653c4fc | ||
| --- | ||
|
|
||
| {{APIRef("EditContext API")}}{{SeeCompatTable}} | ||
|
|
||
| **`CharacterBoundsUpdateEvent`** インターフェイスは [DOM イベント](/ja/docs/Web/API/Event)で、{{domxref("EditContext")}} のインスタンスに関連付けられた編集可能な領域内の特定の各文字の境界を知るためのオペレーティングシステムからの要求を表します。 | ||
|
|
||
| このインターフェイスは、{{domxref("Event")}} からプロパティを継承しています。 | ||
|
|
||
| {{InheritanceDiagram}} | ||
|
|
||
| ## コンストラクター | ||
|
|
||
| - {{domxref("CharacterBoundsUpdateEvent.CharacterBoundsUpdateEvent", "CharacterBoundsUpdateEvent()")}} {{experimental_inline}} | ||
| - : 新しい `CharacterBoundsUpdateEvent` オブジェクトを生成します。 | ||
|
|
||
| ## インスタンスプロパティ | ||
|
|
||
| - {{domxref('CharacterBoundsUpdateEvent.rangeStart')}} {{readonlyinline}} {{experimental_inline}} | ||
| - : 編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の始点となる文字のオフセットです。 | ||
| - {{domxref('CharacterBoundsUpdateEvent.rangeEnd')}} {{readonlyinline}} {{experimental_inline}} | ||
| - : 編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の終点となる文字のオフセットです。 | ||
|
|
||
| ## 例 | ||
|
|
||
| ### 必要に応じて各文字の境界を更新する | ||
|
|
||
| この例では、`characterboundsupdate` イベントと `updateCharacterBounds` メソッドを用いて、オペレーティングシステムに要求された各文字の境界を知らせる方法を示しています。このイベントリスナーコールバックは、IME ウィンドウやその他のプラットフォーム固有の編集 UI を用いてテキストを変換しているときのみ呼ばれることに注意してください。 | ||
|
|
||
| ```html | ||
| <canvas id="editor-canvas"></canvas> | ||
| ``` | ||
|
|
||
| ```js | ||
| const FONT_SIZE = 40; | ||
| const FONT = `${FONT_SIZE}px Arial`; | ||
|
|
||
| const canvas = document.getElementById("editor-canvas"); | ||
| const ctx = canvas.getContext("2d"); | ||
| ctx.font = FONT; | ||
|
|
||
| const editContext = new EditContext(); | ||
| canvas.editContext = editContext; | ||
|
|
||
| function computeCharacterBound(offset) { | ||
| // テキストの頭から対象の文字までの幅を測定します。 | ||
| const widthBeforeChar = ctx.measureText( | ||
| editContext.text.substring(0, offset), | ||
| ).width; | ||
|
|
||
| // 対象の文字の幅を測定します。 | ||
| const charWidth = ctx.measureText(editContext.text[offset]).width; | ||
|
|
||
| const charX = canvas.offsetLeft + widthBeforeChar; | ||
| const charY = canvas.offsetTop; | ||
|
|
||
| // 文字の境界を表す DOMRect を返します。 | ||
| return DOMRect.fromRect({ | ||
| x: charX, | ||
| y: charY - FONT_SIZE, | ||
| width: charWidth, | ||
| height: FONT_SIZE, | ||
| }); | ||
| } | ||
|
|
||
| editContext.addEventListener("characterboundsupdate", (e) => { | ||
| const charBounds = []; | ||
| for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) { | ||
| charBounds.push(computeCharacterBound(offset)); | ||
| } | ||
|
|
||
| // EditContext インスタンス内の各文字の境界を更新します。 | ||
| editContext.updateCharacterBounds(e.rangeStart, charBounds); | ||
|
|
||
| console.log( | ||
| "The required character bounds are", | ||
| charBounds | ||
| .map((bound) => { | ||
| return `(x: ${bound.x}, y: ${bound.y}, width: ${bound.width}, height: ${bound.height})`; | ||
| }) | ||
| .join(", "), | ||
| ); | ||
| }); | ||
| ``` | ||
|
|
||
| ## 仕様書 | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## ブラウザーの互換性 | ||
|
|
||
| {{Compat}} |
39 changes: 39 additions & 0 deletions
39
files/ja/web/api/characterboundsupdateevent/rangeend/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| title: "CharacterBoundsUpdateEvent: rangeEnd プロパティ" | ||
| slug: Web/API/CharacterBoundsUpdateEvent/rangeEnd | ||
| l10n: | ||
| sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a | ||
| --- | ||
|
|
||
| {{APIRef("EditContext API")}}{{SeeCompatTable}} | ||
|
|
||
| 読み取り専用プロパティ **`CharacterBoundsUpdateEvent.rangeEnd`** は、編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の終点となる文字のオフセットを表します。 | ||
|
|
||
| ## 値 | ||
|
|
||
| {{jsxref("Number")}} です。 | ||
|
|
||
| ## 例 | ||
|
|
||
| ### `rangeEnd` の値を読み取る | ||
|
|
||
| この例では、`characterboundsupdate` イベントを用いて `rangeStart` および `rangeEnd` プロパティの値を読み取る方法を示します。 | ||
|
|
||
| ```js | ||
| const editContext = new EditContext(); | ||
| editorElement.editContext = editContext; | ||
|
|
||
| editContext.addEventListener("characterboundsupdate", (e) => { | ||
| console.log( | ||
| `The OS needs the bounds of the chars at ${e.rangeStart} - ${e.rangeEnd}.`, | ||
| ); | ||
| }); | ||
| ``` | ||
|
|
||
| ## 仕様書 | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## ブラウザーの互換性 | ||
|
|
||
| {{Compat}} |
39 changes: 39 additions & 0 deletions
39
files/ja/web/api/characterboundsupdateevent/rangestart/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| title: "CharacterBoundsUpdateEvent: rangeStart プロパティ" | ||
| slug: Web/API/CharacterBoundsUpdateEvent/rangeStart | ||
| l10n: | ||
| sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a | ||
| --- | ||
|
|
||
| {{APIRef("EditContext API")}}{{SeeCompatTable}} | ||
|
|
||
| 読み取り専用プロパティ **`CharacterBoundsUpdateEvent.rangeStart`** は、編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の始点となる文字のオフセットを表します。 | ||
|
|
||
| ## 値 | ||
|
|
||
| {{jsxref("Number")}} です。 | ||
|
|
||
| ## 例 | ||
|
|
||
| ### `rangeStart` の値を読み取る | ||
|
|
||
| この例では、`characterboundsupdate` イベントを用いて `rangeStart` および `rangeEnd` プロパティの値を読み取る方法を示します。 | ||
|
|
||
| ```js | ||
| const editContext = new EditContext(); | ||
| editorElement.editContext = editContext; | ||
|
|
||
| editContext.addEventListener("characterboundsupdate", (e) => { | ||
| console.log( | ||
| `The OS needs the bounds of the chars at ${e.rangeStart} - ${e.rangeEnd}.`, | ||
| ); | ||
| }); | ||
| ``` | ||
|
|
||
| ## 仕様書 | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## ブラウザーの互換性 | ||
|
|
||
| {{Compat}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.