diff options
Diffstat (limited to 'files/ja')
444 files changed, 26082 insertions, 25795 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 5f7cc61fb8..345f525084 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -264,7 +264,7 @@ /ja/docs/CSS/Getting_Started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/CSS/Getting_Started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/CSS/Getting_Started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/CSS/Getting_Started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/CSS/Getting_Started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/CSS/Getting_Started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/CSS/Getting_Started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/CSS/Getting_Started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -696,7 +696,7 @@ /ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/length /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length /ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/map /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map /ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/pop /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/prototype /ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/Array /ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/push /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push /ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/reverse /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse /ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array/shift /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift @@ -937,7 +937,7 @@ /ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:length /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length /ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:map /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map /ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:pop /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:prototype /ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/Array /ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:push /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push /ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:reverse /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse /ja/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:shift /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift @@ -1469,7 +1469,7 @@ /ja/docs/DOM/window.confirm-redirect-1 /ja/docs/Web/API/Window/confirm /ja/docs/DOM/window.content /ja/docs/Web/API/Window/content /ja/docs/DOM/window.controllers /ja/docs/Web/API/Window/controllers -/ja/docs/DOM/window.crypto /ja/docs/Web/API/Window/crypto +/ja/docs/DOM/window.crypto /ja/docs/Web/API/crypto_property /ja/docs/DOM/window.defaultStatus /ja/docs/Web/API/Window/defaultStatus /ja/docs/DOM/window.directories /ja/docs/Web/API/Window/directories /ja/docs/DOM/window.document /ja/docs/Web/API/Window/document @@ -1695,7 +1695,7 @@ /ja/docs/DOM:window.confirm /ja/docs/Web/API/Window/confirm /ja/docs/DOM:window.content /ja/docs/Web/API/Window/content /ja/docs/DOM:window.controllers /ja/docs/Web/API/Window/controllers -/ja/docs/DOM:window.crypto /ja/docs/Web/API/Window/crypto +/ja/docs/DOM:window.crypto /ja/docs/Web/API/crypto_property /ja/docs/DOM:window.defaultStatus /ja/docs/Web/API/Window/defaultStatus /ja/docs/DOM:window.directories /ja/docs/Web/API/Window/directories /ja/docs/DOM:window.document /ja/docs/Web/API/Window/document @@ -2259,7 +2259,7 @@ /ja/docs/JavaScript/Reference/Global_Objects/Array/map-redirect-1 /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map /ja/docs/JavaScript/Reference/Global_Objects/Array/pop /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop /ja/docs/JavaScript/Reference/Global_Objects/Array/pop-redirect-1 /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/ja/docs/JavaScript/Reference/Global_Objects/Array/prototype /ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/ja/docs/JavaScript/Reference/Global_Objects/Array/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/Array /ja/docs/JavaScript/Reference/Global_Objects/Array/push /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push /ja/docs/JavaScript/Reference/Global_Objects/Array/push-redirect-1 /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push /ja/docs/JavaScript/Reference/Global_Objects/Array/reduce /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce @@ -2739,9 +2739,7 @@ /ja/docs/MDN/Contribute/Structures/Live_samples/Simple_live_sample_demo /ja/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo /ja/docs/MDN/Contribute/Structures/Macros /ja/docs/MDN/Structures/Macros /ja/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros /ja/docs/MDN/Structures/Macros/Commonly-used_macros -/ja/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages /ja/docs/orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages /ja/docs/MDN/Contribute/Structures/Macros/Project:Custom_Templates /ja/docs/MDN/Structures/Macros/Commonly-used_macros -/ja/docs/MDN/Contribute/Structures/Macros/Project:Custom_Templates/creating_templates_for_multi-languages /ja/docs/orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages /ja/docs/MDN/Contribute/Structures/Page_types /ja/docs/MDN/Structures/Page_types /ja/docs/MDN/Contribute/Structures/Page_types/API_event_subpage_template /ja/docs/MDN/Structures/Page_types/API_event_subpage_template /ja/docs/MDN/Contribute/Structures/Page_types/API_method_subpage_template /ja/docs/MDN/Structures/Page_types/API_method_subpage_template @@ -2763,7 +2761,6 @@ /ja/docs/MDN/Structures/API_references/API_reference_sidebars /ja/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars /ja/docs/MDN/Structures/API_references/What_does_an_API_reference_need /ja/docs/orphaned/MDN/Structures/API_references/What_does_an_API_reference_need /ja/docs/MDN/Structures/Live_samples/Simple_live_sample_demo /ja/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo -/ja/docs/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages /ja/docs/orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages /ja/docs/MDN/Tools/Document_parameters /ja/docs/MDN/Tools/Unsupported_GET_API /ja/docs/MDN/User_guide /ja/docs/MDN/Tools /ja/docs/MDN/User_guide/Linking_to_MDN /ja/docs/orphaned/MDN/About/Linking_to_MDN @@ -2998,7 +2995,7 @@ /ja/docs/Web-d/Guide/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web-d/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web-d/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web-d/Guide/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web-d/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web-d/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -3072,6 +3069,7 @@ /ja/docs/Web/API/DocumentOrShadowRoot/styleSheets /ja/docs/Web/API/Document/styleSheets /ja/docs/Web/API/Document_Object_Model/Events /ja/docs/orphaned/Web/API/Document_Object_Model/Events /ja/docs/Web/API/Document_Object_Model/Preface /ja/docs/Web/API/Document_Object_Model +/ja/docs/Web/API/EffectTiming /ja/docs/Web/API/KeyframeEffect/KeyframeEffect /ja/docs/Web/API/Element.contentEditable /ja/docs/Web/API/HTMLElement/contentEditable /ja/docs/Web/API/Element.isContentEditable /ja/docs/Web/API/HTMLElement/isContentEditable /ja/docs/Web/API/Element.querySelector /ja/docs/Web/API/Element/querySelector @@ -3081,7 +3079,7 @@ /ja/docs/Web/API/Element/name /ja/docs/Web/API /ja/docs/Web/API/Event/button /ja/docs/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent -/ja/docs/Web/API/EventHandler /ja/docs/orphaned/Web/Guide/Events/Event_handlers +/ja/docs/Web/API/EventHandler /ja/docs/Web/Events/Event_handlers /ja/docs/Web/API/EventTarget.addEventListener /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/EventTarget.dispatchEvent /ja/docs/Web/API/EventTarget/dispatchEvent /ja/docs/Web/API/EventTarget.removeEventListener /ja/docs/Web/API/EventTarget/removeEventListener @@ -3161,6 +3159,7 @@ /ja/docs/Web/API/IDBFactory.open /ja/docs/Web/API/IDBFactory/open /ja/docs/Web/API/Index /ja/docs/Web/API /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ja/docs/Web/API/IndexedDB_API/Basic_Terminology +/ja/docs/Web/API/MediaCapabilitiesInfo /ja/docs/Web/API/MediaCapabilities/encodingInfo /ja/docs/Web/API/MediaRecorder_API /ja/docs/Web/API/MediaStream_Recording_API /ja/docs/Web/API/MouseEvent/which /ja/docs/Web/API/UIEvent/which /ja/docs/Web/API/Navigator.getUserMedia /ja/docs/Web/API/Navigator/getUserMedia @@ -3222,7 +3221,12 @@ /ja/docs/Web/API/NonDocumentTypeChildNode /ja/docs/Web/API/Element /ja/docs/Web/API/Position /ja/docs/Web/API/GeolocationPosition /ja/docs/Web/API/PositionError /ja/docs/Web/API/GeolocationPositionError +/ja/docs/Web/API/PositionOptions /ja/docs/conflicting/Web/API/Geolocation/getCurrentPosition +/ja/docs/Web/API/PublicKeyCredentialCreationOptions /ja/docs/conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270 +/ja/docs/Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection /ja/docs/Web/API/CredentialsContainer/create +/ja/docs/Web/API/PublicKeyCredentialCreationOptions/excludeCredentials /ja/docs/conflicting/Web/API/CredentialsContainer/create /ja/docs/Web/API/Push_API/Using_the_Push_API /ja/docs/Web/API/Push_API +/ja/docs/Web/API/RTCConfiguration /ja/docs/Web/API/RTCPeerConnection/RTCPeerConnection /ja/docs/Web/API/RTCIdentityErrorEvent /ja/docs/orphaned/Web/API/RTCIdentityErrorEvent /ja/docs/Web/API/RTCIdentityEvent /ja/docs/orphaned/Web/API/RTCIdentityEvent /ja/docs/Web/API/RTCSessionDescriptionCallback /ja/docs/orphaned/Web/API/RTCSessionDescriptionCallback @@ -3247,6 +3251,9 @@ /ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers /ja/docs/Web/API/Service_Worker_API/Using_Service_Workers /ja/docs/Web/API/Slotable /ja/docs/Web/API/Element /ja/docs/Web/API/SourceBufferList/SourceBuffer /ja/docs/orphaned/Web/API/SourceBufferList/SourceBuffer +/ja/docs/Web/API/StorageEstimate /ja/docs/conflicting/Web/API/StorageManager/estimate +/ja/docs/Web/API/StorageEstimate/quota /ja/docs/conflicting/Web/API/StorageManager/estimate_78aa4ffd4dfacc8f94d5c05d150d36ac +/ja/docs/Web/API/StorageEstimate/usage /ja/docs/conflicting/Web/API/StorageManager/estimate_9ffeea37c30a26922d3f1621912db8d8 /ja/docs/Web/API/TouchList.length /ja/docs/Web/API/TouchList/length /ja/docs/Web/API/UserProximityEvent.near /ja/docs/Web/API/UserProximityEvent /ja/docs/Web/API/UserProximityEvent/near /ja/docs/Web/API/UserProximityEvent @@ -3286,6 +3293,7 @@ /ja/docs/Web/API/Window.onafterprint /ja/docs/Web/API/WindowEventHandlers/onafterprint /ja/docs/Web/API/Window/URL /ja/docs/Web/API/URL /ja/docs/Web/API/Window/arguments /ja/docs/orphaned/Working_with_windows_in_chrome_code +/ja/docs/Web/API/Window/crypto /ja/docs/Web/API/crypto_property /ja/docs/Web/API/Window/dispatchEvent /ja/docs/Web/API/EventTarget/dispatchEvent /ja/docs/Web/API/Window/escape /ja/docs/Web/JavaScript/Reference/Global_Objects/escape /ja/docs/Web/API/Window/getAttention /ja/docs/orphaned/Web/API/Window/getAttention @@ -3302,6 +3310,7 @@ /ja/docs/Web/API/Window/onmouseup /ja/docs/Web/API/GlobalEventHandlers/onmouseup /ja/docs/Web/API/Window/onreset /ja/docs/Web/API/GlobalEventHandlers/onreset /ja/docs/Web/API/Window/onresize /ja/docs/Web/API/GlobalEventHandlers/onresize +/ja/docs/Web/API/Window/performance /ja/docs/Web/API/performance_property /ja/docs/Web/API/Window/restore /ja/docs/Web/API/Window/moveTo /ja/docs/Web/API/Window/setInterval /ja/docs/Web/API/setInterval /ja/docs/Web/API/Window/setTimeout /ja/docs/Web/API/setTimeout @@ -3456,7 +3465,7 @@ /ja/docs/Web/API/window.confirm /ja/docs/Web/API/Window/confirm /ja/docs/Web/API/window.content /ja/docs/Web/API/Window/content /ja/docs/Web/API/window.controllers /ja/docs/Web/API/Window/controllers -/ja/docs/Web/API/window.crypto /ja/docs/Web/API/Window/crypto +/ja/docs/Web/API/window.crypto /ja/docs/Web/API/crypto_property /ja/docs/Web/API/window.defaultStatus /ja/docs/Web/API/Window/defaultStatus /ja/docs/Web/API/window.dialogArguments /ja/docs/Web/API/Window/dialogArguments /ja/docs/Web/API/window.directories /ja/docs/Web/API/Window/directories @@ -3664,7 +3673,7 @@ /ja/docs/Web/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/Web/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/Web/CSS/Getting_started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -3862,7 +3871,7 @@ /ja/docs/Web/Guide/CSS/Getting_started/JavaScript /ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /ja/docs/Web/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout /ja/docs/Web/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists -/ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types +/ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/Guide/CSS/Getting_started/Selectors /ja/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals @@ -3895,7 +3904,7 @@ /ja/docs/Web/Guide/DOM/Using_full_screen_mode /ja/docs/Web/API/Fullscreen_API /ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM /ja/docs/Web/API/Document_Object_Model/Whitespace /ja/docs/Web/Guide/Events /ja/docs/orphaned/Web/Guide/Events -/ja/docs/Web/Guide/Events/Event_handlers /ja/docs/orphaned/Web/Guide/Events/Event_handlers +/ja/docs/Web/Guide/Events/Event_handlers /ja/docs/Web/Events/Event_handlers /ja/docs/Web/Guide/Events/Orientation_and_motion_data_explained /ja/docs/Web/Events/Orientation_and_motion_data_explained /ja/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /ja/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /ja/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial @@ -4162,7 +4171,7 @@ /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/index /ja/docs/Web/JavaScript/Reference/Global_Objects/Array /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/input /ja/docs/Web/JavaScript/Reference/Global_Objects/Array -/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/Array /ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /ja/docs/Web/JavaScript/Reference/Global_objects/ArrayBuffer /ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBufferView_temp /ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray /ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer_temp /ja/docs/Web/JavaScript/Reference/Global_objects/ArrayBuffer @@ -4324,6 +4333,7 @@ /ja/docs/Web/Manifest/serviceworker /ja/docs/orphaned/Web/Manifest/serviceworker /ja/docs/Web/Progressive_web_apps/Advantages /ja/docs/Web/Progressive_web_apps/Introduction /ja/docs/Web/Progressive_web_apps/Responsive /ja/docs/Web/Progressive_web_apps +/ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /ja/docs/Web/Reference /ja/docs/Web /ja/docs/Web/Reference/API /ja/docs/Web/API /ja/docs/Web/Reference/Events /ja/docs/Web/Events @@ -4388,6 +4398,7 @@ /ja/docs/Web/WebGL/Using_textures_in_WebGL /ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /ja/docs/Web/WebGL/WebGL_best_practices /ja/docs/Web/API/WebGL_API/WebGL_best_practices /ja/docs/Web/Web_Components/Custom_Elements /ja/docs/Web/Web_Components/Using_custom_elements +/ja/docs/Web/Web_Components/HTML_Imports /ja/docs/conflicting/Web/Web_Components /ja/docs/Web/Web_Components/Status_in_Firefox /ja/docs/orphaned/Web/Web_Components/Status_in_Firefox /ja/docs/Web/XSLT/Elements /ja/docs/Web/XSLT/Element /ja/docs/Web/XSLT/Elements/apply-imports /ja/docs/Web/XSLT/Element/apply-imports @@ -4684,7 +4695,7 @@ /ja/docs/dummySlug/Reference/Global_Objects/Array/length /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length /ja/docs/dummySlug/Reference/Global_Objects/Array/map /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map /ja/docs/dummySlug/Reference/Global_Objects/Array/pop /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/ja/docs/dummySlug/Reference/Global_Objects/Array/prototype /ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/ja/docs/dummySlug/Reference/Global_Objects/Array/prototype /ja/docs/Web/JavaScript/Reference/Global_Objects/Array /ja/docs/dummySlug/Reference/Global_Objects/Array/push /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push /ja/docs/dummySlug/Reference/Global_Objects/Array/reduce /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce /ja/docs/dummySlug/Reference/Global_Objects/Array/reduceRight /ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 1e5f74f1f5..2011f0bd59 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -11782,6 +11782,12 @@ "mfuji09" ] }, + "Web/API/CredentialsContainer/create": { + "modified": "2020-10-15T22:26:48.406Z", + "contributors": [ + "mfuji09" + ] + }, "Web/API/Crypto": { "modified": "2020-10-15T21:59:23.127Z", "contributors": [ @@ -13545,12 +13551,6 @@ "silverskyvicto" ] }, - "Web/API/EffectTiming": { - "modified": "2020-10-15T22:09:51.091Z", - "contributors": [ - "kay8" - ] - }, "Web/API/Element": { "modified": "2020-10-15T21:14:54.312Z", "contributors": [ @@ -17952,6 +17952,12 @@ "silverskyvicto" ] }, + "Web/API/KeyframeEffect/KeyframeEffect": { + "modified": "2020-10-15T22:09:51.091Z", + "contributors": [ + "kay8" + ] + }, "Web/API/LocalFileSystem": { "modified": "2020-10-15T22:11:54.611Z", "contributors": [ @@ -17987,7 +17993,7 @@ "Wind1808" ] }, - "Web/API/MediaCapabilitiesInfo": { + "Web/API/MediaCapabilities/encodingInfo": { "modified": "2020-10-15T22:24:30.759Z", "contributors": [ "Wind1808" @@ -20406,13 +20412,6 @@ "Wind1808" ] }, - "Web/API/PositionOptions": { - "modified": "2019-03-23T22:19:48.329Z", - "contributors": [ - "Uemmra3", - "unarist" - ] - }, "Web/API/ProgressEvent": { "modified": "2019-03-23T22:24:26.847Z", "contributors": [ @@ -20472,24 +20471,6 @@ "mfuji09" ] }, - "Web/API/PublicKeyCredentialCreationOptions": { - "modified": "2020-10-15T22:26:51.081Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection": { - "modified": "2020-10-15T22:26:48.406Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/API/PublicKeyCredentialCreationOptions/excludeCredentials": { - "modified": "2020-10-15T22:26:49.264Z", - "contributors": [ - "mfuji09" - ] - }, "Web/API/PublicKeyCredentialRequestOptions": { "modified": "2020-10-15T22:26:52.032Z", "contributors": [ @@ -20636,12 +20617,6 @@ "chrisdavidmills" ] }, - "Web/API/RTCConfiguration": { - "modified": "2019-03-23T22:51:27.389Z", - "contributors": [ - "dreissig.jahrhundert" - ] - }, "Web/API/RTCDataChannel": { "modified": "2020-10-15T21:37:37.878Z", "contributors": [ @@ -20665,6 +20640,12 @@ "dreissig.jahrhundert" ] }, + "Web/API/RTCPeerConnection/RTCPeerConnection": { + "modified": "2019-03-23T22:51:27.389Z", + "contributors": [ + "dreissig.jahrhundert" + ] + }, "Web/API/RTCPeerConnection/canTrickleIceCandidates": { "modified": "2020-10-15T22:29:03.079Z", "contributors": [ @@ -22181,27 +22162,6 @@ "yyss" ] }, - "Web/API/StorageEstimate": { - "modified": "2020-10-15T22:20:05.823Z", - "contributors": [ - "Uemmra3", - "Wind1808" - ] - }, - "Web/API/StorageEstimate/quota": { - "modified": "2020-10-15T22:20:08.643Z", - "contributors": [ - "Uemmra3", - "Wind1808" - ] - }, - "Web/API/StorageEstimate/usage": { - "modified": "2020-10-15T22:20:08.494Z", - "contributors": [ - "Uemmra3", - "Wind1808" - ] - }, "Web/API/StorageEvent": { "modified": "2019-10-27T14:31:31.975Z", "contributors": [ @@ -24238,17 +24198,6 @@ "mfuji09" ] }, - "Web/API/Window/crypto": { - "modified": "2020-10-15T21:16:38.249Z", - "contributors": [ - "yumetodo", - "Marsf", - "fscholz", - "AshfaqHossain", - "ethertank", - "Potappo" - ] - }, "Web/API/Window/customElements": { "modified": "2020-10-15T22:08:55.255Z", "contributors": [ @@ -24779,12 +24728,6 @@ "mfuji09" ] }, - "Web/API/Window/performance": { - "modified": "2020-10-15T22:08:48.553Z", - "contributors": [ - "silverskyvicto" - ] - }, "Web/API/Window/personalbar": { "modified": "2019-03-23T23:50:07.790Z", "contributors": [ @@ -26266,6 +26209,17 @@ "silverskyvicto" ] }, + "Web/API/crypto_property": { + "modified": "2020-10-15T21:16:38.249Z", + "contributors": [ + "yumetodo", + "Marsf", + "fscholz", + "AshfaqHossain", + "ethertank", + "Potappo" + ] + }, "Web/API/fetch": { "modified": "2020-10-15T21:41:32.875Z", "contributors": [ @@ -26310,6 +26264,12 @@ "k-kuwahara" ] }, + "Web/API/performance_property": { + "modified": "2020-10-15T22:08:48.553Z", + "contributors": [ + "silverskyvicto" + ] + }, "Web/API/setInterval": { "modified": "2020-10-15T21:15:06.280Z", "contributors": [ @@ -46611,16 +46571,6 @@ "chrisdavidmills" ] }, - "Web/Progressive_web_apps/Responsive/Media_types": { - "modified": "2020-05-24T03:45:53.652Z", - "contributors": [ - "mfuji09", - "teoli", - "siokoshou", - "ethertank", - "sosleepy" - ] - }, "Web/SVG": { "modified": "2020-04-07T10:06:05.125Z", "contributors": [ @@ -47585,12 +47535,6 @@ "maybe" ] }, - "Web/Web_Components/HTML_Imports": { - "modified": "2020-10-15T22:23:11.378Z", - "contributors": [ - "reodog" - ] - }, "Web/Web_Components/Using_custom_elements": { "modified": "2020-01-11T10:20:01.300Z", "contributors": [ @@ -48609,6 +48553,18 @@ "ethertank" ] }, + "conflicting/Web/API/CredentialsContainer/create": { + "modified": "2020-10-15T22:26:49.264Z", + "contributors": [ + "mfuji09" + ] + }, + "conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270": { + "modified": "2020-10-15T22:26:51.081Z", + "contributors": [ + "mfuji09" + ] + }, "conflicting/Web/API/File/name": { "modified": "2020-09-25T16:45:23.436Z", "contributors": [ @@ -48618,6 +48574,34 @@ "ethertank" ] }, + "conflicting/Web/API/Geolocation/getCurrentPosition": { + "modified": "2019-03-23T22:19:48.329Z", + "contributors": [ + "Uemmra3", + "unarist" + ] + }, + "conflicting/Web/API/StorageManager/estimate": { + "modified": "2020-10-15T22:20:05.823Z", + "contributors": [ + "Uemmra3", + "Wind1808" + ] + }, + "conflicting/Web/API/StorageManager/estimate_78aa4ffd4dfacc8f94d5c05d150d36ac": { + "modified": "2020-10-15T22:20:08.643Z", + "contributors": [ + "Uemmra3", + "Wind1808" + ] + }, + "conflicting/Web/API/StorageManager/estimate_9ffeea37c30a26922d3f1621912db8d8": { + "modified": "2020-10-15T22:20:08.494Z", + "contributors": [ + "Uemmra3", + "Wind1808" + ] + }, "conflicting/Web/API/Window/scroll": { "modified": "2020-10-15T22:32:16.096Z", "contributors": [ @@ -48636,6 +48620,22 @@ "Wind1808" ] }, + "conflicting/Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2020-05-24T03:45:53.652Z", + "contributors": [ + "mfuji09", + "teoli", + "siokoshou", + "ethertank", + "sosleepy" + ] + }, + "conflicting/Web/Web_Components": { + "modified": "2020-10-15T22:23:11.378Z", + "contributors": [ + "reodog" + ] + }, "orphaned/Building_a_Mozilla_Distribution": { "modified": "2019-03-23T23:49:07.062Z", "contributors": [ @@ -48683,15 +48683,6 @@ "silverskyvicto" ] }, - "orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages": { - "modified": "2020-09-30T09:07:29.732Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "hamasaki", - "Potappo" - ] - }, "orphaned/Microsummary_XML_grammar_reference": { "modified": "2019-03-23T23:42:58.294Z", "contributors": [ @@ -49581,26 +49572,6 @@ "YuichiNukiyama" ] }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2020-10-15T21:13:35.051Z", - "contributors": [ - "mfuji09", - "hamasaki", - "acid-chicken", - "segayuu", - "Flat", - "Marsf", - "taiyaki32lp64", - "mamodayo", - "DavidWalsh", - "teoli", - "ethertank", - "Potappo", - "fscholz", - "Mgjbot", - "Yuichirou" - ] - }, "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { "modified": "2019-03-23T22:21:22.661Z", "contributors": [ diff --git a/files/ja/web/api/publickeycredentialcreationoptions/excludecredentials/index.html b/files/ja/conflicting/web/api/credentialscontainer/create/index.html index 644b69d6c2..7203131ea6 100644 --- a/files/ja/web/api/publickeycredentialcreationoptions/excludecredentials/index.html +++ b/files/ja/conflicting/web/api/credentialscontainer/create/index.html @@ -1,6 +1,6 @@ --- title: PublicKeyCredentialCreationOptions.excludeCredentials -slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials +slug: conflicting/Web/API/CredentialsContainer/create tags: - API - Property @@ -10,6 +10,7 @@ tags: - WebAuthn - プロパティ translation_of: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials +original_slug: Web/API/PublicKeyCredentialCreationOptions/excludeCredentials --- <div>{{APIRef("Web Authentication API")}}{{securecontext_header}}</div> diff --git a/files/ja/web/api/publickeycredentialcreationoptions/index.html b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html index a42762c18b..42f3cdcdfa 100644 --- a/files/ja/web/api/publickeycredentialcreationoptions/index.html +++ b/files/ja/conflicting/web/api/credentialscontainer/create_18148a708412fc42b1affe2f08eab270/index.html @@ -1,6 +1,7 @@ --- title: PublicKeyCredentialCreationOptions -slug: Web/API/PublicKeyCredentialCreationOptions +slug: >- + conflicting/Web/API/CredentialsContainer/create_18148a708412fc42b1affe2f08eab270 tags: - API - Dictionary @@ -9,6 +10,7 @@ tags: - Web Authentication API - WebAuthn translation_of: Web/API/PublicKeyCredentialCreationOptions +original_slug: Web/API/PublicKeyCredentialCreationOptions --- <div>{{APIRef("Web Authentication API")}}{{securecontext_header}}</div> diff --git a/files/ja/web/api/positionoptions/index.html b/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.html index b411a84640..d6fa430bb2 100644 --- a/files/ja/web/api/positionoptions/index.html +++ b/files/ja/conflicting/web/api/geolocation/getcurrentposition/index.html @@ -1,6 +1,6 @@ --- title: PositionOptions -slug: Web/API/PositionOptions +slug: conflicting/Web/API/Geolocation/getCurrentPosition tags: - API - Geolocation API @@ -9,6 +9,7 @@ tags: - Reference - Secure context translation_of: Web/API/PositionOptions +original_slug: Web/API/PositionOptions --- <div> <div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> diff --git a/files/ja/web/api/storageestimate/index.html b/files/ja/conflicting/web/api/storagemanager/estimate/index.html index a21d3e4b6c..aa0c8766b5 100644 --- a/files/ja/web/api/storageestimate/index.html +++ b/files/ja/conflicting/web/api/storagemanager/estimate/index.html @@ -1,6 +1,6 @@ --- title: StorageEstimate -slug: Web/API/StorageEstimate +slug: conflicting/Web/API/StorageManager/estimate tags: - API - Dictionary @@ -13,6 +13,7 @@ tags: - StorageEstimate - Usage translation_of: Web/API/StorageEstimate +original_slug: Web/API/StorageEstimate --- <div>{{securecontext_header}}{{APIRef("Storage")}}</div> diff --git a/files/ja/web/api/storageestimate/quota/index.html b/files/ja/conflicting/web/api/storagemanager/estimate_78aa4ffd4dfacc8f94d5c05d150d36ac/index.html index 8dff3c3883..ec31fd060d 100644 --- a/files/ja/web/api/storageestimate/quota/index.html +++ b/files/ja/conflicting/web/api/storagemanager/estimate_78aa4ffd4dfacc8f94d5c05d150d36ac/index.html @@ -1,6 +1,6 @@ --- title: StorageEstimate.quota -slug: Web/API/StorageEstimate/quota +slug: conflicting/Web/API/StorageManager/estimate_78aa4ffd4dfacc8f94d5c05d150d36ac tags: - API - Property @@ -10,6 +10,7 @@ tags: - Secure context - StorageEstimate translation_of: Web/API/StorageEstimate/quota +original_slug: Web/API/StorageEstimate/quota --- <div>{{securecontext_header}}{{APIRef("Storage")}}</div> diff --git a/files/ja/web/api/storageestimate/usage/index.html b/files/ja/conflicting/web/api/storagemanager/estimate_9ffeea37c30a26922d3f1621912db8d8/index.html index 820de4ba72..32949e391a 100644 --- a/files/ja/web/api/storageestimate/usage/index.html +++ b/files/ja/conflicting/web/api/storagemanager/estimate_9ffeea37c30a26922d3f1621912db8d8/index.html @@ -1,6 +1,6 @@ --- title: StorageEstimate.usage -slug: Web/API/StorageEstimate/usage +slug: conflicting/Web/API/StorageManager/estimate_9ffeea37c30a26922d3f1621912db8d8 tags: - API - Reference @@ -10,6 +10,7 @@ tags: - StorageEstimate - Usage translation_of: Web/API/StorageEstimate/usage +original_slug: Web/API/StorageEstimate/usage --- <div>{{securecontext_header}}{{APIRef("Storage")}}</div> diff --git a/files/ja/web/progressive_web_apps/responsive/media_types/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html index 9f1d90396e..fa90c0bda0 100644 --- a/files/ja/web/progressive_web_apps/responsive/media_types/index.html +++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html @@ -1,6 +1,6 @@ --- title: メディア -slug: Web/Progressive_web_apps/Responsive/Media_types +slug: conflicting/Web/CSS/Media_Queries/Using_media_queries tags: - CSS - Example @@ -12,6 +12,7 @@ tags: - ガイド - 中級者 translation_of: Web/Progressive_web_apps/Responsive/Media_types +original_slug: Web/Progressive_web_apps/Responsive/Media_types --- <div>{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Responsive/")}}</div> diff --git a/files/ja/web/web_components/html_imports/index.html b/files/ja/conflicting/web/web_components/index.html index 8c432a5c01..19162e4678 100644 --- a/files/ja/web/web_components/html_imports/index.html +++ b/files/ja/conflicting/web/web_components/index.html @@ -1,7 +1,8 @@ --- title: HTML インポート -slug: Web/Web_Components/HTML_Imports +slug: conflicting/Web/Web_Components translation_of: Web/Web_Components/HTML_Imports +original_slug: Web/Web_Components/HTML_Imports --- <p>{{DefaultAPISidebar("Web Components")}}</p> diff --git a/files/ja/glossary/forbidden_header_name/index.html b/files/ja/glossary/forbidden_header_name/index.html deleted file mode 100644 index b69c1ce340..0000000000 --- a/files/ja/glossary/forbidden_header_name/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Forbidden header name (禁止ヘッダー名) -slug: Glossary/Forbidden_header_name -tags: - - Fetch - - Glossary - - HTTP - - Headers - - forbidden - - ヘッダー -translation_of: Glossary/Forbidden_header_name ---- -<p><dfn>禁止ヘッダー名</dfn>はプログラムから変更することができない <a href="/ja/docs/Web/HTTP/Headers">HTTP ヘッダー</a>の名前、特に、 HTTP <strong>リクエスト</strong>ヘッダーの名前です (反対に、{{Glossary("Forbidden response header name", "禁止レスポンスヘッダー名")}}もあります)。</p> - -<p>このようなヘッダーの変更が禁じられているのは、ユーザーエージェントがこれらを完全に制御するからです。特に `<code title="">Sec-</code>` で始まるヘッダー名は、{{domxref("XMLHttpRequest")}} のように <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> を使用して開発者がヘッダーを通じて制御できる {{glossary("API")}} に影響されずに、新しいヘッダーを追加できるよう予約されています。</p> - -<p>禁止ヘッダー名は <code>Proxy-</code> や <code>Sec-</code> で始まるもの、または以下の名前の 1 つです。</p> - -<ul class="brief"> - <li><code title="">Accept-Charset</code></li> - <li><code title="">Accept-Encoding</code></li> - <li><code title="">Access-Control-Request-Headers</code></li> - <li><code title="">Access-Control-Request-Method</code></li> - <li><code title="">Connection</code></li> - <li><code title="">Content-Length</code></li> - <li><code title="">Cookie</code></li> - <li><code title="">Cookie2</code></li> - <li><code title="">Date</code></li> - <li><code title="">DNT</code></li> - <li><code title="">Expect</code></li> - <li><code title="">Feature-Policy</code></li> - <li><code title="">Host</code></li> - <li><code title="">Keep-Alive</code></li> - <li><code title="http-origin">Origin</code></li> - <li><code title="http-origin">Proxy-</code></li> - <li><code title="http-origin">Sec-</code></li> - <li><code title="">Referer</code></li> - <li><code title="">TE</code></li> - <li><code title="">Trailer</code></li> - <li><code title="">Transfer-Encoding</code></li> - <li><code title="">Upgrade</code></li> - <li><code title="">Via</code></li> -</ul> - -<div class="note"> -<p><strong>注</strong>: <code>User-Agent</code> ヘッダーは<a href="https://fetch.spec.whatwg.org/#terminology-headers">仕様としては</a>禁止ではなくなりました (Firefox 43 で実装された forbidden header name list を参照)。 Fetch の <a href="/ja/docs/Web/API/Headers">Headers</a> オブジェクトや、XHR の <a href="/ja/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29">setRequestHeader()</a> などでこのヘッダーを設定することが可能です。ただし、 Chrome は Fetch リクエストからこのヘッダーを暗黙的に削除します（<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=571722">Chromium バグ 571722</a> を参照）。</p> -</div> - -<section id="Quick_links"> -<ol> - <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> - - <ol> - <li>{{Glossary("Forbidden response header name", "禁止レスポンスヘッダー名")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/ja/glossary/forbidden_header_name/index.md b/files/ja/glossary/forbidden_header_name/index.md new file mode 100644 index 0000000000..659dd967e3 --- /dev/null +++ b/files/ja/glossary/forbidden_header_name/index.md @@ -0,0 +1,46 @@ +--- +title: Forbidden header name (禁止ヘッダー名) +slug: Glossary/Forbidden_header_name +tags: + - Fetch + - 用語集 + - HTTP + - ヘッダー + - forbidden +translation_of: Glossary/Forbidden_header_name +--- +**禁止ヘッダー名**はプログラムから変更することができない [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)の名前、特に、 HTTP **リクエスト**ヘッダーの名前です (反対に、{{Glossary("Forbidden response header name", "禁止レスポンスヘッダー名")}}もあります)。 + +このようなヘッダーを変更することは禁止されています。なぜなら、ユーザーエージェントがヘッダーを完全に制御できるからです。\``Sec-`\` で始まる名前は、{{domxref("XMLHttpRequest")}} のような、開発者にヘッダーの制御を許可する [Fetch](/ja/docs/Web/API/Fetch_API) を使った {{glossary("API")}} から安全に新しいヘッダーを作成するために予約されています。 + +禁止ヘッダー名は `Proxy-` や `Sec-` で始まるもの、または以下の名前の 1 つです。 + +- `Accept-Charset` +- `Accept-Encoding` +- `Access-Control-Request-Headers` +- `Access-Control-Request-Method` +- `Connection` +- `Content-Length` +- `Cookie` +- `Cookie2` +- `Date` +- `DNT` +- `Expect` +- `Feature-Policy` +- `Host` +- `Keep-Alive` +- `Origin` +- `Proxy-` +- `Sec-` +- `Referer` +- `TE` +- `Trailer` +- `Transfer-Encoding` +- `Upgrade` +- `Via` + +> **Note:** `User-Agent` ヘッダーは[仕様としては](https://fetch.spec.whatwg.org/#terminology-headers)禁止ではなくなりました (Firefox 43 で実装された forbidden header name list を参照)。 Fetch の [Headers](/ja/docs/Web/API/Headers) オブジェクトや、XHR の [setRequestHeader()](/ja/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29) などでこのヘッダーを設定することが可能です。ただし、 Chrome は Fetch リクエストからこのヘッダーを暗黙的に削除します ([Chromium バグ 571722](https://bugs.chromium.org/p/chromium/issues/detail?id=571722) を参照)。 + +## 関連情報 + +{{Glossary("Forbidden response header name", "禁止レスポンスヘッダー名")}} (用語集) diff --git a/files/ja/glossary/graceful_degradation/index.html b/files/ja/glossary/graceful_degradation/index.html index 8aea866d62..9b57051636 100644 --- a/files/ja/glossary/graceful_degradation/index.html +++ b/files/ja/glossary/graceful_degradation/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/Graceful_degradation <p>{{Glossary("Polyfill","ポリフィル")}}を使用して JavaScript で<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">不足している機能</a>を構築することは可能ですが、 CSS のカスケードや HTML の代替の振る舞いなど、可能な限りスタイル付けやレイアウトなどの機能の代替案を用意する必要があります。いくつかの良い事例は、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">一般的な HTML と CSS の問題の扱い</a>で見ることができます。</p> -<p>これは、ウェブサイトが複数の未知のユーザーエージェントからアクセスされるという状況下で、ウェブ開発者が最良の可能性を持ったウェブサイトを開発することに集中できるようにするために有用なテクニックです。{{Glossary("Progressive enhancement","プログレッシブエンハンスメント")}}は関連していますが、異なります。これはよくグレースフルデグラデーションとはがy句の方向に進むように見えます。実際には、両方のアプローチが有効であり、互いに補完することができます。</p> +<p>これは、ウェブサイトが複数の未知のユーザーエージェントからアクセスされるという状況下で、ウェブ開発者が最良の可能性を持ったウェブサイトを開発することに集中できるようにするために有用なテクニックです。{{Glossary("Progressive enhancement","プログレッシブエンハンスメント")}}は関連していますが、異なります。これはよくグレースフルデグラデーションとは反対の方向に向いているとよく見られます。実際には、両方のアプローチが有効であり、互いに補完することができます。</p> <section id="Quick_links"> <ol> diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html index a55e406e87..b8fc301feb 100644 --- a/files/ja/learn/forms/html5_input_types/index.html +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -32,7 +32,7 @@ translation_of: Learn/Forms/HTML5_input_types </table> <div class="blockIndicator note"> -<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> +<p><strong>注</strong>: この記事のたいていの機能はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> </div> <p>HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a> — で扱います。</p> diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html index 5ce2709ade..04c04c284a 100644 --- a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -2,26 +2,27 @@ title: フォームデータの送信 slug: Learn/Forms/Sending_and_retrieving_form_data tags: - - Beginner + - 初心者 - CodingScripting - - Guide + - ファイル + - フォーム + - ガイド - HTML - HTTP - - Web + - ヘッダー - セキュリティ - - ファイル - - フォーム + - Web translation_of: Learn/Forms/Sending_and_retrieving_form_data --- <div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> -<p class="summary">フォームがクライアント側で検証されたら、フォームの送信は大丈夫です。前の記事では検証をカバーしたので、送信する準備はできています! この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。</p> +<p class="summary">フォームがクライアント側での検証が終わったら、次はフォームの送信です。前の記事では検証を扱ったので、送信する準備はできています。この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。</p> -<table class="learn-box standard-table"> +<table> <tbody> <tr> <th scope="row">前提知識:</th> - <td>基本的なコンピューターリテラシー, <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>, <a href="/ja/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> および<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドプログラミング</a>の基本的な知識。</td> + <td>基本的なコンピューターリテラシー、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>、<a href="/ja/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> および<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドプログラミング</a>の基本的な知識。</td> </tr> <tr> <th scope="row">目標:</th> @@ -32,37 +33,37 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data <p>まずは、フォームが送信されたときにデータに何が起こるかを考えてみましょう。</p> -<h2 id="About_clientserver_architecture" name="About_clientserver_architecture">クライアント/サーバー構成について</h2> +<h2 id="Clientserver_architecture">クライアント/サーバー構成</h2> -<p>ウェブはごく基本的なクライアント/サーバー構成に基づいており、簡単に言うと次のようになります。クライアント (通常はウェブブラウザー) は <a href="/ja/docs/HTTP">HTTP プロトコル</a>を使用して、サーバー (ほとんどの場合 <a href="http://httpd.apache.org/" rel="external">Apache</a>、<a href="http://nginx.com/" rel="external">Nginx</a>、<a href="http://www.iis.net/" rel="external">IIS</a>、<a href="http://tomcat.apache.org/" rel="external">Tomcat</a> などのウェブサーバー) にリクエストを送ります。サーバーは同じプロトコルを使用して、リクエストに応答します。</p> +<p>ウェブはごく基本的なクライアント/サーバー構成に基づいており、簡単に言うと次のようになります。クライアント (通常はウェブブラウザー) は、サーバー (ほとんどの場合 <a href="https://httpd.apache.org/" rel="external">Apache</a>、<a href="https://www.nginx.com/" rel="external">Nginx</a>、<a href="https://www.iis.net/" rel="external">IIS</a>、<a href="https://tomcat.apache.org/" rel="external">Tomcat</a> などのウェブサーバー) に <a href="/ja/docs/Web/HTTP">HTTP プロトコル</a>を使用してリクエストを送ります。サーバーは同じプロトコルを使用して、リクエストに応答します。</p> -<p><img alt="基本的なクライアント/サーバー構成" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> +<p><img alt="基本的なクライアント/サーバー構成" src="client-server.png"></p> <p>クライアント側において、HTML フォームはサーバーへデータを送信する HTTP リクエストを組み立てるのための、便利でユーザーに使いやすい手段でしかありません。フォームによって、ユーザーが HTTP リクエストで渡す情報を提供することができるようになります。</p> <div class="note"> -<p><strong>メモ</strong>: どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイド Web サイトプログラミング入門</a>モジュールをお読みください。</p> +<p><strong>メモ</strong>: どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドウェブサイトプログラミング入門</a>モジュールをお読みください。</p> </div> -<h2 id="On_the_client_side_defining_how_to_send_the_data" name="On_the_client_side_defining_how_to_send_the_data">クライアント側: データ送信方法の定義</h2> +<h2 id="On_the_client_side_defining_how_to_send_the_data">クライアント側: データ送信方法の定義</h2> <p>{{HTMLElement("form")}} 要素で、データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。もっとも重要な属性は {{htmlattrxref("action","form")}} と {{htmlattrxref("method","form")}} の 2 つです。</p> -<h3 id="The_htmlattrxrefactionform_attribute" name="The_htmlattrxref(actionform)_attribute">action 属性</h3> +<h3 id="The_htmlattrxrefactionform_attribute">action 属性</h3> <p><code><a href="/ja/docs/Web/HTML/Attributes/action">action</a></code> 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。</p> <p>この例では、データを絶対 URL の <code>http://</code><code>example.com</code> に送信します。</p> -<pre class="brush: html notranslate"><form action="http://example.com"></pre> +<pre class="brush: html"><form action="https://example.com"></pre> <p>こちらは、相対 URL を使用しています。データは同一オリジン上の別の URL に送信されます。</p> -<pre class="brush: html notranslate"><form action="/somewhere_else"></pre> +<pre class="brush: html"><form action="/somewhere_else"></pre> <p>以下のように属性を指定しない場合は、{{HTMLElement("form")}} 要素はフォームが表示されているページ自身に対してデータを送信します。</p> -<pre class="brush: html notranslate"><form></pre> +<pre class="brush: html"><form></pre> <div class="note"> <p><strong>メモ:</strong> HTTPS (secure HTTP) プロトコルを使用して URL を指定することができます。このようにすると、フォーム自体が HTTP でアクセスされる安全ではないページで提供される場合でも、データはリクエストの残りの部分とともに暗号化されます。一方、フォームが安全なページ提供されていても、{{htmlattrxref("action","form")}} 属性で安全ではない HTTP の URL を指定すると、どのブラウザーでもデータを送信する際にユーザーに対してセキュリティの警告を表示します。これは、データが暗号化されないためです。</p> @@ -72,19 +73,19 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data <p>データがどう送られるかは <code>method</code> 属性に依存します。</p> -<h3 id="The_htmlattrxrefmethodform_attribute" name="The_htmlattrxref(methodform)_attribute">method 属性</h3> +<h3 id="The_htmlattrxrefmethodform_attribute">method 属性</h3> -<p><code><a href="/ja/docs/Web/HTML/Attributes/method">method</a></code> 属性は、どのようにデータを送信するかを定義します。<a href="/ja/docs/HTTP">HTTP プロトコル</a>はリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは <code>GET</code> メソッドと <code>POST</code> メソッドです。</p> +<p><code><a href="/ja/docs/Web/HTML/Attributes/method">method</a></code> 属性は、どのようにデータを送信するかを定義します。<a href="/ja/docs/Web/HTTP">HTTP プロトコル</a>はリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは <code>GET</code> メソッドと <code>POST</code> メソッドです。</p> <p>これら2つのメソッドの違いを理解するために、一歩戻って <a href="/ja/docs/Web/HTTP/Overview">HTTP の動作</a>についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。</p> -<h4 id="The_GET_method" name="The_GET_method">GET メソッド</h4> +<h4 id="The_GET_method">GET メソッド</h4> <p><a href="/ja/docs/Web/HTTP/Methods/GET"><code>GET</code> メソッド</a>は、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。</p> <p>以下のフォームについて考えてみましょう。</p> -<pre class="brush: html notranslate"><form action="http://foo.com" method="get"> +<pre class="brush: html"><form action="http://www.foo.com" method="GET"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> @@ -100,7 +101,7 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data <p><code>GET</code> メソッドが使用されているので、フォームを送信するときにブラウザーのアドレスバーに <code>www.foo.com/?say=Hi&to=Mom</code> という URL が見えるでしょう。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">URL に追加されたデータは名前/値の組の連続です。URL の Web アドレスが終了した後、疑問符 (<code>?</code>) に続いて、名前/値の組が、それぞれアンパサンド (<code>&</code>) で区切られて入ります。この場合、2 つのデータの断片がサーバーに渡されます。</p> +<p><img alt="" src="url-parameters.png">URL に追加されたデータは名前/値の組の連続です。URL のウェブアドレスが終了した後、疑問符 (<code>?</code>) に続いて、名前/値の組が、それぞれアンパサンド (<code>&</code>) で区切られて入ります。この場合、2 つのデータの断片がサーバーに渡されます。</p> <ul> <li><code>say</code> の値は <code>Hi</code></li> @@ -109,20 +110,20 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data <p>HTTP リクエストは次のようになります。</p> -<pre class="notranslate">GET /?say=Hi&to=Mom HTTP/1.1 +<pre>GET /?say=Hi&to=Mom HTTP/2.0 Host: foo.com</pre> <div class="note"> <p><strong>メモ</strong>: この例は GitHub にあります。— <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">ライブはこちら</a>).</p> </div> -<h4 id="The_POST_method" name="The_POST_method">POST メソッド</h4> +<h4 id="The_POST_method">POST メソッド</h4> <p><a href="/ja/docs/Web/HTTP/Methods/POST"><code>POST</code> メソッド</a>は少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。</p> <p>例を見てみましょう。— これは前述の <code>GET</code> の節で見たものと同じフォームですが、{{htmlattrxref("method","form")}} 属性が <code>post</code> に設定されています。</p> -<pre class="brush: html notranslate"><form action="http://foo.com" method="post"> +<pre class="brush: html"><form action="http://www.foo.com" method="POST"> <div> <label for="say">What greeting do you want to say?</label> <input name="say" id="say" value="Hi"> @@ -138,7 +139,7 @@ Host: foo.com</pre> <p>フォームをが <code>POST</code> メソッドで送信されると、URL にはデータが追加されず、HTTP リクエストは次のように、リクエスト本文にデータが含まれた形になります。</p> -<pre class="notranslate">POST / HTTP/1.1 +<pre>POST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 @@ -165,7 +166,7 @@ say=Hi&to=Mom</pre> <p>これで下の画像にあるように、フォームデータを取得することができます。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="network-monitor.png"></p> <p>ユーザーに表示されるのは呼び出された URL のみです。前述のように、<code>GET</code> リクエストはユーザーが URL バーの中でデータを見ることができますが、<code>POST</code> リクエストではそうではありません。これは 2 つの理由でとても重要です。</p> @@ -174,15 +175,15 @@ say=Hi&to=Mom</pre> <li>大量のデータを送信する必要があるなら、<code>POST</code> が好ましいメソッドです。これは、URL の長さ制限があるブラウザーが存在するためです。加えて、多くのサーバーは受け入れる URL の長さを制限しています。</li> </ol> -<h2 id="On_the_server_side_retrieving_the_data" name="On_the_server_side_retrieving_the_data">サーバー側: データの取得</h2> +<h2 id="On_the_server_side_retrieving_the_data">サーバー側: データの取得</h2> <p>どちらの HTTP メソッドを選択しても、サーバーが受け取る文字列は、キー/値の組のリストとしてデータを取得するために解析されます。このリストにアクセスする方法は、使用する開発プラットフォームや、使用するであろう特定のフレームワークに依存します。</p> -<h3 id="Example_Raw_PHP" name="Example_Raw_PHP">PHP の例</h3> +<h3 id="Example_Raw_PHP">PHP の例</h3> <p><a href="https://php.net/">PHP</a> は、データにアクセスするためのグローバルオブジェクトを提供します。<code>POST</code> メソッドを使用したと仮定すると、データを取得してユーザーに表示する例は以下のとおりです。もちろん、データに対して何をするかはあなた次第です。データを表示したり、データベースに保管したり、メールで送信したり、他の手段で処理したりするでしょう。</p> -<pre class="brush: php notranslate"><?php +<pre class="brush: php"><?php // $_POST グローバル変数は、POST メソッドで送信されたデータへ名前でアクセスを可能にする // GET メソッドで送信されたデータにアクセスするには、$_GET が使用できる $say = htmlspecialchars($_POST['say']); @@ -193,19 +194,20 @@ say=Hi&to=Mom</pre> <p>この例では送信されたデータを含むページを表示します。これはサンプルの <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> ファイル、つまり以前 <code>method</code> が <code>POST</code> で <code>action</code> が <code>php-example.php</code> の時に見たサンプルフォームを含むファイルアクションの中で見ることができます。送信されると、フォームデータは上記のブロックの PHP コードを含む <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a> へ送信されます。コードが実行されると、ブラウザーの出力は <code>Hi Mom</code> になります。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="php-result.png"></p> <div class="note"> -<p><strong>メモ</strong>: この例はブラウザーにローカルに読み込んだ時には動作しません。— ブラウザーは PHP コードを解釈できないので、フォームがブラウザーに送信されると、PHP ファイルをダウンロードしようとするでしょう。動作させるためには、この例を何らかの PHP サーバー経由で実行する必要があります。ローカルの PHP のテストには、<a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac および Windows) や <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) がいいでしょう。</p> - -<p>MAMP を使って MAMP Pro がない (または MAMP Pro デモトライアルの有効期限が切れた)場合、動作させるのにトラブルが起こるかもしれません。再び動作させるには MAMP アプリを閉じて、<em>MAMP</em> > <em>Preferences</em> > <em>PHP</em>メニューから "Standard Version:" を "7.2.x" (x はあなたがどのバージョンをインストールしたかによります)にするといいことがわかっています。</p> +<p><strong>メモ</strong>: この例はブラウザーにローカルに読み込んだ時には動作しません。— ブラウザーは PHP コードを解釈できないので、フォームがブラウザーに送信されると、PHP ファイルをダウンロードしようとするでしょう。動作させるためには、この例を何らかの PHP サーバー経由で実行する必要があります。ローカルの PHP のテストには、<a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac および Windows) や <a href="https://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) がいいでしょう。<br> + <br> + なお、MAMP を使って MAMP Pro がない (または MAMP Pro デモトライアルの有効期限が切れた) 場合、動作させるのにトラブルが起こるかもしれません。再び動作させるには MAMP アプリを閉じて、<em>MAMP</em> > <em>Preferences</em> > <em>PHP</em>メニューから "Standard Version:" を "7.2.x" (x はあなたがどのバージョンをインストールしたかによります)にするといいことがわかっています。</p> </div> -<h3 id="Example_Raw_Python" name="Example_Raw_Python">Python の例</h3> +<h3 id="Example_Python">Python の例</h3> <p>この例は、同じこと (与えられたデータをウェブページに表示する) を Python で行います。これはテンプレートの表示やフォームデータの受付などのために <a href="http://flask.pocoo.org/">Flask フレームワーク</a>を使用しています (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a> を参照してください)。</p> -<pre class="notranslate">from flask import Flask, render_template, request +<pre class="brush: python">from flask import Flask, render_template, request + app = Flask(__name__) @app.route('/', methods=['GET', 'POST']) @@ -219,7 +221,7 @@ def hello(): if __name__ == "__main__": app.run()</pre> -<p>次のように、上記のコードでは 2 つのテンプレートが参照されます。(自分の環境で実行する場合、これらは <code>templates</code> というサブディレクトリにあり、<code>python-example.py</code>ファイルと同じディレクトリにある必要があります):</p> +<p>次のように、上記のコードでは 2 つのテンプレートが参照されます。(自分の環境で実行する場合、これらは <code>templates</code> というサブディレクトリにあり、<code>python-example.py</code>ファイルと同じディレクトリにある必要があります)。</p> <ul> <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: 以前に {{anch("The POST method", "POST メソッド")}}の節で見たフォームと同じですが、<code>action</code> が <code>\{{ url_for('hello') }}</code> に設定されています (これは <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> テンプレートで、基本的に HTML ですが、波括弧の中にウェブサーバーで実行されている Python のコードの呼び出しを含めることができます。<code>url_for('hello')</code> は基本的に、「フォームが送信されたら <code>/hello</code> にリダイレクトしてください」と言っています。)</li> @@ -227,18 +229,19 @@ if __name__ == "__main__": </ul> <div class="note"> -<p><strong>メモ</strong>: 繰り返しますが、このコードはブラウザーに直接読み込もうとしても動作しません。Python は PHP とは若干異なる動作をします。— ローカルでこのコードを実行するには、<a href="/ja/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP をインストール</a>する必要があり、それから <code>pip3 install flask</code> を使用して Flask をインストールしてください。この時点で <code>python3 python-example.py</code> を実行し、ブラウザーで <code>localhost:5000</code> に移動することで実行することができるでしょう。</p> +<p><strong>メモ</strong>: 繰り返しますが、このコードはブラウザーに直接読み込もうとしても動作しません。Python は PHP とは若干異なる動作をします。— ローカルでこのコードを実行するには、<a href="/ja/docs/Learn/Server-side/Django/development_environment#installing_python_3">Python/PIP をインストール</a>する必要があり、それから <code>pip3 install flask</code> を使用して Flask をインストールしてください。この時点で <code>python3 python-example.py</code> を実行し、ブラウザーで <code>localhost:5000</code> に移動することで実行することができるでしょう。</p> </div> -<h3 id="Other_languages_and_frameworks" name="Other_languages_and_frameworks">その他の言語やフレームワーク</h3> +<h3 id="Other_languages_and_frameworks">その他の言語やフレームワーク</h3> -<p>フォームの操作に使用できるサーバー側の技術は、Perl、Java、.Net、Ruby などたくさんあります。もっとも好きなものを選びましょう。しかしそれらの技術を直接使用することは、扱いにくいため一般的ではないことが特筆に値します。以下のような、フォームをより簡単に扱えるようにする多くの高品質フレームワークのひとつを使用する方がより一般的です:</p> +<p>フォームの操作に使用できるサーバー側の技術は、Perl、Java、.Net、Ruby などたくさんあります。もっとも好きなものを選びましょう。しかしそれらの技術を直接使用することは、扱いにくいため一般的ではないことが特筆に値します。以下のような、フォームをより簡単に扱えるようにする多くの高品質フレームワークのひとつを使用する方がより一般的です。</p> <ul> - <li>Python 用 <a href="https://www.djangoproject.com/" rel="external">Django</a> (<a href="http://flask.pocoo.org/">Flask</a> より若干重いものですが、ツールとオプションはもっとたくさんあります)</li> - <li>Node.js 用 <a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express</a></li> - <li>PHP 用 <a href="https://laravel.com/">Laravel</a></li> - <li>Ruby 用 <a href="http://rubyonrails.org/" rel="external">Ruby On Rails</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django" rel="external">Django</a> (Python 向け、<a href="http://flask.pocoo.org/">Flask</a> より若干重いものですが、ツールとオプションがより豊富です。)</li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express</a> (Node.js 向け)</li> + <li><a href="https://laravel.com/">Laravel</a> (PHP 向け)</li> + <li><a href="http://rubyonrails.org/" rel="external">Ruby On Rails</a> (Ruby 向け)</li> + <li><a href="https://spring.io/guides/gs/handling-form-submission/">Spring Boot</a> (Java 向け)</li> </ul> <p>言うまでもなく、これらのフレームワークを使用したとしても、フォームでの作業が必ずしも<em>簡単に</em>なるとは限りません。しかし、すべての機能を自分で 1 から書こうとするよりずっと簡単で、また多くの時間を節約できるでしょう。</p> @@ -247,11 +250,11 @@ if __name__ == "__main__": <p><strong>メモ</strong>: サーバー側言語やフレームワークまで説明することはこの記事の範囲を超えます。上記のリンクが参考になりますので、学習してみてください。</p> </div> -<h2 id="A_special_case_sending_files" name="A_special_case_sending_files">特別な場合: ファイル送信</h2> +<h2 id="A_special_case_sending_files">特別な場合: ファイル送信</h2> <p>ファイルは HTML フォームで特別なケースです。他のデータがすべてテキストデータである中、ファイルはバイナリーデータ (あるいはそのように考えられるデータ) です。HTTP はテキストのプロトコルであるため、バイナリーデータを扱うための特別な要件があります。</p> -<h3 id="The_htmlattrxrefenctypeform_attribute" name="The_htmlattrxref(enctypeform)_attribute">enctype 属性</h3> +<h3 id="The_htmlattrxrefenctypeform_attribute">enctype 属性</h3> <p>この属性で <code>Content-Type</code> HTTP ヘッダーの値を指定できます。このヘッダーはサーバーに対して送信するデータの種類を伝えることから、とても重要です。既定値は <code>application/x-www-form-urlencoded</code> です。人間の言葉では、「これは URL 形式でエンコードされたフォームデータです。」という意味です。</p> @@ -265,7 +268,7 @@ if __name__ == "__main__": <p>例:</p> -<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> <div> <label for="file">Choose a file</label> <input type="file" id="file" name="myFile"> @@ -279,13 +282,13 @@ if __name__ == "__main__": <p><strong>警告:</strong> 多くのサーバーは悪用を防ぐために、ファイルや HTTP リクエストの長さを制限しています。</p> </div> -<h2 id="Common_security_concerns" name="Common_security_concerns">一般的なセキュリティへの配慮</h2> +<h2 id="Common_security_concerns">一般的なセキュリティへの配慮</h2> <p>サーバーにデータを送信するたびに、セキュリティについて考える必要があります。HTML フォームはサーバーに対するもっともよくある攻撃の入口 (攻撃が行われる場所) になります。問題が HTML フォーム自身から発生することはありません — サーバーがどのようにデータを扱うかによります。</p> -<p><a href="/ja/docs/Learn/Server-side">server-side</a> の学習トピックの <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。</p> +<p><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a> の記事が <a href="/ja/docs/Learn/Server-side">server-side</a> の学習トピックにあり、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。</p> -<h3 id="Be_paranoid_Never_trust_your_users" name="Be_paranoid_Never_trust_your_users">疑い深くあれ: ユーザーを信用してはいけません</h3> +<h3 id="Be_paranoid_Never_trust_your_users">疑い深くあれ: ユーザーを信用してはいけません</h3> <p>さて、これらの脅威に対してどう対抗するのでしょうか? これは本ガイドの内容を超える話題です。それでも、覚えておくとよいルールがいくつかあります。もっとも重要なルールは、自分自身も含めユーザーを決して信用してはならないことです。信頼されているユーザーでさえハイジャックされるかもしれません。</p> @@ -299,13 +302,13 @@ if __name__ == "__main__": <p>これら 3 つのルールに従うと、多くのあるいはほとんどの問題を避けられるでしょう。ただし、適格の第三者によるセキュリティレビューを受けることもよい考えです。発生し得る問題のすべてを見いだしたとは考えないようにしてください。</p> -<h2 id="Conclusion" name="Conclusion">まとめ</h2> +<h2 id="Summary">まとめ</h2> -<p>ご覧いただいたように、フォームデータの送信は簡単ですが、アプリケーションを安全にするのは容易ではありません。フロントエンドの開発者はデータのセキュリティモデルを定義すべき者ではないことを忘れないようにしてください。今後見ていくように<a href="/ja/docs/Web/HTML/Forms/Data_form_validation">クライアント側でのデータ検証</a>も可能ですが、クライアント側で実際に何が起きているかを知ることはできませんので、サーバー側でその検証内容を信用することはできません。</p> +<p>ご覧いただいたように、フォームデータの送信は簡単ですが、アプリケーションを安全にするのは容易ではありません。フロントエンドの開発者はデータのセキュリティモデルを定義すべき者ではないことを忘れないようにしてください。今後見ていくように<a href="/ja/docs/Learn/Forms/Form_validation">クライアント側でのデータ検証</a>も可能ですが、クライアント側で実際に何が起きているかを知ることはできませんので、サーバー側でその検証内容を信用することはできません。</p> <p>このチュートリアルを順番に終えた場合、フォームのマークアップとスタイル設定の方法、クライアント側での検証の方法、フォーム送信の理解ができているでしょう。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <p>ウェブアプリケーションのセキュア化についてさらに学びたいのでしたら、次のリソースをよく読んでください。</p> @@ -315,27 +318,27 @@ if __name__ == "__main__": <li><a href="https://infosec.mozilla.org/guidelines/web_security">Web Security by Mozilla</a></li> </ul> -<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> +<p>{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</p> -<h2 id="In_this_module" name="In_this_module">このモジュール</h2> +<h2 id="In_this_module">モジュール内の記事</h2> <ul> - <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="/ja/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> -<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> +<h3 id="Advanced_Topics">上級トピック</h3> <ul> - <li><a class="external" href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a class="external" href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a class="external" href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームウィジェット向けプロパティ実装状況一覧</a></li> </ul> diff --git a/files/ja/mozilla/firefox/releases/92/index.html b/files/ja/mozilla/firefox/releases/92/index.html index a9fe1a2ee0..8fa52d7cce 100644 --- a/files/ja/mozilla/firefox/releases/92/index.html +++ b/files/ja/mozilla/firefox/releases/92/index.html @@ -38,6 +38,11 @@ tags: <li>{{jsxref("Object.hasOwn()")}} を、プロパティがオブジェクトで定義されたものか継承されたものかを確認するために使用できるようになりました ({{bug(1721149)}})。</li>
</ul>
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li>{{Glossary("HTTPS RR")}} が使用可能であるときに、Firefox は自動的に HTTP リクエストを HTTPS にアップグレードします。また、HTTPS コネクションを確立するプロセスを最適化するために、<em>HTTPS RR</em> で提供される情報を使用します。これは概念的に、{{HTTPHeader("Alt-Svc")}} ヘッダーを使用することに似ています ({{bug(1721132)}})。</li>
+</ul>
<h3 id="APIs">API</h3>
diff --git a/files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html b/files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html deleted file mode 100644 index 913354eb05..0000000000 --- a/files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: creating templates for multi-languages -slug: >- - orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages -original_slug: >- - MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages ---- -<div>{{MDNSidebar}}</div> -<div class="note"><strong>註：</strong> このページは執筆中です。</div> -<h2 id="執筆用memo">執筆用memo</h2> -<ul> <li>span 要素を使って言語版毎にテンプレートを用意するタイプの「ページ・プロパティ」は「なし（デフォルト）」にする。「English」などにするとテンプレートが英語版とその言語版とで二重に表示される現象が起きる。</li> -</ul> -<h2 id="テンプレートの_2_つのタイプ">テンプレートの 2 つのタイプ</h2> -<h2 id="page.langage_を使わない">page.langage を使わない</h2> diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index d2bb680812..0000000000 --- a/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Junk - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<h2 id="Description" name="Description">解説</h2> - -<p>{{jsxref("Array")}} インスタンスは、 <code>Array.prototype</code> を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての <code>Array</code> オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。</p> - -<p>ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript への機能の追加</a>の際に問題が発生することがあります。</p> - -<p>豆知識: <code>Array.prototype</code> はそれ自体が {{jsxref("Array")}} です。</p> - -<pre class="brush: js notranslate">Array.isArray(Array.prototype); // true -</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>オブジェクトの prototype を生成する関数を指定します。</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>配列内の要素数を反映します。</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/with">with</a></code> バインディングのスコープから除外されるプロパティ名を保持するシンボル。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Mutator メソッド</h3> - -<p>これらのメソッドは、配列を書き換えます。</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>配列内で配列内の連続した要素をコピーします。</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>配列から最後の要素を取り除き、戻り値として返します。</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>配列から最初の要素を取り除き、その要素を返します。</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>配列内で要素を整列し、配列を返します。</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>配列に対して複数の要素を追加したり取り除いたりします。</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">アクセサーメソッド</h3> - -<p>これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>この配列に他の配列や値を結合して新しい配列を返します。</dd> - <dt>{{jsxref("Array.prototype.includes()")}}</dt> - <dd>この配列が特定の要素を含むかどうか判定し、その結果を <code>true</code> または <code>false</code> で返します。</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>配列のすべての要素を結合した文字列を返します。</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>配列の一部を取り出して新しい配列として返します。</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">反復メソッド</h3> - -<p>いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の <code>length</code> 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>指定したテスト関数を配列中のすべての要素が満たした場合に <code>true</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>指定したフィルタリング関数が <code>true</code> を返す、配列中の要素を格納した新しい配列を生成します。</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は <code>undefined</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は <code>-1</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>配列中のそれぞれの要素について関数を呼び出します。</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>新しい <code>Array Iterator</code> を返します。このオブジェクトは配列中の各インデックスのキーを保持します。</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に <code>true</code> を返します。</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> - <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> -</dl> - -<h3 id="Generic_methods_non-standard" name="Generic_methods_(non-standard)">ジェネリックメソッド (非標準)</h3> - -<p>JavaScript の <code>Array</code> オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも <code>length</code> プロパティを持ち、数値プロパティ名を使う (<code>array[5]</code> のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの <code>length</code> や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや <code>length</code> が変更可能であることを要求するため、<code>length</code> プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td><code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES7')}}</td> - <td><code>includes()</code> メソッドを追加</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/ja/web/api/publickeycredentialcreationoptions/authenticatorselection/index.html b/files/ja/web/api/credentialscontainer/create/index.html index 263bd66b0a..3f786e8a8f 100644 --- a/files/ja/web/api/publickeycredentialcreationoptions/authenticatorselection/index.html +++ b/files/ja/web/api/credentialscontainer/create/index.html @@ -1,6 +1,6 @@ --- title: PublicKeyCredentialCreationOptions.authenticatorSelection -slug: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection +slug: Web/API/CredentialsContainer/create tags: - API - Property @@ -9,6 +9,7 @@ tags: - Web Authentication API - WebAuthn translation_of: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection +original_slug: Web/API/PublicKeyCredentialCreationOptions/authenticatorSelection --- <div>{{APIRef("Web Authentication API")}}{{securecontext_header}}</div> diff --git a/files/ja/web/api/window/crypto/index.html b/files/ja/web/api/crypto_property/index.html index daa31c46d2..b503935598 100644 --- a/files/ja/web/api/window/crypto/index.html +++ b/files/ja/web/api/crypto_property/index.html @@ -1,6 +1,6 @@ --- title: window.crypto -slug: Web/API/Window/crypto +slug: Web/API/crypto_property tags: - API - HTML DOM @@ -8,6 +8,7 @@ tags: - Reference - Window translation_of: Web/API/Window/crypto +original_slug: Web/API/Window/crypto --- <div>{{APIRef}}</div> diff --git a/files/ja/web/api/document/execcommand/index.html b/files/ja/web/api/document/execcommand/index.html deleted file mode 100644 index eb83da806b..0000000000 --- a/files/ja/web/api/document/execcommand/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Document.execCommand() -slug: Web/API/Document/execCommand -tags: - - API - - DOM - - Document - - Reference - - execCommand - - エディター - - メソッド -translation_of: Web/API/Document/execCommand ---- -<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div> - -<p><span class="seoSummary">HTML 文書が <code><a href="/ja/docs/Web/API/Document/designMode">designMode</a></code> に切り替わっていると、その <code>document</code> オブジェクトは <strong><code>execCommand</code></strong> メソッドを公開して、<a href="/ja/docs/Web/HTML/Element/input">フォーム入力欄</a>や <code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> を持った要素など、現在編集可能な領域を操作するためのコマンドが実行できるようにします。</span></p> - -<p>多くのコマンドは、文書の<a href="/ja/docs/Web/API/Selection">選択範囲</a>に対して影響を及ぼしますが (太字、イタリック、など)、他にも新しい要素の挿入 (リンクの追加) や行全体に影響するもの (字下げ) もあります。 <code>contentEditable</code> を使用した場合、 <code>execCommand()</code> は現在アクティブな編集可能要素に影響を及ぼします。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>document</var>.execCommand(<var>aCommandName</var>, <var>aShowDefaultUI</var>, <var>aValueArgument</var>) -</pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>{{jsxref('Boolean')}} で、コマンドが対応していないか無効であれば <code>false</code> になります。</p> - -<div class="note"> -<p><strong>メモ</strong>: ユーザーの操作の中で行われた場合にのみ <code>true</code> を返します。コマンドを呼び出す前、ブラウザーが対応しているかどうかを検査するために、返値を使用しないでください。</p> -</div> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>aCommandName</var></code></dt> - <dd>{{domxref("DOMString")}} で、実行するコマンドの名前を指定します。使用可能なコマンドの一覧は、{{anch("Commands", "コマンド")}}の節をご覧ください。</dd> - <dt><code><var>aShowDefaultUI</var></code></dt> - <dd>{{jsxref("Boolean")}} で、既定のユーザインターフェースを表示するかどうかを指示します。 Mozilla では未実装です。</dd> - <dt><code><var>aValueArgument</var></code></dt> - <dd>追加の引数を必要とするコマンドの引数 (例えば、 <code>insertImage</code> では挿入する画像の URL)。引数の値は {{domxref("DOMString")}} です。引数が不要な場合は <code>null</code> を指定します。</dd> -</dl> - -<h3 id="Commands" name="Commands">コマンド</h3> - -<dl> - <dt><code>backColor</code></dt> - <dd>文書の背景色を変更します。 <code>styleWithCss</code> モードでは、文書ではなく含まれているブロックの背景色に影響します。この場合、引数として {{cssxref("<color>")}} 値の文字列を渡す必要があります。ただし、Internet Explorer ではテキストの背景色を設定するために使用します。</dd> - <dt><code>bold</code></dt> - <dd>選択範囲または挿入位置の太字のオンとオフを切り替えます。 Internet Explorer は {{HTMLElement("b")}} タグの代わりに {{HTMLElement("strong")}} タグを使用します。</dd> - <dt><code>ClearAuthenticationCache</code></dt> - <dd>キャッシュからすべての資格情報をクリアします。</dd> - <dt><code>contentReadOnly</code></dt> - <dd>コンテンツドキュメントを読み取り専用または編集可能にします。引数として true または false の真偽値が必要です。 (Internet Explorer は対応していません。)</dd> - <dt><code>copy</code></dt> - <dd>現在の選択範囲をクリップボードにコピーします。この動作が有効になる条件は、ブラウザーによって様々であり、時の経過により発展する可能性があります。このコマンドが使用可能かどうかは、ブラウザーの互換性のセクションで確認してください。</dd> - <dt><code>createLink</code></dt> - <dd>選択範囲からハイパーリンクを作成しますが、選択範囲が<em>ある</em>ときだけです。ハイパーリンクの <code>href</code> の引数として、 <a href="/ja/docs/Archive/Mozilla/URIs_and_URLs">URI</a> が必要です。 URI は少なくとも1文字を含む必要があり、空白文字でもかまいません。 (Internet Explorer は <code>null</code> 値でリンクを作成できます。)</dd> - <dt><code>cut</code></dt> - <dd>現在の選択範囲を除去して、クリップボードにコピーします。いつこの動作が有効になるかはブラウザーによって様々であり、条件は時期によって変化しています。使用方法の詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>で確認してください。</dd> - <dt><code>decreaseFontSize</code></dt> - <dd>選択範囲の前後または挿入位置に {{HTMLElement("small")}} タグを追加します。(Internet Explorer では対応していません。)</dd> - <dt><code>defaultParagraphSeparator</code></dt> - <dd>編集可能なテキスト領域に新しい段落が作成された時の、段落区切りを変更します。詳しくは<a href="/ja/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">マークアップ生成の違い</a>を参照してください。</dd> - <dt><code>delete</code></dt> - <dd>現在の選択範囲を削除します。</dd> - <dt><code>enableAbsolutePositionEditor</code></dt> - <dd>絶対配置の要素を移動させるためのグラバーを有効化または無効化します。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})</dd> - <dt><code>enableInlineTableEditing</code></dt> - <dd>表の行/列の挿入・削除コントロールを有効または無効にします。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})</dd> - <dt><code>enableObjectResizing</code></dt> - <dd>画像、表、絶対配置の要素、などの大きさの変更が可能なオブジェクトにおいて、大きさ変更用のハンドルを有効化または無効化します。 Firefox 63 ベータ/開発版では、既定で無効です。 ({{bug(1449564)}})</dd> - <dt><code>fontName</code></dt> - <dd>選択範囲または挿入位置のフォント名を変更します。引数としてフォント名の文字列 (<code>"Arial"</code> など) が必要です。</dd> - <dt><code>fontSize</code></dt> - <dd>選択範囲または挿入位置のフォントサイズを変更します。引数として <code>1</code>-<code>7</code> の整数値が必要です。</dd> - <dt><code>foreColor</code></dt> - <dd>選択範囲または挿入位置のフォント色を変更します。引数として16進表記で色の値の文字列が必要です。</dd> - <dt><code>formatBlock</code></dt> - <dd>現在の選択範囲を含む行の前後に HTML ブロックレベル要素を追加し、すでに存在する場合は、その行を含むブロック要素に置き換えます (Firefox では {{HTMLElement("blockquote")}} は例外です。 — これはブロック要素を囲みます)。引数としてタグ名の文字列が必要です。実質的にすべてのブロックレベル要素を利用することができます。 (Internet Explorer および Edge は見出しタグ <code>H1</code>–<code>H6</code>, <code>ADDRESS</code>, <code>PRE</code> のみに対応しており、 <code>"<H1>"</code> のように山かっこで囲む必要があります。)</dd> - <dt><code>forwardDelete</code></dt> - <dd><a href="https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB">カーソル</a>位置より前の文字を 1 文字削除します。これは、 Windows のキーボードで Delete キーを押すのと同じ動作です。</dd> - <dt><code>heading</code></dt> - <dd>選択範囲または挿入位置の行の周りに見出し要素を追加します。引数としてタグ名の文字列 (つまり <code>"H1"</code> や <code>"H6"</code>) が必要です。 (Internet Explorer や Safari は対応していません。)</dd> - <dt><code>hiliteColor</code></dt> - <dd>選択範囲または挿入位置の背景色を変更します。引数として color 値の文字列が必要です。この機能は <code>useCSS</code> を <code>true</code> にしないと使えません。(Internet Explorer では対応していません。)</dd> - <dt><code>increaseFontSize</code></dt> - <dd>選択範囲または挿入位置に {{HTMLElement("big")}} タグを追加します。(Internet Explorer では対応していません。)</dd> - <dt><code>indent</code></dt> - <dd>選択範囲または挿入位置を含む行を字下げします。Firefox では、選択範囲が字下げレベルの異なる複数行にわたる場合、選択範囲内の最も字下げの少ない行のみが字下げされます。</dd> - <dt><code>insertBrOnReturn</code></dt> - <dd>Enter キーで {{HTMLElement("br")}} 要素を挿入するか現在のブロック要素を二分割するかを制御します。 (Internet Explorer では対応していません。)</dd> - <dt><code>insertHorizontalRule</code></dt> - <dd>挿入位置に {{HTMLElement("hr")}} 要素を挿入するか、選択範囲を置き換えるかします。</dd> - <dt><code>insertHTML</code></dt> - <dd>挿入位置に HTML 文字列を挿入します (選択範囲は削除されます)。引数として正しい HTML 文字列が必要です。(Internet Explorer では対応していません。)</dd> - <dt><code>insertImage</code></dt> - <dd>挿入位置に画像を挿入します (選択範囲は削除されます)。引数として画像の <code>src</code> のための URL 文字列が必要です。この文字列の要求事項は、 <code>createLink</code> と同じです。</dd> - <dt><code>insertOrderedList</code></dt> - <dd>選択範囲または挿入位置に<a href="/ja/docs/Web/HTML/Element/ol">番号付き順序付きリスト</a>を生成します。</dd> - <dt><code>insertUnorderedList</code></dt> - <dd>選択範囲または挿入位置<a href="/ja/docs/Web/HTML/Element/ul">行頭記号付き順序なしリスト</a>を生成します。</dd> - <dt><code>insertParagraph</code></dt> - <dd>選択範囲の前後または現在の行に<a href="/ja/docs/Web/HTML/Element/p">段落</a>を挿入します。(Internet Explorer は挿入位置に段落を挿入し、現在の選択範囲を削除します。)</dd> - <dt><code>insertText</code></dt> - <dd>挿入位置に与えられたプレーンテキストを挿入します (選択範囲は削除されます)。</dd> - <dt><code>italic</code></dt> - <dd>選択範囲または挿入位置のイタリック体のオンとオフを切り替えます。(Internet Explorer は {{HTMLElement("i")}} 要素ではなく、 {{HTMLElement("em")}} 要素を使用します。)</dd> - <dt><code>justifyCenter</code></dt> - <dd>選択範囲または挿入位置を中央揃えにします。</dd> - <dt><code>justifyFull</code></dt> - <dd>選択範囲または挿入位置を両端揃えにします。</dd> - <dt><code>justifyLeft</code></dt> - <dd>選択範囲または挿入位置を左寄せにします。</dd> - <dt><code>justifyRight</code></dt> - <dd>選択範囲または挿入位置を右寄せにします。</dd> - <dt><code>outdent</code></dt> - <dd>選択範囲または挿入位置を含む行の字下げを戻します。</dd> - <dt><code>paste</code></dt> - <dd>クリップボードのコンテンツを挿入位置に貼り付け (ペースト) します (現在の選択範囲は置き換えられます)。ウェブコンテンツでは無効です。 [1] を参照。</dd> - <dt><code>redo</code></dt> - <dd>前回の undo コマンドを元に戻します。</dd> - <dt><code>removeFormat</code></dt> - <dd>現在の選択範囲からすべての書式を削除します。</dd> - <dt><code>selectAll</code></dt> - <dd>編集可能領域のすべてのコンテンツを選択します。</dd> - <dt><code>strikeThrough</code></dt> - <dd>選択範囲または挿入位置の取り消し線のオンとオフを切り替えます。</dd> - <dt><code>subscript</code></dt> - <dd>選択範囲または挿入位置の<a href="/ja/docs/Web/HTML/Element/sub">下付き文字</a>のオンとオフを切り替えます。</dd> - <dt><code>superscript</code></dt> - <dd>選択範囲または挿入位置の<a href="/ja/docs/Web/HTML/Element/sup">上付き文字</a>のオンとオフを切り替えます。</dd> - <dt><code>underline</code></dt> - <dd>選択範囲または挿入位置の<a href="/ja/docs/Web/HTML/Element/u">下線</a>のオンとオフを切り替えます。</dd> - <dt><code>undo</code></dt> - <dd>最後に実行したコマンドを取り消します。</dd> - <dt><code>unlink</code></dt> - <dd>選択されたハイパーリンクから<a href="/ja/docs/Web/HTML/Element/a">アンカー要素</a>を削除します。</dd> - <dt><code>useCSS</code> {{Deprecated_inline}}</dt> - <dd>生成するマークアップに HTML タグと CSS のどちらを使用するかを切り替えます。引数として true または false の真偽値が必要です。</dd> - <dd>メモ: この引数は論理的に逆で (つまり、 false で CSS が使用され、true で HTML が使用される)、 Internet Explorer では対応していません。これは <em>styleWithCSS</em> に置き換えられ、非推奨になりました。</dd> - <dt><code>styleWithCSS</code></dt> - <dd><em>useCSS</em> コマンドを置き換えるものです。 <code>true</code> はマークアップ時に <em>style</em> 属性が生成または変更され、 false では書式要素が生成されます。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<p>CodePen に<a href="https://codepen.io/chrisdavidmills/full/gzYjag/">使用方法</a>の例があります。</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td><a href="https://w3c.github.io/editing/ActiveDocuments/execCommand.html#execcommand()">execCommand</a></td> - <td>非公式の草稿</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Document.execCommand")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("HTMLElement.contentEditable")}}</li> - <li>{{domxref("document.designMode")}}</li> - <li><a href="/ja/docs/Rich-Text_Editing_in_Mozilla">Mozilla におけるリッチテキスト編集</a></li> - <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.</li> -</ul> diff --git a/files/ja/web/api/document/execcommand/index.md b/files/ja/web/api/document/execcommand/index.md new file mode 100644 index 0000000000..71134c1f19 --- /dev/null +++ b/files/ja/web/api/document/execcommand/index.md @@ -0,0 +1,178 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - メソッド + - NeedsExample + - リファレンス + - エディター + - 非推奨 +browser-compat: api.Document.execCommand +translation_of: Web/API/Document/execCommand +--- +{{ApiRef("DOM")}}{{deprecated_header}} + +HTML 文書が [`designMode`](/ja/docs/Web/API/Document/designMode) に切り替わっていると、その `document` オブジェクトは **`execCommand`** メソッドを公開して、[フォーム入力欄](/ja/docs/Web/HTML/Element/input)や [`contentEditable`](/ja/docs/Web/HTML/Global_attributes/contenteditable) を持った要素など、現在編集可能な領域を操作するためのコマンドが実行できるようにします。 + +多くのコマンドは、文書の[選択範囲](/ja/docs/Web/API/Selection)に対して影響を及ぼしますが (太字、イタリック、など)、他にも新しい要素の挿入 (リンクの追加) や行全体に影響するもの (字下げ) もあります。 `contentEditable` を使用した場合、 `execCommand()` は現在アクティブな編集可能要素に影響を及ぼします。 + +> **Note:** このメソッドは廃止されており、使用すべきではありません。特に、クリップボードを操作したい場合は [Clipboard API](/ja/docs/Web/API/Clipboard_API) の使用を検討してください。 + +## 構文 + +```js +document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) +``` + +### 返値 + +論理値で、コマンドが対応していないか無効であれば `false` になります。 + +> **Note:** `document.execCommand()` はユーザーの操作の中で行われた場合にのみ `true` を返します。コマンドを呼び出す前に、ブラウザーが対応しているかどうかを調べるために返値を使用しないでください。 Firefox 82 以降は、`document.execCommand()` を重ねて呼び出すと常に `false` を返します。 + +### 引数 + +- `aCommandName` + - : {{domxref("DOMString")}} で、実行するコマンドの名前を指定します。使用可能なコマンドの一覧は、{{anch("Commands", "コマンド")}}の節をご覧ください。 +- `aShowDefaultUI` + - : 論理値で、既定のユーザインターフェースを表示するかどうかを指示します。 Mozilla では未実装です。 +- `aValueArgument` + - : 追加の引数を必要とするコマンドの引数 (例えば、 `insertImage` では挿入する画像の URL)。引数の値は {{domxref("DOMString")}} です。引数が不要な場合は `null` を指定します。 + +### コマンド + +- `backColor` + - : 文書の背景色を変更します。 `styleWithCss` モードでは、文書ではなく含まれているブロックの背景色に影響します。この場合、引数として {{cssxref("<color>")}} 値の文字列を渡す必要があります。ただし、Internet Explorer ではテキストの背景色を設定するために使用します。 +- `bold` + - : 選択範囲または挿入位置の太字のオンとオフを切り替えます。 Internet Explorer は {{HTMLElement("b")}} タグの代わりに {{HTMLElement("strong")}} タグを使用します。 +- `ClearAuthenticationCache` + - : キャッシュからすべての資格情報をクリアします。 +- `contentReadOnly` + - : 内容の文書の読み取り専用または編集可能を切り替えます。引数として true または false の論理値が必要です。 (Internet Explorer は対応していません。) +- `copy` + - : 現在の選択範囲をクリップボードにコピーします。この動作が有効になる条件は、ブラウザーによって様々であり、時の経過により発展する可能性があります。このコマンドが使用可能かどうかは、ブラウザーの互換性の節で確認してください。 +- `createLink` + - : 選択範囲からハイパーリンクを作成しますが、選択範囲が`ある`ときだけです。ハイパーリンクの `href` の引数として、 [URI](/ja/docs/Archive/Mozilla/URIs_and_URLs) が必要です。 URI は少なくとも1文字を含む必要があり、空白文字でもかまいません。 (Internet Explorer は `null` 値でリンクを作成できます。) +- `cut` + - : 現在の選択範囲を除去して、クリップボードにコピーします。いつこの動作が有効になるかはブラウザーによって様々であり、条件は時期によって変化しています。使用方法の詳細は[互換性一覧表](#ブラウザーの互換性)で確認してください。 +- `decreaseFontSize` + - : 選択範囲の前後または挿入位置に {{HTMLElement("small")}} タグを追加します。(Internet Explorer では対応していません。) +- `defaultParagraphSeparator` + - : 編集可能なテキスト領域に新しい段落が作成された時の、段落区切りを変更します。詳しくは[マークアップ生成の違い](/ja/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation)を参照してください。 +- `delete` + - : 現在の選択範囲を削除します。 +- `enableAbsolutePositionEditor` + - : 絶対配置の要素を移動させるためのグラバーを有効化または無効化します。 Firefox 64 以降では、既定で無効です。 ({{bug(1490641)}}) +- `enableInlineTableEditing` + - : 表の行/列の挿入・削除コントロールを有効または無効にします。 Firefox 64 以降では、既定で無効です。 ({{bug(1490641)}}) +- `enableObjectResizing` + - : 画像、表、絶対配置の要素、などの大きさの変更が可能なオブジェクトにおいて、大きさ変更用のハンドルを有効化または無効化します。 Firefox 64 以降では、既定で無効です。 ({{bug(1490641)}}) +- `fontName` + - : 選択範囲または挿入位置のフォント名を変更します。引数としてフォント名の文字列 (`"Arial"` など) が必要です。 +- `fontSize` + - : 選択範囲または挿入位置のフォントサイズを変更します。引数として `1`-`7` の整数値が必要です。 +- `foreColor` + - : 選択範囲または挿入位置のフォント色を変更します。引数として 16 進表記で色の値の文字列が必要です。 +- `formatBlock` + - : 現在の選択範囲を含む行の前後に HTML ブロックレベル要素を追加し、すでに存在する場合は、その行を含むブロック要素に置き換えます (Firefox では {{HTMLElement("blockquote")}} は例外です。 — これはブロック要素を囲みます)。引数としてタグ名の文字列が必要です。実質的にすべてのブロックレベル要素を利用することができます。 (Internet Explorer および Edge は見出しタグ `H1`–`H6`, `ADDRESS`, `PRE` のみに対応しており、`"<H1>"` のように山かっこで囲む必要があります。) +- `forwardDelete` + - : [カーソル](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB)位置より前の文字を 1 文字削除します。これは、 Windows のキーボードで Delete キーを押すのと同じ動作です。 +- `heading` + - : 選択範囲または挿入位置の行の周りに見出し要素を追加します。引数としてタグ名の文字列 (つまり `"H1"` や `"H6"`) が必要です。 (Internet Explorer や Safari は対応していません。) +- `hiliteColor` + - : 選択範囲または挿入位置の背景色を変更します。引数として color 値の文字列が必要です。この機能は `useCSS` を `true` にしないと使えません。(Internet Explorer では対応していません。) +- `increaseFontSize` + - : 選択範囲または挿入位置に {{HTMLElement("big")}} タグを追加します。(Internet Explorer では対応していません。) +- `indent` + - : 選択範囲または挿入位置を含む行を字下げします。Firefox では、選択範囲が字下げレベルの異なる複数行にわたる場合、選択範囲内の最も字下げの少ない行のみが字下げされます。 +- `insertBrOnReturn` + - : Enter キーで {{HTMLElement("br")}} 要素を挿入するか現在のブロック要素を二分割するかを制御します。 (Internet Explorer では対応していません。) +- `insertHorizontalRule` + - : 挿入位置に {{HTMLElement("hr")}} 要素を挿入するか、選択範囲を置き換えるかします。 +- `insertHTML` + - : 挿入位置に HTML 文字列を挿入します (選択範囲は削除されます)。引数として正しい HTML 文字列が必要です。(Internet Explorer では対応していません。) +- `insertImage` + - : 挿入位置に画像を挿入します (選択範囲は削除されます)。引数として画像の `src` のための URL 文字列が必要です。この文字列の要求事項は、 `createLink` と同じです。 +- `insertOrderedList` + - : 選択範囲または挿入位置に[番号付き順序付きリスト](/ja/docs/Web/HTML/Element/ol)を生成します。 +- `insertUnorderedList` + - : 選択範囲または挿入位置[行頭記号付き順序なしリスト](/ja/docs/Web/HTML/Element/ul)を生成します。 +- `insertParagraph` + - : 選択範囲の前後または現在の行に[段落](/ja/docs/Web/HTML/Element/p)を挿入します。(Internet Explorer は挿入位置に段落を挿入し、現在の選択範囲を削除します。) +- `insertText` + - : 挿入位置に与えられたプレーンテキストを挿入します (選択範囲は削除されます)。 +- `italic` + - : 選択範囲または挿入位置のイタリック体のオンとオフを切り替えます。(Internet Explorer は {{HTMLElement("i")}} 要素ではなく、 {{HTMLElement("em")}} 要素を使用します。) +- `justifyCenter` + - : 選択範囲または挿入位置を中央揃えにします。 +- `justifyFull` + - : 選択範囲または挿入位置を両端揃えにします。 +- `justifyLeft` + - : 選択範囲または挿入位置を左寄せにします。 +- `justifyRight` + - : 選択範囲または挿入位置を右寄せにします。 +- `outdent` + - : 選択範囲または挿入位置を含む行の字下げを戻します。 +- `paste` + - : クリップボードのコンテンツを挿入位置に貼り付け (ペースト) します (現在の選択範囲は置き換えられます)。ウェブコンテンツでは無効です。 +- `redo` + - : 前回の undo コマンドを元に戻します。 +- `removeFormat` + - : 現在の選択範囲からすべての書式を削除します。 +- `selectAll` + - : 編集可能領域のすべてのコンテンツを選択します。 +- `strikeThrough` + - : 選択範囲または挿入位置の取り消し線のオンとオフを切り替えます。 +- `subscript` + - : 選択範囲または挿入位置の[下付き文字](/ja/docs/Web/HTML/Element/sub)のオンとオフを切り替えます。 +- `superscript` + - : 選択範囲または挿入位置の[上付き文字](/ja/docs/Web/HTML/Element/sup)のオンとオフを切り替えます。 +- `underline` + - : 選択範囲または挿入位置の[下線](/ja/docs/Web/HTML/Element/u)のオンとオフを切り替えます。 +- `undo` + - : 最後に実行したコマンドを取り消します。 +- `unlink` + - : 選択されたハイパーリンクから[アンカー要素](/ja/docs/Web/HTML/Element/a)を削除します。 +- `useCSS` {{Deprecated_inline}} + + - : 生成するマークアップに HTML タグと CSS のどちらを使用するかを切り替えます。引数として true または false の真偽値が必要です。 + + > **Note:** この引数は論理的に逆で (つまり、 `false` で CSS が使用され、`true` で HTML が使用される)、 Internet Explorer では対応していません。これは `styleWithCSS` に置き換えられ、非推奨になりました。 + +- `styleWithCSS` + + - : `useCSS` コマンドを置き換えるものです。 `true` はマークアップ時に `style` 属性が生成または変更され、 false では書式要素が生成されます。 + +- `AutoUrlDetect` + - : ブラウザーの自動リンクの動作を変更します (Internet Explorer のみ)。 + + +## 例 + +[使用方法](https://codepen.io/chrisdavidmills/full/gzYjag/)の例 (CodePen) です。 + +## 仕様書 + +この機能は現行の仕様書に含まれていません。標準化の予定もありません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLElement.contentEditable")}} +- {{domxref("document.designMode")}} +- [Mozilla におけるリッチテキスト編集](/ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla) +- [Scribe's + "Browser Inconsistencies" documentation](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md) with bugs related to + `document.execCommand`. + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/ja/docs/Rich-Text_Editing_in_Mozilla">Mozilla におけるリッチテキスト編集</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to `document.execCommand`.</li> +</ul> diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html deleted file mode 100644 index c0af97a434..0000000000 --- a/files/ja/web/api/document/queryselector/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Document.querySelector() -slug: Web/API/Document/querySelector -tags: - - API - - CSS セレクター - - DOM - - DOM 要素 - - Document - - メソッド - - リファレンス - - Selector API - - セレクター - - querySelector -translation_of: Web/API/Document/querySelector -browser-compat: api.Document.querySelector ---- -<div>{{ApiRef("DOM")}}</div> - -<p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p> - -<div class="note"> -<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p> -</div> - -<h2 id="Syntax">構文</h2> - -<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>); -</pre> - -<h3 id="Parameters">引数</h3> - -<dl> - <dt><var>selectors</var></dt> - <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SyntaxError</code> が発生します。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p> -</div> - -<h3 id="Return_value">返値</h3> - -<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p> - -<p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p> - -<h3 id="Exceptions">例外</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd> -</dl> - -<h2 id="Usage_notes">使用上のメモ</h2> - -<p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p> - -<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="https://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p> - -<h3 id="Escaping_special_characters">特殊文字のエスケープ</h3> - -<p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p> - -<pre class="brush: html"><div id="foo\bar"></div> -<div id="foo:bar"></div> - -<script> - console.log('#foo\bar'); // "#fooar" (\b はバックスペース制御文字) - document.querySelector('#foo\bar'); // いずれにも一致しない - - console.log('#foo\\bar'); // "#foo\bar" - console.log('#foo\\\\bar'); // "#foo\\bar" - document.querySelector('#foo\\\\bar'); // 最初の div に一致する - - document.querySelector('#foo:bar'); // いずれにも一致しない - document.querySelector('#foo\\:bar'); // 2番目の div に一致する -</script></pre> - -<h2 id="Example">例</h2> - -<h3 id="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3> - -<p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p> - -<pre class="brush: js">var el = document.querySelector(".myclass"); -</pre> - -<h3 id="A_more_complex_selector">より複雑なセレクター</h3> - -<p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code><div class="user-panel main"></code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code><input name="login"/></code>) が返されます。</p> - -<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); -</pre> - -<h3 id="Negation">否定</h3> - -<p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p> - -<pre class="brush: js">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> - -<p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat}}</div> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("Element.querySelectorAll()")}}</li> -</ul> diff --git a/files/ja/web/api/document/queryselector/index.md b/files/ja/web/api/document/queryselector/index.md new file mode 100644 index 0000000000..7847ab82b7 --- /dev/null +++ b/files/ja/web/api/document/queryselector/index.md @@ -0,0 +1,116 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - CSS セレクター + - DOM + - DOM 要素 + - Document + - メソッド + - リファレンス + - Selector API + - セレクター + - querySelector +translation_of: Web/API/Document/querySelector +browser-compat: api.Document.querySelector +--- +{{ApiRef("DOM")}} + +{{domxref("Document")}} の **`querySelector()`** メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は `null` を返します。 + +> **Note:** 照合処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。 + +## 構文 + +```js +element = document.querySelector(selectors); +``` + +### 引数 + +- _selectors_ + - : {{domxref("DOMString")}} で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。そうでない場合は `SyntaxError` が発生します。セレクターとその管理の方法の詳細について、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。 + +> **Note:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。 + +### 返値 + +{{domxref("Element")}} オブジェクトで、文書内で指定された [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)に最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は `null` を返します。 + +指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。 + +### 例外 + +- `SyntaxError` + - : 指定された _selectors_ の構文が妥当ではない。 + +## 使用上のメモ + +指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。 + +[CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)は [Selectors API](https://www.w3.org/TR/selectors-api/#grammar) で策定されている通り、何も要素を返しません。 + +### 特殊文字のエスケープ + +標準の CSS の構文に従っていない ID やセレクター (例えば、コロンや空白を不適切に使用しているもの) に一致させるためには、バックスラッシュ ("`\`") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを *2 回*エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は `querySelector()` のため)。 + +```html +<div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b はバックスペース制御文字) + document.querySelector('#foo\bar'); // いずれにも一致しない + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\\\bar'); // 最初の div に一致する + + document.querySelector('#foo:bar'); // いずれにも一致しない + document.querySelector('#foo\\:bar'); // 2番目の div に一致する +</script> +``` + +## 例 + +### あるクラスに一致する最初の要素を探索する + +次の例は、クラス "`myclass`" を持つ文書内の要素の内、最初のものを返します。 + +```js +var el = document.querySelector(".myclass"); +``` + +### より複雑なセレクター + +セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内で {{HTMLElement("input")}} に "login" という名前の付いた最初のもの (`<input name="login"/>`) のうち、 {{HTMLElement("div")}} でクラスが "user-panel main" (`<div class="user-panel main">`) の中にあるものが返されます。 + +```js +var el = document.querySelector("div.user-panel.main input[name='login']"); +``` + +### 否定 + +すべての CSS セレクター文字列が妥当な場合、セレクターを否定することもできます。 + +```js +var el = document.querySelector("div.user-panel:not(.main) input[name='login']"); +``` + +これで、input 要素のうち親に `user-panel` クラスのついた div があるものの、`main` クラスがないものを 1 つ選択します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +- {{domxref("Element.querySelector()")}} +- {{domxref("Document.querySelectorAll()")}} +- {{domxref("Element.querySelectorAll()")}} diff --git a/files/ja/web/api/document/queryselectorall/index.html b/files/ja/web/api/document/queryselectorall/index.html deleted file mode 100644 index 29d3513ec2..0000000000 --- a/files/ja/web/api/document/queryselectorall/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Document.querySelectorAll() -slug: Web/API/Document/querySelectorAll -tags: - - API - - CSS Selectors - - DOM - - Document - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelectorAll - - メソッド -translation_of: Web/API/Document/querySelectorAll ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{domxref("Document")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) {{domxref("NodeList")}} を返します。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定されたセレクターの少なくとも一つに一致する要素ごとに {{domxref("Element")}} を一つずつ含む、生きていない {{domxref("NodeList")}}、または一致するものがなければ空の {{domxref("NodeList")}} です。</p> - -<div class="note"> -<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> -</div> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストの入手</h3> - -<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> - -<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); -</pre> - -<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> - -<pre class="brush: js">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>次の例では、ID が <code>"userlist"</code> の要素の中にあり、<code>"data-active"</code> 属性を持ち、その値が <code>"1"</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> - -<pre class="brush: js">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active='1']");</pre> - -<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへのアクセス</h3> - -<p>一旦、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p> - -<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p> - -<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); - -highlightedItems.forEach(function(userItem) { - deleteUser(userItem); -});</pre> - -<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2> - -<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> - -<h3 id="HTML">HTML</h3> - -<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> - -<pre class="brush: html"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1 です。0 ではありません! -</pre> - -<p>この例では、<code>"select"</code> class を持つ <code><div></code> の文脈で <code>".outer .inner"</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>".inner"</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> - -<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>独自の定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Document.querySelectorAll")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> - <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> - <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li> - <li>{{domxref("Element.querySelector()")}} および {{domxref("Element.querySelectorAll()")}}</li> - <li>{{domxref("Document.querySelector()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> -</ul> diff --git a/files/ja/web/api/document/queryselectorall/index.md b/files/ja/web/api/document/queryselectorall/index.md new file mode 100644 index 0000000000..56cab2c7da --- /dev/null +++ b/files/ja/web/api/document/queryselectorall/index.md @@ -0,0 +1,148 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - CSS セレクター + - DOM + - Document + - Finding Elements + - Locating Elements + - メソッド + - リファレンス + - Searching Elements + - Selecting Elements + - セレクター + - querySelectorAll +browser-compat: api.Document.querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +{{APIRef("DOM")}} + +{{domxref("Document")}} の **`querySelectorAll()`** メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (ライブではない) {{domxref("NodeList")}} を返します。 + +## 構文 + +```js +elementList = parentNode.querySelectorAll(selectors); +``` + +### 引数 + +- `selectors` + - : {{domxref("DOMString")}} で、照合対象となる 1 つまたは複数のセレクターを含みます。この文字列は妥当な [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)でなければならず、そうでない場合は `SyntaxError` 例外が発生します。セレクターの仕様と要素の識別の詳細は、[セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)を参照してください。複数のセレクターは、カンマで区切って指定することができます。 + +> **Note:** 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は[特殊文字のエスケープ](/ja/docs/Web/API/Document/querySelector#特殊文字のエスケープ)を参照してください。 + +### 返値 + +ライブではない {{domxref("NodeList")}} で、指定されたセレクターの少なくとも 1 つに一致する要素ごとに {{domxref("Element")}} を一つずつ含みます。または一致するものがなければ空の {{domxref("NodeList")}} です。 + +> **Note:** 指定された `selectors` が [CSS 擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を含む場合、返されるリストは常に空になります。 + +### 例外 + +- `SyntaxError` + - : 指定された `selectors` の構文が妥当ではない場合です。 + +## 例 + +### 一致するもののリストの入手 + +文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。 + +```js +const matches = document.querySelectorAll("p"); +``` + +次の例では、文書内にあるすべての {{HTMLElement("div")}} 要素のうち、 `note` または `alert` のいずれかのクラスを持つものリストを返します。 + +```js +const matches = document.querySelectorAll("div.note, div.alert"); +``` + +次に、 `<p>` 要素ののうち直近の親要素が `test` という ID を持つコンテナー内に位置し、直接の親要素が `highlighted` クラスを持つ {{HTMLElement("div")}} であるリストを取得します。 + +```js +const container = document.querySelector("#test"); +const matches = container.querySelectorAll("div.highlighted > p"); +``` + +次の例では[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)を使用しており、 `data-src` という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。 + +```js +const matches = document.querySelectorAll("iframe[data-src]"); +``` + +次の例では、ID が `userlist` の要素の中にあり、`data-active` 属性を持ち、その値が `1` であるリスト項目のリストを返すため、属性セレクターが使用されています。 + +```js +const container = document.querySelector("#userlist"); +const matches = container.querySelectorAll("li[data-active='1']"); +``` + +### 一致したリストへのアクセス + +いったん、一致した要素の {{domxref("NodeList")}} が返されると、それをちょうど配列のように見ることができます。配列が空である (`length` プロパティが 0 である) 場合は、一致がなかったということです。 + +それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。 + +```js +const highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +}); +``` + +## ユーザーのメモ + +`querySelectorAll()` は、最も一般的な JavaScript DOM ライブラリーと異なる動作を持ち、意図しない結果をもたらすことがあります。 + +### HTML + +次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。 + +```html +<div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div> +``` + +### JavaScript + +```js +const select = document.querySelector('.select'); +const inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1 です。0 ではありません! +``` + +この例で、`.outer .inner` を`<div>` に `select` クラスがついたコンテキストで選択する場合、`.outer` が検索が行われる基底要素 (`.select`) の子孫ではないにもかかわらず、`.inner` クラスの要素が見つかります。既定では、`querySelectorAll()` はセレクターの最後の要素のみを、検索スコープ内にあるかどうか検証します。 + +{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。 + +```js +const select = document.querySelector('.select'); +const inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [セレクターを使用した DOM 要素の指定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) +- CSS ガイドの[[属性セレクター]](/ja/docs/Web/CSS/Attribute_selectors) +- MDN 学習領域の[[属性セレクター]](/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) +- {{domxref("Element.querySelector()")}} および {{domxref("Element.querySelectorAll()")}} +- {{domxref("Document.querySelector()")}} +- {{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}} diff --git a/files/ja/web/api/document/requeststorageaccess/index.html b/files/ja/web/api/document/requeststorageaccess/index.html deleted file mode 100644 index b4952aa6bb..0000000000 --- a/files/ja/web/api/document/requeststorageaccess/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Document.requestStorageAccess() -slug: Web/API/Document/requestStorageAccess -tags: - - API - - DOM - - Document - - Experimental - - Reference - - Storage Access API - - requestStorageAccess - - メソッド -translation_of: Web/API/Document/requestStorageAccess ---- -<div>{{APIRef}}</div> - -<p><strong><code>requestStorageAccess()</code></strong> は {{domxref("Document")}} インターフェイスのメソッドで、ファーストパーティのストレージへのアクセスが許可されたら解決し、アクセスが拒否されたら拒否される {{jsxref("Promise")}} を返します。</p> - -<h2 id="Conditions_for_granting_storage_access" name="Conditions_for_granting_storage_access">ストレージへのアクセスが許可される条件</h2> - -<p>ストレージへのアクセスは、以下の一連のチェックに基づいて許可されます。</p> - -<ol> - <li>文書がすでにアクセスを許可されていれば、解決。</li> - <li>文書が null オリジンを持っていれば、拒否。</li> - <li>文書のフレームが主フレームであれば、解決。</li> - <li>副フレームのオリジンが主フレームのものと同じであれば、解決。</li> - <li>副フレームがサンドボックス化されていなければ、7へ飛ぶ。</li> - <li>副フレームにトークン <code>allow-storage-access-by-user-activation</code> がなければ、拒否。</li> - <li>副フレームの親フレームが最上位フレームでなければ、拒否。</li> - <li>ブラウザーがユーザージェスチャーを処理中でなければ、拒否。</li> - <li>ブラウザーが持っている追加の規則をチェック。例えば、ホワイトリスト、ブラックリスト、端末上の分類、ユーザー設定、クリックジャック防止の推測、ユーザーへの明示的なパーミッションの確認など。いくつかの規則が満たされていなければ、拒否。</li> - <li>文書にクッキーやその他のサイトストレージへのアクセスを許可し、将来の {{domxref("Document.hasStorageAccess()")}} および <code>requestStorageAccess()</code> の呼び出しのためにその事実を保存。</li> -</ol> - -<p>上記のすべての要件が満たされていると仮定すると、Firefox は、ユーザーセッション存続期間の最大24時間で、現在のセッションのファーストパーティのオリジンのしきい値数まで、要求オリジンへのストレージアクセスを自動的に許可します。 要求オリジンがストレージアクセス許可の最大許容数を超えた後、同じ閲覧セッション中に <code>requestStorageAccess()</code> を呼び出すと、ユーザーにプロンプトします。</p> - -<p>オリジンが取得できる同時ストレージアクセス許可の最大数は、現在のセッションでアクセスされた最上位オリジンの数の 1% または 5 のいずれか大きい方として現在定義されている正の整数です。 しきい値は eTLD+1 のレベルで適用されるため、例えば、<code>foo.example.com</code> と <code>bar.example.com</code> に対する2つのストレージアクセス許可は、制限に対する単一の例外としてのみカウントされます。</p> - -<p><code>requestStorageAccess()</code> 呼び出しの時点で、要求オリジンがストレージアクセスを持っている場合...</p> - -<p>...最大値より少ないオリジン:</p> - -<ul> - <li>ユーザーにプロンプトしません。</li> - <li>オリジンには、現在の最上位オリジンに対する一時的なストレージアクセス許可が与えられます。</li> - <li>要求オリジンのストレージにアクセスできるオリジンの数は、1ずつ増加します。 - <ul> - <li>この数は、<a href="/ja/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Automatic_storage_access_upon_interaction">互換性ヒューリスティック</a>によって自動アクセス許可が与えられたときにも増加することに注意してください。</li> - </ul> - </li> - <li>一時ストレージアクセス許可は次のとおりです。 - <ul> - <li>ブラウザーセッションの終了時に無効になります。</li> - <li>ディスクに永続化されません（例えば、ブラウザーがクラッシュすると持続しません）。</li> - <li>長時間のブラウザーセッションの場合は、24時間後にリセットします。</li> - </ul> - </li> -</ul> - -<p>...最大値以上のオリジン:</p> - -<ul> - <li>ユーザーにプロンプトします。</li> - <li>ユーザーが「許可」または「任意のサイトで許可」をクリックすると、要求は解決されます。</li> - <li>ユーザーが「許可しない」をクリックすると、ストレージアクセス要求は拒否され、要求オリジンは別のユーザーインタラクションを受け取ると再要求できます。</li> - <li>ユーザーがストレージを許可する場合、要求オリジンは現在の最上位オリジンの永続ストレージアクセス許可を与えられます。</li> - <li>要求オリジンのストレージにアクセスできるオリジンの数は、1ずつ増加します。</li> - <li>永続ストレージアクセスのパーミッションは次のとおりです。 - <ul> - <li>ディスクに永続化され、将来のブラウザーセッションで有効のままになります。</li> - <li>30日後にリセットします。</li> - </ul> - </li> -</ul> - -<p>一時的または永続的なストレージアクセス許可が期限切れになると、要求オリジンのストレージアクセスを持つオリジンの数が1ずつ減ります。</p> - -<div class="blockIndicator note"> -<p><strong>注</strong>: 要求オリジンが<a href="/ja/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Tracking_protection_explained">追跡オリジン（tracking origin）として分類</a>されていない場合、アクセス要求には、ページがリロードされると消滅する一時的なストレージアクセス許可が自動的に付与されます。 この場合、ユーザーにはプロンプトが表示されないため、<code>requestStorageAccess()</code> を呼び出しても、{{domxref("Document.hasStorageAccess()")}} によって返される値を変更する以外に副作用はありません。</p> -</div> - -<h2 id="Debugging" name="Debugging">デバッグ</h2> - -<p>ストレージアクセス許可のしきい値により、Firefox がユーザーにアクセスをプロンプトする条件の下でウェブサイトをテストすることがより難しくなる場合があります。 テストを簡単にするために、<code>requestStorageAccess()</code> 呼び出し時のプロンプトを制御する <code>about:config</code> に次の2つの設定を追加しました。</p> - -<ul> - <li><code>dom.storage_access.auto_grants</code> を <code>false</code> に設定して、一時ストレージアクセス許可の自動許可を無効にすることができます。 追跡者（trackers）として分類されたオリジンによる <code>requestStorageAccess()</code> の呼び出しはすべて、プロンプトをトリガーします。</li> - <li><code>dom.storage_access.max_concurrent_auto_grants</code> は、ユーザーがプロンプトを受け取り始めるストレージアクセス許可のしきい値数を制御します。 例えば、<code>requestStorageAccess()</code> が呼び出される最初のサイトでアクセスを自動的に許可し、その後プロンプトするように Firefox を構成する場合、<code>dom.storage_access.max_concurrent_auto_grants</code> 設定の値を 1 に調整する必要があります。</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>promise</em> = document.requestStorageAccess();</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<p>なし。</p> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>ファーストパーティのストレージへのアクセスが許可されたら <code>undefined</code> で満たされ、アクセスが拒否されたら拒否される {{jsxref("Promise")}} です。</p> - -<p>Promise が解決されると、 Promise が満たされたか拒否されたかに関わらず、ユーザージェスチャーが処理されているかのように解決ハンドラーが実行されます。</p> - -<ul> - <li>前者の場合、コードはユーザーのアクティベーションを必要とする API の呼び出しを開始でき、物事を前に進めることができます。</li> - <li>後者の場合、コードはユーザーになぜ要求に失敗したのか、何を続けることができるかを知らせるために実行することができます (例えば、必要な場合はログインを促すなど)。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">document.requestStorageAccess().then( - () => { console.log('access granted') }, - () => { console.log('access denied') } -);</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ投稿の <a href="https://webkit.org/blog/8124/introducing-storage-access-api/">Introducing Storage Access API</a>、および <a href="https://github.com/whatwg/html/issues/3338">WHATWG HTML issue 3338 — Proposal: Storage Access API</a> で見ることができます。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Document.requestStorageAccess")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<p><a href="/ja/docs/Web/API/Storage_Access_API">Storage Access API</a></p> diff --git a/files/ja/web/api/document/requeststorageaccess/index.md b/files/ja/web/api/document/requeststorageaccess/index.md new file mode 100644 index 0000000000..75080d7b15 --- /dev/null +++ b/files/ja/web/api/document/requeststorageaccess/index.md @@ -0,0 +1,117 @@ +--- +title: Document.requestStorageAccess() +slug: Web/API/Document/requestStorageAccess +tags: + - API + - DOM + - Document + - メソッド + - Reference + - Storage Access API + - requestStorageAccess +browser-compat: api.Document.requestStorageAccess +translation_of: Web/API/Document/requestStorageAccess +--- +{{APIRef}} + +**`requestStorageAccess()`** は {{domxref("Document")}} インターフェイスのメソッドで、ファーストパーティのストレージへのアクセスが許可されたら解決し、アクセスが拒否されたら拒否される {{jsxref("Promise")}} を返します。 + +## ストレージへのアクセスが許可される条件 + +ストレージへのアクセスは、以下の一連のチェックに基づいて許可されます。 + +1. 文書がすでにアクセスを許可されていれば、解決。 +2. 文書のオリジンが null であれば、拒否。 +3. 文書のフレームが主フレームであれば、解決。 +4. 副フレームのオリジンが主フレームのものと同じであれば、解決。 +5. 副フレームがサンドボックス化されていなければ、 7 へ飛ぶ。 +6. 副フレームにトークン `allow-storage-access-by-user-activation` がなければ、拒否。 +7. 副フレームの親フレームが最上位フレームでなければ、拒否。 +8. ブラウザーがユーザージェスチャーを処理中でなければ、拒否。 +9. ブラウザーが持っている追加の規則をチェック。例えば、ホワイトリスト、ブラックリスト、端末上の分類、ユーザー設定、クリックジャック防止の推測、ユーザーへの明示的な権限の確認など。いくつかの規則が満たされていなければ、拒否。 +10. 文書にクッキーやその他のサイトストレージへのアクセスを許可し、将来の {{domxref("Document.hasStorageAccess()")}} および `requestStorageAccess()` の呼び出しのためにその事実を保存。 + +上記のすべての要件が満たされていると仮定すると、Firefox は、ユーザーセッション存続期間の最大 24 時間で、現在のセッションのファーストパーティのオリジンのしきい値数まで、要求側のオリジンへのストレージアクセスを自動的に許可します。 要求側のオリジンがストレージアクセス許可の最大許容数を超えた後、同じ閲覧セッション中に `requestStorageAccess()` を呼び出すと、ユーザーに確認します。 + +オリジンが取得できる同時ストレージアクセス許可の最大数は、現在のセッションでアクセスしている最上位のオリジンの数の 1% または 5 のいずれか大きい方として現在定義されている正の整数です。しきい値は eTLD+1 のレベルで適用されるため、例えば、`foo.example.com` と `bar.example.com` に対する 2 つのストレージアクセス許可は、制限に対する単一の例外としてのみカウントされます。 + +`requestStorageAccess()` 呼び出しの時点で、要求側のオリジンがストレージアクセスを持っている場合... + +...オリジン数が最大値より少ない場合: + +- ユーザーに確認しません。 +- オリジンには、現在の最上位オリジンに対する一時的なストレージアクセス許可が与えられます。 +- 要求側のオリジンのストレージにアクセスできるオリジンの数は、 1 ずつ増加します。 + + - この数は、[互換性ヒューリスティック](/ja/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Automatic_storage_access_upon_interaction)によって自動アクセス許可が与えられたときにも増加することに注意してください。 + +- 一時ストレージアクセス許可は次のとおりです。 + + - ブラウザーセッションの終了時に無効になります。 + - ディスクに永続化されません（例えば、ブラウザーがクラッシュすると持続しません）。 + - 長時間のブラウザーセッションの場合は、24時間後にリセットします。 + +...オリジン数が最大値以上の場合: + +- ユーザーに確認します。 +- ユーザーが「許可」または「任意のサイトで許可」をクリックすると、要求は解決されます。 +- ユーザーが「許可しない」をクリックすると、ストレージアクセス要求は拒否され、要求側のオリジンは別のユーザーインタラクションを受け取ると再要求できます。 +- ユーザーがストレージを許可する場合、要求側のオリジンは現在の最上位オリジンの永続ストレージアクセス許可を与えられます。 +- 要求側のオリジンのストレージにアクセスできるオリジンの数は、 1 ずつ増加します。 +- 永続ストレージアクセスの権限は次のとおりです。 + + - ディスクに永続化され、将来のブラウザーセッションで有効のままになります。 + - 30 日後にリセットします。 + +一時的または永続的なストレージアクセス許可が期限切れになると、要求側のオリジンのストレージアクセスを持つオリジンの数が1ずつ減ります。 + +> **Note:** 要求側のオリジンが[追跡オリジン (tracking origin) として分類](/ja/docs/Web/Privacy/Storage_Access_Policy#Tracking_protection_explained)されていない場合、アクセス要求には、ページが再読み込みされると消滅する一時的なストレージアクセス許可が自動的に付与されます。 この場合、ユーザーにはプロンプトが表示されないため、`requestStorageAccess()` を呼び出しても、{{domxref("Document.hasStorageAccess()")}} によって返される値を変更する以外に副作用はありません。 + +## デバッグ + +ストレージアクセス許可のしきい値により、Firefox がユーザーにアクセスをプロンプトする条件の下でウェブサイトをテストすることがより難しくなる場合があります。 テストを簡単にするために、`about:config` に次の 2 つの設定を追加して `requestStorageAccess()` 呼び出し時のプロンプトを制御できるようにしました。 + +- `dom.storage_access.auto_grants` を `false` に設定して、一時ストレージアクセス許可の自動許可を無効にすることができます。 追跡者 (trackers) として分類されたオリジンによる `requestStorageAccess()` の呼び出しはすべて、プロンプトを起動します。 +- `dom.storage_access.max_concurrent_auto_grants` は、ユーザーがプロンプトを受け取り始めるストレージアクセス許可のしきい値数を制御します。 例えば、`requestStorageAccess()` が呼び出される最初のサイトでアクセスを自動的に許可し、その後プロンプトを表示するように Firefox を構成した場合、`dom.storage_access.max_concurrent_auto_grants` 設定の値を 1 に調整する必要があります。 + +## 構文 + +```js +var promise = document.requestStorageAccess(); +``` + +### 引数 + +なし。 + +### 返値 + +ファーストパーティのストレージへのアクセスが許可されたら `undefined` で履行され、アクセスが拒否されたら拒否される {{jsxref("Promise")}} です。 + +プロミスが解決されると、プロミスが履行されたか拒否されたかに関わらず、ユーザージェスチャーが処理されているかのように解決ハンドラーが実行されます。 + +- 前者の場合、コードはユーザーのアクティベーションを必要とする API の呼び出しを開始でき、物事を前に進めることができます。 +- 後者の場合、コードはユーザーになぜ要求に失敗したのか、何を続けることができるかを知らせるために実行することができます (例えば、必要な場合はログインを促すなど)。 + +## 例 + +```js +document.requestStorageAccess().then( + () => { console.log('access granted') }, + () => { console.log('access denied') } +); +``` + +## 仕様書 + +この API はまだ提案段階にあります。 — 標準化プロセスはまだ始まっていません。現在のところ、この API の詳細の仕様書は、アップルのブログ記事の [Introducing +Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/)、および [Storage Access API proposal in the +Privacy CG](https://github.com/privacycg/storage-access) で見ることができます。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +[Storage Access API](/en-US/docs/Web/API/Storage_Access_API) diff --git a/files/ja/web/api/document_object_model/examples/index.html b/files/ja/web/api/document_object_model/examples/index.html deleted file mode 100644 index 6762b4c2d4..0000000000 --- a/files/ja/web/api/document_object_model/examples/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: 例 -slug: Web/API/Document_Object_Model/Examples -tags: - - DOM - - DOM Reference -translation_of: Web/API/Document_Object_Model/Examples ---- -<div> - {{ApiRef}}</div> -<p>この章では、DOM を利用したウェブと XML 開発のより長い例をいくつか紹介します。可能な限りこれらの例ではドキュメントオブジェクトを操作する上でよく用いられる API や技法や JavaScript のパターンを利用しています。</p> -<h2 id="Example_1.3A_height_and_width" name="Example_1.3A_height_and_width">例 1: 高さと幅</h2> -<p>以下では、画像の大きさを変えるにあたって、<code>height</code> と <code>width</code> プロパティを使っている例を示します。</p> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> - -<head> -<title>width/height example</title> -<script> -function init() { - var arrImages = new Array(3); - - arrImages[0] = document.getElementById("image1"); - arrImages[1] = document.getElementById("image2"); - arrImages[2] = document.getElementById("image3"); - - var objOutput = document.getElementById("output"); - var strHtml = "<ul>"; - - for (var i = 0; i < arrImages.length; i++) { - strHtml += "<li>image" + (i+1) + - ": height=" + arrImages[i].height + - ", width=" + arrImages[i].width + - ", style.height=" + arrImages[i].style.height + - ", style.width=" + arrImages[i].style.width + - "<\/li>"; - } - - strHtml += "<\/ul>"; - objOutput.innerHTML = strHtml; -} -</script> -</head> -<body onload="init();"> - -<p>Image 1: no height, width, or style - <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> -</p> - -<p>Image 2: height="50", width="500", but no style - <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" - height="50" width="500"> -</p> - -<p>Image 3: no height, width, but style="height: 50px; width: 500px;" - <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" - style="height: 50px; width: 500px;"> -</p> - -<div id="output"> </div> -</body> -</html> -</pre> -<p><code>height</code> と <code>width</code> は <code>OBJECT</code> と <code>APPLET</code> 要素のプロパティでもあります。</p> -<h2 id="Example_2.3A_Image_Attributes" name="Example_2.3A_Image_Attributes">例 2: イメージの属性</h2> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> - -<head> -<title>Modifying an image border</title> -<script> -function setBorderWidth(width) { - document.getElementById("img1").style.borderWidth = width + "px"; -} -</script> -</head> - -<body> -<p> - <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" - height="100" alt="border test"> -</p> - -<form name="FormName"> - <p><input type="button" value="Make border 20px-wide" - onclick="setBorderWidth(20);"> <input type="button" value="Make border 5px-wide" - onclick="setBorderWidth(5);"></p> -</form> - -</body> -</html> -</pre> -<h2 id="Example_3.3A_Manipulating_Styles" name="Example_3.3A_Manipulating_Styles">例 3: スタイルを操作する</h2> -<p>この簡単なサンプルでは、HTML のパラグラフ (p) 要素の基本的ないくつかのスタイルプロパティは、DOM から検索設定される要素のスタイルオブジェクトとそのオブジェクトの CSS スタイルプロパティを使って、アクセスされます。この場合は、個々のスタイルが直接操作されています。次の例 (例 4 を参照) では、スタイルシートとそのルールを使用して、全ドキュメントに対してスタイルを変更することができます。</p> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> - -<head> -<title>Changing color and font-size example</title> -<script> -function changeText() { - var p = document.getElementById("pid"); - p.style.color = "blue" - p.style.fontSize = "18pt" -} -</script> -</head> - -<body> - -<p id="pid" - onclick="window.location.href = 'http://www.cnn.com/';">linker</p> -<form> - -<p><input value="rec" type="button" onclick="changeText();"></p> - -</form> - -</body> -</html> -</pre> -<h2 id="Example_4.3A_Using_Stylesheets" name="Example_4.3A_Using_Stylesheets">例 4: スタイルシートを利用する</h2> -<p>document オブジェクト上の styleSheets プロパティは、その document に読み込まれたスタイルシートの一覧を返します。このページの例に示されているように、stylesheet、style、CSSRule オブジェクトを利用して、これらのスタイルシートとそのルールに個別にアクセスが可能です。そしてこの例では、すべてのスタイル・ルールのセレクタ (selector) がコンソールへ表示されます。</p> -<pre class="brush:js">var ss = document.styleSheets; - -for(var i = 0; i < ss.length; i++) { - for(var j = 0; j < ss[i].cssRules.length; j++) { - dump( ss[i].cssRules[j].selectorText + "\n" ); - } -}</pre> -<p>以下の 3 つのルールが定義される単一のスタイルシートが附属されているドキュメント用に対して:</p> -<pre class="brush:css">body { background-color: darkblue; } -p { font-face: Arial; font-size: 10pt; margin-left: .125in; } -#lumpy { display: none; } -</pre> -<p>このスクリプトは以下の項目を表示します:</p> -<pre>BODY -P -#LUMPY -</pre> -<h2 id="Example_5.3A_Event_Propagation" name="Example_5.3A_Event_Propagation">例 5: イベント伝播 (propagation)</h2> -<p>この例は DOM でイベントが発生したときの対処方法を、ごく単純化して紹介します。下記の HTML 文書の BODY が読み込まれる時、イベントリスナーが TABLE の第 1 行を使って登録されます。イベントリスナーは関数 stopEvent を実行することでイベントを処理します。この関数は、table の一番下のセルの値を変更します。</p> -<p>しかし、stopEvent はまたイベントオブジェクトのメソッド {{domxref("event.stopPropagation")}} を呼出します。このメソッドはイベントが発生してこれ以上 DOM に入り込むのを防止します。テーブル自体は、クリックされた時、メッセージを表示する必要のある {{domxref("element.onclick","onclick")}} イベントハンドラを備えています。しかし stopEvent メソッドは伝播を停止していますので、テーブル内のデータが更新された後では、イベントは効率的に終了し、これを確認するための警告ダイアログが表示されます。</p> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>Event Propagation</title> - -<style> -#t-daddy { border: 1px solid red } -#c1 { background-color: pink; } -</style> - -<script> -function stopEvent(ev) { - c2 = document.getElementById("c2"); - c2.innerHTML = "hello"; - - // this ought to keep t-daddy from getting the click. - ev.stopPropagation(); - alert("event propagation halted."); -} - -function load() { - elem = document.getElementById("tbl1"); - elem.addEventListener("click", stopEvent, false); -} -</script> -</head> - -<body onload="load();"> - -<table id="t-daddy" onclick="alert('hi');"> - <tr id="tbl1"> - <td id="c1">one</td> - </tr> - <tr> - <td id="c2">two</td> - </tr> -</table> - -</body> -</html> -</pre> -<h2 id="Example_6.3A_getComputedStyle" name="Example_6.3A_getComputedStyle">例 6: getComputedStyle</h2> -<p>この例は、要素の <code>style</code> 属性あるいは JavaScript (例: <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>) で設定されていないスタイルを取得する {{domxref("window.getComputedStyle")}} メソッドの使用方法を示します。JavaScript で設定されていないケースは、もっと直接的な <a href="/ja/docs/Web/API/element.style">elt.style</a> プロパティを使って取得可能です。そのプロパティは <a href="/ja/docs/Web/API/CSS">DOM CSS プロパティリスト</a> に一覧となっています。</p> -<p><code>getComputedStyle()</code> は <code>ComputedCSSStyleDeclaration</code> オブジェクトを返し、下記のサンプルにあるように、このオブジェクトの <code>getPropertyValue()</code> メソッドによって個々のスタイルプロパティを参照できます。</p> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> - -<head> -<title>getComputedStyle example</title> - -<script> -function cStyles() { - var RefDiv = document.getElementById("d1"); - - var txtHeight = document.getElementById("t1"); - var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); - txtHeight.value = h_style; - - var txtWidth = document.getElementById("t2"); - var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); - - txtWidth.value = w_style; - - var txtBackgroundColor = document.getElementById("t3"); - var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); - - txtBackgroundColor.value = b_style; -} -</script> - -<style> -#d1 { margin-left: 10px; background-color: rgb(173, 216, 230); -height: 20px; max-width: 20px; } -</style> - -</head> - -<body> - -<div id="d1">&nbsp;</div> - -<form action=""> -<p><button type="button" onclick="cStyles();">getComputedStyle</button> - height<input id="t1" type="text" value="1"> - max-width<input id="t2" type="text" value="2"> - bg-color<input id="t3" type="text" value="3"></p> -</form> - -</body> -</html> -</pre> -<h2 id="Example_7.3A_Displaying_Event_Object_Properties" name="Example_7.3A_Displaying_Event_Object_Properties">例 7: イベントオブジェクトのプロパティを表示する</h2> -<p>この例では、DOM メソッドを使って、 {{domxref("window.onload")}} <a href="/ja/docs/Web/API/event">event</a> オブジェクトのプロパティとそれらの値をすべて表として表示しています。また、オブジェクトのプロパティを反復し、それらの値を取得するために、for...in ループを使った役に立つテクニックをお見せします。</p> -<p>イベントオブジェクトのプロパティはブラウザによって大きく異なります。<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3C DOM 2 Events 仕様書</a> に標準のプロパティが載っていますが、多くのブラウザはこれらを大幅に拡張しています。</p> -<p>以下のコードをテキストファイルとして保存し、様々なブラウザで読み込ませてみてください。プロパティの数や名称が異なることに驚かれることでしょう。ページにいくつか要素を追加して、異なるイベントハンドラからこの関数を呼び出してみるのも良いでしょう。</p> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<title>Show Event properties</title> - -<style> -table {border-collapse: collapse;} -thead {font-weight: bold;} -td {padding: 2px 10px 2px 10px;} -.odd {background-color: #efdfef;} -.even {background-color: #ffffff;} -</style> - -<script> - -function showEventProperties(e) { - function addCell(row, text) { - var cell = row.insertCell(-1); - cell.appendChild(document.createTextNode(text)); - } - - var e = e || window.event; - document.getElementById('eventType').innerHTML = e.type; - - var table = document.createElement('table'); - var thead = table.createTHead(); - var row = thead.insertRow(-1); - var lableList = ['#', 'Property', 'Value']; - var len = lableList.length; - - for (var i = 0; i < len; i++) { - addCell(row, lableList[i]); - } - - var tbody = document.createElement('tbody'); - table.appendChild(tbody); - - for (var p in e) { - row = tbody.insertRow(-1); - row.className = (row.rowIndex % 2)? 'odd':'even'; - addCell(row, row.rowIndex); - addCell(row, p); - addCell(row, e[p]); - } - - document.body.appendChild(table); -} - -window.onload = function(event){ - showEventProperties(event); -} -</script> - -<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> -</pre> -<h2 id="Example_8.3A_Using_the_DOM_Table_Interface" name="Example_8.3A_Using_the_DOM_Table_Interface">例 8: DOM のテーブルインタフェースを使用する</h2> -<p>DOM の HTMLTableElement インタフェースによって、テーブルを生成、操作するための便利なメソッドがいくつか提供されています。よく利用される 2 つのメソッドは <code><a href="/ja/docs/Web/API/table.insertRow">table.insertRow</a></code> と <code><a href="/ja/docs/Web/API/table/row.insertCell">row.insertCell</a></code> です。</p> -<p>以下の例では、既存のテーブルに行といくつかのセルを追加しています。</p> -<pre class="brush:html"><table id="table0"> - <tr> - <td>Row 0 Cell 0</td> - <td>Row 0 Cell 1</td> - </tr> -</table> - -<script> -var table = document.getElementById('table0'); -var row = table.insertRow(-1); -var cell, - text; - -for (var i = 0; i < 2; i++) { - cell = row.insertCell(-1); - text = 'Row ' + row.rowIndex + ' Cell ' + i; - cell.appendChild(document.createTextNode(text)); -} -</script> -</pre> -<h3 id="Notes" name="Notes">注記</h3> -<ul> - <li>テーブルの {{domxref("element.innerHTML","innerHTML")}} プロパティは、テーブル全体あるいはセルの内容を記述するために使うことはできますが、テーブルを操作するために使うべきではありません。</li> - <li>DOM Core メソッドの {{domxref("document.createElement")}} と {{domxref("Node.appendChild")}} を使って行とセルを生成する場合、他のブラウザでは table 要素に直接追加できる (行は最後の tbody 要素に追加される) のに対して、IE ではそれらを tbody 要素に対して追加する必要があります。</li> - <li><a href="/ja/docs/Web/API/HTMLTableElement#Methods">table interface</a> には、この他にも、テーブルを生成したり操作するのに利用できる多くの便利なメソッドがあります。</li> -</ul> diff --git a/files/ja/web/api/document_object_model/examples/index.md b/files/ja/web/api/document_object_model/examples/index.md new file mode 100644 index 0000000000..bd2340742a --- /dev/null +++ b/files/ja/web/api/document_object_model/examples/index.md @@ -0,0 +1,376 @@ +--- +title: DOM を使用したウェブと XML の開発の例 +slug: Web/API/Document_Object_Model/Examples +tags: + - DOM + - DOM リファレンス +translation_of: Web/API/Document_Object_Model/Examples +--- +{{DefaultAPISidebar("DOM")}} + +この章では、DOM を利用したウェブと XML 開発のより長い例をいくつか紹介します。可能な限りこれらの例ではドキュメントオブジェクトを操作する上でよく用いられる API や技法や JavaScript のパターンを利用しています。 + +## 例 1: 高さと幅 + +以下の例は、様々な寸法の画像について、`height` と `width` プロパティを使用しています。 + +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" + src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +``` + +## 例 2: 画像の属性 + +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +``` + +## 例 3: スタイルの操作 + +この簡単な例では、HTML の段落要素のいくつかの基本的なスタイルプロパティに、要素上のスタイルオブジェクトと、DOM から取得したり設定したりできるそのオブジェクトの CSS スタイルプロパティを使ってアクセスしています。この例では、個々のスタイルを直接操作しています。次の例 (例 4 参照) では、スタイルシートとそのルールを使って、文書全体のスタイルを変更することができます。 + +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> + +</body> +</html> +``` + +## 例 4: スタイルシートの使用 + +{{domxref("document")}} オブジェクト上の {{domxref("document.styleSheets", "styleSheets")}} プロパティは、その文書に読み込まれたスタイルシートの一覧を返します。このページの例に示されているように、stylesheet、style、{{domxref("CSSRule")}} オブジェクトを利用して、これらのスタイルシートとその規則に個別にアクセスが可能です。そしてこの例では、すべてのスタイル規則のセレクターがコンソールへ表示されます。 + +```js +var ss = document.styleSheets; + +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +} +``` + +以下の 3 つの規則が定義される単一のスタイルシートが附属されているドキュメント用に対して、 + +```css +body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +``` + +このスクリプトは以下の項目を表示します。 + + BODY + P + #LUMPY + +## 例 5: イベント伝播 (propagation) + +この例は DOM でイベントが発生したときの対処方法を、ごく単純化して紹介します。下記の HTML 文書の BODY が読み込まれる時、イベントリスナーが TABLE の第 1 行を使って登録されます。イベントリスナーは関数 stopEvent を実行することでイベントを処理します。この関数は、table の一番下のセルの値を変更します。 + +しかし、stopEvent はまたイベントオブジェクトのメソッド {{domxref("event.stopPropagation")}} を呼び出します。このメソッドはイベントが発生してこれ以上 DOM に入り込むのを防止します。テーブル自体は、クリックされた時、メッセージを表示する必要のある {{domxref("GlobalEventHandlers.onclick","onclick")}} イベントハンドラーを備えています。しかし stopEvent メソッドは伝播を停止していますので、テーブル内のデータが更新された後では、イベントは効率的に終了し、これを確認するための警告ダイアログが表示されます。 + +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> + +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> + +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; + + // this ought to keep t-daddy from getting the click. + ev.stopPropagation(); + alert("event propagation halted."); +} + +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +``` + +## 例 6: getComputedStyle + +この例は、{{domxref("window.getComputedStyle")}} メソッドを使用して要素の `style` 属性あるいは JavaScript (例: `elt.style.backgroundColor="rgb(173, 216, 230)"`) で設定されていないスタイルを取得する方法を示します。後者の種類のスタイルは、もっと直接的な {{domxref("HTMLElement.style", "elt.style")}} プロパティを使って取得でき、そのプロパティは [DOM CSS プロパティ一覧](/ja/docs/Web/CSS/Reference)に挙げられています。 + +`getComputedStyle()` は {{domxref("CSSStyleDeclaration")}} オブジェクトを返し、下記のサンプルにあるように、このオブジェクトの {{domxref("CSSStyleDeclaration.getPropertyValue()", "getPropertyValue()")}} メソッドによって個々のスタイルプロパティを参照できます。 + +```html +<!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); + + txtBackgroundColor.value = b_style; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> + +</head> + +<body> + +<div id="d1"> </div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> + +</body> +</html> +``` + +## 例 7: イベントオブジェクトのプロパティの表示 + +この例では、DOM メソッドを使って、 {{domxref("GlobalEventHandlers.onload")}} [イベント](/ja/docs/Web/API/Event)オブジェクトのプロパティとそれらの値をすべて表として表示しています。また、オブジェクトのプロパティを反復し、それらの値を取得するために、for...in ループを使った役に立つテクニックをお見せします。 + +イベントオブジェクトのプロパティはブラウザーによって大きく異なります。 [WHATWG DOM Standard](https://dom.spec.whatwg.org) に標準のプロパティが載っていますが、多くのブラウザーはこれらを大幅に拡張しています。 + +以下のコードをテキストファイルとして保存し、様々なブラウザーで読み込ませてみてください。プロパティの数や名称が異なることに驚かれることでしょう。ページにいくつか要素を追加して、異なるイベントハンドラーからこの関数を呼び出してみるのも良いでしょう。 + +```html +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> + +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } + +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var labelList = ['#', 'Property', 'Value']; + var len = labelList.length; + + for (var i=0; i<len; i++) { + addCell(row, labelList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} + +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +``` + +## 例 8: DOM のテーブルインタフェースの使用 + +DOM の {{domxref("HTMLTableElement")}} インタフェースで、テーブルを生成、操作するための便利なメソッドがいくつか提供されています。よく利用される 2 つのメソッドは {{domxref("HTMLTableElement.insertRow")}} と {{domxref("HTMLTableRowElement.insertCell")}} です。 + +以下の例では、既存のテーブルに行といくつかのセルを追加しています。 + +```html +<table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +``` + +### メモ + +- テーブルの {{domxref("element.innerHTML","innerHTML")}} プロパティは、テーブル全体あるいはセルの内容を記述するために使うことはできますが、テーブルを操作するために使うべきではありません。 +- DOM Core メソッドの {{domxref("document.createElement")}} と {{domxref("Node.appendChild")}} を使って行とセルを生成する場合、他のブラウザーでは table 要素に直接追加できる (行は最後の {{HTMLElement("tbody")}} 要素に追加される) のに対して、IE ではそれらを `<tbody>` 要素に対して追加する必要があります。 +- [`HTMLTableElement` インターフェイス](/ja/docs/Web/API/HTMLTableElement#methods)には、この他にも、テーブルを生成したり操作するのに利用できる多くの便利なメソッドがあります。 diff --git a/files/ja/web/api/element/scroll/index.md b/files/ja/web/api/element/scroll/index.md new file mode 100644 index 0000000000..541cc810e6 --- /dev/null +++ b/files/ja/web/api/element/scroll/index.md @@ -0,0 +1,65 @@ +--- +title: Element.scroll() +slug: Web/API/Element/scroll +tags: + - API + - Element + - メソッド + - Reference + - Scroll +browser-compat: api.Element.scroll +translation_of: Web/API/Element/scroll +--- +{{APIRef}} + +**`scroll()`** は {{domxref("Element")}} インターフェイスのメソッドで、指定された要素内の特定の座標の組まで要素をスクロールさせます。 + +## 例 + +```js +element.scroll(x-coord, y-coord) +element.scroll(options) +``` + +### 引数 + +- `x-coord` + - : 左上に表示させたいこの要素の横軸方向のピクセルです。 +- `y-coord` + - : 左上に表示させたいこの要素の縦軸方向のピクセルです。 + +\- または - + +- `options` + - : 以下の引数を含む辞書オブジェクトです。 + - `top` + - : ウィンドウまたは要素をスクロールする Y 軸方向のピクセル数を指定します。 + - `left` + - : ウィンドウまたは要素をスクロールする X 軸方向のピクセル数を指定します。 + - `behavior` + - : スクロールをスムーズなアニメーションで行うか (`smooth`)、単一のジャンプで即座に行うか (`instant`)、ブラウザーの選択に任せるか (`auto`、既定値) を指定します。 + +## 例 + +```js +// 1000 番目の垂直ピクセルを要素の先頭に置く +element.scroll(0, 1000); +``` + +`options` の使用例: + +```js +element.scroll({ + top: 100, + left: 100, + behavior: 'smooth' +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/effecttiming/index.html b/files/ja/web/api/keyframeeffect/keyframeeffect/index.html index ba4e93cb98..60ce39d1af 100644 --- a/files/ja/web/api/effecttiming/index.html +++ b/files/ja/web/api/keyframeeffect/keyframeeffect/index.html @@ -1,7 +1,8 @@ --- title: EffectTiming -slug: Web/API/EffectTiming +slug: Web/API/KeyframeEffect/KeyframeEffect translation_of: Web/API/EffectTiming +original_slug: Web/API/EffectTiming --- <div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div> diff --git a/files/ja/web/api/mediacapabilitiesinfo/index.html b/files/ja/web/api/mediacapabilities/encodinginfo/index.html index 5f512672c4..2222482f6a 100644 --- a/files/ja/web/api/mediacapabilitiesinfo/index.html +++ b/files/ja/web/api/mediacapabilities/encodinginfo/index.html @@ -1,6 +1,6 @@ --- title: MediaCapabilitiesInfo -slug: Web/API/MediaCapabilitiesInfo +slug: Web/API/MediaCapabilities/encodingInfo tags: - API - Audio @@ -11,6 +11,7 @@ tags: - Reference - Video translation_of: Web/API/MediaCapabilitiesInfo +original_slug: Web/API/MediaCapabilitiesInfo --- <p>{{APIRef("Media Capabilities API")}}</p> diff --git a/files/ja/web/api/window/performance/index.html b/files/ja/web/api/performance_property/index.html index 2eb08da672..b0e3ece5c2 100644 --- a/files/ja/web/api/window/performance/index.html +++ b/files/ja/web/api/performance_property/index.html @@ -1,7 +1,8 @@ --- title: Window.performance -slug: Web/API/Window/performance +slug: Web/API/performance_property translation_of: Web/API/Window/performance +original_slug: Web/API/Window/performance --- <p>{{APIRef("High Resolution Time")}}</p> diff --git a/files/ja/web/api/rtcconfiguration/index.html b/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.html index 2e26eaceef..1527f34ea2 100644 --- a/files/ja/web/api/rtcconfiguration/index.html +++ b/files/ja/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -1,7 +1,8 @@ --- title: RTCConfiguration -slug: Web/API/RTCConfiguration +slug: Web/API/RTCPeerConnection/RTCPeerConnection translation_of: Web/API/RTCConfiguration +original_slug: Web/API/RTCConfiguration --- <p>{{APIRef("WebRTC")}}<span class="seoSummary"><code>RTCConfigurationは、</code>{{domxref("RTCPeerConnection")}} オブジェクトを介して ice server設定を初期化するためのものです 。 </span></p> diff --git a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html index 818b883586..6ab95c9ef6 100644 --- a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html @@ -46,7 +46,7 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API <p>音声源はいくつかの方法で取得できます:</p> <ul> - <li>JavaScript内部で(オシレーターのような)オディオノードにより、直接音声を生成。</li> + <li>JavaScript内部で(オシレーターのような)オーディオノードにより、直接音声を生成。</li> <li>未加工の PCM データから生成(この場合、該当オーディオコンテキストは、対応している音声フォーマット形式へのデコード手段を有しています)。</li> <li>({{HTMLElement("video")}} や {{HTMLElement("audio")}} のような)HTML media elements より取得。</li> <li>(webcam やマイクロフォンのような)<a href="/ja/docs/Web/API/WebRTC_API">Web RTC</a> {{domxref("MediaStream")}} により直接取得。</li> @@ -91,7 +91,7 @@ var buffer = context.createBuffer(2, 22050, 44100);</pre> <br> 第一に、人間の耳の<a href="https://en.wikipedia.org/wiki/Hearing_range">可聴範囲</a>は、大雑把に 20 から 20000Hz の範囲です。<a href="https://ja.wikipedia.org/wiki/%E6%A8%99%E6%9C%AC%E5%8C%96%E5%AE%9A%E7%90%86">Nyquist-Shannon のサンプリング定理</a>により、サンプリング周波数は再現したい最大周波数の 2倍以上でなくてはなりません。したがって、サンプリングレートは 40kHz以上でなくてはなりません。<br> <br> - 第二に、シグナルはサンプリング前に、<a href="https://ja.wikipedia.org/wiki/%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E9%9B%91%E9%9F%B3">偽信号</a>の発生をさせないため、<a href="https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%BC%E3%83%91%E3%82%B9%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF">ローパスフリタリング</a>されていなければなりません。理想的ローパスフィルターが 20kHz以下の周波数を(減衰させずに)完璧に通し、20kHz以上の周波数を完璧に遮断する一方で、実際には、周波数が部分的に減衰する場所となる、<a href="https://en.wikipedia.org/wiki/Transition_band">トランジションバンド</a>が必要です。このバンドが広くなるにつれ、<a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter">減衰フィルター</a>を作るのは簡単かつ効率的になります。44.1kHz サンプリング周波数は、2.05kHz のトランジションバンドを与えます。</p> + 第二に、シグナルはサンプリング前に、<a href="https://ja.wikipedia.org/wiki/%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E9%9B%91%E9%9F%B3">偽信号</a>の発生をさせないため、<a href="https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%BC%E3%83%91%E3%82%B9%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF">ローパスフィルタリング</a>されていなければなりません。理想的ローパスフィルターが 20kHz以下の周波数を(減衰させずに)完璧に通し、20kHz以上の周波数を完璧に遮断する一方で、実際には、周波数が部分的に減衰する場所となる、<a href="https://en.wikipedia.org/wiki/Transition_band">トランジションバンド</a>が必要です。このバンドが広くなるにつれ、<a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter">減衰フィルター</a>を作るのは簡単かつ効率的になります。44.1kHz サンプリング周波数は、2.05kHz のトランジションバンドを与えます。</p> </div> <p>この呼び出しをする場合、チャンネル数2 のステレオバッファーを取得し、AudioContext 上で(非常に一般的で、通常のサウンドカードではほとんどはレートとなる)44100Hz にて再生される音源が、0.5秒間続きます: 22050 フレーム/44100Hz = 0.5 秒。</p> @@ -203,7 +203,7 @@ var buffer = context.createBuffer(1, 22050, 22050);</pre> <tr> <td><code>2</code> <em>(Stereo)</em></td> <td><code>1</code> <em>(Mono)</em></td> - <td><em>モノラルからステレオへのダウンミックス。</em>><br> + <td><em>モノラルからステレオへのダウンミックス。</em><br> (<code>L</code> と <code>R</code> の)両入力チャンネルは等しく結合され、単一出力チャンネル(<code>M</code>)になります。<br> <code>output.M = 0.5 * (input.L + input.R)</code></td> </tr> diff --git a/files/ja/web/css/@charset/index.html b/files/ja/web/css/@charset/index.html index 570f4bc9c0..2a57f026b1 100644 --- a/files/ja/web/css/@charset/index.html +++ b/files/ja/web/css/@charset/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/@charset --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>@charset</code></strong> <a href="/ja/docs/CSS/At-rule" title="At-rule">at-規則</a> は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。<a href="/ja/docs/CSS/Syntax#nested_statements" title="CSS/Syntax#nested_statements">入れ子の文</a> でないとしても、<a href="/ja/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">条件付きグループ規則</a> では使えません。複数の <code>@charset</code> at-規則が定義されると、最初のものだけが使われます。HTML 要素の <code>style</code> 属性や、HTML ページの文字セットが関係している {{HTMLElement("style")}} 要素の中では使えません。</p> +<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>@charset</code></strong> <a href="/ja/docs/CSS/At-rule" title="At-rule">at-規則</a> は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。<a href="/ja/docs/CSS/Syntax#nested_statements" title="CSS/Syntax#nested_statements">入れ子の文</a> でないとしても、<a href="/ja/docs/CSS/At-rule#条件付きグループルール">条件付きグループルール</a> では使えません。複数の <code>@charset</code> at-規則が定義されると、最初のものだけが使われます。HTML 要素の <code>style</code> 属性や、HTML ページの文字セットが関係している {{HTMLElement("style")}} 要素の中では使えません。</p> <pre class="brush: css no-line-numbers">@charset "utf-8";</pre> diff --git a/files/ja/web/css/@font-face/index.html b/files/ja/web/css/@font-face/index.html index 3c0d73221b..593910fd2e 100644 --- a/files/ja/web/css/@font-face/index.html +++ b/files/ja/web/css/@font-face/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/@font-face <p><code>url()</code> と <code>local()</code> を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。</p> -<p><code>@font-face</code> @-規則は、 CSS の最上位だけでなく、 <a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">CSS の条件付き @-規則グループ</a>の中でも使用することができます。</p> +<p><code>@font-face</code> @-規則は、 CSS の最上位だけでなく、 <a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">CSS の条件付き @-規則グループ</a>の中でも使用することができます。</p> <pre class="brush: css no-line-numbers">@font-face { font-family: "Open Sans"; diff --git a/files/ja/web/css/@font-feature-values/index.html b/files/ja/web/css/@font-feature-values/index.html index 392dfefed5..d84fd3303b 100644 --- a/files/ja/web/css/@font-feature-values/index.html +++ b/files/ja/web/css/@font-feature-values/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/@font-feature-values <p><strong><code>@font-feature-values</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule" title="At-rule">アット規則</a>で、OpenType で有効化された特性が異なるものに対して {{cssxref("font-variant-alternates")}} プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。</p> -<p><code>@font-feature-values</code> アット規則は、CSS の最上位で使用することも、任意の <a href="/ja/docs/Web/CSS/At-rule#Conditional_Group_Rules">CSS の条件付きグループアット規則</a>の内部で使用することもできます。</p> +<p><code>@font-feature-values</code> アット規則は、CSS の最上位で使用することも、任意の <a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">CSS の条件付きグループアット規則</a>の内部で使用することもできます。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html index 3fbaa9a92d..79081a08d0 100644 --- a/files/ja/web/css/@import/index.html +++ b/files/ja/web/css/@import/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/@import --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@import</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは<a href="/ja/docs/Web/CSS/Syntax#nested_statements">入れ子になるステートメント</a>ではないので、 <code>@import</code> は<a href="/ja/docs/Web/CSS/At-rule#Conditional_Group_Rules">条件付き @-規則グループ</a>の中で使うことはできません。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@import</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは<a href="/ja/docs/Web/CSS/Syntax#nested_statements">入れ子になるステートメント</a>ではないので、 <code>@import</code> は<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付き @-規則グループ</a>の中で使うことはできません。</p> <pre class="brush: css no-line-numbers">@import url("fineprint.css") print; @import url("bluish.css") speech; diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html index 222098da50..b335cc8467 100644 --- a/files/ja/web/css/@media/index.html +++ b/files/ja/web/css/@media/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/@media <h2 id="Syntax" name="Syntax">構文</h2> -<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p> +<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p> <pre class="brush: css no-line-numbers">/* コードの最上位 */ @media screen and (min-width: 900px) { diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.html b/files/ja/web/css/@media/prefers-color-scheme/index.html deleted file mode 100644 index 270ae10125..0000000000 --- a/files/ja/web/css/@media/prefers-color-scheme/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: prefers-color-scheme -slug: Web/CSS/@media/prefers-color-scheme -tags: - - '@media' - - CSS - - Reference - - Web - - prefers-color-scheme - - ウェブ - - メディア特性 -translation_of: Web/CSS/@media/prefers-color-scheme ---- -<div class="blockIndicator note"> -<p><code>privacy.resistFingerprinting</code> を <strong>true</strong> に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は <code>light</code> に上書きされます。<br> - あるいは、ユーザーは <code>ui.systemUsesDarkTheme</code> という数値設定を作成して既定の動作を上書きし、 <code>light</code> (値: 0)、 <code>dark</code> (値: 1)、 <code>no-preference</code> (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は <code>light</code> を返します。)</p> -</div> - -<p><strong><code>prefers-color-scheme</code></strong> は <a href="/ja/docs/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a> では <code>false</code> と評価されます。</dd> - <dt><code><dfn>light</dfn></code></dt> - <dd>ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。</dd> - <dt><code><dfn>dark</dfn></code></dt> - <dd>ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="day">Day (initial)</div> -<div class="day light-scheme">Day (changes in light scheme)</div> -<div class="day dark-scheme">Day (changes in dark scheme)</div> <br> - -<div class="night">Night (initial)</div> -<div class="night light-scheme">Night (changes in light scheme)</div> -<div class="night dark-scheme">Night (changes in dark scheme)</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.day { background: #eee; color: black; } -.night { background: #333; color: white; } - -@media (prefers-color-scheme: dark) { - .day.dark-scheme { background: #333; color: white; } - .night.dark-scheme { background: black; color: #ddd; } -} - -@media (prefers-color-scheme: light) { - .day.light-scheme { background: white; color: #555; } - .night.light-scheme { background: #eee; color: black; } -} - -.day, .night { - display: inline-block; - padding: 1em; - width: 7em; - height: 2em; - vertical-align: middle; -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li> - <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li> - <li><a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a>, <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a> での色スキームの変更</li> -</ul> - -<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div> diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.md b/files/ja/web/css/@media/prefers-color-scheme/index.md new file mode 100644 index 0000000000..fee34abeb6 --- /dev/null +++ b/files/ja/web/css/@media/prefers-color-scheme/index.md @@ -0,0 +1,86 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - メディア特性 + - prefers-color-scheme +browser-compat: css.at-rules.media.prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +**`prefers-color-scheme`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。 + +ユーザーはオペレーティングシステムの設定 (ライトまたはダークモードなど) やユーザーエージェントの設定で、この設定を示す場合があります。 + +## 構文 + +- `light` + - : ユーザーがシステムに、明色のテーマを持つインターフェイスにしたいと通知したか、アクティブな設定を示さなかったことを示します。 +- `dark` + - : ユーザーがシステムに、暗色のテーマを持つインターフェイスにしたいと通知したことを示します。 +</dl> + +<h2 id="Examples">例</h3> + +以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。 + +### HTML + +```html +<div class="day">Day (initial)</div> +<div class="day light-scheme">Day (changes in light scheme)</div> +<div class="day dark-scheme">Day (changes in dark scheme)</div> <br> + +<div class="night">Night (initial)</div> +<div class="night light-scheme">Night (changes in light scheme)</div> +<div class="night dark-scheme">Night (changes in dark scheme)</div> +``` + +### CSS + +```css +.day { background: #eee; color: black; } +.night { background: #333; color: white; } + +@media (prefers-color-scheme: dark) { + .day.dark-scheme { background: #333; color: white; } + .night.dark-scheme { background: black; color: #ddd; } +} + +@media (prefers-color-scheme: light) { + .day.light-scheme { background: white; color: #555; } + .night.light-scheme { background: #eee; color: black; } +} + +.day, .night { + display: inline-block; + padding: 1em; + width: 7em; + height: 2em; + vertical-align: middle; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Firefox での prefers-color-scheme のシミュレーション](/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#view_media_rules_for_prefers-color-scheme) (Firefox Page Inspector > Examine and edit CSS) +- [Video tutorial: Coding a Dark Mode for your Website](https://www.youtube.com/watch?v=jmepqJ5UbuM) +- [Redesigning your product and website for dark mode](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode) +- 色スキームの変更: [Windows](https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/)、[macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)、[Android](https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019)、[その他のプラットフォーム](https://support.mozilla.org/en-US/questions/1271928) + +{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}} diff --git a/files/ja/web/css/@page/index.html b/files/ja/web/css/@page/index.html deleted file mode 100644 index dd260bbb99..0000000000 --- a/files/ja/web/css/@page/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '@page' -slug: Web/CSS/@page -tags: - - '@page' - - At-rule - - CSS - - Layout - - Reference - - Web -translation_of: Web/CSS/@page ---- -<div>{{CSSRef}}</div> - -<p><strong><code>@page</code></strong> は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">@page { - margin: 1cm; -} - -@page :first { - margin: 2cm; -}</pre> - -<h3 id="Descriptors" name="Descriptors">記述子</h3> - -<dl> - <dt><a href="/ja/docs/Web/CSS/@page/size"><code>size</code></a></dt> - <dd>対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。</dd> -</dl> - -<dl> - <dt><a href="/ja/docs/Web/CSS/@page/marks"><code>marks</code></a></dt> - <dd>クロップや登録マークを文書に追加します。</dd> -</dl> - -<dl> - <dt><a href="/ja/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> - <dd>ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>@page</code> ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。</p> - -<p><code>@page</code> アット規則は、 CSS オブジェクトモデルインターフェイス {{domxref("CSSPageRule")}} からアクセスできます。</p> - -<div class="note"><strong>注:</strong> W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、 <code>vh</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code> の取り扱い方について議論中です。差し当たっては、これらを <code>@page</code> アット規則の中で使わないでください。</div> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="page_pseudo-class_examples" name="page_pseudo-class_examples">@page 擬似クラスの例</h3> - -<p><code>@page</code> の さまざまな<a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>のページにある例を参照してください。</p> - -<ul> - <li>{{Cssxref(":blank")}}</li> - <li>{{Cssxref(":first")}}</li> - <li>{{Cssxref(":left")}}</li> - <li>{{Cssxref(":right")}}</li> - <li>{{Cssxref(":recto")}} {{experimental_inline}}</li> - <li>{{Cssxref(":verso")}} {{experimental_inline}}</li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td><code>:recto</code> 及び <code>:verso</code> ページセレクターを追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>{{SpecName('CSS2.1')}} から変更はないが、 <code>@page</code> 内でより多くの＠規則が利用できるようになった。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.page")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> をご覧ください。</li> -</ul> diff --git a/files/ja/web/css/@page/index.md b/files/ja/web/css/@page/index.md new file mode 100644 index 0000000000..efa6049af7 --- /dev/null +++ b/files/ja/web/css/@page/index.md @@ -0,0 +1,70 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - '@page' + - At-rule + - CSS + - レイアウト + - Reference + - Web +browser-compat: css.at-rules.page +translation_of: Web/CSS/@page +--- +{{CSSRef}} + +**`@page`** は CSS のアットルールで、文書を印刷するときに一部の CSS プロパティを変更するために使用します。 + +## 構文 + +```css +@page { + margin: 1cm; +} + +@page :first { + margin: 2cm; +} +``` + +### 記述子 + +- [`size`](/ja/docs/Web/CSS/@page/size) + - : 対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。 + +## 解説 + +`@page` ですべての CSS プロパティを変更できるわけではありません。変更できるのは、マージン、orphans、widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。 + +`@page` アットルールには、 CSS オブジェクトモデルインターフェイスの {{domxref("CSSPageRule")}} からアクセスできます。 + +> **Note:** W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。 + +## 形式文法 + +{{csssyntax}} + +## 例 + +### @page 擬似クラスの例 + +さまざまな `@page` の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)のページにある例を参照してください。 + +- {{Cssxref(":blank")}} +- {{Cssxref(":first")}} +- {{Cssxref(":left")}} +- {{Cssxref(":right")}} +- {{Cssxref(":recto")}} {{experimental_inline}} +- {{Cssxref(":verso")}} {{experimental_inline}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット [\[META\] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) を参照してください。 diff --git a/files/ja/web/css/@supports/index.html b/files/ja/web/css/@supports/index.html index 34320c8394..f664508ed1 100644 --- a/files/ja/web/css/@supports/index.html +++ b/files/ja/web/css/@supports/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/@supports --- <div>{{CSSRef}}</div> -<p><strong><code>@supports</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは<em>機能クエリ</em>と呼ばれます。規則はコードの最上位または他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループアット規則</a>の中に配置することができます。</p> +<p><strong><code>@supports</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは<em>機能クエリ</em>と呼ばれます。規則はコードの最上位または他の<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付きグループアット規則</a>の中に配置することができます。</p> <pre class="brush: css; no-line-numbers notranslate">@supports (display: grid) { div { diff --git a/files/ja/web/css/_colon_blank/index.html b/files/ja/web/css/_colon_blank/index.html deleted file mode 100644 index be50e8b238..0000000000 --- a/files/ja/web/css/_colon_blank/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ':blank' -slug: 'Web/CSS/:blank' -tags: - - ':blank' - - CSS - - CSS Selectors - - Draft - - Experimental - - NeedsContent - - NeedsExample - - Pseudo-class -translation_of: 'Web/CSS/:blank' ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<div class="blockIndicator note"> -<p><strong>注:</strong> <code>:blank</code> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。</p> - -<p><a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a> を参照してください。</p> -</div> - -<p><strong><code>:blank</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{CSSSyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="Simple_blank_example" name="Simple_blank_example">単純な :blank の例</h3> - -<p>最終的に対応しているブラウザーでは、 <code>:blank</code> 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><textarea></textarea></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">textarea:blank { - border: 3px solid red; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.blank")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef(":empty")}}</li> -</ul> diff --git a/files/ja/web/css/_colon_blank/index.md b/files/ja/web/css/_colon_blank/index.md new file mode 100644 index 0000000000..758c0b5193 --- /dev/null +++ b/files/ja/web/css/_colon_blank/index.md @@ -0,0 +1,63 @@ +--- +title: ':blank' +slug: Web/CSS/:blank +tags: + - ':blank' + - CSS + - CSS セレクター + - Draft + - Experimental + - NeedsContent + - NeedsExample + - 擬似クラス + - セレクター +browser-compat: css.selectors.blank +translation_of: Web/CSS/:blank +--- +{{CSSRef}}{{SeeCompatTable}} + +> **Note:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。 +> +> [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967) を参照してください。 + +**`:blank`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) を選択します。 + +## 構文 + +{{CSSSyntax}} + +## 例 + +<h3 id="Simple_blank_example">単純な :blank の例</h3> + +最終的に対応しているブラウザーでは、 `:blank` 擬似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。 + +#### HTML + +```html +<textarea></textarea> +``` + +#### CSS + +```css +textarea:blank { + border: 3px solid red; +} +``` + +#### 結果 + +{{EmbedLiveSample('Simple_blank_example', '100%', 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef(":empty")}} diff --git a/files/ja/web/css/_colon_first/index.html b/files/ja/web/css/_colon_first/index.html deleted file mode 100644 index fd5162848a..0000000000 --- a/files/ja/web/css/_colon_first/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ':first' -slug: 'Web/CSS/:first' -tags: - - '@page' - - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:first' ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>:first</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で使用され、印刷文書の最初のページを表します。</span> (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)</p> - -<pre class="brush: css no-line-numbers notranslate">/* 印刷時に最初のページを選択 */ -@page :first { - margin-left: 50%; - margin-top: 50%; -}</pre> - -<div class="note"> -<p><strong>メモ:</strong> この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには<a href="/ja/docs/Web/CSS/length#Absolute_length_units">絶対的な長さ</a>の単位のみしか使用できません。他のすべてのプロパティは無視されます。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>最初のページです。</p> -<p>2枚目のページです。</p> -<button>印刷</button> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">@page :first { - margin-left: 50%; - margin-top: 50%; -} - -p { - page-break-after: always; -} -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () => { - window.print(); -}); -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。</p> - -<p>{{ EmbedLiveSample('Examples', '80%', '150px') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.first")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("@page")}}</li> - <li>ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li> -</ul> diff --git a/files/ja/web/css/_colon_first/index.md b/files/ja/web/css/_colon_first/index.md new file mode 100644 index 0000000000..3e320393c3 --- /dev/null +++ b/files/ja/web/css/_colon_first/index.md @@ -0,0 +1,81 @@ +--- +title: ':first' +slug: Web/CSS/:first +tags: + - '@page' + - CSS + - レイアウト + - 擬似クラス + - Reference + - セレクター + - Web +browser-compat: css.selectors.first +translation_of: Web/CSS/:first +--- +{{CSSRef}} + +**`:first`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。) + +```css +/* 印刷時に最初のページを選択 */ +@page :first { + margin-left: 50%; + margin-top: 50%; +} +``` + +> **Note:** この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、{{cssxref("widows")}}、ページ区切りのみです。さらに、マージンを定義するときには[絶対的な長さ](/ja/docs/Web/CSS/length#absolute_length_units)の単位のみしか使用できません。他のすべてのプロパティは無視されます。 + +## 構文 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>最初のページです。</p> +<p>2 枚目のページです。</p> +<button>印刷</button> +``` + +### CSS + +```css +@page :first { + margin-left: 50%; + margin-top: 50%; +} + +p { + page-break-after: always; +} +``` + +### JavaScript + +```js +document.querySelector("button").addEventListener('click', () => { + window.print(); +}); +``` + +### 結果 + +［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。 + +{{ EmbedLiveSample('Examples', '80%', '150px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("@page")}} +- ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}} diff --git a/files/ja/web/css/_colon_left/index.html b/files/ja/web/css/_colon_left/index.html deleted file mode 100644 index 2ecfb6ece0..0000000000 --- a/files/ja/web/css/_colon_left/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ':left' -slug: 'Web/CSS/:left' -tags: - - '@page' - - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class - - Reference - - Web - - ウェブ - - 疑似クラス -translation_of: 'Web/CSS/:left' ---- -<div>{{ CSSRef() }}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の左側のページすべてを表します。</p> - -<pre class="brush: css no-line-numbers">/* 印刷時に左側のページを選択 */ -@page :left { - margin: 2in 3in; -}</pre> - -<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば <code>:left</code> ページになります。</p> - -<div class="note"> -<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@page :left { - margin: 2in 3in; -} -</pre> - -<h2 id="Specifications" name="Specifications"><span>仕様書</span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}</td> - <td>{{ Spec2('CSS3 Paged Media') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.selectors.left")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{ Cssxref("@page") }}</li> - <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li> -</ul> diff --git a/files/ja/web/css/_colon_left/index.md b/files/ja/web/css/_colon_left/index.md new file mode 100644 index 0000000000..aa09f80d22 --- /dev/null +++ b/files/ja/web/css/_colon_left/index.md @@ -0,0 +1,55 @@ +--- +title: ':left' +slug: Web/CSS/:left +tags: + - '@page' + - CSS + - レイアウト + - 擬似クラス + - Reference + - セレクター + - Web +browser-compat: css.selectors.left +translation_of: Web/CSS/:left +--- +{{ CSSRef() }} + +**`:left`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使われ、印刷文書の左側のページすべてを表します。 + +```css +/* 印刷時に左側のページを選択 */ +@page :left { + margin: 2in 3in; +} +``` + +そのページが左側か右側かは、文書の主な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば `:left` ページになります。 + +> **Note:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。 + +## 構文 + +{{csssyntax}} + +## 例 + +### 左側のページのマージンを設定 + +```css +@page :left { + margin: 2in 3in; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ Cssxref("@page") }} +- ページに関する他の擬似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }} diff --git a/files/ja/web/css/_colon_right/index.html b/files/ja/web/css/_colon_right/index.html deleted file mode 100644 index 04c7711263..0000000000 --- a/files/ja/web/css/_colon_right/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ':right' -slug: 'Web/CSS/:right' -tags: - - '@page' - - CSS - - CSS ページ化メディア - - Layout - - Pseudo-class - - Reference - - Web - - ウェブ - - 疑似クラス -translation_of: 'Web/CSS/:right' ---- -<div>{{ CSSRef() }}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の右側のページすべてを表します。</p> - -<pre class="brush: css no-line-numbers">/* 印刷時に右側のページを選択 */ -@page :right { - margin: 2in 3in; -}</pre> - -<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば <code>:right</code> ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。</p> - -<div class="note"> -<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@page :right { - margin: 2in 3in; -} -</pre> - -<h2 id="Specifications" name="Specifications"><span>仕様書</span></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}</td> - <td>{{ Spec2('CSS3 Paged Media') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.selectors.right")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{ Cssxref("@page") }}</li> - <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li> -</ul> diff --git a/files/ja/web/css/_colon_right/index.md b/files/ja/web/css/_colon_right/index.md new file mode 100644 index 0000000000..072500296d --- /dev/null +++ b/files/ja/web/css/_colon_right/index.md @@ -0,0 +1,55 @@ +--- +title: ':right' +slug: Web/CSS/:right +tags: + - '@page' + - CSS + - レイアウト + - 擬似クラス + - Reference + - セレクター + - Web +browser-compat: css.selectors.right +translation_of: Web/CSS/:right +--- +{{ CSSRef() }} + +**`:right`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使われ、印刷文書の右側のページすべてを表します。 + +```css +/* 印刷時に右側のページを選択 */ +@page :right { + margin: 2in 3in; +} +``` + +そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。 + +> **Note:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。 + +## 構文 + +{{csssyntax}} + +## 例 + +### 右側のページにマージンを設定 + +```css +@page :right { + margin: 2in 3in; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ Cssxref("@page") }} +- ページに関する他の擬似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }} diff --git a/files/ja/web/css/at-rule/index.html b/files/ja/web/css/at-rule/index.html deleted file mode 100644 index 6d4fdbcd1d..0000000000 --- a/files/ja/web/css/at-rule/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: '@-規則' -slug: Web/CSS/At-rule -tags: - - '@-規則' - - '@規則' - - CSS - - CSS リファレンス - - Reference - - アット規則 -translation_of: Web/CSS/At-rule ---- -<div>{{cssref}}</div> - -<p><span class="seoSummary"><strong>@-規則</strong> は <a href="/ja/docs/Web/CSS/Syntax#CSS_statements">CSS 文</a> の一つで、 CSS の振舞いを規定します。 @-規則は、アットマーク、 '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、それに続く識別子から、次のセミコロン、 ';' (<code>U+003B SEMICOLON</code>) もしくは次の <a href="/ja/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS ブロック</a>のどちらかが現れるまでの部分からなります。</span></p> - -<pre class="brush: css notranslate">/* 一般的な構造 */ -@IDENTIFIER (RULE); - -/* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる */ -@charset "utf-8";</pre> - -<p>@-規則は何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます:</p> - -<ul> - <li>{{cssxref("@charset")}} — スタイルシートで使用される文字セットを定義します。</li> - <li>{{cssxref("@import")}} — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。</li> - <li>{{cssxref("@namespace")}} — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。</li> - <li><strong><em>入れ子状の @-規則</em></strong> — 入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループ規則の内部で使用されます: - <ul> - <li>{{cssxref("@media")}} — <em>メディアクエリ</em>の条件を満たすデバイスで読み込まれた場合にこれの中身が適用される、条件付きグループ規則です。</li> - <li>{{cssxref("@supports")}} — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループ規則です。</li> - <li>{{cssxref("@document")}} {{experimental_inline}} — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループ規則です。<em>(CSS Level 4 仕様に先送り)</em></li> - <li>{{cssxref("@page")}} — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。</li> - <li>{{cssxref("@font-face")}} — ダウンロードすべき外部フォントに関する指定を記述します。</li> - <li>{{cssxref("@keyframes")}} — CSS アニメーションシーケンスの中間ステップに関する指定を記述します。</li> - <li>{{cssxref("@viewport")}} {{experimental_inline}} — 小さな画面のデバイス用に、ビューポートに関する指定を記述します。<em>(現在は Working Draft 段階)</em></li> - <li>{{cssxref("@counter-style")}} — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。<em>(勧告候補段階ですが、現時点で Gecko しか実装していません)</em></li> - <li>{{cssxref("@font-feature-values")}} (および <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code>, <code>@character-variant</code>)<br> - — OpenType の各機能を有効化するために、 {{cssxref("font-variant-alternates")}} の一般名を定義します。<em>(勧告候補段階ですが、現時点で Gecko しか実装していません)</em></li> - </ul> - </li> -</ul> - -<h2 id="Conditional_group_rules" name="Conditional_group_rules">条件付きグループ規則</h2> - -<p>プロパティの値のように、各 @-規則は異なる構文を持ちます。しかし、いくつかの @-規則は <strong>条件付きグループ規則</strong>という特別なカテゴリに分類されます。条件付きグループ規則の文は、構文が共通していて、どれも入れ子の文を持つことができ、ここには普通のルールセットはもちろん、さらに入れ子の @-規則を含める事ができます。さらに言えば、それらはすべて共通の意味あいがあります。 — 全ては常に<strong>真</strong>か<strong>偽</strong>と判定される何らかの条件と結びついています。条件が<strong>真</strong>であれば、条件付きグループ規則内の文全部が適用されます。</p> - -<p>条件付きグループ規則は <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> で定義されており、以下の規則があります。</p> - -<ul> - <li>{{cssxref("@media")}}</li> - <li>{{cssxref("@supports")}}</li> - <li>{{cssxref("@document")}} <em>(CSS Level 4 仕様に先送り)</em></li> -</ul> - -<p>条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td> - <td>{{Spec2('Compat')}}</td> - <td><code>@-webkit-keyframes</code> を標準化</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSS_key_concepts}}</li> -</ul> diff --git a/files/ja/web/css/at-rule/index.md b/files/ja/web/css/at-rule/index.md new file mode 100644 index 0000000000..42e4568a4b --- /dev/null +++ b/files/ja/web/css/at-rule/index.md @@ -0,0 +1,92 @@ +--- +title: アットルール +slug: Web/CSS/At-rule +tags: + - CSS + - ガイド + - Reference +translation_of: Web/CSS/At-rule +--- +{{CSSRef}} + +**アットルール**は [CSS 文](/ja/docs/Web/CSS/Syntax#css_statements)のうち、CSS の動作を既定するものです。アットルールはアットマーク、'`@`' (`U+0040 COMMERCIAL AT`) で始まり、それに続く識別子から、次のセミコロン、 '`;`' (`U+003B SEMICOLON`) もしくは次の [CSS ブロック](/ja/docs/Web/CSS/Syntax#css_declarations_blocks)のどちらかが現れるまでの部分からなります。 + +## 構文 + +### 通常 + +```css +/* 一般的な構造 */ +@IDENTIFIER (RULE); + +/* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる */ +@charset "utf-8"; +``` + +アットルールは何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます。 + +- {{cssxref("@charset")}} — スタイルシートで使用される文字セットを定義します。 +- {{cssxref("@import")}} — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。 +- {{cssxref("@namespace")}} — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。 + +### 入れ子 + +```css +@IDENTIFIER (RULE) { + +} +``` + +入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループルールの内部で使用されます。 + +- {{cssxref("@media")}} — *メディアクエリ*の条件を満たす端末で読み込まれた場合にこれの中身が適用される、条件付きグループルールです。 +- {{cssxref("@supports")}} — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループルールです。 +- {{cssxref("@document")}} {{deprecated_inline}} — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループルールです。 _(CSS Level 4 仕様に先送り)_ +- {{cssxref("@page")}} — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。 +- {{cssxref("@font-face")}} — ダウンロードすべき外部フォントに関する指定を記述します。 +- {{cssxref("@keyframes")}} — CSS アニメーションシーケンスの中間段階に関する指定を記述します。 +- {{cssxref("@viewport")}} {{deprecated_inline}} — 小さな画面の端末用に、ビューポートに関する指定を記述します。 _(現在は草稿段階)_ +- {{cssxref("@counter-style")}} — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。_(勧告候補段階ですが、現時点で Gecko しか実装していません)_ +- {{cssxref("@font-feature-values")}} (および `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset`, `@character-variant`) — OpenType の各機能を有効化するために、 {{cssxref("font-variant-alternates")}} の一般名を定義します。_(勧告候補段階ですが、現時点で Gecko しか実装していません)_ +- {{cssxref("@property")}} {{experimental_inline}} — カスタムプロパティと変数に関して指定します。 _(現在は草稿段階)_ +- {{cssxref("@color-profile")}} {{experimental_inline}} — {{cssxref("color_value/color()", "color()")}} 関数で使用するカラープロファイルを定義できます。 + +## 条件付きグループルール + +プロパティの値と同様に、アットルールはそれぞれ異なる構文を持っています。しかし、いくつかのアットルールは **条件付きグループルール**という特別なカテゴリーに分類されます。これらの文は構文が共通しており、どれも*内側の文*—*規則セット*または*内側のアットルール*を入れることができます。さらに言えば、それらはすべて共通の意味合いがあります。 — すべては常に**真**か**偽**かで判定される何らかの条件と結びついています。条件が**真**であれば、条件付きグループルール内の文全部が適用されます。 + +条件付きグループルールは [CSS Conditionals Level 3](https://dev.w3.org/csswg/css3-conditional/) で定義されており、以下の規則があります。 + +- {{cssxref("@media")}} +- {{cssxref("@supports")}} +- {{cssxref("@document")}} _(CSS Level 4 仕様に先送り)_ + +条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。 + +## 索引 + +- {{cssxref("@charset")}} +- {{cssxref("@color-profile")}} {{experimental_inline}} +- {{cssxref("@counter-style")}} +- {{cssxref("@document")}} {{deprecated_inline}} +- {{cssxref("@font-face")}} +- {{cssxref("@font-feature-values")}} +- {{cssxref("@import")}} +- {{cssxref("@keyframes")}} +- {{cssxref("@media")}} +- {{cssxref("@namespace")}} +- {{cssxref("@page")}} +- {{cssxref("@property")}} {{experimental_inline}} +- {{cssxref("@supports")}} +- {{cssxref("@viewport")}} {{deprecated_inline}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------- | ----------------------------- | ----------------------------- | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | 初回定義 | +| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}} | `@-webkit-keyframes` を標準化 | + +## 関連情報 + +- {{CSS_key_concepts}} diff --git a/files/ja/web/css/backface-visibility/index.html b/files/ja/web/css/backface-visibility/index.html deleted file mode 100644 index 5a62aec121..0000000000 --- a/files/ja/web/css/backface-visibility/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: backface-visibility -slug: Web/CSS/backface-visibility -tags: - - CSS - - CSS Property - - CSS Transforms - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/backface-visibility ---- -<div>{{CSSRef}}</div> - -<p><strong><code>backface-visibility</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。)</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -backface-visibility: visible; -backface-visibility: hidden; - -/* グローバル値 */ -backface-visibility: inherit; -backface-visibility: initial; -backface-visibility: unset;</pre> - -<p><code>backface-visibility</code> プロパティは、以下に挙げたキーワードのうちの一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>visible</code></dt> - <dd>ユーザーに対して裏を向いたとき、背面が可視になります。</dd> - <dt><code>hidden</code></dt> - <dd>背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Cube_with_transparent_and_opaque_faces" name="Cube_with_transparent_and_opaque_faces">透明な面と不透明な面を持った立方体</h3> - -<p>この例は、透明な面と不透明な面を持つ立方体を表示します。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><table> - <tr> - <th><code>backface-visibility: visible;</code></th> - <th><code>backface-visibility: hidden;</code></th> - </tr> - <tr> - <td> - <div class="container"> - <div class="cube showbf"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> - <p> - すべての面が透明であり、 - 裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。 - </p> - </td> - <td> - <div class="container"> - <div class="cube hidebf"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> - <p> - 背後の3面 (2, 4, 5) は非表示です。 - </p> - </td> - </tr> -</table></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">/* Classes that will show or hide the - three back faces of the "cube" */ -.showbf div { - backface-visibility: visible; -} - -.hidebf div { - backface-visibility: hidden; -} - -/* コンテナ div、立方体 div、面の一般的な設定 */ -.container { - width: 150px; - height: 150px; - margin: 75px 0 0 75px; - border: none; -} - -.cube { - width: 100%; - height: 100%; - perspective: 550px; - perspective-origin: 150% 150%; - transform-style: preserve-3d; -} - -.face { - display: block; - position: absolute; - width: 100px; - height: 100px; - border: none; - line-height: 100px; - font-family: sans-serif; - font-size: 60px; - color: white; - text-align: center; -} - -/* 方向に基づいてそれぞれの面を設定 */ -.front { - background: rgba(0, 0, 0, 0.3); - transform: translateZ(50px); -} - -.back { - background: rgba(0, 255, 0, 1); - color: black; - transform: rotateY(180deg) translateZ(50px); -} - -.right { - background: rgba(196, 0, 0, 0.7); - transform: rotateY(90deg) translateZ(50px); -} - -.left { - background: rgba(0, 0, 196, 0.7); - transform: rotateY(-90deg) translateZ(50px); -} - -.top { - background: rgba(196, 196, 0, 0.7); - transform: rotateX(90deg) translateZ(50px); -} - -.bottom { - background: rgba(196, 0, 196, 0.7); - transform: rotateX(-90deg) translateZ(50px); -} - -/* テーブルの見栄えをよくする */ -th, p, td { - background-color: #EEEEEE; - margin: 0px; - padding: 6px; - font-family: sans-serif; - text-align: left; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.backface-visibility")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の使用</a></li> -</ul> diff --git a/files/ja/web/css/backface-visibility/index.md b/files/ja/web/css/backface-visibility/index.md new file mode 100644 index 0000000000..7ff1988716 --- /dev/null +++ b/files/ja/web/css/backface-visibility/index.md @@ -0,0 +1,201 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS プロパティ + - CSS 座標変換 + - Reference + - recipe:css-property +browser-compat: css.properties.backface-visibility +translation_of: Web/CSS/backface-visibility +--- +{{CSSRef}} + +**`backface-visibility`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。 + +{{EmbedInteractiveExample("pages/css/backface-visibility.html")}} + +要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転変換が行われたときに、背面を見ることができます。 (このプロパティは、視点を持たない二次元の座標変換では効果がありません。) + +## 構文 + +```css +/* キーワード値 */ +backface-visibility: visible; +backface-visibility: hidden; + +/* グローバル値 */ +backface-visibility: inherit; +backface-visibility: initial; +backface-visibility: revert; +backface-visibility: unset; +``` + +`backface-visibility` プロパティは、以下に挙げたキーワードのうちの一つで指定します。 + +### 値 + +- `visible` + - : ユーザーに対して裏を向いたとき、背面が可視になります。 +- `hidden` + - : 背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Cube_with_transparent_and_opaque_faces">透明な面と不透明な面を持った立方体</h3> + +この例は、透明な面と不透明な面を持つ立方体を表示します。 + +<h4 id="HTML">HTML</h4> + +#### HTML + +```html +<table> + <tr> + <th><code>backface-visibility: visible;</code></th> + <th><code>backface-visibility: hidden;</code></th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube showbf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p> + すべての面が透明であり、 + 裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。 + </p> + </td> + <td> + <div class="container"> + <div class="cube hidebf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p> + 背後の3面 (2, 4, 5) は非表示です。 + </p> + </td> + </tr> +</table> +``` + +#### CSS + +```css +/* 「立方体」の 3 つの背面を表示または非表示にするクラス */ +.showbf div { + backface-visibility: visible; +} + +.hidebf div { + backface-visibility: hidden; +} + +/* コンテナ div、立方体 div、面の一般的な設定 */ +.container { + width: 150px; + height: 150px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + perspective: 550px; + perspective-origin: 150% 150%; + transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* 方向に基づいてそれぞれの面を設定 */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +/* テーブルの見栄えをよくする */ +th, p, td { + background-color: #EEEEEE; + margin: 0px; + padding: 6px; + font-family: sans-serif; + text-align: left; +} +``` + +#### 結果 + +{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) diff --git a/files/ja/web/css/basic-shape/circle()/index.md b/files/ja/web/css/basic-shape/circle()/index.md new file mode 100644 index 0000000000..5c1b236415 --- /dev/null +++ b/files/ja/web/css/basic-shape/circle()/index.md @@ -0,0 +1,59 @@ +--- +title: circle() +slug: Web/CSS/basic-shape/circle() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - circle + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.circle +translation_of: Web/CSS/basic-shape/circle() +--- +{{CSSRef}} + +**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: circle(50%); +clip-path: circle(6rem at 12rem 8rem); +``` + +### 値 + +- `<shape-radius>` + + - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + +- `<position>` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な円 + +下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 + +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse()/index.md b/files/ja/web/css/basic-shape/ellipse()/index.md new file mode 100644 index 0000000000..54b5f5b6b4 --- /dev/null +++ b/files/ja/web/css/basic-shape/ellipse()/index.md @@ -0,0 +1,67 @@ +--- +title: ellipse() +slug: Web/CSS/basic-shape/ellipse() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - ellipse + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.ellipse +translation_of: Web/CSS/basic-shape/ellipse() +--- +{{CSSRef}} + +**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: ellipse(40% 50% at left); +shape-outside: ellipse(closest-side farthest-side at 30%); +``` + +楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 + +### 値 + +- `<shape-radius>` + + - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 + +- `<position>` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な ellipse() の例 + +この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} + +### closest-side / farthest-side の値の使用 + +キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/index.html b/files/ja/web/css/basic-shape/index.html deleted file mode 100644 index 56b4c9da6e..0000000000 --- a/files/ja/web/css/basic-shape/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: <basic-shape> -slug: Web/CSS/basic-shape -tags: - - CSS - - CSS シェイプ - - CSS データ型 - - リファレンス -translation_of: Web/CSS/basic-shape ---- -<div>{{CSSRef}}</div> - -<p> <a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><basic-shape></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。</p> - -<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><basic-shape></code> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。</p> - -<p>シェイプを作成するときは、 <code><basic-shape></code> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。</p> - -<h3 id="Shape_functions" name="Shape_functions">シェイプ関数</h3> - -<p>以下のシェイプに対応しています。 <code><basic-shape></code> 値はすべて関数表記であり、 <a href="/ja/docs/Web/CSS/Value_definition_syntax">値定義構文</a>で定義されます。</p> - -<dl> - <dt><code><a id="inset()" name="inset()"></a>inset()</code></dt> - <dd> - <pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre> - - <p>内部の長方形を定義します。</p> - - <p>最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。</p> - - <p><a href="/ja/docs/Web/CSS/border-radius"><code><border-radius></code></a> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。</p> - - <p>内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。</p> - </dd> - <dt><code><a id="circle()" name="circle()"></a>circle()</code></dt> - <dd> - <pre class="syntaxbox"><code>circle( [<shape-radius>]? [at <position>]? )</code></pre> - - <p>引数 <code><shape-radius></code> は<em>r</em>、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して <code>sqrt(width^2+height^2)/sqrt(2)</code> としての割合になります。</p> - - <p>引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。</p> - </dd> - <dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt> - <dd> - <pre class="syntaxbox"><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></pre> - - <p>引数 <code><shape-radius></code> は、 r<sub>x</sub> と r<sub>y</sub>、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（r<sub>x</sub> 値の場合）と高さ（r<sub>y</sub> 値の場合）に対する割合になります。</p> - - <p>引数 position は楕円の中心を定義します。省略時は既定で中央になります。</p> - </dd> - <dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt> - <dd> - <pre class="syntaxbox"><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre> - - <p><code><fill-rule></code> は多角形の内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p> - - <p>それぞれの shape-arg の組における引数 <em>x<sub>i</sub></em> と <em>y<sub>i</sub></em> は、多角形の i 番目の頂点の座標を表します。</p> - </dd> - <dt><code><a id="path()" name="path()"></a>path()</code></dt> - <dd> - <pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre> - - <p>省略可能な <code><fill-rule></code> は、パスの内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p> - - <p>必須の <string> は、引用符で囲まれた <a href="/ja/docs/SVG/Attribute/d">SVG Path</a> です。</p> - </dd> -</dl> - -<p>上記で定義されていない引数は、以下のように定義されています。</p> - -<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage> -<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre> - -<p>円や楕円の半径を定義します。省略時の既定値は <code>closest-side</code> です。</p> - -<p><code>closest-side</code> はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。</p> - -<p><code>farthest-side</code> はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。</p> - -<h2 id="Computed_values_of_basic_shapes" name="Computed_values_of_basic_shapes">基本シェイプの計算値</h2> - -<p><code><basic-shape></code> 関数での値は以下の例外を除けば、規定通りに計算されます。</p> - -<ul> - <li>省略された値は既定値として含められ計算されます。</li> - <li><code>circle()</code> または <code>ellipse()</code> における {{cssxref("<position>")}} 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした（水平と垂直）オフセットの組として計算されます。</li> - <li><code>inset()</code> での <a href="/ja/docs/Web/CSS/border-radius"><code><border-radius></code></a> 値は全8つの {{cssxref("length")}} またはパーセント値の展開リストとして計算されます。</li> -</ul> - -<h2 id="Interpolation_of_basic_shapes" name="Interpolation_of_basic_shapes">基本シェイプの補間</h2> - -<p> ある <code><basic-shape></code> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に <code>nonzero</code> があった場合など）、それらの値は補間が行われます。</p> - -<ul> - <li>どちらのシェイプも同じ参照ボックスを使う必要があります。</li> - <li>両方のシェイプが同じ型で、型が <code>ellipse()</code> または <code>circle()</code> で、半径に <code>closest-side</code> または <code>farthest-side</code> のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li> - <li>両方のシェイプの型が <code>inset()</code> の場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li> - <li>両方のシェイプの型が <code>polygon()</code> で、両方の多角形が同じ数の角を持っており、同じ <code><fill-rule></code> を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li> - <li>両方のシェイプの型が <code>path()</code> の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。</li> - <li>それ以外の場合は補間が行われません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Animated_polygon" name="Animated_polygon">アニメーションする多角形</h3> - -<p>この例では、 <a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a> @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div></div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">div { - width: 300px; - height: 300px; - background: repeating-linear-gradient(red, orange 50px); - clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); - animation: 4s poly infinite alternate ease-in-out; - margin: 10px auto; -} - -@keyframes poly { - from { - clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); - } - - to { - clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); - } -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td> - <td>{{ Spec2('CSS Shapes') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.types.basic-shape")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li> -</ul> diff --git a/files/ja/web/css/basic-shape/index.md b/files/ja/web/css/basic-shape/index.md new file mode 100644 index 0000000000..d91d5c180a --- /dev/null +++ b/files/ja/web/css/basic-shape/index.md @@ -0,0 +1,178 @@ +--- +title: <basic-shape> +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS シェイプ + - CSS データ型 + - リファレンス +translation_of: Web/CSS/basic-shape +--- +{{CSSRef}} + +**`<basic-shape>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、{{cssxref("clip-path")}}、{{cssxref("shape-outside")}}、{{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。 + +{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}} + +## 構文 + +`<basic-shape>` データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。 + +シェイプを作成するときは、 `<basic-shape>` の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、X 座標が右方向、Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。 + +既定の参照ボックスは `margin-box` であり、`shape-outside: circle(50%)` を使用して円を生成すると下記のようになります。形状はマージンボックスを参照して定義されています。 + + + +### シェイプ関数 + +以下のシェイプに対応しています。`<basic-shape>` 値はすべて関数表記であり、[値定義構文](/ja/docs/Web/CSS/Value_definition_syntax)で定義されます。 + +- `{{cssxref("basic-shape/inset()","inset()")}}` + + - : 内部の長方形を定義します。 + + ```css + inset( <shape-arg>{1,4} [round <border-radius>]? ) + ``` + + 最初の 4 つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定の構文に従い、1 つ、2 つ、4 つの値で全四辺を設定することができます。 + + 任意の [`<border-radius>`](/ja/docs/Web/CSS/border-radius) の引数は省略可能で、 border-radius 一括指定の構文を使用して、内部の矩形の角の丸みを定義します。 + + 内部の矩形で 2 つの距離の組み合わせが、その軸の長さを超えていた場合 (たとえば左右の距離がそれぞれ 75% に設定された場合など) は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空の浮動領域を生成します。 + +- `{{cssxref("basic-shape/circle()","circle()")}}` + + - : 半径と位置を使用して円を定義します。 + + ```css + circle( [<shape-radius>]? [at <position>]? ) + ``` + + 引数 `<shape-radius>` は _r_、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して `sqrt(width^2+height^2)/sqrt(2)` としての割合になります。 + + 引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。 + +- `{{cssxref("basic-shape/ellipse()","ellipse()")}}` + + - : 2 つの半径と位置を使用して楕円を定義します。 + + ```css + ellipse( [<shape-radius>{2}]? [at <position>]? ) + ``` + + 引数 `<shape-radius>` は、rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅 (rx 値の場合) と高さ (ry 値の場合) に対する割合になります。 + + 引数 position は楕円の中心を定義します。省略時は既定で中央になります。 + +- `{{cssxref("basic-shape/polygon()","polygon()")}}` + + - : SVG の {{SVGAttr("fill-rule")}} と一連の頂点を使用して多角形を定義します。 + + ```css + polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) + ``` + + `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 ({{SVGAttr("fill-rule")}}) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。 + + リスト内にある引数の組は、 _xi_ および _yi_ すなわち多角形の i 番目の頂点の X 座標と Y 座標を表します。 + +- `path()` + + - : SVG の {{SVGAttr("fill-rule")}} と SVG の[パス定義](/ja/docs/Web/SVG/Attribute/d)を使用してシェイプを定義します。 + + ```css + path( [<fill-rule>,]? <string>) + ``` + + 省略可能な `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 ({{SVGAttr("fill-rule")}}) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。 + + 必須の \<string> は、引用符で囲まれた [SVG パス](/ja/docs/Web/SVG/Attribute/d)です。 + +上記で定義されていない引数は、以下のように定義されています。 + +```css +<shape-arg> = <length> | <percentage> +<shape-radius> = <length> | <percentage> | closest-side | farthest-side +``` + +円や楕円の半径を定義します。省略時の既定値は `closest-side` です。 + +`closest-side` はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。 + +`farthest-side` はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。 + +## 解説 + +### 基本シェイプの計算値 + +`<basic-shape>` 関数の中の値は、以下の例外を除けば、規定通りに計算されます。 + +- 省略された値は既定値として含められ計算されます。 +- {{cssxref("<position>")}} 値が `circle()` または `ellipse()` で使用されると、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした (水平と垂直) オフセットの組として計算されます。 +- [`<border-radius>`](/ja/docs/Web/CSS/border-radius) が `inset()` で使用されると、全 8 つの {{cssxref("length")}} またはパーセント値のリストとして展開され計算されます。 + +### 基本シェイプの補間 + +ある `<basic-shape>` と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば、それらの値は補間が行われます。 + +- どちらのシェイプも同じ参照ボックスを使う必要があります。 +- 両方のシェイプが同じ型で、型が `ellipse()` または `circle()` で、半径に `closest-side` または `farthest-side` のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。 +- 両方のシェイプの型が `inset()` の場合、シェイプ関数のそれぞれの値の間で補間が行われます。 +- 両方のシェイプの型が `polygon()` で、両方の多角形が同じ数の角を持っており、同じ `<fill-rule>` を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。 +- 両方のシェイプの型が `path()` の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。 +- それ以外の場合は補間が行われません。 + +## 例 + +<h3 id="Animated_polygon">アニメーションする多角形</h3> + +この例では、[@keyframes](/ja/docs/Web/CSS/@keyframes) アットルールを使用して、2 つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。 + +#### HTML + +```html +<div></div> +``` + +#### CSS + +```css +div { + width: 300px; + height: 300px; + background: repeating-linear-gradient(red, orange 50px); + clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); + animation: 4s poly infinite alternate ease-in-out; + margin: 10px auto; +} + +@keyframes poly { + from { + clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); + } + + to { + clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); + } +} +``` + +#### 結果 + +{{EmbedLiveSample('Animated_polygon','340', '340')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [CSS シェイプのパスを編集する — Firefox 開発者ツール](/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) diff --git a/files/ja/web/css/basic-shape/inset()/index.md b/files/ja/web/css/basic-shape/inset()/index.md new file mode 100644 index 0000000000..7afdcbb0eb --- /dev/null +++ b/files/ja/web/css/basic-shape/inset()/index.md @@ -0,0 +1,51 @@ +--- +title: inset() +slug: Web/CSS/basic-shape/inset() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - inset + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.inset +translation_of: Web/CSS/basic-shape/inset() +--- +{{CSSRef}} + +**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 + +## 構文 + +```css +shape-outside: inset(20px 50px 10px 0 round 50px); +``` + +### 値 + +- `<length-percentage>{1,4}` + - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 +- `<border-radius>` + - : オプションの [`<border-radius>`](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 + +## 例 + +### 基本的な内側の矩形の例 + +下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon()/index.md b/files/ja/web/css/basic-shape/polygon()/index.md new file mode 100644 index 0000000000..9a2df5b4d0 --- /dev/null +++ b/files/ja/web/css/basic-shape/polygon()/index.md @@ -0,0 +1,51 @@ +--- +title: polygon() +slug: Web/CSS/basic-shape/polygon() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - polygon + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.polygon +translation_of: Web/CSS/basic-shape/polygon() +--- +{{CSSRef}} + +**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); +``` + +### 値 + +- `<fill-rule>` + - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 +- `[<length-percentage><length-percentage>]#` + - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 + +## 例 + +### 基本的な polygon() の例 + +この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/border-inline-color/index.html b/files/ja/web/css/border-inline-color/index.html deleted file mode 100644 index e927735680..0000000000 --- a/files/ja/web/css/border-inline-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: border-inline-color -slug: Web/CSS/border-inline-color -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference -translation_of: Web/CSS/border-inline-color ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-start-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<pre class="brush:css no-line-numbers">border-inline-color: yellow; -border-inline-color: #F5F6F7; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の方向の境界色を定義します。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 10px solid blue; - border-inline-color: red; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li> -</ul> diff --git a/files/ja/web/css/border-inline-color/index.md b/files/ja/web/css/border-inline-color/index.md new file mode 100644 index 0000000000..5b4e31f062 --- /dev/null +++ b/files/ja/web/css/border-inline-color/index.md @@ -0,0 +1,91 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - recipe:css-property +browser-compat: css.properties.border-inline-color +translation_of: Web/CSS/border-inline-color +--- +{{CSSRef}} + +**`border-inline-start-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} と {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} と {{cssxref("border-left-color")}} の組み合わせのどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-color.html")}} + +他の方向の境界色については、 {{cssxref("border-block-color")}} によって {{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}} を設定することができます。 + +## 構文 + +```css +border-inline-color: yellow; +border-inline-color: #F5F6F7; + +/* グローバル値 */ +border-inline-color: inherit; +border-inline-color: initial; +border-inline-color: revert; +border-inline-color: unset; +``` + +### 値 + +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Border_color_with_vertical_text">テキストが垂直方向の場合の境界色</h3> + +#### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +#### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-color: red; +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_color_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応します +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}}+ bug 1297097 diff --git a/files/ja/web/css/border-inline-end-color/index.html b/files/ja/web/css/border-inline-end-color/index.html deleted file mode 100644 index 191a36b576..0000000000 --- a/files/ja/web/css/border-inline-end-color/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: border-inline-end-color -slug: Web/CSS/border-inline-end-color -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-color - - border-inline-end - - border-inline-end-color -translation_of: Web/CSS/border-inline-end-color ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-end-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">border-inline-end-color: rebeccapurple; -border-inline-end-color: #663399; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} が要素の他の境界色を定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 10px solid blue; - border-inline-end-color: red; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-end-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-end-color/index.md b/files/ja/web/css/border-inline-end-color/index.md new file mode 100644 index 0000000000..41f6bcaa64 --- /dev/null +++ b/files/ja/web/css/border-inline-end-color/index.md @@ -0,0 +1,93 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-color + - border-inline-end + - border-inline-end-color + - recipe:css-property +browser-compat: css.properties.border-inline-end-color +translation_of: Web/CSS/border-inline-end-color +--- +{{CSSRef}} + +**`border-inline-end-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}} + +## 構文 + +```css +border-inline-end-color: rebeccapurple; +border-inline-end-color: #663399; + +/* グローバル値 */ +border-inline-end-color: inherit; +border-inline-end-color: initial; +border-inline-end-color: revert; +border-inline-end-color: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-color")}}、{{cssxref("border-block-end-color")}}、{{cssxref("border-inline-start-color")}} が要素の他の境界色を定義します。 + +{{cssinfo}} + +### 値 + +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-end-color: red; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-end-style/index.html b/files/ja/web/css/border-inline-end-style/index.html deleted file mode 100644 index dcdf13a5a3..0000000000 --- a/files/ja/web/css/border-inline-end-style/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: border-inline-end-style -slug: Web/CSS/border-inline-end-style -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-end - - border-inline-end-style - - border-inline-style -translation_of: Web/CSS/border-inline-end-style ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-end-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-style'> 値 */ -border-inline-end-style: dashed; -border-inline-end-style: dotted; -border-inline-end-style: groove; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'border-style'></code></dt> - <dd>境界のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 5px solid blue; - border-inline-end-style: dashed; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-block-end-style")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-block-end-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-end-style/index.md b/files/ja/web/css/border-inline-end-style/index.md new file mode 100644 index 0000000000..7f11da9519 --- /dev/null +++ b/files/ja/web/css/border-inline-end-style/index.md @@ -0,0 +1,97 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-end + - border-inline-end-style + - border-inline-style + - recipe:css-property +browser-compat: css.properties.border-inline-end-style +translation_of: Web/CSS/border-inline-end-style +--- +{{CSSRef}} + +**`border-inline-end-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}} + +## 構文 + +```css +/* <'border-style'> 値 */ +border-inline-end-style: dashed; +border-inline-end-style: dotted; +border-inline-end-style: groove; + +/* グローバル値 */ +border-inline-end-style: inherit; +border-inline-end-style: initial; +border-inline-end-style: revert; +border-inline-end-style: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-style")}}、{{cssxref("border-block-end-style")}}、{{cssxref("border-inline-start-style")}} が要素の他の境界のスタイルを定義します。 + +### 値 + +- `<'border-style'>` + - : 境界のスタイルです。 {{cssxref("border-style")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +### 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### inline-end-style の設定 + +#### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +#### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-end-style: dashed; +} +``` + +#### 結果 + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-end-width/index.html b/files/ja/web/css/border-inline-end-width/index.html deleted file mode 100644 index a61fcddaa5..0000000000 --- a/files/ja/web/css/border-inline-end-width/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: border-inline-end-width -slug: Web/CSS/border-inline-end-width -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-end - - border-inline-end-width - - border-inline-width -translation_of: Web/CSS/border-inline-end-width ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-end-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-width'> 値 */ -border-inline-end-width: 2px; -border-inline-end-width: thick; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} が要素の他の境界の幅を定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 1px solid blue; - border-inline-end-width: 5px; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-end-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-end-width/index.md b/files/ja/web/css/border-inline-end-width/index.md new file mode 100644 index 0000000000..aeba051814 --- /dev/null +++ b/files/ja/web/css/border-inline-end-width/index.md @@ -0,0 +1,96 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-end + - border-inline-end-width + - border-inline-width + - recipe:css-property +browser-compat: css.properties.border-inline-end-width +translation_of: Web/CSS/border-inline-end-width +--- +{{CSSRef}} + +**`border-inline-end-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}} + +## 構文 + +```css +/* <'border-width'> 値 */ +border-inline-end-width: 2px; +border-inline-end-width: thick; + +/* グローバル値 */ +border-inline-end-width: inherit; +border-inline-end-width: initial; +border-inline-end-width: revert; +border-inline-end-width: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-width")}}、{{cssxref("border-block-end-width")}}、{{cssxref("border-inline-start-width")}} が要素の他の境界の幅を定義します。 + +### 値 + +- `<'border-width'>` + - : 境界の幅です。 {{ cssxref("border-width") }} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Applying_a_border_with_vertical_text">テキストが垂直方向の場合の境界の適用</h3> + +#### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +##### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-end-width: 5px; +} +``` + +#### 結果 + +{{EmbedLiveSample("Applying_a_border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-end/index.html b/files/ja/web/css/border-inline-end/index.html deleted file mode 100644 index f788b59958..0000000000 --- a/files/ja/web/css/border-inline-end/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: border-inline-end -slug: Web/CSS/border-inline-end -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-end - - border-inline-end-color - - border-inline-end-style - - border-inline-end-width -translation_of: Web/CSS/border-inline-end ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">border-inline-end: 1px; -border-inline-end: 2px dashed; -border-inline-end: medium dashed blue; -</pre> - -<p><code>border-inline-end</code> は1つ以上の {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, {{cssxref("border-inline-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}} が要素の他の境界を定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<p><code>border-inline-end</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p> - -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-rl; - border-inline-end: 5px dashed blue; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-end")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-end/index.md b/files/ja/web/css/border-inline-end/index.md new file mode 100644 index 0000000000..4a7c6b472f --- /dev/null +++ b/files/ja/web/css/border-inline-end/index.md @@ -0,0 +1,108 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-end + - border-inline-end-color + - border-inline-end-style + - border-inline-end-width + - recipe:css-shorthand-property +browser-compat: css.properties.border-inline-end +translation_of: Web/CSS/border-inline-end +--- +{{CSSRef}} + +**`border-inline-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 + +{{EmbedInteractiveExample("pages/css/border-inline-end.html")}} + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`border-inline-end-color`](/ja/docs/Web/CSS/border-inline-end-color) +- [`border-inline-end-style`](/ja/docs/Web/CSS/border-inline-end-style) +- [`border-inline-end-width`](/ja/docs/Web/CSS/border-inline-end-width) + +## 構文 + +```css +border-inline-end: 1px; +border-inline-end: 2px dashed; +border-inline-end: medium dashed blue; + +/* グローバル値 */ +border-inline-end: inherit; +border-inline-end: initial; +border-inline-end: revert; +border-inline-end: unset; +``` + +`border-inline-end` が対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +関連するプロパティとしては、 {{cssxref("border-block-start")}}、{{cssxref("border-block-end")}}、{{cssxref("border-inline-start")}} が要素の他の境界を定義します。 + +### 値 + +`border-inline-end` は以下の値のうちの1つ以上を任意の順序で指定します。 + +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline-end: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} のうちの 1 つに対応付けられます。 +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start-color/index.html b/files/ja/web/css/border-inline-start-color/index.html deleted file mode 100644 index bfe03cfdc8..0000000000 --- a/files/ja/web/css/border-inline-start-color/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: border-inline-start-color -slug: Web/CSS/border-inline-start-color -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-color - - border-inline-start - - border-inline-start-color -translation_of: Web/CSS/border-inline-start-color ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-start-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">border-inline-start-color: red; -border-inline-start-color: #ee4141; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 10px solid blue; - border-inline-start-color: red; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-start-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-start-color/index.md b/files/ja/web/css/border-inline-start-color/index.md new file mode 100644 index 0000000000..9aa6b27a45 --- /dev/null +++ b/files/ja/web/css/border-inline-start-color/index.md @@ -0,0 +1,91 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-color + - border-inline-start + - border-inline-start-color + - recipe:css-property +browser-compat: css.properties.border-inline-start-color +translation_of: Web/CSS/border-inline-start-color +--- +{{CSSRef}} + +**`border-inline-start-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}} + +## 構文 + +```css +border-inline-start-color: red; +border-inline-start-color: #ee4141; + +/* グローバル値 */ +border-inline-start-color: inherit; +border-inline-start-color: initial; +border-inline-start-color: revert; +border-inline-start-color: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-color")}}、{{cssxref("border-block-end-color")}}、{{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。 + +### 値 + +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-start-color: red; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-color")}}、{{cssxref("border-right-color")}}、{{cssxref("border-bottom-color")}}、{{cssxref("border-left-color")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start-style/index.html b/files/ja/web/css/border-inline-start-style/index.html deleted file mode 100644 index 6f092c539d..0000000000 --- a/files/ja/web/css/border-inline-start-style/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: border-inline-start-style -slug: Web/CSS/border-inline-start-style -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-start - - border-inline-start-style - - border-inline-style -translation_of: Web/CSS/border-inline-start-style ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-start-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-style'> 値 */ -border-inline-start-style: dashed; -border-inline-start-style: dotted; -border-inline-start-style: groove; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'border-style'></code></dt> - <dd>境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 5px solid blue; - border-inline-start-style: dashed; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-start-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-start-style/index.md b/files/ja/web/css/border-inline-start-style/index.md new file mode 100644 index 0000000000..b1d3403c5f --- /dev/null +++ b/files/ja/web/css/border-inline-start-style/index.md @@ -0,0 +1,90 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-start + - border-inline-start-style + - border-inline-style + - recipe:css-property +browser-compat: css.properties.border-inline-start-style +translation_of: Web/CSS/border-inline-start-style +--- +{{CSSRef}} + +**`border-inline-start-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}} + +## 構文 + +```css +/* <'border-style'> 値 */ +border-inline-start-style: dashed; +border-inline-start-style: dotted; +border-inline-start-style: revert; +border-inline-start-style: groove; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-style")}}、{{cssxref("border-block-end-style")}}、{{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。 + +{{cssinfo}} + +### 値 + +- `<'border-style'>` + - : 境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-start-style: dashed; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start-width/index.html b/files/ja/web/css/border-inline-start-width/index.html deleted file mode 100644 index f32239ab42..0000000000 --- a/files/ja/web/css/border-inline-start-width/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: border-inline-start-width -slug: Web/CSS/border-inline-start-width -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-start - - border-inline-start-width - - border-inline-width -translation_of: Web/CSS/border-inline-start-width ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-start-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <'border-width'> 値 */ -border-inline-start-width: 5px; -border-inline-start-width: thick; -</pre> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 1px solid blue; - border-inline-start-width: 5px; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-start-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-start-width/index.md b/files/ja/web/css/border-inline-start-width/index.md new file mode 100644 index 0000000000..9fbd2eaefe --- /dev/null +++ b/files/ja/web/css/border-inline-start-width/index.md @@ -0,0 +1,92 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-start + - border-inline-start-width + - border-inline-width + - recipe:css-property +browser-compat: css.properties.border-inline-start-width +translation_of: Web/CSS/border-inline-start-width +--- +{{CSSRef}} + +**`border-inline-start-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}} + +## 構文 + +```css +/* <'border-width'> 値 */ +border-inline-start-width: 5px; +border-inline-start-width: thick; + +/* グローバル値 */ +border-inline-start-width: inherit; +border-inline-start-width: initial; +border-inline-start-width: revert; +border-inline-start-width: unset; +``` + +関連するプロパティとしては、 {{cssxref("border-block-start-width")}}、{{cssxref("border-block-end-width")}}、{{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。 + +### 値 + +- `<'border-width'>` + - : 境界の幅です。 {{ cssxref("border-width") }} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-start-width: 5px; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応付けられます +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-start/index.html b/files/ja/web/css/border-inline-start/index.html deleted file mode 100644 index 58e1cee709..0000000000 --- a/files/ja/web/css/border-inline-start/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: border-inline-start -slug: Web/CSS/border-inline-start -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference - - border-inline - - border-inline-start - - border-inline-start-color - - border-inline-start-style - - border-inline-start-width -translation_of: Web/CSS/border-inline-start ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">border-inline-start: 1px; -border-inline-start: 2px dotted; -border-inline-start: medium dashed green; -</pre> - -<p><code>border-inline-start</code> は1つ以上の {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<p>関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。</p> - -<p>{{cssinfo}}</p> - -<h3 id="Values" name="Values">値</h3> - -<p><code>border-inline-start</code> は以下の値の内の1つ以上を任意の順序で指定します。</p> - -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-rl; - border-inline-start: 5px dashed blue; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-start")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-start/index.md b/files/ja/web/css/border-inline-start/index.md new file mode 100644 index 0000000000..d723df5379 --- /dev/null +++ b/files/ja/web/css/border-inline-start/index.md @@ -0,0 +1,108 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - border-inline + - border-inline-start + - border-inline-start-color + - border-inline-start-style + - border-inline-start-width + - recipe:css-shorthand-property +browser-compat: css.properties.border-inline-start +translation_of: Web/CSS/border-inline-start +--- +{{CSSRef}} + +**`border-inline-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 + +{{EmbedInteractiveExample("pages/css/border-inline-start.html")}} + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`border-inline-start-color`](/ja/docs/Web/CSS/border-inline-start-color) +- [`border-inline-start-style`](/ja/docs/Web/CSS/border-inline-start-style) +- [`border-inline-start-width`](/ja/docs/Web/CSS/border-inline-start-width) + +## 構文 + +```css +border-inline-start: 1px; +border-inline-start: 2px dotted; +border-inline-start: medium dashed green; + +/* グローバル値 */ +border-inline-start: inherit; +border-inline-start: initial; +border-inline-start: revert; +border-inline-start: unset; +``` + +対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +関連するプロパティとしては、 {{cssxref("border-block-start")}}、{{cssxref("border-block-end")}}、{{cssxref("border-inline-end")}} が要素の他の境界を定義します。 + +### 値 + +`border-inline-start` は以下の値の内の 1 つ以上を任意の順序で指定します。 + +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline-start: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} のうちの 1 つに対応付けられます。 +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-style/index.html b/files/ja/web/css/border-inline-style/index.html deleted file mode 100644 index 6ba5ffd0e9..0000000000 --- a/files/ja/web/css/border-inline-style/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: border-inline-style -slug: Web/CSS/border-inline-style -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference -translation_of: Web/CSS/border-inline-style ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の境界のスタイルを、要素の書字方向やテキストの向きに応じて物理的な境界のスタイルに割り当てて定義します。これは {{cssxref("border-top-style")}} および {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} および {{cssxref("border-right-style")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に応じて対応します。</p> - -<pre class="brush:css no-line-numbers">/* <'border-style'> の値 */ -border-inline-style: dashed; -border-inline-style: dotted; -border-inline-style: groove; -</pre> - -<p>他の方向の境界スタイルは {{cssxref("border-block-style")}} で設定することができ、これは {{cssxref("border-block-start-style")}} および {{cssxref("border-block-end-style")}} を定義します。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{ cssxref("border-style") }} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 5px solid blue; - border-inline-style: dashed; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは物理的な境界のプロパティ {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに割り当てられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-style/index.md b/files/ja/web/css/border-inline-style/index.md new file mode 100644 index 0000000000..2e7971f0c6 --- /dev/null +++ b/files/ja/web/css/border-inline-style/index.md @@ -0,0 +1,84 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - recipe:css-property +browser-compat: css.properties.border-inline-style +translation_of: Web/CSS/border-inline-style +--- +{{CSSRef}} + +**`border-inline-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}} と {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} と {{cssxref("border-right-style")}} の組み合わせのどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-style.html")}} + +他の方向の境界スタイルについては {{cssxref("border-block-style")}} で設定することができ、これは {{cssxref("border-block-start-style")}} および {{cssxref("border-block-end-style")}} を設定することができます。 + +## 構文 + +```css +/* <'border-style'> の値 */ +border-inline-style: dashed; +border-inline-style: dotted; +border-inline-style: revert; +border-inline-style: groove; +``` + +### 値 + +- `<'border-style'>` + - : 境界線のスタイルです。 {{ cssxref("border-style") }} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-style: dashed; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは物理的な境界のプロパティ {{cssxref("border-top-style")}}、{{cssxref("border-right-style")}}、{{cssxref("border-bottom-style")}}、{{cssxref("border-left-style")}} のうちの 1 つに対応します +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline-width/index.html b/files/ja/web/css/border-inline-width/index.html deleted file mode 100644 index 23969d144c..0000000000 --- a/files/ja/web/css/border-inline-width/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: border-inline-width -slug: Web/CSS/border-inline-width -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Reference -translation_of: Web/CSS/border-inline-width ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>border-inline-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} の組み合わせのどちらか対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p> - -<pre class="brush:css no-line-numbers">/* <'border-width'> 値 */ -border-inline-width: 5px 10px; -border-inline-width: 5px; -border-inline-width: thick; -</pre> - -<p>他の方向の境界の幅については、 {{cssxref("border-block-width")}} によって、 {{cssxref("border-block-start-width")}} と {{cssxref("border-block-end-width")}} を設定することができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-lr; - border: 1px solid blue; - border-inline-width: 5px 10px; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-width", "border-inline-width")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応します</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline-width/index.md b/files/ja/web/css/border-inline-width/index.md new file mode 100644 index 0000000000..df056a6d0c --- /dev/null +++ b/files/ja/web/css/border-inline-width/index.md @@ -0,0 +1,89 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - recipe:css-property +browser-compat: css.properties.border-inline-width +translation_of: Web/CSS/border-inline-width +--- +{{CSSRef}} + +**`border-inline-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} の組み合わせのどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} で定義された値によって決まります。 + +{{EmbedInteractiveExample("pages/css/border-inline-width.html")}} + +他の方向の境界の幅については {{cssxref("border-block-width")}} で設定することができ、これは {{cssxref("border-block-start-width")}} および {{cssxref("border-block-end-width")}} を設定することができます。 + +## 構文 + +```css +/* <'border-width'> 値 */ +border-inline-width: 5px 10px; +border-inline-width: 5px; +border-inline-width: thick; + +/* グローバル値 */ +border-inline-width: inherit; +border-inline-width: initial; +border-inline-width: revert; +border-inline-width: unset; +``` + +### 値 + +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-width: 5px 10px; +} +``` + +{{EmbedLiveSample("Examples", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは {{cssxref("border-top-width")}}、{{cssxref("border-right-width")}}、{{cssxref("border-bottom-width")}}、{{cssxref("border-left-width")}} のうちの 1 つに対応します +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-inline/index.html b/files/ja/web/css/border-inline/index.html deleted file mode 100644 index 9c6006a026..0000000000 --- a/files/ja/web/css/border-inline/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-inline -slug: Web/CSS/border-inline -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference -translation_of: Web/CSS/border-inline ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>The <strong><code>border-inline</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの1ヶ所で設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p> - -<pre class="brush:css no-line-numbers">border-inline: 1px; -border-inline: 2px dotted; -border-inline: medium dashed blue; -</pre> - -<p><code>border-inline</code> は {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, {{cssxref("border-inline-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。</p> - -<p>他の方向の境界については、 {{cssxref("border-block")}} によって、 {{cssxref("border-block-start")}} と {{cssxref("border-block-end")}} の両方を設定することができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<p><code>border-inline</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p> - -<dl> - <dt><code><'border-width'></code></dt> - <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd> - <dt><code><'border-style'></code></dt> - <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd> - <dt><code><'color'></code></dt> - <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="exampleText">Example text</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - background-color: yellow; - width: 120px; - height: 120px; -} - -.exampleText { - writing-mode: vertical-rl; - border-inline: 5px dashed blue; -}</pre> - -<p>{{EmbedLiveSample("Example", 140, 140)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-inline")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応付けられます。</li> - <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> -</ul> diff --git a/files/ja/web/css/border-inline/index.md b/files/ja/web/css/border-inline/index.md new file mode 100644 index 0000000000..61ce9af75e --- /dev/null +++ b/files/ja/web/css/border-inline/index.md @@ -0,0 +1,107 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +tags: + - CSS + - CSS Logical Property + - CSS プロパティ + - 実験的 + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.border-inline +translation_of: Web/CSS/border-inline +--- +{{CSSRef}} + +The **`border-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)です。 + +{{EmbedInteractiveExample("pages/css/border-inline.html")}} + +`border-inline` の割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。 + +他の方向の境界については、 {{cssxref("border-block")}} によって、 {{cssxref("border-block-start")}} と {{cssxref("border-block-end")}} の両方を設定することができます。 + +## 構成要素のプロパティ + +このプロパティは下記の CSS プロパティの一括指定です。 + +- [`border-inline-color`](/ja/docs/Web/CSS/border-inline-color) +- [`border-inline-style`](/ja/docs/Web/CSS/border-inline-style) +- [`border-inline-width`](/ja/docs/Web/CSS/border-inline-width) + +## 構文 + +```css +border-inline: 1px; +border-inline: 2px dotted; +border-inline: medium dashed blue; + +/* グローバル値 */ +border-inline: inherit; +border-inline: initial; +border-inline: revert; +border-inline: unset; +``` + +### 値 + +`border-inline` は以下の値のうちの1つ以上を任意の順序で指定します。 + +- `<'border-width'>` + - : 境界の幅です。 {{cssxref("border-width")}} を参照してください。 +- `<'border-style'>` + - : 境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。 +- `<'color'>` + - : 境界の色です。 {{cssxref("color")}} を参照してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Border_with_vertical_text">テキストが垂直の場合の境界</h3> + +#### HTML + +```html +<div> + <p class="exampleText">Example text</p> +</div> +``` + +#### CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline: 5px dashed blue; +} +``` + +#### 結果 + +{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}} の何れかに対応付けられます。 +- {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} diff --git a/files/ja/web/css/border-top-right-radius/border-top-right-radius.png b/files/ja/web/css/border-top-right-radius/border-top-right-radius.png Binary files differnew file mode 100644 index 0000000000..3a1cb6ab94 --- /dev/null +++ b/files/ja/web/css/border-top-right-radius/border-top-right-radius.png diff --git a/files/ja/web/css/border-top-right-radius/index.html b/files/ja/web/css/border-top-right-radius/index.html deleted file mode 100644 index 2be057a81e..0000000000 --- a/files/ja/web/css/border-top-right-radius/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: border-top-right-radius -slug: Web/CSS/border-top-right-radius -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - border-radius - - リファレンス -translation_of: Web/CSS/border-top-right-radius ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>border-top-right-radius</code></strong> プロパティは、要素の右上の角を丸めます。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>丸みは円または楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p> - -<div style="text-align: center;"><img alt="border-top-right-radius.png" class="default internal" src="/@api/deki/files/6133/=border-top-right-radius.png"></div> - -<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p> - -<div class="note">このプロパティの値が <code>border-top-right-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 角を円にする */ -/* border-top-right-radius: <em>radius</em> */ -border-top-right-radius: 3px; - -/* 角を楕円にする */ -/* border-top-right-radius: <em>horizontal</em> <em>vertical</em> */ -border-top-right-radius: 0.5em 1em; - -border-top-right-radius: inherit; -</pre> - -<p>値１つで指定する場合:</p> - -<ul> - <li>値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。</li> -</ul> - -<p>値２つで指定する場合:</p> - -<ul> - <li>最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li> - <li>最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>ライブ例</th> - <th>コード</th> - </tr> - </thead> - <tbody> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 40px; width: 100px; height: 100px;"></div> - </td> - <td>境界として使用されている円弧 - <pre class="brush: css notranslate"> -div { - border-top-right-radius: 40px 40px; -} -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 20px; width: 100px; height: 100px;"></div> - </td> - <td>境界として使用されている楕円の弧 - <pre class="brush: css notranslate"> -div { - border-top-right-radius: 40px 20px; -} -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 100px;"></div> - </td> - <td>ボックスは正方形。境界として使用されている円弧 - <pre class="brush: css notranslate"> -div { - border-top-right-radius: 40%; -} -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;"> - <div class="hidden">.</div> - </div> - </td> - <td>ボックスは正方形ではない。境界として使用されている楕円の弧 - <pre class="brush: css notranslate"> -div { - border-top-right-radius: 40%; -} -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="border: black 3px double; border-top-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"></div> - </td> - <td>背景色は境界で切り取られる - <pre class="brush: css notranslate"> -div { - border-top-right-radius:40%; - border-style: black 3px double; - background-color: rgb(250,20,70); - background-clip: content-box; -} -</pre> - </td> - </tr> - </tbody> -</table> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.border-top-right-radius")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<p>CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</p> diff --git a/files/ja/web/css/border-top-right-radius/index.md b/files/ja/web/css/border-top-right-radius/index.md new file mode 100644 index 0000000000..049d638c2b --- /dev/null +++ b/files/ja/web/css/border-top-right-radius/index.md @@ -0,0 +1,162 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-right-radius +translation_of: Web/CSS/border-top-right-radius +--- +{{CSSRef}} + +**`border-top-right-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸) を指定することで、要素の右上の角を丸めます。 + +{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}} + +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 + + + +画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 + +> **Note:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。 + +## 構文 + +```css +/* 角を円にする */ +/* border-top-right-radius: 半径 */ +border-top-right-radius: 3px; + +/* 角を楕円にする */ +/* border-top-right-radius: 水平 垂直 */ +border-top-right-radius: 0.5em 1em; + +border-top-right-radius: inherit; + +/* グローバル値 */ +border-top-right-radius: inherit; +border-top-right-radius: initial; +border-top-right-radius: revert; +border-top-right-radius: unset; +``` + +値 1 つで指定する場合: + +- 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 + +値 2 つで指定する場合: + +- 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平方向の半長軸を示します。 +- 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直方向の半長軸を示します。 + +### 値 + +- `<length-percentage>` + - : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Arc_of_a_circle">Arc of a circle</h3> + +単一の `<length>` 値を指定すると、円弧を生成します。 + +```html hidden +<div></div> +``` + +```css +div { + border-top-right-radius: 40px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; +} +``` + +{{EmbedLiveSample("Arc_of_a_circle")}} + +<h3 id="Arc_of_an_ellipse">楕円の弧</h3> + +2 つの異なる `<length>` 値を指定すると、楕円の弧を生成します。 + +```html hidden +<div></div> +``` + +```css +div { + border-top-right-radius: 40px 20px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; +} +``` + +{{EmbedLiveSample("Arc_of_an_ellipse")}} + +<h3 id="Square_element_with_percentage_radius">パーセントで半径を指定した正方形の要素</h3> + +正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。 + +```html hidden +<div></div> +``` + +```css +div { + border-top-right-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; +} +``` + +{{EmbedLiveSample("Square_element_with_percentage_radius")}} + +<h3 id="Non-square_element_with_percentage_radius">パーセントで半径を指定した正方形ではない要素</h3> + +正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円の弧を生成します。 + +```html hidden +<div></div> +``` + +```css +div { + border-top-right-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 200px; + height: 100px; +} +``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border-radius")}} 一括指定プロパティ +- {{cssxref("border-bottom-right-radius")}}、{{cssxref("border-bottom-left-radius")}}、{{cssxref("border-top-left-radius")}} diff --git a/files/ja/web/css/border-width/index.html b/files/ja/web/css/border-width/index.html deleted file mode 100644 index 9183f7ba7a..0000000000 --- a/files/ja/web/css/border-width/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: border-width -slug: Web/CSS/border-width -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-width - - リファレンス -translation_of: Web/CSS/border-width ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-width</code></strong> プロパティは、要素の境界線の四辺すべての線の幅を設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div> - -<p>それぞれの辺は個別に、 {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} や、書字方向による指定を利用して {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} で設定することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -border-width: thin; -border-width: medium; -border-width: thick; - -/* <length> 値 */<em> -</em>border-width: 4px; -border-width: 1.2rem;<em> -</em> -/* 上下 | 左右 */ -border-width: 2px 1.5em; - -/* 上 | 左右 | 下 */ -border-width: 1px 2em 1.5cm; - -/* 上 | 右 | 下 | 左 */ -border-width: 1px 2em 0 4rem; - -/* グローバルキーワード */ -border-width: inherit; -border-width: initial; -border-width: unset; -</pre> - -<p><code>border-width</code> プロパティは一つ、二つ、三つ、四つの値を使って指定することができます。</p> - -<ul> - <li>値が<strong>一つ</strong>指定された場合、<strong>全四辺</strong>に同じ幅が適用される。</li> - <li>値が<strong>二つ</strong>指定された場合、1つ目の幅は<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li> - <li>値が<strong>三つ</strong>指定された場合、1つ目の幅は<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li> - <li>値が<strong>四つ</strong>指定された場合、幅はそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><line-width></code></dt> - <dd>明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 - <table class="standard-table"> - <tbody> - <tr> - <td style="vertical-align: middle;"><code>thin</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"> </div> - </td> - <td style="vertical-align: middle;">細い境界線</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>medium</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"> </div> - </td> - <td style="vertical-align: middle;">中くらいの境界線</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>thick</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"> </div> - </td> - <td style="vertical-align: middle;">太い境界線</td> - </tr> - </tbody> - </table> - - <div class="note"> - <p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p> - </div> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">値と長さの組み合わせ</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p id="sval"> - one value: 6px wide border on all 4 sides</p> -<p id="bival"> - two different values: 2px wide top and bottom border, 10px wide right and left border</p> -<p id="treval"> - three different values: 0.3em top, 9px bottom, and zero width right and left</p> -<p id="fourval"> - four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">#sval { - border: ridge #ccc; - border-width: 6px; -} -#bival { - border: solid red; - border-width: 2px 10px; -} -#treval { - border: dotted orange; - border-width: 0.3em 0 9px; -} -#fourval { - border: solid lightgreen; - border-width: thin medium thick 1em; -} -p { - width: auto; - margin: 0.25em; - padding: 0.25em; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>直接は変更なし。 CSS の {{cssxref("<length>")}} データ型拡張がこのプロパティに影響。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>値の意味が文書内で一定でなければならないという制限を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.border-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界線に関する一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li> - <li>境界線の幅に関するプロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li> -</ul> diff --git a/files/ja/web/css/border-width/index.md b/files/ja/web/css/border-width/index.md new file mode 100644 index 0000000000..195e20171c --- /dev/null +++ b/files/ja/web/css/border-width/index.md @@ -0,0 +1,141 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.border-width +translation_of: Web/CSS/border-width +--- +{{CSSRef}} + +**`border-width`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の幅を設定します。 + +{{EmbedInteractiveExample("pages/css/border-width.html")}} + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`border-bottom-width`](/ja/docs/Web/CSS/border-bottom-width) +- [`border-left-width`](/ja/docs/Web/CSS/border-left-width) +- [`border-right-width`](/ja/docs/Web/CSS/border-right-width) +- [`border-top-width`](/ja/docs/Web/CSS/border-top-width) + +## 構文 + +```css +/* キーワード値 */ +border-width: thin; +border-width: medium; +border-width: thick; + +/* <length> 値 */ +border-width: 4px; +border-width: 1.2rem; + +/* 上下 | 左右 */ +border-width: 2px 1.5em; + +/* 上 | 左右 | 下 */ +border-width: 1px 2em 1.5cm; + +/* 上 | 右 | 下 | 左 */ +border-width: 1px 2em 0 4rem; + +/* グローバルキーワード */ +border-width: inherit; +border-width: initial; +border-width: revert; +border-width: unset; +``` + +`border-width` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。 + +- 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用される。 +- 値が **2 つ**指定された場合、1 つ目の幅は**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目の幅は**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、幅はそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 + +### 値 + +- `<line-width>` + + - : 境界の幅を、明示的な非負の {{cssxref("<length>")}} またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか 1つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="A_mix_of_values_and_lengths">値と長さの組み合わせ</h3> + +#### HTML + +```html +<p id="sval"> + one value: 6px wide border on all 4 sides</p> +<p id="bival"> + two different values: 2px wide top and bottom border, 10px wide right and left border</p> +<p id="treval"> + three different values: 0.3em top, 9px bottom, and zero width right and left</p> +<p id="fourval"> + four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> +``` + +#### CSS + +```css +#sval { + border: ridge #ccc; + border-width: 6px; +} +#bival { + border: solid red; + border-width: 2px 10px; +} +#treval { + border: dotted orange; + border-width: 0.3em 0 9px; +} +#fourval { + border: solid lightgreen; + border-width: thin medium thick 1em; +} +p { + width: auto; + margin: 0.25em; + padding: 0.25em; +} +``` + +#### Result + +{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 境界線に関する一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}} +- 境界線の幅に関するプロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}} diff --git a/files/ja/web/css/content/index.html b/files/ja/web/css/content/index.html deleted file mode 100644 index a19cfaf20f..0000000000 --- a/files/ja/web/css/content/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: content -slug: Web/CSS/content -tags: - - CSS - - CSS プロパティ - - CSS 生成コンテンツ - - Reference -translation_of: Web/CSS/content ---- -<div>{{CSSRef}}</div> - -<p class="summary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>content</code></strong> プロパティは、要素を生成された値で置き換えます。 <code>content</code> プロパティを使用して挿入されたオブジェクトは、<em>無名の<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></em>になります。</p> - -<pre class="brush:css no-line-numbers">/* 他の値と組み合わせることができないキーワード */ -content: normal; -content: none; - -/* <a href="/ja/docs/Web/CSS/image"><image></a> 値 */ -content: url("http://www.example.com/test.png"); -content: linear-gradient(#e66465, #9198e5); - -/* 生成コンテンツの代替テキスト、第3水準の仕様書で追加 */ -content: url("http://www.example.com/test.png") / "This is the alt text"; - -/* 以下の値は ::before および ::after を使用して生成されたコンテンツにのみ適用 */ - -/* <string> 値 */ -content: "prefix"; - -/* <counter> 値 */ -content: counter(chapter_counter); -content: counters(section_counter, "."); - -/* HTML 属性値にリンクした attr() 値 */ -content: attr(value string); - -/* 言語や位置に依存したキーワード */ -content: open-quote; -content: close-quote; -content: no-open-quote; -content: no-close-quote; - -/* normal と none を除き、複数の値が同時に使用可 */ -content: open-quote chapter_counter; - -/* グローバル値 */ -content: inherit; -content: initial; -content: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>擬似要素は生成されません。</dd> - <dt><code>normal</code></dt> - <dd><code>:before</code> および <code>:after</code> 擬似要素では <code>none</code> として計算されます。</dd> - <dt>{{cssxref("<string>")}}</dt> - <dd>要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 <code>\000A9</code> は著作権記号を表します。</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>{{cssxref("<url>")}} または {{cssxref("<gradient>")}} データ型で示された {{cssxref("<image>")}}、または表示するコンテンツを記述する {{cssxref("element", "element()")}} 関数で定義されたウェブページの一部です。</dd> - <dt>{{cssxref("<counter>")}}</dt> - <dd><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>の値で、通常は数値です。 {{cssxref("counter")}} または {{cssxref("counters")}} 関数を使用して表示することができます。</dd> - <dd> - <p>{{cssxref("counter")}} 関数には、 'counter(<var>名前</var>)' または 'counter(<var>名前</var>, <var>スタイル</var>)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。指定されたスタイルで整形されます (<code>decimal</code> が既定値です)。</p> - - <p>{{cssxref("counters")}} 関数も、 'counters(<var>名前</var>, <var>文字列</var>)' または 'counters(<var>名前</var>, <var>文字列</var>, <var>スタイル</var>)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(<code>decimal</code> が既定値です)。</p> - </dd> - <dt><code>attr(x)</code></dt> - <dd>要素の属性の値 <em>x</em> を文字列として返します。属性 <em>x</em> が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。</dd> - <dt><code>open-quote</code> | <code>close-quote</code></dt> - <dd>これらの値は {{cssxref("quotes")}} プロパティの対応する文字列に置き換えられます。</dd> - <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> - <dd>内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Headings_and_quotes" name="Headings_and_quotes">見出しと引用符</h3> - -<p>この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><h1>5</h1> -<p>According to Sir Tim Berners-Lee, - <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was - lucky enough to invent the Web at the time when the Internet - already existed - and had for a decade and a half.</q> - We must understand that there is nothing fundamentally wrong - with building on the contributions of others. -</p> - -<h1>6</h1> -<p>According to the Mozilla Manifesto, - <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals - must have the ability to shape the Internet and - their own experiences on the Internet.</q> - Therefore, we can infer that contributing to the open web - can protect our own individual experiences on it. -</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">q { - color: blue; -} - -q::before { - content: open-quote; -} - -q::after { - content: close-quote; -} - -h1::before { - content: "Chapter "; /* 最後の空白は、追加コンテンツと - 残りのコンテンツの間を隔てる - ものです */ -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}</p> - -<h3 id="Image_combined_with_text" name="Image_combined_with_text">テキストと組み合わせる画像</h3> - -<p>この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">a::before { - content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: "; - font: x-small Arial, sans-serif; - color: gray; -}</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}</p> - -<h3 id="Targeting_classes" name="Targeting_classes">クラスのターゲッティング</h3> - -<p>この例はリストの特定の項目の後に追加のテキストを挿入します。</p> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><h2>Paperback Best Sellers</h2> -<ol> - <li>Political Thriller</li> - <li class="new-entry">Halloween Stories</li> - <li>My Biography</li> - <li class="new-entry">Vampire Romance</li> -</ol></pre> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">.new-entry::after { - content: " New!"; /* 先頭の空白は、追加コンテンツと - 残りのコンテンツの間を隔てる - ものです */ - color: red; -}</pre> - -<h4 id="Result_3" name="Result_3">結果</h4> - -<p>{{EmbedLiveSample('Targeting_classes', '100%', 160)}}</p> - -<h3 id="Images_and_element_attributes" name="Images_and_element_attributes">画像および要素の属性</h3> - -<p>この例はそれぞれのリンクの前に画像を挿入し、後に <code>id</code> 属性を追加します。</p> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html"><ul> - <li><a id="moz" href="http://www.mozilla.org/"> - Mozilla Home Page</a></li> - <li><a id="mdn" href="https://developer.mozilla.org/"> - Mozilla Developer Network</a></li> -</ul></pre> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css">a { - text-decoration: none; - border-bottom: 3px dotted navy; -} - -a::after { - content: " (" attr(id) ")"; -} - -#moz::before { - content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ; -} - -#mdn::before { - content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ; -} - -li { - margin: 1em; -} -</pre> - -<h4 id="Result_4" name="Result_4">結果</h4> - -<p>{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}</p> - -<h3 id="Element_replacement" name="Element_replacement">要素の置き換え</h3> - -<p>この例は要素の内容を画像で置き換えます。要素の内容を {{cssxref("<url>")}} または {{cssxref("<image>")}} の値のどちらかで置き換えることができます。 <code>::before</code> または <code>::after</code> で追加された内容は、要素の中身が置き換えられるときは生成されません。</p> - -<h4 id="HTML_5">HTML</h4> - -<pre class="brush: html"><div id="replaced">Mozilla</div> -</pre> - -<h4 id="CSS_5">CSS</h4> - -<pre class="brush: css">#replaced { - content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); -} - -#replaced::after { /* 要素の置換に対応している場合は表示されない */ - content: " (" attr(id) ")"; -}</pre> - -<h4 id="Result_5" name="Result_5">結果</h4> - -<p>{{EmbedLiveSample('Element_replacement', '100%', 200)}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>CSS の生成コンテンツは <a href="/ja/docs/Web/API/Document_Object_Model/Introduction">DOM</a> に含まれません。そのため、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>に現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。コンテンツがページの目的を理解する上で重要な情報を持つのであれば、文書本体に含めた方が適切です。</p> - -<ul> - <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">WCAG ガイドライン 1.3 の解説 – MDN</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td> - <td>{{Spec2("CSS3 Content")}}</td> - <td>代替テキストの対応を追加</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.content")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("::after")}}</li> - <li>{{Cssxref("::before")}}</li> - <li>{{Cssxref("::marker")}}</li> - <li>{{Cssxref("quotes")}}</li> - <li>{{cssxref("url()", "url()")}} 関数</li> -</ul> diff --git a/files/ja/web/css/content/index.md b/files/ja/web/css/content/index.md new file mode 100644 index 0000000000..a3fd67aa1b --- /dev/null +++ b/files/ja/web/css/content/index.md @@ -0,0 +1,295 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - CSS カウンター + - CSS プロパティ + - 生成コンテンツ + - Reference + - recipe:css-property +browser-compat: css.properties.content +translation_of: Web/CSS/content +--- +{{CSSRef}} + +**`content`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ある要素を生成された値で置き換えます。 `content` プロパティを使用して挿入されたオブジェクトは、**無名の[置換要素](/ja/docs/Web/CSS/Replaced_element)** になります。 + +```css +/* 他の値と組み合わせることができないキーワード */ +content: normal; +content: none; + +/* <image> 値 */ +content: url("http://www.example.com/test.png"); +content: linear-gradient(#e66465, #9198e5); + +/* 生成コンテンツの代替テキスト、レベル 3 の仕様書で追加 */ +content: url("http://www.example.com/test.png") / "This is the alt text"; + +/* <string> 値 */ +content: "prefix"; + +/* <counter> 値、任意で <list-style-type> */ +content: counter(chapter_counter); +content: counter(chapter_counter, upper-roman); +content: counters(section_counter, "."); +content: counters(section_counter, ".", decimal-leading-zero); + +/* HTML 属性値にリンクした attr() 値 */ +content: attr(value string); + +/* 言語や位置に依存したキーワード */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* normal と none を除き、複数の値が同時に使用可 */ +content: open-quote counter(chapter_counter); + +/* グローバル値 */ +content: inherit; +content: initial; +content: revert; +content: unset; +``` + +## 構文 + +### 値 + +- `none` + - : 擬似要素に適用された場合は、その擬似要素は生成されません。要素に適用された場合は、この値は効果がありません。 +- `normal` + - : `::before` および `::after` 擬似要素では `none` として計算されます。 +- {{cssxref("<string>")}} + - : 要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 `\000A9` は著作権記号を表します。 +- {{cssxref("<image>")}} + - : {{cssxref("<image>")}} です。 {{cssxref("url()")}} または {{cssxref("<gradient>")}} データ型、または {{cssxref("element()", "element()")}} 関数で定義されるウェブページの一部です。 +- {{cssxref("counter()")}} + + - : [CSS カウンター](/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)の値で、通常は {{cssxref("<counter-reset>")}} および {{cssxref("<counter-increment>")}} プロパティで定義され、計算によって生み出される数値です。 {{cssxref("counter()")}} または {{cssxref("counters()")}} 関数を使用して表示することができます。 + + {{cssxref("counter()")}} 関数には、 'counter(_名前_)' または 'counter(_名前_, スタイル)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。{{cssxref("<list-style-type>")}} で指定されたスタイルで整形されます (`decimal` が既定値です)。 + + {{cssxref("counters()")}} 関数も、 'counters(_名前_, _文字列_)' または 'counters(_名前_, _文字列_, _スタイル_)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(`decimal` が既定値です)。 + +- `attr(x)` + - : 要素の属性の値 `x` を文字列として返します。属性 `x` が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。 +- `open-quote` | `close-quote` + - : これらの値は {{cssxref("quotes")}} プロパティの対応する文字列に置き換えられます。 +- `no-open-quote` | `no-close-quote` + - : 内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。 + +## アクセシビリティの考慮 + +CSS で生成されるコンテンツは、 [DOM](/ja/docs/Web/API/Document_Object_Model/Introduction) には含まれません。そのため、これは[アクセシビリティツリー](/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis)では表現されず、支援技術とブラウザーの組み合わせによってはアナウンスされないことがあります。そのコンテンツがページの目的を理解する上で重要な情報を含んでいるのであれば、メイン文書に含めたほうが適切です。 + +- [Accessibility support for CSS generated content – Tink](https://tink.uk/accessibility-support-for-css-generated-content/) +- [WCAG の解説、ガイドライン 1.3 – MDN](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Headings_and_quotes">見出しと引用符</h3> + +この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。 + +#### HTML + +```html +<h1>5</h1> +<p>According to Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was + lucky enough to invent the Web at the time when the Internet + already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong + with building on the contributions of others. +</p> + +<h1>6</h1> +<p>According to the Mozilla Manifesto, + <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals + must have the ability to shape the Internet and + their own experiences on the Internet.</q> + Therefore, we can infer that contributing to the open web + can protect our own individual experiences on it. +</p> +``` + +#### CSS + +```css +q { + color: blue; +} + +q::before { + content: open-quote; +} + +q::after { + content: close-quote; +} + +h1::before { + content: "Chapter "; /* 最後の空白は、追加コンテンツと + 残りのコンテンツの間を区切る + ものです */ +} +``` + +#### 結果 + +<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}} + +<h3 id="Image_combined_with_text">テキストと組み合わせる画像</h3> + +この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。 + +#### HTML + +```html +<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a> +``` + +#### CSS + +```css +a::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " MOZILLA: "; + font: x-small Arial, sans-serif; + color: gray; +} +``` + +#### 結果 + +{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}} + +<h3 id="Targeting_classes">クラスのターゲッティング</h3> + +この例はリストの特定の項目の後に追加のテキストを挿入します。 + +#### HTML + +```html +<h2>Paperback Best Sellers</h2> +<ol> + <li>Political Thriller</li> + <li class="new-entry">Halloween Stories</li> + <li>My Biography</li> + <li class="new-entry">Vampire Romance</li> +</ol> +``` + +#### CSS + +```css +.new-entry::after { + content: " New!"; /* 先頭の空白は、追加コンテンツと + 残りのコンテンツの間を区切る + ものです */ + color: red; +} +``` + +#### 結果 + +{{EmbedLiveSample('Targeting_classes', '100%', 160)}} + +<h3 id="Images_and_element_attributes">画像および要素の属性</h3> + +この例はそれぞれのリンクの前に画像を挿入し、後に `id` 属性を追加します。 + +#### HTML + +```html +<ul> + <li><a id="moz" href="https://www.mozilla.org/"> + Mozilla Home Page</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/"> + Mozilla Developer Network</a></li> +</ul> +``` + +#### CSS + +```css +a { + text-decoration: none; + border-bottom: 3px dotted navy; +} + +a::after { + content: " (" attr(id) ")"; +} + +#moz::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); +} + +#mdn::before { + content: url("mdn-favicon16.png"); +} + +li { + margin: 1em; +} +``` + +#### 結果 + +{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}} + +<h3 id="Element_replacement">要素の置き換え</h3> + +この例は、要素の内容を画像で置き換えます。要素の内容を {{cssxref("url()")}} または {{cssxref("<image>")}} の値のどちらかで置き換えることができます。 `::before` または `::after` で追加された内容は、要素の中身が置き換えられるときは生成されません。 + +#### HTML + +```html +<div id="replaced">Mozilla</div> +``` + +#### CSS + +```css +#replaced { + content: url("mdn.svg"); +} + +#replaced::after { /* 要素の置換に対応している場合は表示されない */ + content: " (" attr(id) ")"; +} +``` + +#### 結果 + +{{EmbedLiveSample('Element_replacement', '100%', 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [置換要素](/ja/docs/Web/CSS/Replaced_element) +- {{Cssxref("::after")}} +- {{Cssxref("::before")}} +- {{Cssxref("::marker")}} +- {{Cssxref("quotes")}} +- {{cssxref("url()", "url()")}} 関数 diff --git a/files/ja/web/css/css_pages/index.html b/files/ja/web/css/css_pages/index.html deleted file mode 100644 index 59b983eca7..0000000000 --- a/files/ja/web/css/css_pages/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: CSS ページ化メディア -slug: Web/CSS/CSS_Pages -tags: - - CSS - - CSS ページ付きメディア - - CSS ページ化メディア - - Reference - - 概要 -translation_of: Web/CSS/CSS_Pages ---- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS ページ化メディア</strong><rp> (</rp><rt>CSS Paged Media</rt><rp>) </rp></ruby>は、ページ切り替えを扱う方法を定義する CSS のモジュールです。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("page-break-after")}}</li> - <li>{{cssxref("page-break-before")}}</li> - <li>{{cssxref("page-break-inside")}}</li> - <li> </li> -</ul> -</div> - -<h3 id="At-rules" name="At-rules">@-規則</h3> - -<div class="index"> -<ul> - <li>{{cssxref('@page')}}</li> -</ul> -</div> - -<h3 id="Pseudo-classes" name="Pseudo-classes">疑似クラス</h3> - -<div class="index"> -<ul> - <li>{{cssxref(':blank')}}</li> - <li>{{cssxref(':first')}}</li> - <li>{{cssxref(':left')}}</li> - <li>{{cssxref(':right')}}</li> -</ul> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Paged Media')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Fragmentation')}}</td> - <td>{{Spec2('CSS3 Fragmentation')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - </tbody> -</table> diff --git a/files/ja/web/css/css_pages/index.md b/files/ja/web/css/css_pages/index.md new file mode 100644 index 0000000000..49cea7c091 --- /dev/null +++ b/files/ja/web/css/css_pages/index.md @@ -0,0 +1,41 @@ +--- +title: CSS ページメディア +slug: Web/CSS/CSS_Pages +tags: + - CSS + - CSS ページメディア + - ガイド + - 概要 + - Reference +translation_of: Web/CSS/CSS_Pages +--- +{{CSSRef}} + +**CSS ページメディア**は CSS のモジュールの一つで、ページ切り替えをどのように扱うかを定義します。 + +## リファレンス + +### CSS プロパティ + +- {{cssxref("page-break-after")}} +- {{cssxref("page-break-before")}} +- {{cssxref("page-break-inside")}} + +### アットルール + +- {{cssxref('@page')}} + +### 擬似クラス + +- {{cssxref(':blank')}} +- {{cssxref(':first')}} +- {{cssxref(':left')}} +- {{cssxref(':right')}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------- | ------------------------------- | ------- | +| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | +| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | +| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/ja/web/css/css_ruby/index.html b/files/ja/web/css/css_ruby/index.html deleted file mode 100644 index 4e0f0119c1..0000000000 --- a/files/ja/web/css/css_ruby/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CSS ルビレイアウト -slug: Web/CSS/CSS_Ruby -tags: - - CSS - - CSS ルビレイアウト - - Reference - - 概要 -translation_of: Web/CSS/CSS_Ruby ---- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS ルビレイアウト</strong><rp> (</rp><rt>CSS Ruby Layout</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("ruby-align")}}</li> - <li>{{cssxref("ruby-position")}}</li> -</ul> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Ruby')}}</td> - <td>{{Spec2('CSS3 Ruby')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="ruby-align_プロパティ"><code>ruby-align</code> プロパティ</h3> - -<div> -<p>{{Compat("css.properties.ruby-align")}}</p> - -<h3 id="ruby-position_プロパティ"><code>ruby-position</code> プロパティ</h3> - -<div> -<p>{{Compat("css.properties.ruby-position")}}</p> -</div> -</div> diff --git a/files/ja/web/css/css_ruby/index.md b/files/ja/web/css/css_ruby/index.md new file mode 100644 index 0000000000..93693dc1b6 --- /dev/null +++ b/files/ja/web/css/css_ruby/index.md @@ -0,0 +1,27 @@ +--- +title: CSS ルビレイアウト +slug: Web/CSS/CSS_Ruby +tags: + - CSS + - CSS ルビ + - ガイド + - 概要 + - Reference +translation_of: Web/CSS/CSS_Ruby +--- +{{CSSRef}} + +**CSS ルビレイアウト** (CSS Ruby Layout) は [CSS](/ja/docs/Web/CSS) のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。 + +## リファレンス + +### プロパティ + +- {{cssxref("ruby-align")}} +- {{cssxref("ruby-position")}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------- | ---------------------- | -------- | +| {{SpecName('CSS3 Ruby')}} | {{Spec2('CSS3 Ruby')}} | 初回定義 | diff --git a/files/ja/web/css/css_scroll_snap/basic_concepts/index.md b/files/ja/web/css/css_scroll_snap/basic_concepts/index.md new file mode 100644 index 0000000000..689f7ad01e --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/basic_concepts/index.md @@ -0,0 +1,68 @@ +--- +title: CSS スクロールスナップの基本概念 +slug: Web/CSS/CSS_Scroll_Snap/Basic_concepts +tags: + - CSS + - CSS スクロールスナップ + - Guide + - concepts +--- +{{CSSRef}} + +[CSS スクロールスナップ仕様書](https://drafts.csswg.org/css-scroll-snap-1/)は、ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる方法を提供します。これにより、モバイルでも、デスクトップであっても、アプリのような操作感を実現することができます。 + +## スクロールスナップの基本 + +スクロールスナップ仕様の主要なプロパティは、{{CSSxRef("scroll-snap-type")}} と {{CSSxRef("scroll-snap-align")}} です。`scroll-snap-type` プロパティは、スクロールの種類と方向を指定するために、[スクロールコンテナー](/ja/docs/Glossary/Scroll_container)で使用されます。 + +`scroll-snap-align` プロパティは子要素で、スクロールがスナップする位置を設定するために使用する必要があります。以下の例では `y` 軸に沿ってスクロールをスナップさせるために、`scroll-snap-align` をセクション要素に使用してスクロールを停止する位置を指定しています。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}} + +## scroll-snap-type の使用 + +{{CSSxRef("scroll-snap-type")}} プロパティは、スクロールスナップが発生する方向を指定する必要があります。これには `x` や `y`、論理マッピングの `block` や `inline` などがあります。また、キーワード `both` を使用すると、スクロールスナップが両軸で動作するようになります。 + +また、`mandatory` や `proximity` のキーワードを渡すこともできます。`mandatory` キーワードは、スクロールの位置に関係なく、コンテンツが特定の伊大知にスナップ*しなければならない*かどうかをブラウザーに伝えます。`proximity` キーワードは、その位置にスナップしてもよいが、しなくてもよいことを意味します。 + +`mandatory` を使用すると、とても一貫した操作感が得られます。つまり、ブラウザーは定義された各位置に必ずスナップすることがわかります。つまり、画面の上部にあると期待されるものが、スクロールが終了したときにあると確信できるのです。しかし、コンテンツが予想以上に大きい場合には、問題が発生する可能性があります。ユーザーは、スクロールしてもコンテンツの特定の位置を見ることができないという、もどかしい状況に陥るかもしれません。そのため、`mandatory` の使用は慎重に検討し、一度に画面に表示されるコンテンツの量が分かっている場合にのみ使用するようにしてください。 + +`proximity` の値は、近くにある場合にのみ位置にスナップしますが、正確な距離はブラウザーの判断に委ねられています。以下の例では、`mandatory` と `proximity` の間で値を変更し、スクロールの操作感に与える影響を確認することができます。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}} + +## scroll-snap-align の使用 + +{{CSSxRef("scroll-snap-align")}} プロパティには、スクロールコンテナ内でコンテンツがスナップするポイントを示す、`start`、`end`、`center` の値を取ることができます。以下の例では、`scroll-snap-align` の値を変更することで、スクロールの動作がどのように変化するかを確認できます。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}} + +## スクロールコンテナーのパディング + +スクロールコンテナーの端にコンテンツをスナップさせたくない場合は、{{CSSxRef("scroll-padding")}} プロパティまたはそれに相当する個別指定の値を使ってパディングを設定することができます。 + +以下の例では、`scroll-padding` を 40 ピクセルに設定しています。2 つ目と 3 つ目のセクションの開始点にスナップすると、スクロールはセクションの開始点から 40 ピクセル離れたところで止まります。`scroll-padding` の値を変更して、距離の変化を確認してみてください。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}} + +これは、例えばナビゲーションバーなどの固定要素があり、スクロールしたコンテンツと重なってしまう場合に便利です。`scroll-padding` を使用すると、下の例のように、コンテンツがスクロールしても `<h1>` が画面上に残るように、見出しのための空間を確保することができます。パディングがないと、スナップが発生したときに見出しがコンテンツの一部と重なってしまいます。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}} + +## スクロールの子のマージン + +{{CSSxRef("scroll-margin")}} プロパティは、子要素に設定することができ、定義されたボックスの外側を定義することができます。これにより、子要素ごとに異なるスペースを確保することができ、親要素の `scroll-padding` と組み合わせて使用することができます。以下の例で試してみてください。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}} + +## scroll-snap-stop プロパティ + +{{CSSxRef("scroll-snap-stop")}} プロパティは、定義された各スナップ位置にスナップするかどうか — つまり上記の例では、それぞれのセクションの先頭で停止するか、またはセクションをスキップできるかどうか — をブラウザーに伝えます。このプロパティは、他の仕様に比べて実装しているブラウザーが少ないです。 + +このプロパティは、ユーザーがスクローラーの各セクションを確実に確認し、誤ってスキップしてしまわないようにするのに役立ちます。しかし、ユーザーが特定のセクションを探している場合、スクロールの速度が遅くなるという問題があります。 + +> **Note:** `scroll-snap-stop` プロパティは、現在の勧告候補の仕様ではリスクがあるとされているため、削除される可能性があります。 + +## ブラウザーの互換性 + +個々のプロパティページでは、スクロールスナップについてブラウザーの互換性の状況を詳しく説明しています。なお、Firefox 68 以前の Firefox は、古いバージョンの仕様を実装していました。新旧両方の仕様をサポートするクロスブラウザー対応のコードを書く方法の概要については、[次のガイドをお読みください](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)。 diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.html b/files/ja/web/css/css_scroll_snap/browser_compat/index.html deleted file mode 100644 index e4e1a3473a..0000000000 --- a/files/ja/web/css/css_scroll_snap/browser_compat/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ブラウザーの互換性とスクロールスナップ -slug: Web/CSS/CSS_Scroll_Snap/Browser_compat -tags: - - CSS - - CSS Scroll Snap - - CSS スクロールスナップ - - Guide - - browser compat - - compat - - 互換性 -translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat ---- -<div>{{CSSRef}}</div> - -<p class="summary">Firefox は当初、初期版のスクロールスナップの仕様書、いわゆる<ruby>スクロールスナップ点<rp> (</rp><rt>Scroll Snap Points</rt><rp>) </rp></ruby>を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。</p> - -<h2 id="What_should_I_do_if_I_used_the_old_Firefox_implementation" name="What_should_I_do_if_I_used_the_old_Firefox_implementation">古い Firefox の実装を使用していた場合はどうすればよいのか</h2> - -<p>もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。</p> - -<p>主に以下のようなことに注意してください。</p> - -<ul> - <li>{{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された</li> - <li>{{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 <code>scroll-snap-type:mandatory</code> のような古い一括指定の構文が動作しなくなった</li> -</ul> - -<h2 id="Can_I_use_the_old_implementation_as_a_fallback" name="Can_I_use_the_old_implementation_as_a_fallback">フォールバックとして古い実装を使用することができるか</h2> - -<p>既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。</p> - -<p>この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。</p> - -<p>この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な <code>y</code> 軸の値を伴い、もう一つは Firefox 68 以前で、 <code>y</code> 値のないプロパティに対応しているもののためです。</p> - -<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p> - -<h2 id="Do_you_need_to_use_both_specs" name="Do_you_need_to_use_both_specs">両方の仕様書を使用する必要があるか</h2> - -<p>スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。</p> - -<p>新しい仕様書に対応していることを、<a href="/ja/docs/Web/CSS/@supports">特性クエリ</a>を使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。</p> - -<h2 id="Why_do_we_have_two_versions" name="Why_do_we_have_two_versions">なぜ二つの版があるのか</h2> - -<p>最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。</p> diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.md b/files/ja/web/css/css_scroll_snap/browser_compat/index.md new file mode 100644 index 0000000000..f34236fb01 --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/browser_compat/index.md @@ -0,0 +1,48 @@ +--- +title: ブラウザーの互換性とスクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap/Browser_compat +tags: + - CSS + - CSS スクロールスナップ + - 互換性 + - FAQ + - ガイド + - Usage + - browser compat + - compat +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +{{CSSRef}} + +Firefox は当初、初期版のスクロールスナップの仕様書、いわゆるスクロールスナップ点 (Scroll Snap Points) を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。 + +この記事では、ウェブサイトやアプリにスクロールスナップの対応を追加する際に、ブラウザー間やブラウザーのバージョン間の互換性に関連して発生する可能性のある質問について考えます。 + +## 古い Firefox の実装を使用していた場合はどうすればよいのか + +もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。 + +主に以下のようなことに注意してください。 + +- {{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された +- {{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 `scroll-snap-type:mandatory` のような古い一括指定の構文が動作しなくなった + +## フォールバックとして古い実装を使用することができるか + +既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit 接頭辞付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。 + +この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。 + +この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な `y` 軸の値を伴い、もう一つは Firefox 68 以前の、 `y` 値のないプロパティに対応しているもののためです。 + +{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}} + +## 両方の仕様書を使用する必要があるか + +スクロールスナップは、強化された機能が得られなくても、すべてが機能するというフォールバックが可能な、CSS の優れた部分のひとつです。現時点では、フォールバック版の恩恵を受けるユーザーが多数いるというデータがない限り、新仕様のみを実装することをお勧めします。 + +[機能クエリー](/ja/docs/Web/CSS/@supports)を使用して新しい仕様書に対応していることを確認したいのであれば、{{CSSxRef("scroll-snap-align")}} を確認することをお勧めします。このプロパティは古い実装には存在しないからです。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。 + +## なぜ 2 つの版があるのか + +最後に、なぜ 2 つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。 diff --git a/files/ja/web/css/css_scroll_snap/index.html b/files/ja/web/css/css_scroll_snap/index.html deleted file mode 100644 index 57af06183b..0000000000 --- a/files/ja/web/css/css_scroll_snap/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: CSS スクロールスナップ -slug: Web/CSS/CSS_Scroll_Snap -tags: - - CSS - - CSS スクロールスナップ - - Reference - - 概要 -translation_of: Web/CSS/CSS_Scroll_Snap ---- -<div>{{CSSRef}}</div> - -<p class="summary"><strong>CSS スクロールスナップ</strong>は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。</p> - -<div class="note"> -<p><strong>メモ</strong>: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。</p> -</div> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_Properties_on_Containers" name="CSS_Properties_on_Containers">コンテナーの CSS プロパティ</h3> - -<ul> - <li>{{cssxref("scroll-snap-type")}}</li> - <li>{{cssxref("scroll-snap-stop")}}</li> - <li>{{cssxref("scroll-padding")}}</li> - <li>{{cssxref("scroll-padding-top")}}</li> - <li>{{cssxref("scroll-padding-right")}}</li> - <li>{{cssxref("scroll-padding-bottom")}}</li> - <li>{{cssxref("scroll-padding-left")}}</li> - <li>{{cssxref("scroll-padding-inline")}}</li> - <li>{{cssxref("scroll-padding-inline-start")}}</li> - <li>{{cssxref("scroll-padding-inline-end")}}</li> - <li>{{cssxref("scroll-padding-block")}}</li> - <li>{{cssxref("scroll-padding-block-start")}}</li> - <li>{{cssxref("scroll-padding-block-end")}}</li> -</ul> - -<h3 id="CSS_Properties_on_Children" name="CSS_Properties_on_Children">子の CSS プロパティ</h3> - -<ul> - <li>{{cssxref("scroll-snap-align")}}</li> - <li>{{cssxref("scroll-margin")}}</li> - <li>{{cssxref("scroll-margin-top")}}</li> - <li>{{cssxref("scroll-margin-right")}}</li> - <li>{{cssxref("scroll-margin-bottom")}}</li> - <li>{{cssxref("scroll-margin-left")}}</li> - <li>{{cssxref("scroll-margin-inline")}}</li> - <li>{{cssxref("scroll-margin-inline-start")}}</li> - <li>{{cssxref("scroll-margin-inline-end")}}</li> - <li>{{cssxref("scroll-margin-block")}}</li> - <li>{{cssxref("scroll-margin-block-start")}}</li> - <li>{{cssxref("scroll-margin-block-end")}}</li> -</ul> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> diff --git a/files/ja/web/css/css_scroll_snap/index.md b/files/ja/web/css/css_scroll_snap/index.md new file mode 100644 index 0000000000..4d6d4fe2b9 --- /dev/null +++ b/files/ja/web/css/css_scroll_snap/index.md @@ -0,0 +1,64 @@ +--- +title: CSS スクロールスナップ +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS スクロールスナップ + - Guide + - 概要 + - Reference +translation_of: Web/CSS/CSS_Scroll_Snap +--- +{{CSSRef}} + +**CSS スクロールスナップ** (CSS Scroll Snap) は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。 + +## リファレンス + +### コンテナーの CSS プロパティ + +- {{cssxref("scroll-snap-type")}} +- {{cssxref("scroll-padding")}} +- {{cssxref("scroll-padding-top")}} +- {{cssxref("scroll-padding-right")}} +- {{cssxref("scroll-padding-bottom")}} +- {{cssxref("scroll-padding-left")}} +- {{cssxref("scroll-padding-inline")}} +- {{cssxref("scroll-padding-inline-start")}} +- {{cssxref("scroll-padding-inline-end")}} +- {{cssxref("scroll-padding-block")}} +- {{cssxref("scroll-padding-block-start")}} +- {{cssxref("scroll-padding-block-end")}} + +### 子の CSS プロパティ + +- {{cssxref("scroll-snap-align")}} +- {{cssxref("scroll-margin")}} +- {{cssxref("scroll-margin-top")}} +- {{cssxref("scroll-margin-right")}} +- {{cssxref("scroll-margin-bottom")}} +- {{cssxref("scroll-margin-left")}} +- {{cssxref("scroll-margin-inline")}} +- {{cssxref("scroll-margin-inline-start")}} +- {{cssxref("scroll-margin-inline-end")}} +- {{cssxref("scroll-margin-block")}} +- {{cssxref("scroll-margin-block-start")}} +- {{cssxref("scroll-margin-block-end")}} +- {{cssxref("scroll-snap-stop")}} + +## ガイド + +- [CSS スクロールスナップの基本概念](/ja/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts) +- [ブラウザーの互換性とスクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat) + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------- | ----------------------------------- | -------- | +| {{SpecName("CSS Scroll Snap Points")}} | {{Spec2("CSS Scroll Snap Points")}} | 初回定義 | + +## ブラウザーの互換性 + +個々のプロパティページにて、それぞれのプロパティのブラウザー互換性情報を詳しく説明しています。 + +> **Note:** このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、[ブラウザーの互換性のガイド](/ja/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat)を参照してください。 diff --git a/files/ja/web/css/css_scroll_snap_points/index.html b/files/ja/web/css/css_scroll_snap_points/index.html deleted file mode 100644 index 5b6996036e..0000000000 --- a/files/ja/web/css/css_scroll_snap_points/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: CSS スクロールスナップ点 -slug: Web/CSS/CSS_Scroll_Snap_Points -tags: - - CSS - - CSS スクロールスナップ点 - - Overview - - Reference - - 概要 -translation_of: Web/CSS/CSS_Scroll_Snap_Points ---- -<div>{{CSSRef}} {{deprecated_header}}</div> - -<p><ruby><strong>CSS スクロールスナップ点</strong><rp> (</rp><rt>CSS Scroll Snap Points</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。</p> - -<div class="note"> -<p><strong>メモ</strong>: <a href="/ja/docs/Web/CSS/CSS_Scroll_Snap">CSS スクロールスナップ</a>がこの機能を定義する最新の仕様書です。</p> -</div> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("scroll-snap-coordinate")}}</li> - <li>{{cssxref("scroll-snap-destination")}}</li> - <li>{{cssxref("scroll-snap-points-x")}}</li> - <li>{{cssxref("scroll-snap-points-y")}}</li> - <li>{{cssxref("scroll-snap-type")}}</li> -</ul> -</div> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="scroll-snap-coordinate_プロパティ"><code>scroll-snap-coordinate</code> プロパティ</h3> - -<div> -<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p> -</div> diff --git a/files/ja/web/css/css_scroll_snap_points/index.md b/files/ja/web/css/css_scroll_snap_points/index.md new file mode 100644 index 0000000000..5bdae2fa62 --- /dev/null +++ b/files/ja/web/css/css_scroll_snap_points/index.md @@ -0,0 +1,32 @@ +--- +title: CSS スクロールスナップ点 +slug: Web/CSS/CSS_Scroll_Snap_Points +tags: + - CSS + - CSS スクロールスナップ + - ガイド + - 概要 + - Reference +translation_of: Web/CSS/CSS_Scroll_Snap_Points +--- +{{CSSRef}} {{deprecated_header}} + +**CSS スクロールスナップ点** (CSS Scroll Snap Points) は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。 + +> **Note:** [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap)がこの機能を定義する最新の仕様書です。 + +## リファレンス + +### CSS プロパティ + +- {{cssxref("scroll-snap-coordinate")}} +- {{cssxref("scroll-snap-destination")}} +- {{cssxref("scroll-snap-points-x")}} +- {{cssxref("scroll-snap-points-y")}} +- {{cssxref("scroll-snap-type")}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ----------------------------------------------------------------------------------------------- | ----------------------------------- | -------- | +| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}} | {{Spec2("CSS Scroll Snap Points")}} | 初回定義 | diff --git a/files/ja/web/css/css_shapes/index.html b/files/ja/web/css/css_shapes/index.html deleted file mode 100644 index dcbe826a74..0000000000 --- a/files/ja/web/css/css_shapes/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: CSS シェイプ -slug: Web/CSS/CSS_Shapes -tags: - - CSS - - CSS シェイプ - - Reference - - wrapping - - シェイプ - - リファレンス - - 境界 - - 概要 -translation_of: Web/CSS/CSS_Shapes ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong>CSS シェイプ</strong>は、 CSS で使用する幾何学的な図形を記述します。 <a href="https://drafts.csswg.org/css-shapes/">レベル１の仕様書</a>では、 CSS シェイプは浮動状態の要素に適用されます。</span>仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。</p> - -<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2> - -<p>以下の例では、左に浮動状態の画像を表示し、 <code>shape-outside</code> プロパティを <code>circle(50%)</code> の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。</p> - -<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("shape-image-threshold")}}</li> - <li>{{cssxref("shape-margin")}}</li> - <li>{{cssxref("shape-outside")}}</li> -</ul> -</div> - -<h3 id="Data_types" name="Data_types">データ型</h3> - -<div class="index"> -<ul> - <li>{{cssxref("<basic-shape>")}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からのシェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">画像からのシェイプ</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">CSS でのシェイプのパスの編集 — Firefox 開発ツール</a></li> -</ul> - -<h2 id="外部リソース">外部リソース</h2> - -<ul> - <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">A list of CSS Shapes resources</a></li> - <li><a href="https://alistapart.com/article/css-shapes-101">CSS Shapes 101</a></li> - <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes</a></li> - <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498">How To Use CSS Shapes In Your Web Design</a></li> - <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/">How To Get Started With CSS Shapes</a></li> - <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5">What I Learned In One Weekend With CSS Shapes</a></li> - <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/">CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Shapes")}}</td> - <td>{{Spec2("CSS Shapes")}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="shape-outside">shape-outside</h3> - -<p>{{Compat("css.properties.shape-outside")}}</p> - -<h3 id="shape-margin">shape-margin</h3> - -<p>{{Compat("css.properties.shape-margin")}}</p> - -<h3 id="shape-image-threshold">shape-image-threshold</h3> - -<p>{{Compat("css.properties.shape-image-threshold")}}</p> diff --git a/files/ja/web/css/css_shapes/index.md b/files/ja/web/css/css_shapes/index.md new file mode 100644 index 0000000000..bd44523b5c --- /dev/null +++ b/files/ja/web/css/css_shapes/index.md @@ -0,0 +1,59 @@ +--- +title: CSS シェイプ +slug: Web/CSS/CSS_Shapes +tags: + - 境界 + - CSS + - CSS シェイプ + - ガイド + - 概要 + - Reference + - シェイプ + - wrapping +translation_of: Web/CSS/CSS_Shapes +--- +{{CSSRef}} + +**CSS シェイプ**は、 CSS で使用する幾何学的な図形を記述します。[レベル 1 の仕様書](https://drafts.csswg.org/css-shapes/)では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。 + +## 基本的な例 + +以下の例では、左に浮動状態の画像を表示し、`shape-outside` プロパティを `circle(50%)` の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。 + +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} + +## リファレンス + +### プロパティ + +- {{cssxref("shape-image-threshold")}} +- {{cssxref("shape-margin")}} +- {{cssxref("shape-outside")}} + +### データ型 + +- {{cssxref("<basic-shape>")}} + +## ガイド + +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- [ボックス値からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/From_box_values) +- [基本シェイプ](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) +- [画像からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) +- [CSS でのシェイプのパスの編集 — Firefox 開発ツール](/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes) + +## 外部リソース + +- [A list of CSS Shapes resources](https://codepen.io/KristopherVanSant/post/css-shapes-resources) +- [CSS Shapes 101](https://alistapart.com/article/css-shapes-101) +- [Creating non-rectangular layouts with CSS Shapes](https://www.sarasoueidan.com/blog/css-shapes/) +- [How To Use CSS Shapes In Your Web Design](https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498) +- [How To Get Started With CSS Shapes](https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/) +- [What I Learned In One Weekend With CSS Shapes](https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5) +- [CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components](https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/) + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------- | ----------------------- | -------- | +| {{SpecName("CSS Shapes")}} | {{Spec2("CSS Shapes")}} | 初回定義 | diff --git a/files/ja/web/css/css_text/index.html b/files/ja/web/css/css_text/index.html deleted file mode 100644 index d92efd6b04..0000000000 --- a/files/ja/web/css/css_text/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: CSS テキスト -slug: Web/CSS/CSS_Text -tags: - - CSS - - CSS テキスト - - 概要 -translation_of: Web/CSS/CSS_Text ---- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS テキスト</strong><rp> (</rp><rt>CSS Text</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのようにテキストの操作を行うかを定義します。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("hanging-punctuation")}}</li> - <li>{{cssxref("hyphens")}}</li> - <li>{{cssxref("letter-spacing")}}</li> - <li>{{cssxref("line-break")}}</li> - <li>{{cssxref("overflow-wrap")}}</li> - <li>{{cssxref("tab-size")}}</li> - <li>{{cssxref("text-align")}}</li> - <li>{{cssxref("text-align-last")}}</li> - <li>{{cssxref("text-indent")}}</li> - <li>{{cssxref("text-justify")}}</li> - <li>{{cssxref("text-size-adjust")}}</li> - <li>{{cssxref("text-transform")}}</li> - <li>{{cssxref("white-space")}}</li> - <li>{{cssxref("word-break")}}</li> - <li>{{cssxref("word-spacing")}}</li> -</ul> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>一部のプロパティを、テキストの書字方向から独立するように更新。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> diff --git a/files/ja/web/css/css_text/index.md b/files/ja/web/css/css_text/index.md new file mode 100644 index 0000000000..8aa53627c6 --- /dev/null +++ b/files/ja/web/css/css_text/index.md @@ -0,0 +1,41 @@ +--- +title: CSS テキスト +slug: Web/CSS/CSS_Text +tags: + - CSS + - CSS テキスト + - ガイド +translation_of: Web/CSS/CSS_Text +--- +{{CSSRef}} + +**CSS テキスト** (CSS Text) は CSS のモジュールの一つで、どのようにテキストを扱うか、例えば改行、位置揃えと配置、空白の扱い、テキストの変換などを定義します。 + +## リファレンス + +### プロパティ + +- {{cssxref("hanging-punctuation")}} +- {{cssxref("hyphens")}} +- {{cssxref("letter-spacing")}} +- {{cssxref("line-break")}} +- {{cssxref("overflow-wrap")}} +- {{cssxref("tab-size")}} +- {{cssxref("text-align")}} +- {{cssxref("text-align-last")}} +- {{cssxref("text-indent")}} +- {{cssxref("text-justify")}} +- {{cssxref("text-size-adjust")}} +- {{cssxref("text-transform")}} +- {{cssxref("white-space")}} +- {{cssxref("word-break")}} +- {{cssxref("word-spacing")}} + +## 仕様書 + +| 仕様書 | 状態 | コメント | +| ---------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------- | +| {{SpecName('CSS Logical Properties')}} | {{Spec2('CSS Logical Properties')}} | 一部のプロパティを、テキストの書字方向から独立するように更新。 | +| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | 初回定義 | diff --git a/files/ja/web/css/css_text/wrapping_text/index.md b/files/ja/web/css/css_text/wrapping_text/index.md new file mode 100644 index 0000000000..6eb219f74a --- /dev/null +++ b/files/ja/web/css/css_text/wrapping_text/index.md @@ -0,0 +1,76 @@ +--- +title: テキストの分割と折り返し +slug: Web/CSS/CSS_Text/Wrapping_Text +tags: + - CSS + - CSS テキスト + - Guide + - overflow + - overflow-wrap + - word-break +translation_of: Web/CSS/CSS_Text/Wrapping_Text +--- +{{CSSRef}} + +このガイドは CSS で管理することができるテキストのはみ出しの様々な方法を説明します。 + +## テキストのはみ出しとは + +CSS では、非常に長い単語などの切れない文字列がある場合、既定ではインライン方向に小さすぎるコンテナからはみ出します。下の例で、この現象を見ることができます。長い単語が、ボックスの境界を越えて伸びています。 + +{{EmbedGHLiveSample("css-examples/css-text/inline-overflow.html", '100%', 420)}} + +CSS はこのようにあふれて表示させますが、これは他の方法をとるとデータロスが発生するためです。CSS のデータロスとは、コンテンツの一部が消えてしまうことを意味します。そのため、{{cssxref("overflow")}}の初期値は `visible` であり、あふれたテキストを見ることができます。一般的には、あふれた部分はが汚くても見えた方が良いものです。`overflow` が `hidden` に設定されている場合のように、物が消えたり、トリミングされたりすると、サイトをプレビューしたときに気づかないかもしれません。汚くてもオーバーフローは、少なくとも簡単に見つけることができ、最悪、訪問者は多少奇妙に見えたとしてもコンテンツを見て読むことができます。 + +次の例では、 `overflow` が `hidden` に設定されている場合に何が起こるかを見てみましょう。 + +{{EmbedGHLiveSample("css-examples/css-text/inline-overflow-hidden.html", '100%', 420)}} + +## min-content の寸法を探る + +コンテンツを溢れずに含むことができるボックスの最小の寸法を探るには、そのボックスの {{cssxref("width")}} または {{cssxref("inline-size")}} プロパティに {{cssxref("min-content")}} を設定してください。 + +{{EmbedGHLiveSample("css-examples/css-text/min-content.html", '100%', 420)}} + +そのため、 `min-content` を使用すると、ボックスがあふれてしまう可能性があります。もし、ボックスがコンテンツに必要な最小の寸法まで成長し、それ以上大きくならないようにすることが可能であれば、このキーワードを使用することで、その寸法を得ることができます。 + +## 長い単語の分割 + +ボックスのサイズを固定する必要がある場合や、長い単語がはみ出さないようにしたい場合は、{{cssxref("overflow-wrap")}} プロパティが役立ちます。このプロパティは、単語が長すぎて 1 行に収まらない場合、その単語を分割します。 + +{{EmbedGHLiveSample("css-examples/css-text/overflow-wrap.html", '100%', 660)}} + +> **Note:** `overflow-wrap` プロパティは、標準外のプロパティの `word-wrap` と同じように動作します。 `word-wrap` プロパティは、現在ブラウザーでは標準プロパティの別名として扱われています。 + +別のプロパティとして、{{cssxref("word-break")}} を試すことができます。このプロパティは、あふれた時点で単語を改行します。単語を改行することで分割せずに表示できる場合でも分割されます。 + +次の例では、同じ文字列で 2 つのプロパティの違いを比較してみましょう。 + +{{EmbedGHLiveSample("css-examples/css-text/word-break.html", '100%', 700)}} + +これは、文字列に十分なスペースがある場合に、大きなギャップが現れないようにしたい場合に便利です。また、他の要素があって、その直後に改行させたくない場合にも便利です。 + +以下の例には、チェックボックスとラベルがあります。例えば、ラベルがボックスに対して長すぎる場合には、ラベルを改行したいとします。しかし、チェックボックスの直後では改行してほしくありません。 + +{{EmbedGHLiveSample("css-examples/css-text/word-break-checkbox.html", '100%', 660)}} + +## ハイフンの追加 + +単語が改行されるときにハイフンを追加するには、CSS の {{cssxref("hyphens")}} プロパティを使用します。`auto` の値を使用すると、ブラウザーは自由に選択したルールに従って、適切なハイフネーション位置で自動的に単語を区切ります。プロセスをある程度制御するには、値を `manual` にして、ハードまたはソフトブレイク文字を文字列に挿入します。ハードブレイク (`‐`) は、その必要がない場合でも、常に改行します。ソフトブレイク (``) は、改行が必要な場合にのみ改行します。 + +{{EmbedGHLiveSample("css-examples/css-text/hyphens.html", '100%', 660)}} + +## \<wbr> 要素 + +長い文字列を区切りたい場所がわかっている場合は、HTMLの {{HTMLElement("wbr")}} 要素を挿入することも可能です。これは、ページ上に長い URL を表示する場合などに便利です。このプロパティを追加することで、文字列を読みやすい場所で改行することができます。 + +以下の例では、{{HTMLElement("wbr")}} の位置でテキストが改行されています。 + +{{EmbedGHLiveSample("css-examples/css-text/wbr.html", '100%', 460)}} + +## 関連情報 +- HTML の {{HTMLElement("wbr")}} 要素 +- CSS の {{cssxref("word-break")}} プロパティ +- CSS の {{cssxref("overflow-wrap")}} プロパティ +- CSS の {{cssxref("hyphens")}} プロパティ +- [Overflow and Data Loss in CSS](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/) diff --git a/files/ja/web/css/css_text_decoration/index.html b/files/ja/web/css/css_text_decoration/index.html deleted file mode 100644 index 5dd4da31f6..0000000000 --- a/files/ja/web/css/css_text_decoration/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CSS テキスト装飾 -slug: Web/CSS/CSS_Text_Decoration -tags: - - CSS - - CSS Text Decoration - - Guide - - Overview - - Reference -translation_of: Web/CSS/CSS_Text_Decoration ---- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS テキスト装飾</strong><rp> (</rp><rt>Text Decoration</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("letter-spacing")}}</li> - <li>{{cssxref("text-align")}}</li> - <li>{{cssxref("text-decoration")}}</li> - <li>{{cssxref("text-decoration-color")}}</li> - <li>{{cssxref("text-decoration-line")}}</li> - <li>{{cssxref("text-decoration-offset")}}</li> - <li>{{cssxref("text-decoration-skip-ink")}}</li> - <li>{{cssxref("text-decoration-style")}}</li> - <li>{{cssxref("text-decoration-thickness")}}</li> - <li>{{cssxref("text-emphasis")}}</li> - <li>{{cssxref("text-emphasis-color")}}</li> - <li>{{cssxref("text-emphasis-position")}}</li> - <li>{{cssxref("text-emphasis-style")}}</li> - <li>{{cssxref("text-indent")}}</li> - <li>{{cssxref("text-rendering")}}</li> - <li>{{cssxref("text-shadow")}}</li> - <li>{{cssxref("text-transform")}}</li> - <li>{{cssxref("white-space")}}</li> - <li>{{cssxref("word-spacing")}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<p><em>なし。</em></p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css notranslate">.under { - text-decoration: underline red; -} - -.over { - text-decoration: wavy overline lime; -} - -.line { - text-decoration: line-through; -} - -.plain { - text-decoration: none; -} - -.underover { - text-decoration: dashed underline overline; -} - -.thick { - text-decoration: solid underline purple 4px; -} - -.blink { - text-decoration: blink; -} -</pre> - -<pre class="brush: html notranslate"><p class="under">This text has a line underneath it.</p> -<p class="over">This text has a line over it.</p> -<p class="line">This text has a line going through it.</p> -<p>This <a class="plain" href="#">link will not be underlined</a>, - as links generally are by default. Be careful when removing - the text decoration on anchors since users often depend on - the underline to denote hyperlinks.</p> -<p class="underover">This text has lines above <em>and</em> below it.</p> -<p class="thick">This text has a really thick purple underline in supporting browsers.</p> -<p class="blink">This text might blink for you, - depending on the browser you use.</p> -</pre> - -<p>{{EmbedLiveSample('Examples','auto','320')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Text Decoration')}}</td> - <td>{{Spec2('CSS4 Text Decoration')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text Decoration')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS1')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> diff --git a/files/ja/web/css/css_text_decoration/index.md b/files/ja/web/css/css_text_decoration/index.md new file mode 100644 index 0000000000..0f6145401c --- /dev/null +++ b/files/ja/web/css/css_text_decoration/index.md @@ -0,0 +1,89 @@ +--- +title: CSS テキスト装飾 +slug: Web/CSS/CSS_Text_Decoration +tags: + - CSS + - CSS Text Decoration + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Text_Decoration +--- +{{CSSRef}} + +**CSS テキスト装飾** (CSS Text Decoration) は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。</p> + +## リファレンス + +### プロパティ + +- {{cssxref("text-decoration")}} +- {{cssxref("text-decoration-color")}} +- {{cssxref("text-decoration-line")}} +- {{cssxref("text-decoration-skip-ink")}} +- {{cssxref("text-decoration-style")}} +- {{cssxref("text-decoration-thickness")}} +- {{cssxref("text-emphasis")}} +- {{cssxref("text-emphasis-color")}} +- {{cssxref("text-emphasis-position")}} +- {{cssxref("text-emphasis-style")}} +- {{cssxref("text-shadow")}} +- {{cssxref("text-underline-offset")}} +- {{cssxref("text-underline-position")}} + +### ガイド + +_なし。_ + +<h2 id="Examples">例</h2> + +```css +.under { + text-decoration: underline red; +} + +.over { + text-decoration: wavy overline lime; +} + +.line { + text-decoration: line-through; +} + +.plain { + text-decoration: none; +} + +.underover { + text-decoration: dashed underline overline; +} + +.thick { + text-decoration: solid underline purple 4px; +} + +.blink { + text-decoration: blink; +} +``` + +```html +<p class="under">このテキストには下付近に 1 本の線があります。</p> +<p class="over">このテキストの上に線があります。</p> +<p class="line">このテキストには取り消し線があります。</p> +<p>この<a class="plain" href="#">リンクには下線が引かれていません</a>が、リンクは一般的には既定で下線があります。ユーザーはハイパーリンクを示すアンダーラインを頼りにしていることが多いので、アンカーの文字装飾を削除する場合は注意が必要です。</p> +<p class="underover">このテキストには上<em>と</em>下に線があります。</p> +<p class="thick">対応しているブラウザーでは、このテキストは実に太い紫色の下線があります。</p> +<p class="blink">使用しているブラウザーによっては、このテキストは点滅しているかもしれません。</p> +``` + +{{EmbedLiveSample('Examples','auto','320')}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------ | -------------------------------------------- | ------------------ | +| {{SpecName('CSS4 Text Decoration')}} | {{Spec2('CSS4 Text Decoration')}} | | +| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | 初回定義 | diff --git a/files/ja/web/css/css_transforms/index.html b/files/ja/web/css/css_transforms/index.html deleted file mode 100644 index 55de83ba04..0000000000 --- a/files/ja/web/css/css_transforms/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: CSS 変形 -slug: Web/CSS/CSS_Transforms -tags: - - CSS - - CSS Transforms - - Guide - - Overview - - Reference -translation_of: Web/CSS/CSS_Transforms ---- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS 変形</strong><rp> (</rp><rt>CSS Transforms</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("backface-visibility")}}</li> - <li>{{cssxref("perspective")}}</li> - <li>{{cssxref("perspective-origin")}}</li> - <li>{{cssxref("rotate")}}</li> - <li>{{cssxref("scale")}}</li> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("transform-box")}}</li> - <li>{{cssxref("transform-origin")}}</li> - <li>{{cssxref("transform-style")}}</li> - <li>{{cssxref("translate")}}</li> -</ul> -</div> - -<h3 id="Data_types" name="Data_types">データ型</h3> - -<div class="index"> -<ul> - <li>{{cssxref("<transform-function>")}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の利用</a></dt> - <dd>CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS Transforms 2') }}</td> - <td>{{ Spec2('CSS Transforms 2') }}</td> - <td>独立した変形を追加。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Transforms') }}</td> - <td>{{ Spec2('CSS3 Transforms') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> diff --git a/files/ja/web/css/css_transforms/index.md b/files/ja/web/css/css_transforms/index.md new file mode 100644 index 0000000000..0b153de550 --- /dev/null +++ b/files/ja/web/css/css_transforms/index.md @@ -0,0 +1,45 @@ +--- +title: CSS 座標変換 +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS 座標変換 + - ガイド + - 概要 + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +{{CSSRef}} + +**CSS 座標変換** (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に座標変換できるかを定義します。 + +## リファレンス + +### プロパティ + +- {{cssxref("backface-visibility")}} +- {{cssxref("perspective")}} +- {{cssxref("perspective-origin")}} +- {{cssxref("rotate")}} +- {{cssxref("scale")}} +- {{cssxref("transform")}} +- {{cssxref("transform-box")}} +- {{cssxref("transform-origin")}} +- {{cssxref("transform-style")}} +- {{cssxref("translate")}} + +## データ型 + +- {{cssxref("<transform-function>")}} + +## ガイド + +- [CSS 座標変換の利用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) + - : CSS でスタイル付けされた要素をどのように座標変換するかについての手順を追ったチュートリアルです。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------- | ------------------------------- | ---------------------- | +| {{ SpecName('CSS Transforms 2') }} | {{ Spec2('CSS Transforms 2') }} | 独立した座標変換を追加 | +| {{ SpecName('CSS3 Transforms') }} | {{ Spec2('CSS3 Transforms') }} | 初回定義 | diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.html b/files/ja/web/css/css_transforms/using_css_transforms/index.html deleted file mode 100644 index 605a005836..0000000000 --- a/files/ja/web/css/css_transforms/using_css_transforms/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: CSS 変形の使用 -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms -tags: - - 3D - - Advanced - - CSS - - CSS Transforms - - Graphics - - Guide - - Rotate - - Scale - - Scaling - - perspective - - rotation -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -<div>{{CSSRef}}</div> - -<p>座標空間を編集することで、 <strong>CSS 変形</strong> (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。このガイドは変形の使用についての解説を行ないます。</p> - -<p>CSS 変形は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変形には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) が含まれており、二次元と三次元空間の両方の平行移動 (translation) があります。</p> - -<div class="warning"> -<p><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a>によって配置された要素のみが <code>transform</code> を実行できます。言うまでもなく、 <code>display: block</code> である要素がボックスモデルで配置されます。</p> -</div> - -<h2 id="CSS_transforms_properties" name="CSS_transforms_properties">CSS 変形のプロパティ</h2> - -<p>CSS 変形の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。</p> - -<dl> - <dt>{{cssxref("transform-origin")}}</dt> - <dd>原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使用されれます。</dd> - <dt>{{cssxref("transform")}}</dt> - <dd>要素に適用する変形を指定します。変形の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>これが変形前の MDN ロゴの画像です。</p> - -<p><img alt="MDN ロゴ" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p> - -<h3 id="Rotating" name="Rotating">回転</h3> - -<p>ここでは MDN ロゴを、左下の角から90度回転させます。</p> - -<pre class="brush: html notranslate"><img style="transform: rotate(90deg); - transform-origin: bottom left;" - src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> -</pre> - -<p>{{EmbedLiveSample('Rotating', 'auto', 240) }}</p> - -<h3 id="Skewing_and_translating" name="Skewing_and_translating">傾斜と平行移動</h3> - -<p>この例は div 要素を10度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。</p> - -<pre class="brush: html notranslate"><img style="transform: skewx(10deg) translatex(150px); - transform-origin: bottom left;" - src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> -</pre> - -<p>{{EmbedLiveSample('Skewing_and_translating') }}</p> - -<h2 id="3D_specific_CSS_properties" name="3D_specific_CSS_properties">3D 特有の CSS プロパティ</h2> - -<p>立体空間で CSS 変形 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。</p> - -<h3 id="Perspective" name="Perspective">遠近感</h3> - -<p>設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。</p> - -<p>{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p> - -<p>二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。</p> - -<p>{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p> - -<p>ここまで完了すれば、 3D 空間で要素に働きかけることができます。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">端末の向きと 3D 変形の併用</a></li> - <li><a href="http://desandro.github.com/3dtransforms/">Intro to CSS 3D transforms</a> (David DeSandro によるブログ記事)</li> - <li><a href="https://css-transform.moro.es/">CSS Transform Playground</a> (CSS 変形機能を視覚化するオンラインツール)</li> -</ul> diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.md b/files/ja/web/css/css_transforms/using_css_transforms/index.md new file mode 100644 index 0000000000..ada8a2e2ca --- /dev/null +++ b/files/ja/web/css/css_transforms/using_css_transforms/index.md @@ -0,0 +1,85 @@ +--- +title: CSS 座標変換の使用 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Advanced + - CSS + - CSS 座標変換 + - グラフィック + - ガイド + - 回転 + - 拡大縮小 + - Scaling + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +{{CSSRef}} + +**CSS 座標変換** (transform) は、座標空間を編集することで、通常のフロー処理を混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは座標変換の使用についての解説を行ないます。 + +CSS 座標変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。座標変換には、二次元と三次元空間の両方について回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) があります。 + +> **Warning:** [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)によって配置された要素に対してのみ `transform` を実行することができます。言うまでもなく、 `display: block` である要素がボックスモデルで配置されます。 + +## CSS 座標変換のプロパティ + +CSS 座標変換の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。 + +- {{cssxref("transform-origin")}} + - : 原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。特定の点を引数として必要とする回転、拡大縮小や傾斜などの座標変換で使用されます。 +- {{cssxref("transform")}} + - : 要素に適用する座標変換を指定します。座標変換の空白区切りのリストで、合成操作の要求された順番で適用されます。座標変換の合成は右から左の順に適用されます。 + +## 例 + +これが座標変換前の MDN ロゴの画像です。 + + + +<h3 id="Rotating">回転</h3> + +ここでは MDN ロゴを、左下の角から 90 度回転させます。 + +```html +<img style="transform: rotate(90deg); + transform-origin: bottom left;" + src="logo.png"> +``` + +{{EmbedLiveSample('Rotating', 'auto', 240) }} + +<h3 id="Skewing_and_translating">傾斜と平行移動</h3> + +この例は div 要素を 10 度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。 + +```html +<img style="transform: skewx(10deg) translatex(150px); + transform-origin: bottom left;" + src="logo.png"> +``` + +{{EmbedLiveSample('Skewing_and_translating') }} + +## 3D 特有の CSS プロパティ + +立体空間で CSS 座標変換 を行うには、もう少し複雑になります。視点を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。 + +<h3 id="Perspective">視点</h3> + +設定する最初の要素は視点 (perspective) です。視点は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。 + +{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}} + +二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では視点は見る人の中央に合わせられますが、いつも妥当であるとは限りません。 + +{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}} + +ここまで行えば、 3D 空間に要素を配置することができます。 + +## 関連情報 + +- [端末の向きと 3D 座標変換の併用](/ja/docs/Web/Events/Using_device_orientation_with_3D_transforms) +- [Intro to CSS 3D transforms](http://desandro.github.com/3dtransforms/) (David DeSandro によるブログ記事) +- [CSS Transform Playground](https://css-transform.moro.es/) (CSS 座標変換機能を視覚化するオンラインツール) diff --git a/files/ja/web/css/css_transforms/using_css_transforms/logo.png b/files/ja/web/css/css_transforms/using_css_transforms/logo.png Binary files differnew file mode 100644 index 0000000000..d0e4f1d55b --- /dev/null +++ b/files/ja/web/css/css_transforms/using_css_transforms/logo.png diff --git a/files/ja/web/css/font-family/index.html b/files/ja/web/css/font-family/index.html deleted file mode 100644 index c8092db361..0000000000 --- a/files/ja/web/css/font-family/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: font-family -slug: Web/CSS/font-family -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference - - font - - font-family -translation_of: Web/CSS/font-family ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>font-family</code></strong> プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} @-規則を使用してダウンロード可能なフォントを選択します。</p> - -<p>一括指定プロパティの {{CSSxRef("font")}} を使用すると、 <code>font-size</code> やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。</p> - -<p>指定されたフォントが利用可能であるという保証はないので、 <code>font-family</code> リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。</p> - -<p><code>font-family</code> プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは<strong>限りません</strong>。むしろ、フォント選択は <strong>1 文字ずつ</strong>行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部の<a href="/ja/docs/Web/CSS/font-style">スタイル</a>、<a href="/ja/docs/Web/CSS/font-variant">種類</a>、<a href="/ja/docs/Web/CSS/font-size">大きさ</a>でのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css; no-line-numbers">/* フォントファミリ名および総称ファミリ名 */ -font-family: Gill Sans Extrabold, sans-serif; -font-family: "Goudy Bookletter 1911", sans-serif; - -/* 総称ファミリ名のみ */ -font-family: serif; -font-family: sans-serif; -font-family: monospace; -font-family: cursive; -font-family: fantasy; -font-family: system-ui; -font-family: ui-serif; -font-family: ui-sans-serif; -font-family: ui-monospace; -font-family: ui-rounded; -font-family: emoji; -font-family: math; -font-family: fangsong; - -/* グローバル値 */ -font-family: inherit; -font-family: initial; -font-family: unset; -</pre> - -<p><code>font-family</code> プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <code><a href="#<family-name>"><family-name></a></code> または <code><a href="#<generic-name>"><generic-name></a></code> の値です。</p> - -<p>以下の例は二つのフォントファミリを並べており、最初は <code><family-name></code> で二番目は <code><generic-name></code> です。</p> - -<pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><a id="<family-name>" name="<family-name>"><code><family-name></code></a></dt> - <dd>フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。</dd> - <dt><a id="<generic-name>" name="<generic-name>"><code><generic-name></code></a></dt> - <dd> - <p>総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。</p> - - <dl> - <dt><code>serif</code></dt> - <dd style="font-family: serif;">終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。<br> - 例: <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span></dd> - <dt><code>sans-serif</code></dt> - <dd style="font-family: sans-serif;">平たい角の端を持つ字形です。<br> - 例: <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span></dd> - <dt><code>monospace</code></dt> - <dd style="font-family: monospace;">すべての字が同じ幅を持つ字形です。<br> - 例: <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace</span></dd> - <dt><code>cursive</code></dt> - <dd style="font-family: cursive;">筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。<br> - 例: <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span></dd> - <dt><code>fantasy</code></dt> - <dd style="font-family: fantasy;">fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。<br> - 例: <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd> - <dt><code>system-ui</code></dt> - <dd>指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。</dd> - <dt><code>ui-serif</code></dt> - <dd>ユーザーインターフェイス既定のセリフ付きフォントです。</dd> - <dt><code>ui-sans-serif</code></dt> - <dd>ユーザーインターフェイス既定のセリフなしフォントです。</dd> - <dt><code>ui-monospace</code></dt> - <dd>ユーザーインターフェイス既定の等幅フォントです。</dd> - <dt><code>ui-rounded</code></dt> - <dd>ユーザーインターフェイス既定の丸い特性を持ったフォントです。</dd> - <dt><code>math</code></dt> - <dd>これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。</dd> - <dt><code>emoji</code></dt> - <dd>絵文字を表示するために特別にデザインされたフォントです。</dd> - <dt><code>fangsong</code></dt> - <dd>セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。</dd> - </dl> - </dd> -</dl> - -<h3 id="Valid_family_names" name="Valid_family_names">妥当なファミリ名</h3> - -<p>フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。</p> - -<p>例えば、以下の宣言は妥当です:</p> - -<pre class="brush: css; example-good">font-family: Gill Sans Extrabold, sans-serif; -font-family: "Goudy Bookletter 1911", sans-serif;</pre> - -<p>以下の宣言は<strong>無効</strong>です。</p> - -<pre class="brush: css; example-bad">font-family: Goudy Bookletter 1911, sans-serif; -font-family: Red/Black, sans-serif; -font-family: "Lucida" Grande, sans-serif; -font-family: Ahem!, sans-serif; -font-family: test@foo, sans-serif; -font-family: #POUND, sans-serif; -font-family: Hawaii 5-0, sans-serif;</pre> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Some_common_font_families" name="Some_common_font_families">いくつかのよくあるフォントファミリ</h3> - -<pre class="brush: css;">.serif { - font-family: Times, Times New Roman, Georgia, serif; -} - -.sansserif { - font-family: Verdana, Arial, Helvetica, sans-serif; -} - -.monospace { - font-family: Lucida Console, Courier, monospace; -} - -.cursive { - font-family: cursive; -} - -.fantasy { - font-family: fantasy; -} - -.emoji { - font-family: emoji; -} - -.math { - font-family: math; -} - -.fangsong { - font-family: fangsong; -} -</pre> - -<div class="hidden"> -<pre class="brush: html;"><div class="serif"> - This is an example of a serif font. -</div> - -<div class="sansserif"> - This is an example of a sans-serif font. -</div> - -<div class="monospace"> - This is an example of a monospace font. -</div> - -<div class="cursive"> - This is an example of a cursive font. -</div> - -<div class="fantasy"> - This is an example of a fantasy font. -</div> - -<div class="math"> - This is an example of a math font. -</div> - -<div class="emoji"> - This is an example of an emoji font. -</div> - -<div class="fangsong"> - This is an example of a fangsong font. -</div></pre> -</div> - -<p>{{EmbedLiveSample("Some_common_font_families", 600, 120)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Fonts", "#generic-font-families", "generic font families")}}</td> - <td>{{Spec2("CSS4 Fonts")}}</td> - <td>新しい総称フォントファミリを追加。特に、 <code>system-ui</code>, <code>ui-serif</code>, <code>ui-sans-serif</code>, <code>ui-monospace</code>, <code>ui-rounded</code>, <code>emoji</code>, <code>math</code>, <code>fangsong</code></td> - </tr> - <tr> - <td>{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}</td> - <td>{{Spec2("CSS3 Fonts")}}</td> - <td>特に変更なし</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>特に変更なし</td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#font-family", "font-family")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.font-family")}}</p> diff --git a/files/ja/web/css/font-family/index.md b/files/ja/web/css/font-family/index.md new file mode 100644 index 0000000000..00399f5b81 --- /dev/null +++ b/files/ja/web/css/font-family/index.md @@ -0,0 +1,243 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - recipe:css-property +browser-compat: css.properties.font-family +translation_of: Web/CSS/font-family +--- +{{CSSRef}} + +CSS の **`font-family`** プロパティは、選択した要素に対して、フォントファミリー名や総称ファミリー名の優先順位リストを指定することができます。 + +{{EmbedInteractiveExample("pages/css/font-family.html")}} + +複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} アット規則を使用してダウンロード可能なフォントを選択します。 + +一括指定プロパティの {{CSSxRef("font")}} を使用すると、 `font-size` やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。 + +指定されたフォントが利用可能であるという保証はないので、 `font-family` リストの中に、総称ファミリーを少なくとも 1 つ、常に追加しておくべきです。総称ファミリーを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。 + +`font-family` プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは**限りません**。むしろ、フォント選択は **1 文字ずつ**行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです。あるフォントが一部の[スタイル](/ja/docs/Web/CSS/font-style)、[種類](/ja/docs/Web/CSS/font-variant、[大きさ](/ja/docs/Web/CSS/font-size)でのみ利用可能な場合、これらのプロパティがフォントファミリーの選択に影響する可能性があります。 + +## 構文 + +```css +/* フォントファミリー名および総称ファミリー名 */ +font-family: "Gill Sans Extrabold", sans-serif; +font-family: "Goudy Bookletter 1911", sans-serif; + +/* 総称ファミリー名のみ */ +font-family: serif; +font-family: sans-serif; +font-family: monospace; +font-family: cursive; +font-family: fantasy; +font-family: system-ui; +font-family: ui-serif; +font-family: ui-sans-serif; +font-family: ui-monospace; +font-family: ui-rounded; +font-family: emoji; +font-family: math; +font-family: fangsong; + +/* グローバル値 */ +font-family: inherit; +font-family: initial; +font-family: revert; +font-family: unset; +``` + +`font-family` プロパティは、1 つ以上のフォントファミリーをカンマで区切って指定します。それぞれのフォントファミリーは `<family-name>` または `<generic-name>` の値です。 + +以下の例は 2 つのフォントファミリーを並べており、最初は `<family-name>` で二番目は `<generic-name>` です。 + +```css +font-family: "Gill Sans Extrabold", sans-serif; +``` + +### 値 + +- `<family-name>` + - : フォントファミリーの名称。例えば、 "Times" や "Helvetica" はフォントファミリーです。空白を含むフォントファミリー名は、引用符で囲む必要があります。 +- `<generic-name>` + + - : 総称フォントファミリーは代替の仕組みです。この仕組みによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリー名はキーワードであり、引用符で囲んではいけません。総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。以下のキーワードが定義されています。 + + - `serif` + + - : 終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。 + + 例: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif + + - `sans-serif` + + - : 平たい角の端を持つ字形です。 + + 例: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif. + + - `monospace` + + - : すべての字が同じ幅を持つ字形です。 + + 例: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace + + - `cursive` + + - : 筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。 + + 例: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive + + - `fantasy` + + - : fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。 + + 例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy + + - `system-ui` + - : 指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。 + - `ui-serif` + - : ユーザーインターフェイス既定のセリフ付きフォントです。 + - `ui-sans-serif` + - : ユーザーインターフェイス既定のセリフなしフォントです。 + - `ui-monospace` + - : ユーザーインターフェイス既定の等幅フォントです。 + - `ui-rounded` + - : ユーザーインターフェイス既定の丸い特性を持ったフォントです。 + - `math` + - : これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。 + - `emoji` + - : 絵文字を表示するために特別にデザインされたフォントです。 + - `fangsong` + - : セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。 + +### 有効なファミリー名 + +フォントファミリー名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリー名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。 + +ホワイトスペース、数字、ハイフン以外の区切り文字を含むフォントファミリー名を引用符でくくるのは**良い習慣**です。 + +例えば、以下の宣言は有効です。 + +```css example-good +font-family: "Goudy Bookletter 1911", sans-serif; +``` + +以下の宣言は**無効**です。 + +```css example-bad +font-family: Goudy Bookletter 1911, sans-serif; +font-family: Red/Black, sans-serif; +font-family: "Lucida" Grande, sans-serif; +font-family: Ahem!, sans-serif; +font-family: test@foo, sans-serif; +font-family: #POUND, sans-serif; +font-family: Hawaii 5-0, sans-serif; +``` + +以下の例は技術的には**有効**ですが、推奨されません。 + +```css +font-family: Gill Sans Extrabold, sans-serif; +``` + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Some_common_font_families">よくあるいくつかのフォントファミリー</h3> + +```css +.serif { + font-family: Times, "Times New Roman", Georgia, serif; +} + +.sansserif { + font-family: Verdana, Arial, Helvetica, sans-serif; +} + +.monospace { + font-family: "Lucida Console", Courier, monospace; +} + +.cursive { + font-family: cursive; +} + +.fantasy { + font-family: fantasy; +} + +.emoji { + font-family: emoji; +} + +.math { + font-family: math; +} + +.fangsong { + font-family: fangsong; +} +``` + +```html hidden +<div class="serif"> + This is an example of a serif font. +</div> + +<div class="sansserif"> + This is an example of a sans-serif font. +</div> + +<div class="monospace"> + This is an example of a monospace font. +</div> + +<div class="cursive"> + This is an example of a cursive font. +</div> + +<div class="fantasy"> + This is an example of a fantasy font. +</div> + +<div class="math"> + This is an example of a math font. +</div> + +<div class="emoji"> + This is an example of an emoji font. +</div> + +<div class="fangsong"> + This is an example of a fangsong font. +</div> +``` + +{{EmbedLiveSample("Some_common_font_families", 600, 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントのスタイル付け](/ja/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html deleted file mode 100644 index 7531bbfdec..0000000000 --- a/files/ja/web/css/grid-row/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: grid-row -slug: Web/CSS/grid-row -tags: - - CSS - - CSS Grid - - CSS Property - - CSS グリッド - - CSS プロパティ - - Reference - - grid-row -translation_of: Web/CSS/grid-row ---- -<p><strong><code>grid-row</code></strong> は CSS のプロパティで、 {{cssxref("grid-row-start")}} および {{cssxref("grid-row-end")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティであり、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>二つの <code><grid-line></code> 値が指定された場合は、個別指定の <code>grid-column-start</code> はスラッシュの前に設定し、個別指定の <code>grid-column-end</code> はスラッシュの後に設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -grid-row: auto; -grid-row: auto / auto; - -/* <custom-ident> 値 */ -grid-row: somegridarea; -grid-row: somegridarea / someothergridarea; - -/* <integer> + <custom-ident> 値 */ -grid-row: somegridarea 4; -grid-row: 4 somegridarea / 6; - -/* span + <integer> + <custom-ident> 値 */ -grid-row: span 3; -grid-row: span somegridarea; -grid-row: 5 somegridarea span; -grid-row: span 3 / 6; -grid-row: span somegridarea / span someothergridarea; -grid-row: 5 somegridarea span / 2 span; - -/* グローバル値 */ -grid-row: inherit; -grid-row: initial; -grid-row: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の <code>1</code> とするためのキーワードです。</dd> - <dt><code><custom-ident></code></dt> - <dd>'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 - <p class="note"><strong>メモ:</strong> 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 <code>grid-row: foo;</code> と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に <code>foo-start</code>/<code>foo-end</code> という名前の線が明示的に存在しない限り)。</p> - - <p>そうでなければ、これは <code><custom-ident></code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p> - </dd> - <dt><code><integer> && <custom-ident>?</code></dt> - <dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 - <p>名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p> - - <p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p> - </dd> - <dt><code>span && [ <integer> || <custom-ident> ]</code></dt> - <dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 - <p>名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p> - - <p>the <integer> が省略された場合の既定値は <code>1</code> です。負の数や0は無効です。</p> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css highlight[14,19]">#grid { - display: grid; - height: 200px; - grid-template-columns: 200px; - grid-template-rows: repeat(6, 1fr); -} - -#item1 { - background-color: lime; -} - -#item2 { - background-color: yellow; - grid-row: 2 / 4; -} - -#item3 { - background-color: blue; - grid-row: span 2 / 7; -} -</pre> - -<p>{{EmbedLiveSample("Example", "200px", "200px")}}</p> - -<h2 id="Internet_Explorer_issues" name="Internet_Explorer_issues">Internet Explorer での問題</h2> - -<p>IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に <code>-ms-</code>{{cssxref("grid-column")}} および <code>-ms-</code>{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 <a href="https://github.com/motine/css_grid_annotator">ソースリポジトリ</a></p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.grid-row")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li> - <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> -</ul> - -<section id="Quick_links"> -<ol> - <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドおよび進歩的な拡張</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a> - <ol> - <li><a href="/ja/docs/Web/CSS/grid">grid</a></li> - <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>用語集</strong></a> - <ol> - <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li> - <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li> - <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li> - <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li> - <li><a href="/ja/docs/Glossary/Gutters">溝</a></li> - <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li> - <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/ja/web/css/grid-row/index.md b/files/ja/web/css/grid-row/index.md new file mode 100644 index 0000000000..1f0b579d82 --- /dev/null +++ b/files/ja/web/css/grid-row/index.md @@ -0,0 +1,149 @@ +--- +title: grid-row +slug: Web/CSS/grid-row +tags: + - CSS + - CSS Grid + - CSS プロパティ + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.grid-row +translation_of: Web/CSS/grid-row +--- +{{CSSRef}} + +**`grid-row`** は CSS の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の先頭と末尾の端を指定します。 + +{{EmbedInteractiveExample("pages/css/grid-row.html")}} + +2 つの `\<grid-line>` 値が指定された場合は、個別指定の `grid-row-start` はスラッシュの前に設定し、個別指定の `grid-row-end` はスラッシュの後に設定します。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`grid-row-end`](/ja/docs/Web/CSS/grid-row-end) +- [`grid-row-start`](/ja/docs/Web/CSS/grid-row-start) + +## 構文 + +```css +/* キーワード値 */ +grid-row: auto; +grid-row: auto / auto; + +/* <custom-ident> 値 */ +grid-row: somegridarea; +grid-row: somegridarea / someothergridarea; + +/* <integer> + <custom-ident> 値 */ +grid-row: somegridarea 4; +grid-row: 4 somegridarea / 6; + +/* span + <integer> + <custom-ident> 値 */ +grid-row: span 3; +grid-row: span somegridarea; +grid-row: 5 somegridarea span; +grid-row: span 3 / 6; +grid-row: span somegridarea / span someothergridarea; +grid-row: 5 somegridarea span / 2 span; + +/* グローバル値 */ +grid-row: inherit; +grid-row: initial; +grid-row: revert; +grid-row: unset; +``` + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `<custom-ident>` + + - : '\<custom-ident>-start'/'\<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 + +- `<integer> && <custom-ident>?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が \<custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の列先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が \<custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \<integer> が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_grid_row_size_and_location">グリッド行の寸法と位置の設定</h3> + +#### HTML + +```html +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div> +``` + +#### CSS + +```css +#grid { + display: grid; + height: 200px; + grid-template-columns: 200px; + grid-template-rows: repeat(6, 1fr); +} + +#item1 { + background-color: lime; +} + +#item2 { + background-color: yellow; + grid-row: 2 / 4; +} + +#item3 { + background-color: blue; + grid-row: span 2 / 7; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_grid_row_size_and_location", "200px", "200px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} +- グリッドレイアウトガイド: _[CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_ +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/hanging-punctuation/index.html b/files/ja/web/css/hanging-punctuation/index.html deleted file mode 100644 index 858ebb6b1c..0000000000 --- a/files/ja/web/css/hanging-punctuation/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: hanging-punctuation -slug: Web/CSS/hanging-punctuation -tags: - - CSS - - CSS Property - - CSS Text - - CSS テキスト - - CSS プロパティ - - Experimental - - Reference - - リファレンス -translation_of: Web/CSS/hanging-punctuation ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>hanging-punctuation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。</span></p> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -hanging-punctuation: none; -hanging-punctuation: first; -hanging-punctuation: last; -hanging-punctuation: force-end; -hanging-punctuation: allow-end; - -/* 2 つのキーワード */ -hanging-punctuation: first force-end; -hanging-punctuation: first allow-end; -hanging-punctuation: first last; -hanging-punctuation: last force-end; -hanging-punctuation: last allow-end; - -/* 3 つのキーワード */ -hanging-punctuation: first force-end last; -hanging-punctuation: first allow-end last; - -/* グローバル値 */ -hanging-punctuation: inherit; -hanging-punctuation: initial; -hanging-punctuation: unset; -</pre> - -<p>{{CSSInfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>hanging-punctuation</code> プロパティは 1 つ、2 つ、 3 つの値で指定することができます。</p> - -<ul> - <li><strong>値1つ</strong>の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。</li> - <li><strong>値2つ</strong>の構文は、次のうち 1 つを使用します。 - <ul> - <li><code>first</code> と併せて、<code>last</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li> - <li><code>last</code> と併せて、<code>first</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li> - </ul> - </li> - <li><strong>値3つ</strong>の構文は、次のうち 1 つを使用します。 - <ul> - <li><code>first</code>, <code>allow-end</code>, <code>last</code></li> - <li><code>first</code>, <code>force-end</code>, <code>last</code></li> - </ul> - </li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>文字のぶら下げを行いません。</dd> - <dt><code>first</code></dt> - <dd>要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。</dd> - <dt><code>last</code></dt> - <dd>要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。</dd> - <dt><code>force-end</code></dt> - <dd>行末の句読点をぶら下げます。</dd> - <dt><code>allow-end</code></dt> - <dd>句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate" style="white-space: pre-wrap;"><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">p { - hanging-punctuation: first last; - margin: .5rem; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}</td> - <td>{{Spec2("CSS3 Text")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.hanging-punctuation")}}</p> diff --git a/files/ja/web/css/hanging-punctuation/index.md b/files/ja/web/css/hanging-punctuation/index.md new file mode 100644 index 0000000000..5a23b7c2bc --- /dev/null +++ b/files/ja/web/css/hanging-punctuation/index.md @@ -0,0 +1,112 @@ +--- +title: hanging-punctuation +slug: Web/CSS/hanging-punctuation +tags: + - CSS + - CSS Property + - CSS テキスト + - CSS テキスト + - CSS プロパティ + - Experimental + - Reference + - リファレンス +translation_of: Web/CSS/hanging-punctuation +--- +{{CSSRef}} + +**`hanging-punctuation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。 + +```css +/* キーワード値 */ +hanging-punctuation: none; +hanging-punctuation: first; +hanging-punctuation: last; +hanging-punctuation: force-end; +hanging-punctuation: allow-end; + +/* 2 つのキーワード */ +hanging-punctuation: first force-end; +hanging-punctuation: first allow-end; +hanging-punctuation: first last; +hanging-punctuation: last force-end; +hanging-punctuation: last allow-end; + +/* 3 つのキーワード */ +hanging-punctuation: first force-end last; +hanging-punctuation: first allow-end last; + +/* グローバル値 */ +hanging-punctuation: inherit; +hanging-punctuation: initial; +hanging-punctuation: revert; +hanging-punctuation: unset; +``` + +## 構文 + +`hanging-punctuation` プロパティは 1 つ、2 つ、3 つの値で指定することができます。 + +- **値 1 つ**の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。 +- **値 2 つ**の構文は、次のうち 1 つを使用します。 + + - `first` と併せて、`last`, `allow-end`, `force-end` のいずれか + - `last` と併せて、`first`, `allow-end`, `force-end` のいずれか + +- **値 3 つ**の構文は、次のうち 1 つを使用します。 + + - `first`, `allow-end`, `last` + - `first`, `force-end`, `last` + +### 値 + +- `none` + - : 文字のぶら下げを行いません。 +- `first` + - : 要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。 +- `last` + - : 要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。 +- `force-end` + - : 行末の句読点をぶら下げます。 +- `allow-end` + - : 句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_opening_and_closing_quotes_to_hang">開始と終了の引用符をぶら下げるよう設定</h3> + +#### HTML + +```html +<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p> +``` + +#### CSS + +```css +p { + hanging-punctuation: first last; + margin: .5rem; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_opening_and_closing_quotes_to_hang")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +- [CSS Tricks: Hanging punctuation](https://css-tricks.com/almanac/properties/h/hanging-punctuation/) diff --git a/files/ja/web/css/hyphens/index.html b/files/ja/web/css/hyphens/index.html deleted file mode 100644 index 09965ce859..0000000000 --- a/files/ja/web/css/hyphens/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: hyphens -slug: Web/CSS/hyphens -tags: - - CSS - - CSS Property - - CSS テキスト - - CSS プロパティ - - CSS 文字列 - - Reference -translation_of: Web/CSS/hyphens ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>hyphens</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。</span>ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> - -<div class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>ハイフネーションの規則は言語に依存します。 HTML では言語は <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性を使用する必要があります。</p> - -<div class="note"> -<p><strong>注:</strong> どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -hyphens: none; -hyphens: manual; -hyphens: auto; - -/* グローバル値 */ -hyphens: inherit; -hyphens: initial; -hyphens: unset; -</pre> - -<p><code>hyphens</code> プロパティは、以下に挙げたキーワード値のうちの一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。</dd> - <dt><code>manual</code></dt> - <dd>単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。</dd> - <dt><code>auto</code></dt> - <dd>ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code>auto</code> を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の <code>lang</code> 属性を必ず指定してください。</p> -</div> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Suggesting_line_break_opportunities" name="Suggesting_line_break_opportunities">改行候補位置の提案</h2> - -<p>文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。</p> - -<dl> - <dt>U+2010 (HYPHEN)</dt> - <dd>「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。</dd> - <dt>U+00AD (SHY)</dt> - <dd>不可視の「ソフト」ハイフン ("<strong>s</strong>oft" <strong>hy</strong>phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 <code>&shy;</code> を使用してソフトハイフンを挿入することができます。</dd> -</dl> - -<div class="blockIndicator note"> -<p>HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。</p> -</div> - -<h2 id="Example" name="Example">例</h2> - -<p>以下の例では3つのクラスを使用し、それぞれの <code>hyphens</code> プロパティの設定を示します。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><dl> - <dt><code>none</code>: no hyphen; overflow if needed</dt> - <dd lang="en" class="none">An extreme&shy;ly long English word</dd> - <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> - <dd lang="en" class="manual">An extreme&shy;ly long English word</dd> - <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> - <dd lang="en" class="auto">An extreme&shy;ly long English word</dd> -</dl> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">dd { - width: 55px; - border: 1px solid black; - } -dd.none { - -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} -dd.manual { - -webkit-hyphens: manual; - -ms-hyphens: manual; - hyphens: manual; -} -dd.auto { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<figure> -<p>{{EmbedLiveSample("Example", "100%", 490)}}</p> -</figure> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td> - <td>{{Spec2("CSS3 Text")}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.hyphens")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("content")}}</li> - <li>{{cssxref("overflow-wrap")}} (旧 <code>word-wrap</code>)</li> - <li>{{cssxref("word-break")}}</li> -</ul> diff --git a/files/ja/web/css/hyphens/index.md b/files/ja/web/css/hyphens/index.md new file mode 100644 index 0000000000..e3fde062ea --- /dev/null +++ b/files/ja/web/css/hyphens/index.md @@ -0,0 +1,132 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Reference + - recipe:css-property +browser-compat: css.properties.hyphens +translation_of: Web/CSS/hyphens +--- +{{CSSRef}} + +**`hyphens`** は [CSS](/ja/docs/Web/CSS) のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。 + +{{EmbedInteractiveExample("pages/css/hyphens.html")}} + +> **Note:** 上記のデモでは、 "An extraordinarily long English word!" に非表示の `­` の文字が含まれており、 `An extra­ordinarily long English word!` のようになっています。この文字は `hyphens: manual;` が指定された場合にハイフンを挿入することができる位置を示しています。 + +ハイフネーションの規則は言語に依存します。 HTML では言語は [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、[`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性を使用する必要があります。 + +> **Note:** どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。 + +## 構文 + +```css +/* キーワード値 */ +hyphens: none; +hyphens: manual; +hyphens: auto; + +/* グローバル値 */ +hyphens: inherit; +hyphens: initial; +hyphens: revert; +hyphens: unset; +``` + +`hyphens` プロパティは、以下に挙げたキーワード値のうちの一つで指定します。 + +### 値 + +- `none` + - : 単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。 +- `manual` + - : 単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("改行候補位置の提案")}}を参照してください。 +- `auto` + - : ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置 ({{anch("改行候補位置の提案")}}を参照) があれば、自動的な改行位置の選択を上書きします。 + +> **Note:** `auto` を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の `lang` 属性を必ず指定してください。 + +## 改行候補位置の提案 + +文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は 2 つあります。 + +- U+2010 (HYPHEN) + - : 「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。 +- U+00AD (SHY) + - : 不可視の「ソフト」ハイフン ("**s**oft" **hy**phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 `­` を使用してソフトハイフンを挿入することができます。 + +> **Note:** HTML の [`<wbr>`](/ja/docs/Web/HTML/Element/wbr) 要素によって改行が行われた場合、ハイフンは挿入されません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Specifying_text_hyphenation">テキストのハイフネーションの指定</h3> + +以下の例では 3 つのクラスを使用し、それぞれの `hyphens` プロパティの設定を示します。 + +#### HTML + +```html +<dl> + <dt><code>none</code>: no hyphen; overflow if needed</dt> + <dd lang="en" class="none">An extreme­ly long English word</dd> + <dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt> + <dd lang="en" class="manual">An extreme­ly long English word</dd> + <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> + <dd lang="en" class="auto">An extreme­ly long English word</dd> +</dl> +``` + +#### CSS + +```css +dd { + width: 55px; + border: 1px solid black; + } +dd.none { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +dd.manual { + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; +} +dd.auto { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +``` + +#### 例 + +{{EmbedLiveSample("Specifying_text_hyphenation", "100%", 490)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("content")}} +- {{cssxref("overflow-wrap")}} (formerly `word-wrap`) +- {{cssxref("word-break")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) diff --git a/files/ja/web/css/letter-spacing/index.html b/files/ja/web/css/letter-spacing/index.html deleted file mode 100644 index f16840257e..0000000000 --- a/files/ja/web/css/letter-spacing/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: letter-spacing -slug: Web/CSS/letter-spacing -tags: - - CSS - - CSS Property - - CSS Text - - Reference - - SVG - - 'recipe:css-property' -translation_of: Web/CSS/letter-spacing ---- -<div>{{CSSRef}}</div> - -<p><strong><code>letter-spacing</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 <code>letter-spacing</code> が正の値であった場合は、文字と文字の間が開き、 <code>letter-spacing</code> が負の値であった場合は、文字と文字が互いに近づきます。</p> - -<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -letter-spacing: normal; - -/* <length> 値 */ -letter-spacing: 0.3em; -letter-spacing: 3px; -letter-spacing: .3px; - -/* グローバル値 */ -letter-spacing: inherit; -letter-spacing: initial; -letter-spacing: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>現在のフォントでの通常の字間になります。 <code>0</code> の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。</dd> - <dt>{{cssxref("<length>")}}</dt> - <dd>既定の字間に<em>加える</em>字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。</dd> -</dl> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの配慮</h2> - -<p>正と負のどちらでも、大きすぎる値を <code>letter-spacing</code> に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。</p> - -<p>フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_letter_spacing" name="Setting_letter_spacing">字間の設定</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p class="normal">letter spacing</p> -<p class="em-wide">letter spacing</p> -<p class="em-wider">letter spacing</p> -<p class="em-tight">letter spacing</p> -<p class="px-wide">letter spacing</p> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.normal { letter-spacing: normal; } -.em-wide { letter-spacing: 0.4em; } -.em-wider { letter-spacing: 1em; } -.em-tight { letter-spacing: -0.05em; } -.px-wide { letter-spacing: 6px; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>SVG での初回定義</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.letter-spacing")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("font-kerning")}}</li> -</ul> diff --git a/files/ja/web/css/letter-spacing/index.md b/files/ja/web/css/letter-spacing/index.md new file mode 100644 index 0000000000..f354a9fcba --- /dev/null +++ b/files/ja/web/css/letter-spacing/index.md @@ -0,0 +1,104 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Property + - CSS テキスト + - Reference + - SVG + - recipe:css-property +browser-compat: css.properties.letter-spacing +--- +{{CSSRef}} + +**`letter-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 `letter-spacing` が正の値であった場合は、文字と文字の間が開き、 `letter-spacing` が負の値であった場合は、文字と文字が互いに近づきます。 + +{{EmbedInteractiveExample("pages/css/letter-spacing.html")}} + +## 構文 + +```css +/* キーワード値 */ +letter-spacing: normal; + +/* <length> 値 */ +letter-spacing: 0.3em; +letter-spacing: 3px; +letter-spacing: .3px; + +/* グローバル値 */ +letter-spacing: inherit; +letter-spacing: initial; +letter-spacing: unset; +``` + +### 値 + +- `normal` + - : 現在のフォントでの通常の字間になります。 `0` の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。 +- {{cssxref("<length>")}} + - : 既定の字間に*加える*字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。 + +## アクセシビリティの考慮 + +正と負のどちらでも、大きすぎる値を `letter-spacing` に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。 + +フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。 + +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## 国際化の考慮 + +書き言葉の中には、字間のスペースを適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。 + +> <p lang="ar" dir="rtl">شسيبتنمك</p> + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_letter_spacing">字間の設定</h3> + +#### HTML + +```html +<p class="normal">letter spacing</p> +<p class="em-wide">letter spacing</p> +<p class="em-wider">letter spacing</p> +<p class="em-tight">letter spacing</p> +<p class="px-wide">letter spacing</p> +``` + +#### CSS + +```css +.normal { letter-spacing: normal; } +.em-wide { letter-spacing: 0.4em; } +.em-wider { letter-spacing: 1em; } +.em-tight { letter-spacing: -0.05em; } +.px-wide { letter-spacing: 6px; } +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-kerning")}} diff --git a/files/ja/web/css/line-break/index.html b/files/ja/web/css/line-break/index.html deleted file mode 100644 index 99fff450bd..0000000000 --- a/files/ja/web/css/line-break/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: line-break -slug: Web/CSS/line-break -tags: - - Asian - - CSS - - CSS Property - - CSS Text - - NeedsExample - - Reference - - i18n - - l10n - - 'recipe:css-property' - - 日本語処理 - - 禁則処理 -translation_of: Web/CSS/line-break ---- -<div>{{CSSRef}}</div> - -<p><strong><code>line-break</code></strong> は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。</p> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -line-break: auto; -line-break: loose; -line-break: normal; -line-break: strict; -line-break: anywhere; - -/* グローバル値 */ -line-break: inherit; -line-break: initial; -line-break: unset; -</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>既定の改行規則を使用してテキストを改行します。</dd> - <dt><code>loose</code></dt> - <dd>最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。</dd> - <dt><code>normal</code></dt> - <dd>最も一般的な改行規則を使用してテキストを改行します。</dd> - <dt><code>strict</code></dt> - <dd>最も厳格な改行規則を使用してテキストを改行します。</dd> - <dt><code>anywhere</code></dt> - <dd> - <p>句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。</p> - </dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_text_wrapping" name="Setting_text_wrapping">テキストの折り返しの設定</h3> - -<p>"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div lang="ja"> - <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> - <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> - <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> - <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> - <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } -.auto { line-break: auto; } -.loose { line-break: loose; } -.normal { line-break: normal; } -.strict { line-break: strict; } -.anywhere { line-break: anywhere; } -</pre> - -<h4 id="Result">Result</h4> - -<p>{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.line-break")}}</p> diff --git a/files/ja/web/css/line-break/index.md b/files/ja/web/css/line-break/index.md new file mode 100644 index 0000000000..187246d727 --- /dev/null +++ b/files/ja/web/css/line-break/index.md @@ -0,0 +1,102 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - Asian + - CSS + - CSS Property + - CSS テキスト + - NeedsExample + - Reference + - i18n + - l10n + - recipe:css-property + - 日本語処理 + - 禁則処理 +browser-compat: css.properties.line-break +translation_of: Web/CSS/line-break +--- +{{CSSRef}} + +**`line-break`** は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定します。 + +```css +/* キーワード値 */ +line-break: auto; +line-break: loose; +line-break: normal; +line-break: strict; +line-break: anywhere; + +/* グローバル値 */ +line-break: inherit; +line-break: initial; +line-break: revert; +line-break: unset; +``` + +## 構文 + +### 値 + +- `auto` + - : 既定の改行規則を使用してテキストを改行します。 +- `loose` + - : 最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。 +- `normal` + - : 最も一般的な改行規則を使用してテキストを改行します。 +- `strict` + - : 最も厳格な改行規則を使用してテキストを改行します。 +- `anywhere` + - : 句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_text_wrapping">テキストの折り返しの設定</h3> + +"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。 + +#### HTML + +```html +<div lang="ja"> + <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> +</div> +``` + +#### CSS + +```css +.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } +.auto { line-break: auto; } +.loose { line-break: loose; } +.normal { line-break: normal; } +.strict { line-break: strict; } +.anywhere { line-break: anywhere; } +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +- [CSS and International text](https://www.w3.org/International/articles/css3-text/) diff --git a/files/ja/web/css/mask-border-mode/index.md b/files/ja/web/css/mask-border-mode/index.md new file mode 100644 index 0000000000..bf0ed9a8ad --- /dev/null +++ b/files/ja/web/css/mask-border-mode/index.md @@ -0,0 +1,74 @@ +--- +title: mask-border-mode +slug: Web/CSS/mask-border-mode +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsContent + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-mode +translation_of: Web/CSS/mask-border-mode +--- +{{CSSRef}} + +**`mask-border-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[マスク境界](/ja/docs/Web/CSS/mask-border)の混合モードを指定します。 + +## 構文 + +```css +/* キーワード値 */ +mask-border-mode: luminance; +mask-border-mode: alpha; + +/* グローバル値 */ +mask-border-mode: inherit; +mask-border-mode: initial; +mask-border-mode: repeat; +mask-border-mode: unset; +``` + +### 値 + +- `luminance` + - : マスク境界画像の輝度値がマスク値として使用されます。 +- `alpha` + - : マスク境界画像のアルファ値がマスク値として使用されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、マスク境界に使用される混合モードの種類を、輝度値とアルファ値から指定することができるようになります。 + +```css +mask-border-mode: luminance; +mask-border-mode: alpha; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-outset/index.md b/files/ja/web/css/mask-border-outset/index.md new file mode 100644 index 0000000000..521d9b411b --- /dev/null +++ b/files/ja/web/css/mask-border-outset/index.md @@ -0,0 +1,99 @@ +--- +title: mask-border-outset +slug: Web/CSS/mask-border-outset +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-outset +translation_of: Web/CSS/mask-border-outset +--- +{{CSSRef}} + +**`mask-border-outset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の境界ボックスからの距離を指定します。 + +## 構文 + +```css +/* <length> 値 */ +mask-border-outset: 1rem; + +/* <number> 値 */ +mask-border-outset: 1.5; + +/* 垂直 | 水平 */ +mask-border-outset: 1 1.2; + +/* 上 | 水平 | 下 */ +mask-border-outset: 30px 2 45px; + +/* 上 | 右 | 下 | 左 */ +mask-border-outset: 7px 12px 14px 5px; + +/* グローバル値 */ +mask-border-outset: inherit; +mask-border-outset: initial; +mask-border-outset: revert; +mask-border-outset: unset; +``` + +`mask-border-outset` プロパティは 1 ～ 4 つの値で指定します。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<number>")}} です。負の値は無効です。 + +- 位置が **1 つ**指定された場合、**全 4 辺**に同じ距離が適用されます。 +- 位置が **2 つ**指定された場合、1 つ目の距離は**上下**に、2 つ目は**左右**に適用されます。 +- 位置が **3 つ**指定された場合、1 つ目の距離はを**上**に、2 つ目は**左右**に、3 つ目は**下**に適用されます。 +- 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。 + +### 値 + +- {{cssxref("<length>")}} + - : マスク境界の辺からの距離を長さで表します。 +- {{cssxref("<number>")}} + - : マスク境界の辺からの距離を、対応する {{cssxref("border-width")}} の倍数で表します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、要素の境界ボックスからマスクをどれだけ内側に離すかを示します。 — この機能を使用すると、マスクの端の位置を境界のすぐ内側ではなく、境界の途中にすることができるようになります。 + +```css +mask-border-outset: 1rem; +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-outset` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-outset: 1rem; +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-repeat/index.html b/files/ja/web/css/mask-border-repeat/index.html deleted file mode 100644 index 80d6fefd38..0000000000 --- a/files/ja/web/css/mask-border-repeat/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: mask-border-repeat -slug: Web/CSS/mask-border-repeat -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-repeat ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -mask-border-repeat: stretch; -mask-border-repeat: repeat; -mask-border-repeat: round; -mask-border-repeat: space; - -/* 上下 | 左右 */ -mask-border-repeat: round stretch; - -/* グローバル値 */ -mask-border-repeat: inherit; -mask-border-repeat: initial; -mask-border-repeat: unset; -</pre> - -<p><code>mask-border-repeat</code> プロパティは、以下の値のリストから一つまたは二つの値を使用して指定します。</p> - -<ul> - <li><strong>一つ</strong>の値が指定されると、<strong>全四辺</strong>に同じ動作が適用されます。</li> - <li><strong>二つ</strong>の値が指定されると、最初の値は<strong>上と下</strong>の辺に、二番目の値は<strong>左と右</strong>の辺に適用されます。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>stretch</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。</dd> - <dt><code>repeat</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。</dd> - <dt><code>round</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。</dd> - <dt><code>space</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>TBD</p> diff --git a/files/ja/web/css/mask-border-repeat/index.md b/files/ja/web/css/mask-border-repeat/index.md new file mode 100644 index 0000000000..b70a3d38d7 --- /dev/null +++ b/files/ja/web/css/mask-border-repeat/index.md @@ -0,0 +1,95 @@ +--- +title: mask-border-repeat +slug: Web/CSS/mask-border-repeat +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-repeat +translation_of: Web/CSS/mask-border-repeat +--- +{{CSSRef}} + +**`mask-border-repeat`** は [CSS](/ja/docs/Web/CSS) のプロパティで、どのように元の画像の[辺の領域](/ja/docs/Web/CSS/border-image-slice#edge-regions)を要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の寸法に合うように調整するかを設定します。 + +## 構文 + +```css +/* キーワード値 */ +mask-border-repeat: stretch; +mask-border-repeat: repeat; +mask-border-repeat: round; +mask-border-repeat: space; + +/* 上下 | 左右 */ +mask-border-repeat: round stretch; + +/* グローバル値 */ +mask-border-repeat: inherit; +mask-border-repeat: initial; +mask-border-repeat: revert; +mask-border-repeat: unset; +``` + +`mask-border-repeat` プロパティは、以下の値のリストから 1 つまたは 2 つの値を使用して指定します。 + +- **1 つ**の値が指定されると、**全 4 辺**に同じ動作が適用されます。 +- **2 つ**の値が指定されると、最初の値は**上と下**の辺に、二番目の値は**左と右**の辺に適用されます。 + +### 値 + +- `stretch` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。 +- `repeat` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。 +- `round` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。 +- `space` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのスライスが境界の周りでどのように繰り返されるかを定義することができるようになります。 — つまり、ただ繰り返すのか、スライスの全体数が収まるように少しだけ拡大縮小するのか、1 つのスライスが収まるように引き伸ばすのか、ということです。 + +```css +mask-border-repeat: round; +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-repeat` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-repeat: round; +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-slice/border-image-slice.png b/files/ja/web/css/mask-border-slice/border-image-slice.png Binary files differnew file mode 100644 index 0000000000..55d5dc758d --- /dev/null +++ b/files/ja/web/css/mask-border-slice/border-image-slice.png diff --git a/files/ja/web/css/mask-border-slice/index.md b/files/ja/web/css/mask-border-slice/index.md new file mode 100644 index 0000000000..74eda39503 --- /dev/null +++ b/files/ja/web/css/mask-border-slice/index.md @@ -0,0 +1,121 @@ +--- +title: mask-border-slice +slug: Web/CSS/mask-border-slice +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-slice +translation_of: Web/CSS/mask-border-slice +--- +{{CSSRef}} + +**`mask-border-slice`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("mask-border-source")}} で設定された画像を複数の領域に分割します。これらの領域は要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の部品を構成するために使用されます。 + +## 構文 + +```css +/* すべての辺 */ +mask-border-slice: 30%; + +/* 垂直 | 水平 */ +mask-border-slice: 10% 30%; + +/* 上 | 水平 | 下 */ +mask-border-slice: 30 30% 45; + +/* 上 | 右 | 下 | 左 */ +mask-border-slice: 7 12 14 5; + +/* `fill` キーワードの使用 */ +mask-border-slice: 10% fill 7 12; + +/* グローバル値 */ +mask-border-slice: inherit; +mask-border-slice: initial; +mask-border-slice: revert; +mask-border-slice: unset; +``` + +`mask-border-slice` プロパティは 1 ～ 4 つの `<number-percentage>` 値で指定し、それぞれの画像スライスの位置を表すことができます。負の数は無効です。対応する寸法よりも大きな値は `100%` に丸められます。 + +- 位置が **1 つ**指定された場合、全 4 本の分割線がそれぞれの辺から同じ距離で作成されます。 +- 位置が **2 つ**指定された場合、1 つ目の値を**上下**の辺からの距離として、2 つ目を**左右**の辺からの距離として分割線を作成します。 +- 位置が **3 つ**指定された場合、1 つ目の値を**上**の辺からの距離として、2 つ目を**左右**の辺からの距離、3 つ目は**下**の辺からの距離として分割線を作成します。 +- 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順 (時計回り) でそれぞれの辺からの距離として分割線を作成します。 + +`fill` の値は任意であり、使用される場合は、宣言のどこにでも置くことができます。 + +### 値 + +- {{cssxref("<number>")}} + - : 縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。 +- {{cssxref("<percentage>")}} + - : 縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。 +- `fill` + - : 中央の画像領域を維持します。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。 + +## 解説 + +分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。 + +[](border-image-slice.png) + +上の図は、それぞれの領域の位置を説明しています。 + +- 1-4 の領域は角の領域です。それぞれが 1 回ずつ使用され、最終的な境界画像の中で四隅を形成します。 +- 5-8 の領域は辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて[反復、拡縮、その他の加工](/ja/docs/Web/CSS/mask-border-repeat)が行われます。 +- 9 の領域は中央領域です。既定では描画されませんが、キーワード `fill` が設定されていれば背景画像のように使用されます。 + +{{cssxref("mask-border-repeat")}}、{{cssxref("mask-border-width")}}、{{cssxref("mask-border-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、ソース画像から取られるスライスの大きさを定義する役割を果たし、境界マスクを生成するために使用されるようになります。 + +```css +mask-border-slice: 30 fill; +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-slice` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-slice: 30 fill; +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +> **Note:** fill キーワードは、要素の内容を表示したい場合には設定する必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} +- [Illustrated description of the 1-to-4-value syntax](/ja/docs/Web/CSS/Shorthand_properties#tricky_edge_cases) diff --git a/files/ja/web/css/mask-border-source/index.html b/files/ja/web/css/mask-border-source/index.html deleted file mode 100644 index f9490dcbe8..0000000000 --- a/files/ja/web/css/mask-border-source/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: mask-border-source -slug: Web/CSS/mask-border-source -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-source ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-source</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>を生成するのに使われる元の画像を設定します。</p> - -<p>{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* Keyword 値 */ -mask-border-source: none; - -/* <image> 値 */ -mask-border-source: url(image.jpg); -mask-border-source: linear-gradient(to top, red, yellow); - -/* グローバル値 */ -mask-border-source: inherit; -mask-border-source: initial; -mask-border-source: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>マスク境界は使用されません。</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>マスク境界に使用する画像への参照です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>例については {{cssxref("mask-border")}} をご覧ください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>TBD</p> diff --git a/files/ja/web/css/mask-border-source/index.md b/files/ja/web/css/mask-border-source/index.md new file mode 100644 index 0000000000..9454167e1c --- /dev/null +++ b/files/ja/web/css/mask-border-source/index.md @@ -0,0 +1,86 @@ +--- +title: mask-border-source +slug: Web/CSS/mask-border-source +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-source +translation_of: Web/CSS/mask-border-source +--- +{{CSSRef}} + +**`mask-border-source`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)を生成するのに使われる元の画像を設定します。 + +{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。 + +## 構文 + +```css +/* Keyword 値 */ +mask-border-source: none; + +/* <image> 値 */ +mask-border-source: url(image.jpg); +mask-border-source: linear-gradient(to top, red, yellow); + +/* グローバル値 */ +mask-border-source: inherit; +mask-border-source: initial; +mask-border-source: revert; +mask-border-source: unset; +``` + +### 値 + +- `none` + - : マスク境界は使用されません。 +- {{cssxref("<image>")}} + - : マスク境界に使用する画像への参照です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのソースを定義する役割を果たすことになります。 + +```css +mask-border-source: url(image.jpg); +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-source` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-source: url(image.jpg); +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-width/index.html b/files/ja/web/css/mask-border-width/index.html deleted file mode 100644 index 329fa31afe..0000000000 --- a/files/ja/web/css/mask-border-width/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: mask-border-width -slug: Web/CSS/mask-border-width -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-width ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-width</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の幅を設定します。</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -mask-border-width: auto; - -/* <length> 値 */ -mask-border-width: 1rem; - -/* <percentage> 値 */ -mask-border-width: 25%; - -/* <number> 値 */ -mask-border-width: 3; - -/* 上下 | 左右 */ -mask-border-width: 2em 3em; - -/* 上 | 左右 | 下 */ -mask-border-width: 5% 15% 10%; - -/* 上 | 右 | 下 | 左 */ -mask-border-width: 5% 2em 10% auto; - -/* グローバル値 */ -mask-border-width: inherit; -mask-border-width: initial; -mask-border-width: unset; -</pre> - -<p><code>mask-border-width</code> プロパティは、以下の値のリストの中から1～4つの値を使って指定することができます。</p> - -<ul> - <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じマージンが適用される。</li> - <li>値が<strong>2つ</strong>指定された場合、1つ目のマージンは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li> - <li>値が<strong>3つ</strong>指定された場合、1つ目のマージンは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li> - <li>値が<strong>4つ</strong>指定された場合、マージンはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>マスク境界の幅を、 {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で指定します。パーセント値は左右のオフセットについては境界領域の<em>幅</em>に対する相対値、上下のオフセットについては境界領域の<em>高さ</em>に対する相対値です。負の数であってはなりません。</dd> - <dt><code><number></code></dt> - <dd>マスク境界の幅を、対応する {{cssxref("border-width")}} の倍数で指定します。負の数であってはなりません。</dd> - <dt><code>auto</code></dt> - <dd>マスク境界の幅は、対応する {{cssxref("mask-border-slice")}} の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する <code>border-width</code> が代わりに使用されます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>TBD</p> diff --git a/files/ja/web/css/mask-border-width/index.md b/files/ja/web/css/mask-border-width/index.md new file mode 100644 index 0000000000..221a8615e3 --- /dev/null +++ b/files/ja/web/css/mask-border-width/index.md @@ -0,0 +1,107 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-width +translation_of: Web/CSS/mask-border-width +--- +{{CSSRef}} + +**`mask-border-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の幅を設定します。 + +## 構文 + +```css +/* キーワード値 */ +mask-border-width: auto; + +/* <length> 値 */ +mask-border-width: 1rem; + +/* <percentage> 値 */ +mask-border-width: 25%; + +/* <number> 値 */ +mask-border-width: 3; + +/* 上下 | 左右 */ +mask-border-width: 2em 3em; + +/* 上 | 左右 | 下 */ +mask-border-width: 5% 15% 10%; + +/* 上 | 右 | 下 | 左 */ +mask-border-width: 5% 2em 10% auto; + +/* グローバル値 */ +mask-border-width: inherit; +mask-border-width: initial; +mask-border-width: revert; +mask-border-width: unset; +``` + +`mask-border-width` プロパティは、以下の値のリストの中から 1 ～ 4 つの値を使って指定することができます。 + +- 値が **1 つ**指定された場合、**全 4 辺**に同じマージンが適用される。 +- 値が **2 つ**指定された場合、1 つ目のマージンは**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目のマージンは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 + +### 値 + +- `<length-percentage>` + - : マスク境界の幅を、 {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で指定します。パーセント値は左右のオフセットについては境界領域の*幅*に対する相対値、上下のオフセットについては境界領域の*高さ*に対する相対値です。負の数であってはなりません。 +- `<number>` + - : マスク境界の幅を、対応する {{cssxref("border-width")}} の倍数で指定します。負の数であってはなりません。 +- `auto` + - : マスク境界の幅は、対応する {{cssxref("mask-border-slice")}} の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する `border-width` が代わりに使用されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクの幅を定義することになります。このプロパティを [`mask-border-slice`](/ja/docs/Web/CSS/mask-border-slice) と異なる値に設定すると、スライスは境界マスクに合わせて拡大縮小されます。 + +```css +mask-border-width: 30 fill; +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-width` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-width: 20px; +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} diff --git a/files/ja/web/css/mask-border/index.md b/files/ja/web/css/mask-border/index.md new file mode 100644 index 0000000000..fdea6b7ec8 --- /dev/null +++ b/files/ja/web/css/mask-border/index.md @@ -0,0 +1,99 @@ +--- +title: mask-border +slug: Web/CSS/mask-border +tags: + - CSS + - CSS Masking + - CSS プロパティ + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.mask-border +translation_of: Web/CSS/mask-border +--- +{{CSSRef}} + +**`mask-border`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素の境界の縁に沿ったマスクを生成することができます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`mask-border-mode`](/ja/docs/Web/CSS/mask-border-mode) +- [`mask-border-outset`](/ja/docs/Web/CSS/mask-border-outset) +- [`mask-border-repeat`](/ja/docs/Web/CSS/mask-border-repeat) +- [`mask-border-slice`](/ja/docs/Web/CSS/mask-border-slice) +- [`mask-border-source`](/ja/docs/Web/CSS/mask-border-source) +- [`mask-border-width`](/ja/docs/Web/CSS/mask-border-width) + +## 構文 + +```css +/* source | slice */ +mask-border: url('border-mask.png') 25; + +/* source | slice | repeat */ +mask-border: url('border-mask.png') 25 space; + +/* source | slice | width */ +mask-border: url('border-mask.png') 25 / 35px; + +/* source | slice | width | outset | repeat | mode */ +mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; + +/* Global values */ +mask-border: inherit; +mask-border: initial; +mask-border: revert; +mask-border: unset; +``` + +### 値 + +- `<'mask-border-source'>` + - : ソース画像です。{{cssxref("mask-border-source")}} を参照してください。 +- `<'mask-border-slice'>` + - : ソース画像を複数の領域に分割する幅です。{{cssxref("mask-border-slice")}} を参照してください。 +- `<'mask-border-width'>` + - : 境界画像の幅です。4 つまでの値を指定することができます。{{cssxref("mask-border-width")}} を参照してください。 +- `<'mask-border-outset'>` + - : 要素の外側の辺から境界画像までの距離です。4 つまでの値を指定することができます。{{cssxref("mask-border-outset")}} を参照してください。 +- `<'mask-border-repeat'>` + - : ソース画像の辺の領域を、境界マスクの幅に合わせて調整する方法を定義します。2 つまでの値を指定することができます。{{cssxref("mask-border-repeat")}} を参照してください。 +- `<'mask-border-mode'>` + - : ソース画像を輝度マスクとして扱うか、アルファマスクとして扱うかを定義します。{{cssxref("mask-border-mode")}} を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### ビットマップに基づいたマスク境界の設定 + +この例では、要素の境界を菱形の模様でマスクします。このマスクのソースは ".png" ファイルで、 90 x 90 ピクセルであり、3つの菱形が垂直・水平に並んでいます。 + + + +一つの菱形の寸法に合わせるため、 90 を 3 で割った値、すなわち '30' を使用して、画像を角と辺の領域に分割します。 repeat の値は `round` であり、マスクのスライスが均等に、すなわち切り取られたり隙間ができたりすることなく合わせられます。 + +{{EmbedGHLiveSample("css-examples/masking/mask-border.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-image/index.html b/files/ja/web/css/mask-image/index.html index 8c0165704e..1a08aa35f5 100644 --- a/files/ja/web/css/mask-image/index.html +++ b/files/ja/web/css/mask-image/index.html @@ -44,7 +44,7 @@ mask-image: unset; <dt><code><mask-source></code></dt> <dd>{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。</dd> <dt>{{cssxref("<image>")}}</dt> - <dd>マスク画像レイヤーとして使用有れる画像の値です。</dd> + <dd>マスク画像レイヤーとして使用される画像の値です。</dd> </dl> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> diff --git a/files/ja/web/css/overflow-wrap/index.html b/files/ja/web/css/overflow-wrap/index.html deleted file mode 100644 index 3d7387d243..0000000000 --- a/files/ja/web/css/overflow-wrap/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: overflow-wrap -slug: Web/CSS/overflow-wrap -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference -translation_of: Web/CSS/overflow-wrap ---- -<div>{{CSSRef}}</div> - -<p><code><strong>overflow-wrap</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。</p> - -<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<div class="note"> -<p><strong>メモ:</strong> {{cssxref("word-break")}} とは対照的に、 <code>overflow-wrap</code> は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。</p> -</div> - -<p>このプロパティはもともと、標準外かつ接頭辞のない <code>word-wrap</code> と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 <code>overflow-wrap</code> に改名されたため、 <code>word-wrap</code> は別名になりました。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* キーワード値 */ -overflow-wrap: normal; -overflow-wrap: break-word; -overflow-wrap: anywhere; - -/* グローバル値 */ -overflow-wrap: inherit; -overflow-wrap: initial; -overflow-wrap: unset; -</pre> - -<p><code>overflow-wrap</code> プロパティは、下記の値一覧中の一つのキーワードで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。</dd> - <dt><code>anywhere</code></dt> - <dd>あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。</dd> - <dt><code>break-word</code></dt> - <dd><code>anywhere</code> の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<p>この例は、長い単語が分割されるときの <code>overflow-wrap</code>, <code>word-break</code>, and <code>hyphens</code> の結果を比較するものです。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>They say the fishing is excellent at - Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>normal</code>)</p> -<p>They say the fishing is excellent at - Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p> -<p>They say the fishing is excellent at - Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p> -<p>They say the fishing is excellent at - Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>word-break</code>)</p> -<p>They say the fishing is excellent at - Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p> -<p lang="en">They say the fishing is excellent at - Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>hyphens</code>, English rules)</p> -<p class="hyphens" lang="de">They say the fishing is excellent at - Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, - though I've never been there myself. (<code>hyphens</code>, German rules)</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { - width: 13em; - margin: 2px; - background: gold; -} - -.ow-anywhere { - overflow-wrap: anywhere; -} - -.ow-break-word { - overflow-wrap: break-word; -} - -.word-break { - word-break: break-all; -} - -.hyphens { - hyphens: auto; -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{ EmbedLiveSample('Example', '100%', 260) }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td> - <td>{{ Spec2('CSS3 Text') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.overflow-wrap")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("word-break")}}</li> - <li>{{cssxref("hyphens")}}</li> - <li>{{cssxref("text-overflow")}}</li> -</ul> diff --git a/files/ja/web/css/overflow-wrap/index.md b/files/ja/web/css/overflow-wrap/index.md new file mode 100644 index 0000000000..9c76cd9af0 --- /dev/null +++ b/files/ja/web/css/overflow-wrap/index.md @@ -0,0 +1,132 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +tags: + - CSS + - CSS テキスト + - CSS プロパティ + - Reference + - recipe:css-property +browser-compat: css.properties.overflow-wrap +translation_of: Web/CSS/overflow-wrap +--- +{{CSSRef}} + +**`overflow-wrap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。 + +{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}} + +> **Note:** {{cssxref("word-break")}} とは対照的に、 `overflow-wrap` は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。 + +このプロパティはもともと、標準外かつ接頭辞のない `word-wrap` と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 `overflow-wrap` に改名されたため、 `word-wrap` は別名になりました。 + +## 構文 + +```css +/* キーワード値 */ +overflow-wrap: normal; +overflow-wrap: break-word; +overflow-wrap: anywhere; + +/* グローバル値 */ +overflow-wrap: inherit; +overflow-wrap: initial; +overflow-wrap: revert; +overflow-wrap: unset; +``` + +`overflow-wrap` プロパティは、以下のうちの一つのキーワードで指定します。 + +### 値 + +- `normal` + - : 通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。 +- `anywhere` + - : あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。 +- `break-word` + - : `anywhere` の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Comparing_overflow-wrap_word-break_and_hyphens">overflow-wrap, word-break, hyphens の比較</h3> + +この例は、長い単語が分割されるときの `overflow-wrap`, `word-break`, `hyphens` の結果を比較するものです。 + +#### HTML + +```html +<p>They say the fishing is excellent at + Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>normal</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>word-break</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p> +<p lang="en">They say the fishing is excellent at + Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>hyphens</code>, English rules)</p> +<p class="hyphens" lang="de">They say the fishing is excellent at + Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>hyphens</code>, German rules)</p> +``` + +#### CSS + +```css +p { + width: 13em; + margin: 2px; + background: gold; +} + +.ow-anywhere { + overflow-wrap: anywhere; +} + +.ow-break-word { + overflow-wrap: break-word; +} + +.word-break { + word-break: break-all; +} + +.hyphens { + hyphens: auto; +} +``` + +#### 例 + +{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("word-break")}} +- {{cssxref("hyphens")}} +- {{cssxref("text-overflow")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) diff --git a/files/ja/web/css/page-break-after/index.html b/files/ja/web/css/page-break-after/index.html deleted file mode 100644 index 7661dba34e..0000000000 --- a/files/ja/web/css/page-break-after/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: page-break-after -slug: Web/CSS/page-break-after -tags: - - CSS - - CSS Property - - Page Breaks - - Reference -translation_of: Web/CSS/page-break-after ---- -<div>{{CSSRef}}</div> - -<div class="blockIndicator warning">このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。</div> - -<p><strong><code>page-break-after</code></strong> CSS プロパティは、現在の要素の<em>後で</em>改ページが行われるように調整します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -page-break-after: auto; -page-break-after: always; -page-break-after: avoid; -page-break-after: left; -page-break-after: right; -page-break-after: recto; -page-break-after: verso; - -/* グローバル値 */ -page-break-after: inherit; -page-break-after: initial; -page-break-after: unset; -</pre> - -<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> - -<p><code>page-break-after</code> プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。</p> - -<p>互換性のため、 <code>page-break-after</code> はブラウザーから <code>break-after</code> の別名として扱われます。これにより、 <code>page-break-after</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> - -<table> - <thead> - <tr> - <th scope="col">page-break-after</th> - <th scope="col">break-after</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>left</code></td> - <td><code>left</code></td> - </tr> - <tr> - <td><code>right</code></td> - <td><code>right</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - <tr> - <td><code>always</code></td> - <td><code>page</code></td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> - <dt><code>always</code></dt> - <dd>要素の後で必ず改ページが行われるように強制します。</dd> - <dt><code>avoid</code></dt> - <dd>要素の後で改ページされないようにします。</dd> - <dt><code>left</code></dt> - <dd>要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。</dd> - <dt><code>right</code></dt> - <dd>要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。</dd> - <dt><code>recto</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd> - <dt><code>verso</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">/* footnotes の後で新しいページに移ります */ -div.footnotes { - page-break-after: always; -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td><code>recto</code> と <code>verso</code> の追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>プロパティが適用される要素を table rows と table row groups に拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.page-break-after")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}}</li> - <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> -</ul> diff --git a/files/ja/web/css/page-break-after/index.md b/files/ja/web/css/page-break-after/index.md new file mode 100644 index 0000000000..0a55d07ff8 --- /dev/null +++ b/files/ja/web/css/page-break-after/index.md @@ -0,0 +1,102 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - CSS プロパティ + - ページ区切り + - Reference + - recipe:css-property +browser-compat: css.properties.page-break-after +translation_of: Web/CSS/page-break-after +--- +{{CSSRef}} + +> **Warning:** このプロパティは {{cssxref("break-after")}} プロパティで置き換えられました。 + +**`page-break-after`** は CSS のプロパティで、現在の要素の*後で*改ページが行われるように調整します。 + +```css +/* キーワード値 */ +page-break-after: auto; +page-break-after: always; +page-break-after: avoid; +page-break-after: left; +page-break-after: right; +page-break-after: recto; +page-break-after: verso; + +/* グローバル値 */ +page-break-after: inherit; +page-break-after: initial; +page-break-after: revert; +page-break-after: unset; +``` + +このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。 + +## 構文 + +### 値 + +- `auto` + - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。 +- `always` + - : 要素の後で必ず改ページが行われるように強制します。 +- `avoid` + - : 要素の後で改ページされないようにします。 +- `left` + - : 要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。 +- `right` + - : 要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。 +- `recto` {{experimental_inline}} + - : 左から右に進むページにおいて `right` と同じ動作をします。右から左に進むページであれば `left` と同じ働きをします。 +- `verso` {{experimental_inline}} + - : 左から右に進むページにおいて `left` と同じ動作をします。右から左に進むページであれば `right` と同じ働きをします。 + +## 改ページの別名 + +`page-break-after` プロパティは古いプロパティとなり、 {{cssxref("break-after")}} で置き換えられました。 + +互換性のため、 `page-break-after` はブラウザーでは `break-after` の別名として扱われます。これにより、 `page-break-after` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。 + +| page-break-after | break-after | +| ---------------- | ----------- | +| `auto` | `auto` | +| `left` | `left` | +| `right` | `right` | +| `avoid` | `avoid` | +| `always` | `page` | + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 脚注の後にページ区切りを設定 + +```css +/* 脚注の後で新しいページに移ります */ +div.footnotes { + page-break-after: always; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}} +- {{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}} +- {{cssxref("orphans")}}, {{cssxref("widows")}} diff --git a/files/ja/web/css/page-break-before/index.html b/files/ja/web/css/page-break-before/index.html deleted file mode 100644 index 50665b213f..0000000000 --- a/files/ja/web/css/page-break-before/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: page-break-before -slug: Web/CSS/page-break-before -tags: - - CSS - - CSS プロパティ - - CSS ページ付きメディア - - Reference - - 改ページ -translation_of: Web/CSS/page-break-before ---- -<div>{{CSSRef}}</div> - -<div class="blockIndicator warning">このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。</div> - -<p><strong><code>page-break-before</code></strong> CSS プロパティは、現在の要素の<em>前で</em>改ページが行われるように調整します。</p> - -<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -page-break-before: auto; -page-break-before: always; -page-break-before: avoid; -page-break-before: left; -page-break-before: right; -page-break-before: recto; -page-break-before: verso; - -/* グローバル値 */ -page-break-before: inherit; -page-break-before: initial; -page-break-before: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> - -<p><code>page-break-before</code> プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。</p> - -<p>互換性のため、 <code>page-break-before</code> はブラウザーから <code>break-before</code> の別名として扱われます。これにより、 <code>page-break-before</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> - -<table> - <thead> - <tr> - <th scope="col">page-break-before</th> - <th scope="col">break-before</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>left</code></td> - <td><code>left</code></td> - </tr> - <tr> - <td><code>right</code></td> - <td><code>right</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - <tr> - <td><code>always</code></td> - <td><code>page</code></td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> - <dt><code>always</code></dt> - <dd>要素の前で必ず改ページが行われるように強制します。</dd> - <dt><code>avoid</code></dt> - <dd>要素の前で改ページされないようにします。</dd> - <dt><code>left</code></dt> - <dd>要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。</dd> - <dt><code>right</code></dt> - <dd>要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。</dd> - <dt><code>recto</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd> - <dt><code>verso</code> {{experimental_inline}}</dt> - <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">/* div の前で改ページされないようにします */ -div.note { - page-break-before: avoid; -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td><code>recto</code> と <code>verso</code> の追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>プロパティが適用される要素を table rows と table row groups に拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.page-break-before")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}</li> - <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> -</ul> diff --git a/files/ja/web/css/page-break-before/index.md b/files/ja/web/css/page-break-before/index.md new file mode 100644 index 0000000000..67bf591de1 --- /dev/null +++ b/files/ja/web/css/page-break-before/index.md @@ -0,0 +1,102 @@ +--- +title: page-break-before +slug: Web/CSS/page-break-before +tags: + - CSS + - CSS プロパティ + - 改ページ + - Reference + - recipe:css-property +browser-compat: css.properties.page-break-before +translation_of: Web/CSS/page-break-before +--- +{{CSSRef}} + +> **Warning:** このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。 + +**`page-break-before`** CSS プロパティは、現在の要素の*前で*改ページが行われるように調整します。 + +このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{ HTMLElement("div") }} には適用されません。 + +```css +/* キーワード値 */ +page-break-before: auto; +page-break-before: always; +page-break-before: avoid; +page-break-before: left; +page-break-before: right; +page-break-before: recto; +page-break-before: verso; + +/* グローバル値 */ +page-break-before: inherit; +page-break-before: initial; +page-break-before: revert; +page-break-before: unset; +``` + +## 構文 + +### 値 + +- `auto` + - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。 +- `always` + - : 要素の前で必ず改ページが行われるように強制します。 +- `avoid` + - : 要素の前で改ページされないようにします。 +- `left` + - : 要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。 +- `right` + - : 要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。 +- `recto` {{experimental_inline}} + - : 左から右に読むページにおいて `right` と同じ動作をします。右から左に読むページであれば `left` と同じ働きをします。 +- `verso` {{experimental_inline}} + - : 左から右に読むページにおいて `left` と同じ動作をします。右から左に読むページであれば `right` と同じ働きをします。 + +## 改ページの別名 + +`page-break-before` プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。 + +互換性のため、 `page-break-before` はブラウザーから `break-before` の別名として扱われます。これにより、 `page-break-before` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。 + +| page-break-before | break-before | +| ----------------- | ------------ | +| `auto` | `auto` | +| `left` | `left` | +| `right` | `right` | +| `avoid` | `avoid` | +| `always` | `page` | + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### ある要素の前で改ページを防ぐ + +```css +/* div の前で改ページされないようにします */ +div.note { + page-break-before: avoid; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}} +- {{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}} +- {{cssxref("orphans")}}, {{cssxref("widows")}} diff --git a/files/ja/web/css/page-break-inside/index.html b/files/ja/web/css/page-break-inside/index.html deleted file mode 100644 index 7856f39482..0000000000 --- a/files/ja/web/css/page-break-inside/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: page-break-inside -slug: Web/CSS/page-break-inside -tags: - - CSS - - CSS プロパティ - - CSS ページ付きメディア - - Reference - - 改ページ -translation_of: Web/CSS/page-break-inside ---- -<div>{{CSSRef}}</div> - -<div class="blockIndicator warning">このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。</div> - -<p>CSS の <strong><code>page-break-inside</code></strong> プロパティは、現在の要素の<em>内側の</em> 改ページを調整します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -page-break-inside: auto; -page-break-inside: avoid; - -/* グローバル値 */ -page-break-inside: inherit; -page-break-inside: initial; -page-break-inside: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2> - -<p><code>page-break-inside</code> プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。</p> - -<p>互換性のため、 <code>page-break-inside</code> はブラウザーから <code>break-inside</code> の別名として扱われます。これにより、 <code>page-break-inside</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p> - -<table> - <thead> - <tr> - <th scope="col">page-break-inside</th> - <th scope="col">break-inside</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd> - <dt><code>avoid</code></dt> - <dd>要素の内側で改ページされないようにします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML" name="HTML">HTML</h3> - -<pre class="brush: html"><div class="page"> - <p>これは最初の段落です。</p> - <section class="list"> - <span>リスト</span> - <ol> - <li>順序付き項目1</li> -<!-- <li>順序付き項目2</li> --> - </ol> - </section> - <ul> - <li>順序なし項目1</li> -<!-- <li>順序なし項目2</li> --> - </ul> - <p>これは第二段落です。</p> - <p>これは第三段落です。文章の量が多くなっています。</p> - <p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p> -</div></pre> - -<h3 id="CSS" name="CSS">CSS</h3> - -<pre class="brush: css">.page { - background-color: #8cffa0; - height: 90px; - width: 200px; - columns: 1; - column-width: 100px; -} - -.list, ol, ul, p { - break-inside: avoid; -} - -p { - background-color: #8ca0ff; -} - -ol, ul, .list { - margin: 0.5em 0; - display: block; - background-color: orange; -} - -p:first-child { - margin-top: 0; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 400, 160)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}</td> - <td>{{Spec2('CSS3 Paged Media')}}</td> - <td>より多くの要素に適用できるように拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.page-break-inside")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li> - <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}</li> - <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li> -</ul> diff --git a/files/ja/web/css/page-break-inside/index.md b/files/ja/web/css/page-break-inside/index.md new file mode 100644 index 0000000000..91d9959071 --- /dev/null +++ b/files/ja/web/css/page-break-inside/index.md @@ -0,0 +1,131 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - CSS + - CSS プロパティ + - 改ページ + - Reference + - recipe:css-property +browser-compat: css.properties.page-break-inside +translation_of: Web/CSS/page-break-inside +--- +{{CSSRef}} + +> **Warning:** このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。 + +CSS の **`page-break-inside`** プロパティは、現在の要素の*内側の* 改ページを調整します。 + +```css +/* キーワード値 */ +page-break-inside: auto; +page-break-inside: avoid; + +/* グローバル値 */ +page-break-inside: inherit; +page-break-inside: initial; +page-break-inside: revert; +page-break-inside: unset; +``` + +## 構文 + +### 値 + +- `auto` + - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。 +- `avoid` + - : 要素の内側で改ページされないようにします。 + +## 改ページの別名 + +`page-break-inside` プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。 + +互換性のため、 `page-break-inside` はブラウザーから `break-inside` の別名として扱われます。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。 + +| page-break-inside | break-inside | +| ----------------- | ------------ | +| `auto` | `auto` | +| `avoid` | `avoid` | + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Avoiding_page_breaks_inside_elements">要素の途中の改ページを防ぐ</h3> + +#### HTML + +```html +<div class="page"> + <p>これは最初の段落です。</p> + <section class="list"> + <span>リスト</span> + <ol> + <li>one</li> +<!-- <li>two</li> --> + </ol> + </section> + <ul> + <li>one</li> +<!-- <li>two</li> --> + </ul> + <p>Tこれは第二段落です。</p> + <p>これは第三段落です。文章の量が多くなっています。</p> + <p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p> +</div> +``` + +#### CSS + +```css +.page { + background-color: #8cffa0; + height: 90px; + width: 200px; + columns: 1; + column-width: 100px; +} + +.list, ol, ul, p { + break-inside: avoid; +} + +p { + background-color: #8ca0ff; +} + +ol, ul, .list { + margin: 0.5em 0; + display: block; + background-color: orange; +} + +p:first-child { + margin-top: 0; +} +``` + +#### 結果 + +{{EmbedLiveSample("Avoiding_page_breaks_inside_elements", 400, 160)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}} +- {{cssxref("page-break-after")}}, {{cssxref("page-break-before")}} +- {{cssxref("orphans")}}, {{cssxref("widows")}} diff --git a/files/ja/web/css/perspective-origin/index.html b/files/ja/web/css/perspective-origin/index.html deleted file mode 100644 index fce5d7669e..0000000000 --- a/files/ja/web/css/perspective-origin/index.html +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: perspective-origin -slug: Web/CSS/perspective-origin -tags: - - 3D - - CSS - - CSS プロパティ - - CSS 変形 - - perspective - - perspective-origin - - リファレンス -translation_of: Web/CSS/perspective-origin ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>perspective-origin</code></strong> プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって<em>消失点</em>として使われます。</p> - -<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p><strong><code>perspective-origin</code></strong> および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* １値構文 */ -perspective-origin: x-position; - -/* ２値構文 */ -perspective-origin: x-position y-position; - -/* x-position と y-position がキーワードである場合は、 - 以下の構文も有効 */ -perspective-origin: y-position x-position; - -/* グローバル値 */ -perspective-origin: inherit; -perspective-origin: initial; -perspective-origin: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><em>x-position</em></dt> - <dd><em>消失点</em>の横座標上の位置を示します。次のいずれかの値です。 - <ul> - <li>{{cssxref("<length-percentage>")}} は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。</li> - <li><code>left</code> キーワードは、 length 値 <code>0</code> を示すショートカットです。</li> - <li><code>center</code> キーワードは、パーセント値 <code>50%</code> を示すショートカットです。</li> - <li><code>right</code> キーワードは、パーセント値 <code>100%</code> を示すショートカットです。</li> - </ul> - </dd> - <dt><em>y-position</em></dt> - <dd><em>消失点</em>の縦座標上の位置を示します。次のいずれかの値です。 - <ul> - <li>{{cssxref("<length>")}} は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。</li> - <li><code>top</code> キーワードは、 length 値 <code>0</code> を示すショートカットです。</li> - <li><code>center</code> キーワードは、パーセント値 <code>50%</code> を示すショートカットです。</li> - <li><code>bottom</code> キーワードは、パーセント値 <code>100%</code> を示すキーワードです。</li> - </ul> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Changing_the_perspective_origin" name="Changing_the_perspective_origin">視点の変更</h3> - -<p>この例は主要な <code>perspective-origin</code> 値で立方体を表示します。</p> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><section> -<figure> - <caption><code>perspective-origin: top left;</code></caption> - <div class="container"> - <div class="cube potl"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: top;</code></caption> - <div class="container"> - <div class="cube potm"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: top right;</code></caption> - <div class="container"> - <div class="cube potr"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: left;</code></caption> - <div class="container"> - <div class="cube poml"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: 50% 50%;</code></caption> - <div class="container"> - <div class="cube pomm"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: right;</code></caption> - <div class="container"> - <div class="cube pomr"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: bottom left;</code></caption> - <div class="container"> - <div class="cube pobl"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: bottom;</code></caption> - <div class="container"> - <div class="cube pobm"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: bottom right;</code></caption> - <div class="container"> - <div class="cube pobr"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: -200% -200%;</code></caption> - <div class="container"> - <div class="cube po200200neg"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: 200% 200%;</code></caption> - <div class="container"> - <div class="cube po200200pos"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -<figure> - <caption><code>perspective-origin: 200% -200%;</code></caption> - <div class="container"> - <div class="cube po200200"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> -</figure> - -</section> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* perspective-origin の値 (例ごとに異なる) */ -.potl { - perspective-origin: top left; -} -.potm { - perspective-origin: top; -} -.potr { - perspective-origin: top right; -} -.poml { - perspective-origin: left; -} -.pomm { - perspective-origin: 50% 50%; -} -.pomr { - perspective-origin: right; -} -.pobl { - perspective-origin: bottom left; -} -.pobm { - perspective-origin: bottom; -} -.pobr { - perspective-origin: bottom right; -} -.po200200neg { - perspective-origin: -200% -200%; -} -.po200200pos { - perspective-origin: 200% 200%; -} -.po200200 { - perspective-origin: 200% -200%; -} - -/* コンテナーの div、立方体の div、面の一般的な設定 */ -.container { - width: 100px; - height: 100px; - margin: 24px; - border: none; -} - -.cube { - width: 100%; - height: 100%; - backface-visibility: visible; - perspective: 300px; - transform-style: preserve-3d; -} - -.face { - display: block; - position: absolute; - width: 100px; - height: 100px; - border: none; - line-height: 100px; - font-family: sans-serif; - font-size: 60px; - color: white; - text-align: center; -} - -/* 方向に基づいてそれぞれの面を設定 */ -.front { - background: rgba(0, 0, 0, 0.3); - transform: translateZ(50px); -} -.back { - background: rgba(0, 255, 0, 1); - color: black; - transform: rotateY(180deg) translateZ(50px); -} -.right { - background: rgba(196, 0, 0, 0.7); - transform: rotateY(90deg) translateZ(50px); -} -.left { - background: rgba(0, 0, 196, 0.7); - transform: rotateY(-90deg) translateZ(50px); -} -.top { - background: rgba(196, 196, 0, 0.7); - transform: rotateX(90deg) translateZ(50px); -} -.bottom { - background: rgba(196, 0, 196, 0.7); - transform: rotateX(-90deg) translateZ(50px); -} - -/* レイアウトの見栄えをよくする */ -section { - background-color: #EEE; - padding: 10px; - font-family: sans-serif; - text-align: left; - display: grid; - grid-template-columns: repeat(3, 1fr); -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.perspective-origin")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の利用</a></li> - <li>{{cssxref('transform-style')}}</li> - <li>{{cssxref('transform-function')}}</li> - <li>{{cssxref('perspective')}}</li> - <li><code><a href="/ja/docs/Web/CSS/transform-function/perspective">transform: perspective()</a></code> 関数</li> -</ul> diff --git a/files/ja/web/css/perspective-origin/index.md b/files/ja/web/css/perspective-origin/index.md new file mode 100644 index 0000000000..1aecc84362 --- /dev/null +++ b/files/ja/web/css/perspective-origin/index.md @@ -0,0 +1,383 @@ +--- +title: perspective-origin +slug: Web/CSS/perspective-origin +tags: + - 3D + - CSS + - CSS プロパティ + - CSS 座標変換 + - グラフィック + - プロパティ + - Reference + - 座標変換 + - perspective + - perspective-origin + - recipe:css-property +browser-compat: css.properties.perspective-origin +translation_of: Web/CSS/perspective-origin +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`perspective-origin`** プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって*消失点*として使われます。 + +{{EmbedInteractiveExample("pages/css/perspective-origin.html")}} + +**`perspective-origin`** および {{cssxref('perspective')}} の各プロパティは、三次元空間で座標変換される子の親に設定するものであり、座標変換される要素に設定される [`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 変換関数とは異なります。 + +## 構文 + +```css +/* １値構文 */ +perspective-origin: x-position; + +/* ２値構文 */ +perspective-origin: x-position y-position; + +/* x-position と y-position がキーワードである場合は、 + 以下の構文も有効 */ +perspective-origin: y-position x-position; + +/* グローバル値 */ +perspective-origin: inherit; +perspective-origin: initial; +perspective-origin: revert; +perspective-origin: unset; +``` + +### 値 + +- _x-position_ + + - : *消失点*の横座標上の位置を示します。次のいずれかの値です。 + + - {{cssxref("<length-percentage>")}} は、絶対的な length 値、または要素の幅に対する相対値で位置を示します。負の数も使えます。 + - `left` キーワードは、length 値 `0` を示すショートカットです。 + - `center` キーワードは、パーセント値 `50%` を示すショートカットです。 + - `right` キーワードは、パーセント値 `100%` を示すショートカットです。 + +- _y-position_ + + - : *消失点*の縦座標上の位置を示します。次のいずれかの値です。 + + - {{cssxref("<length-percentage>")}} は、絶対的な length 値、または要素の高さに対する相対値で位置を示します。負の数も使えます。 + - `top` キーワードは、 length 値 `0` を示すショートカットです。 + - `center` キーワードは、パーセント値 `50%` を示すショートカットです。 + - `bottom` キーワードは、パーセント値 `100%` を示すキーワードです。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Changing_the_perspective_origin">視点の変更</h3> + +この例は主要な `perspective-origin` 値で立方体を表示します。 + +#### HTML + +```html +<section> + +<figure> + <figcaption><code>perspective-origin: top left;</code></figcaption> + <div class="container"> + <div class="cube potl"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: top;</code></figcaption> + <div class="container"> + <div class="cube potm"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: top right;</code></figcaption> + <div class="container"> + <div class="cube potr"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: left;</code></figcaption> + <div class="container"> + <div class="cube poml"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> + <div class="container"> + <div class="cube pomm"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: right;</code></figcaption> + <div class="container"> + <div class="cube pomr"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: bottom left;</code></figcaption> + <div class="container"> + <div class="cube pobl"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: bottom;</code></figcaption> + <div class="container"> + <div class="cube pobm"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: bottom right;</code></figcaption> + <div class="container"> + <div class="cube pobr"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: -200% -200%;</code></figcaption> + <div class="container"> + <div class="cube po200200neg"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: 200% 200%;</code></figcaption> + <div class="container"> + <div class="cube po200200pos"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +<figure> + <figcaption><code>perspective-origin: 200% -200%;</code></figcaption> + <div class="container"> + <div class="cube po200200"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> +</figure> + +</section> +``` + +#### CSS + +```css +/* perspective-origin の値 (例ごとに異なる) */ +.potl { + perspective-origin: top left; +} +.potm { + perspective-origin: top; +} +.potr { + perspective-origin: top right; +} +.poml { + perspective-origin: left; +} +.pomm { + perspective-origin: 50% 50%; +} +.pomr { + perspective-origin: right; +} +.pobl { + perspective-origin: bottom left; +} +.pobm { + perspective-origin: bottom; +} +.pobr { + perspective-origin: bottom right; +} +.po200200neg { + perspective-origin: -200% -200%; +} +.po200200pos { + perspective-origin: 200% 200%; +} +.po200200 { + perspective-origin: 200% -200%; +} + +/* コンテナーの div、立方体の div、面の一般的な設定 */ +.container { + width: 100px; + height: 100px; + margin: 24px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + backface-visibility: visible; + perspective: 300px; + transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* 方向に基づいてそれぞれの面を設定 */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); +} +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); +} +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +/* レイアウトの見栄えをよくする */ +section { + background-color: #EEE; + padding: 10px; + font-family: sans-serif; + text-align: left; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +``` + +#### 結果 + +{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- {{cssxref('transform-style')}} +- {{cssxref('transform-function')}} +- {{cssxref('perspective')}} +- [`transform: perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数 diff --git a/files/ja/web/css/perspective/index.html b/files/ja/web/css/perspective/index.html deleted file mode 100644 index 52e8a10d61..0000000000 --- a/files/ja/web/css/perspective/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: perspective -slug: Web/CSS/perspective -tags: - - CSS - - CSS プロパティ - - CSS 変形 - - Reference - - グラフィック - - プロパティ - - 距離 -translation_of: Web/CSS/perspective ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>perspective</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。</span> z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。</p> - -<div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の <code>perspective</code> プロパティの値より大きい要素は描画されません。</p> - -<p><em>消失点</em>は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。</p> - -<p>このプロパティを <code>0</code> と <code>none</code> 以外の値で使用すると、新たな<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。また、その場合、オブジェクトはそれを含む <code>position: fixed</code> の要素の包含ブロックとして動作します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -perspective: none; - -/* <length> 値 */ -perspective: 20px; -perspective: 3.5em; - -/* グローバル値 */ -perspective: inherit; -perspective: initial; -perspective: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>立体的な変形を一切適用しないことを示すキーワードです。</dd> - <dt><code><length></code></dt> - <dd>ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な変形を要素とその内容に適用するときに使います。 <code>0</code> や負の値ならば、立体的な変形は適用されません。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_perspective" name="Setting_perspective">視点の設定</h3> - -<p>この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。</p> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Setting_perspective', 660, 700)}}</p> - -<h4 id="HTML">HTML</h4> - -<p>以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。</p> - -<pre class="brush: html"><table> - <tbody> - <tr> - <th><code>perspective: 250px;</code> - </th> - <th><code>perspective: 350px;</code> - </th> - </tr> - <tr> - <td> - <div class="container"> - <div class="cube pers250"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> - </td> - <td> - <div class="container"> - <div class="cube pers350"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> - </td> - </tr> - <tr> - <th><code>perspective: 500px;</code> - </th> - <th><code>perspective: 650px;</code> - </th> - </tr> - <tr> - <td> - <div class="container"> - <div class="cube pers500"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> - </td> - <td> - <div class="container"> - <div class="cube pers650"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> - </div> - </div> - </td> - </tr> - </tbody> -</table> -</pre> - -<h4 id="CSS">CSS</h4> - -<p>様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。</p> - -<pre class="brush: css">/* さまざまな perspective の値のためのショートハンドクラス */ -.pers250 { - perspective: 250px; -} - -.pers350 { - perspective: 350px; -} - -.pers500 { - perspective: 500px; -} - -.pers650 { - perspective: 650px; -} - -/* コンテナーの div、立方体の div、面の一般的な設定 */ -.container { - width: 200px; - height: 200px; - margin: 75px 0 0 75px; - border: none; -} - -.cube { - width: 100%; - height: 100%; - backface-visibility: visible; - perspective-origin: 150% 150%; - transform-style: preserve-3d; -} - -.face { - display: block; - position: absolute; - width: 100px; - height: 100px; - border: none; - line-height: 100px; - font-family: sans-serif; - font-size: 60px; - color: white; - text-align: center; -} - -/* 方向に基づいてそれぞれの面を設定 */ -.front { - background: rgba(0, 0, 0, 0.3); - transform: translateZ(50px); -} - -.back { - background: rgba(0, 255, 0, 1); - color: black; - transform: rotateY(180deg) translateZ(50px); -} - -.right { - background: rgba(196, 0, 0, 0.7); - transform: rotateY(90deg) translateZ(50px); -} - -.left { - background: rgba(0, 0, 196, 0.7); - transform: rotateY(-90deg) translateZ(50px); -} - -.top { - background: rgba(196, 196, 0, 0.7); - transform: rotateX(90deg) translateZ(50px); -} - -.bottom { - background: rgba(196, 0, 196, 0.7); - transform: rotateX(-90deg) translateZ(50px); -} - -/* テーブルの見栄えをよくする */ -th, p, td { - background-color: #EEEEEE; - padding: 10px; - font-family: sans-serif; - text-align: left; -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.perspective")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の使用</a></li> -</ul> diff --git a/files/ja/web/css/perspective/index.md b/files/ja/web/css/perspective/index.md new file mode 100644 index 0000000000..220db45b10 --- /dev/null +++ b/files/ja/web/css/perspective/index.md @@ -0,0 +1,253 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - 3D + - CSS + - CSS プロパティ + - CSS 座標変換 + - 距離 + - グラフィック + - プロパティ + - Reference + - perspective + - recipe:css-property +browser-compat: css.properties.perspective +translation_of: Web/CSS/perspective +--- +{{CSSRef}} + +**`perspective`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。 + +{{EmbedInteractiveExample("pages/css/perspective.html")}} + +## 構文 + +```css +/* キーワード値 */ +perspective: none; + +/* <length> 値 */ +perspective: 20px; +perspective: 3.5em; + +/* グローバル値 */ +perspective: inherit; +perspective: initial; +perspecive: revert; +perspective: unset; +``` + +### 値 + +- `none` + - : 立体的な座標変換を一切適用しないことを示すキーワードです。 +- `<length>` + - : ユーザーと z=0 平面間の距離を表す {{cssxref("<length>")}} です。立体的な座標変換を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な座標変換は適用されません。 + +## 解説 + +z>0 である三次元要素はより大きく、 z<0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。 + +ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。 + +*消失点*は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。 + +このプロパティを `0` と `none` 以外の値で使用すると、新たな[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_perspective">視点の設定</h3> + +この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。 + +#### HTML + +以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。 + +```html +<table> + <tbody> + <tr> + <th><code>perspective: 250px;</code> + </th> + <th><code>perspective: 350px;</code> + </th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube pers250"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container"> + <div class="cube pers350"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + </tr> + <tr> + <th><code>perspective: 500px;</code> + </th> + <th><code>perspective: 650px;</code> + </th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube pers500"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + <td> + <div class="container"> + <div class="cube pers650"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +``` + +#### CSS + +様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。 + +```css +/* さまざまな perspective の値のためのショートハンドクラス */ +.pers250 { + perspective: 250px; +} + +.pers350 { + perspective: 350px; +} + +.pers500 { + perspective: 500px; +} + +.pers650 { + perspective: 650px; +} + +/* コンテナーの div、立方体の div、面の一般的な設定 */ +.container { + width: 200px; + height: 200px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + backface-visibility: visible; + perspective-origin: 150% 150%; + transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* 方向に基づいてそれぞれの面を設定 */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +/* テーブルの見栄えをよくする */ +th, p, td { + background-color: #EEEEEE; + padding: 10px; + font-family: sans-serif; + text-align: left; +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_perspective', 660, 700)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) diff --git a/files/ja/web/css/rotate/index.html b/files/ja/web/css/rotate/index.html deleted file mode 100644 index 20d76f9561..0000000000 --- a/files/ja/web/css/rotate/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: rotate -slug: Web/CSS/rotate -tags: - - CSS - - CSS Property - - Reference - - Transforms -translation_of: Web/CSS/rotate ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate</code></strong> プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 <code>transform</code> の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -rotate: none; - -/* 角度値 */ -rotate: 90deg; -rotate: 0.25turn; -rotate: 1.57rad; - -/* x, y, z 軸名と角度 */ -rotate: x 90deg; -rotate: y 0.25turn; -rotate: z 1.57rad; - -/* ベクトルと角度の値 */ -rotate: 1 1 1 90deg;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>角度値</dt> - <dd>{{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。<code>rotate()</code> (2次元回転) 関数と等価です。</dd> - <dt>x, y, z 軸と角度値</dt> - <dd>該当する要素を回転する軸の名前 (<code>"x"</code>, "<code>y</code>", "<code>z"</code>) と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code> (3次元回転) 関数と等価です。</dd> - <dt>ベクトルと角度値</dt> - <dd>要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 <code>rotate3d()</code> (3次元回転) 関数と等価です。</dd> - <dt id="none"><code>none</code></dt> - <dd>回転を適用しないことを表します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="rotate">Rotation</p> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<div class="hidden"> -<pre class="brush: css">* { - box-sizing: border-box; -} - -html { - font-family: sans-serif; -} - -div { - width: 150px; - margin: 0 auto; -} - -p { - padding: 10px 5px; - border: 3px solid black; - border-radius: 20px; - width: 150px; - font-size: 1.2rem; - text-align: center; -} -</pre> -</div> - -<pre class="brush: css">.rotate { - transition: rotate 1s; -} - -div:hover .rotate { - rotate: 1 -0.5 1 180deg; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("css.properties.rotate")}}</p> diff --git a/files/ja/web/css/rotate/index.md b/files/ja/web/css/rotate/index.md new file mode 100644 index 0000000000..4686d963bc --- /dev/null +++ b/files/ja/web/css/rotate/index.md @@ -0,0 +1,131 @@ +--- +title: rotate +slug: Web/CSS/rotate +tags: + - CSS + - CSS プロパティ + - Reference + - 回転 + - 座標変換 + - angle + - recipe:css-property + - rotation +browser-compat: css.properties.rotate +translation_of: Web/CSS/rotate +--- +{{CSSRef}} + +**`rotate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。 + +## 構文 + +```css +/* キーワード値 */ +rotate: none; + +/* 角度値 */ +rotate: 90deg; +rotate: 0.25turn; +rotate: 1.57rad; + +/* x, y, z 軸名と角度 */ +rotate: x 90deg; +rotate: y 0.25turn; +rotate: z 1.57rad; + +/* ベクトルと角度値 */ +rotate: 1 1 1 90deg; + +/* グローバル値 */ +rotate: inherit; +rotate: initial; +rotate: revert; +rotate: unset; +``` + +### 値 + +- 角度値 + - : {{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (二次元回転) 関数と等価です。 +- x, y, z 軸と角度値 + - : 該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotateX()`/`rotateY()`/`rotateZ()` (三次元回転) 関数と等価です。 +- ベクトルと角度値 + - : 要素を回転させたい直線を表す原点を中心としたベクトルを表す 3 つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotate3d()` (三次元回転) 関数と等価です。 +- `none` + - : 回転を適用しないことを表します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Rotate_an_element_on_hover">ホバー時に要素を回転</h3> + +#### HTML + +```html +<div> + <p class="rotate">Rotation</p> +</div> +``` + +#### CSS + +```css hidden +* { + box-sizing: border-box; +} + +html { + font-family: sans-serif; +} + +div { + width: 150px; + margin: 0 auto; +} + +p { + padding: 10px 5px; + border: 3px solid black; + border-radius: 20px; + width: 150px; + font-size: 1.2rem; + text-align: center; +} +``` + +```css +.rotate { + transition: rotate 1s; +} + +div:hover .rotate { + rotate: 1 -0.5 1 180deg; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotate_an_element_on_hover")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref('translate')}} +- {{cssxref('scale')}} +- {{cssxref('transform')}} + +メモ: `skew` には独立した `transform` の値はありません diff --git a/files/ja/web/css/ruby-align/index.html b/files/ja/web/css/ruby-align/index.html deleted file mode 100644 index d50ed7d827..0000000000 --- a/files/ja/web/css/ruby-align/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: ruby-align -slug: Web/CSS/ruby-align -tags: - - CSS - - CSS プロパティ - - CSS ルビ - - Reference -translation_of: Web/CSS/ruby-align ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>CSS の <code><strong>ruby-align</strong></code> プロパティは、ベースに対するさまざまなルビの配分を定義します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -ruby-align: start; -ruby-align: center; -ruby-align: space-between; -ruby-align: space-around; - -/* グローバル値 */ -ruby-align: inherit; -ruby-align: initial; -ruby-align: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>start</code></dt> - <dd>ルビをベーステキストの始点に揃えることを示すキーワードです。</dd> - <dt><code>center</code></dt> - <dd>ルビをベーステキストの中央に揃えることを示すキーワードです。</dd> - <dt><code>space-between</code></dt> - <dd>ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。</dd> - <dt><code>space-around</code></dt> - <dd>ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>この HTML を、<code>ruby-align</code> のそれぞれの値でレンダリングします。</p> - -<pre class="brush: html"><ruby> - <rb>確認用の長いテキスト</rb> - <rp>（</rp><rt>短いルビ</rt><rp>）</rp> -</ruby> -</pre> - -<h3 id="Ruby_aligned_at_the_start_of_the_base_text" name="Ruby_aligned_at_the_start_of_the_base_text">ルビをベーステキストの始点に揃える</h3> - -<pre class="brush: html" style="display: none;"><ruby> - <rb>確認用の長いテキスト</rb> - <rp>（</rp><rt>短いルビ</rt><rp>）</rp> -</ruby> -</pre> - -<pre class="brush: css">ruby { - ruby-align: start; -}</pre> - -<p>結果は以下のとおりです。</p> - -<p>{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}</p> - -<h3 id="Ruby_aligned_at_the_center_of_the_base_text" name="Ruby_aligned_at_the_center_of_the_base_text">ルビをベーステキストの中央に揃える</h3> - -<pre class="brush: html" style="display: none;"><ruby> - <rb>確認用の長いテキスト</rb> - <rp>（</rp><rt>短いルビ</rt><rp>）</rp> -</ruby> -</pre> - -<pre class="brush: css">ruby { - ruby-align: center; -}</pre> - -<p>結果は以下のとおりです。</p> - -<p>{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}</p> - -<h3 id="Extra_space_distributed_between_ruby_elements" name="Extra_space_distributed_between_ruby_elements">ルビ要素の範囲内にスペースを配分する</h3> - -<pre class="brush: html" style="display: none;"><ruby> - <rb>確認用の長いテキスト</rb> - <rp>（</rp><rt>短いルビ</rt><rp>）</rp> -</ruby> -</pre> - -<pre class="brush: css">ruby { - ruby-align: space-between; -}</pre> - -<p>結果は以下のとおりです。</p> - -<p>{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}</p> - -<h3 id="Extra_space_distributed_between_and_around_ruby_elements" name="Extra_space_distributed_between_and_around_ruby_elements">ルビ要素内および周囲にスペースを配分する</h3> - -<pre class="brush: html" style="display: none;"><ruby> - <rb>確認用の長いテキスト</rb> - <rp>（</rp><rt>短いルビ</rt><rp>）</rp> -</ruby> -</pre> - -<pre class="brush: css">ruby { - ruby-align: space-around; -}</pre> - -<p>結果は以下のとおりです。</p> - -<p>{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td> - <td>{{Spec2('CSS3 Ruby')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.ruby-align")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}}</li> - <li>CSS のルビ関連プロパティ: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}</li> -</ul> diff --git a/files/ja/web/css/ruby-align/index.md b/files/ja/web/css/ruby-align/index.md new file mode 100644 index 0000000000..616afedb31 --- /dev/null +++ b/files/ja/web/css/ruby-align/index.md @@ -0,0 +1,157 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +tags: + - CSS + - CSS プロパティ + - CSS ルビ + - Reference + - recipe:css-property +browser-compat: css.properties.ruby-align +translation_of: Web/CSS/ruby-align +--- +{{CSSRef}} + +**`ruby-align`** は CSS のプロパティで、ベースに対するさまざまなルビの配分を定義します。 + +```css +/* キーワード値 */ +ruby-align: start; +ruby-align: center; +ruby-align: space-between; +ruby-align: space-around; + +/* グローバル値 */ +ruby-align: inherit; +ruby-align: initial; +ruby-align: revert; +ruby-align: unset; +``` + +## 構文 + +### 値 + +- `start` + - : ルビをベーステキストの始点に揃えることを示すキーワードです。 +- `center` + - : ルビをベーステキストの中央に揃えることを示すキーワードです。 +- `space-between` + - : ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。 +- `space-around` + - : ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Ruby_aligned_at_the_start_of_the_base_text">ルビをベーステキストの先頭に揃える</h3> + +#### HTML + +```html +<ruby> + <rb>確認用の長いテキスト</rb> + <rp>（</rp><rt>短いルビ</rt><rp>）</rp> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-align: start; +} +``` + +#### 結果 + +{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}} + +<h3 id="Ruby_aligned_at_the_center_of_the_base_text">ルビをベーステキストの中央に揃える</h3> + +#### HTML + +```html +<ruby> + <rb>確認用の長いテキスト</rb> + <rp>（</rp><rt>短いルビ</rt><rp>）</rp> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-align: center; +} +``` + +#### 結果 + +{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}} + +<h3 id="Extra_space_distributed_between_ruby_elements">ルビ要素の範囲内にスペースを配分する</h3> + +#### HTML + +```html +<ruby> + <rb>確認用の長いテキスト</rb> + <rp>（</rp><rt>短いルビ</rt><rp>）</rp> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-align: space-between; +} +``` + +#### 結果 + +{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}} + +<h3 id="Extra_space_distributed_between_and_around_ruby_elements">ルビ要素内および周囲にスペースを配分する</h3> + +#### HTML + +```html +<ruby> + <rb>確認用の長いテキスト</rb> + <rp>（</rp><rt>短いルビ</rt><rp>）</rp> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-align: space-around; +} +``` + +#### 結果 + +{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}} +- CSS のルビ関連プロパティ: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}} diff --git a/files/ja/web/css/ruby-position/index.html b/files/ja/web/css/ruby-position/index.html deleted file mode 100644 index 6cb66cd58d..0000000000 --- a/files/ja/web/css/ruby-position/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: ruby-position -slug: Web/CSS/ruby-position -tags: - - CSS - - CSS プロパティ - - CSS ルビ - - リファレンス -translation_of: Web/CSS/ruby-position ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>CSS の <code><strong>ruby-position</strong></code> プロパティは、ベース要素に対するルビ要素の位置を定義します。要素の上方 (<code>over</code>)、下方 (<code>under</code>)、文字の間の右側 (<code>inter-character</code>) に配置できます。</p> - -<pre class="brush:css">/* キーワード値 */ -ruby-position: over; -ruby-position: under; -ruby-position: inter-character; - -/* グローバル値 */ -ruby-position: inherit; -ruby-position: initial; -ruby-position: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>over</code></dt> - <dd><img alt="over の例" src="https://mdn.mozillademos.org/files/10251/Screen%20Shot%202015-03-04%20at%2013.02.20.png" style="height: 31px; width: 77px;">ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。</dd> - <dt><code>under</code></dt> - <dd><img alt="under の例" src="https://mdn.mozillademos.org/files/10249/Screen%20Shot%202015-03-04%20at%2013.02.07.png" style="height: 34px; width: 78px;">ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。</dd> - <dt><code>inter-character</code></dt> - <dd>ルビをそれぞれの文字の間に配置することを示すキーワードです。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>この HTML は、 <code>ruby-position</code> のそれぞれの値でレンダリングします。</p> - -<pre class="brush: html"><ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> -</ruby> -</pre> - -<h3 id="Ruby_positioned_over_the_text" name="Ruby_positioned_over_the_text">テキストの上に配置したルビ</h3> - -<pre class="brush: html" style="display: none;"><ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> -</ruby> -</pre> - -<pre class="brush: css">ruby { - ruby-position:over; -}</pre> - -<p>結果は以下のとおりです。</p> - -<p>{{EmbedLiveSample("Ruby_positioned_over_the_text", 100, 40)}}</p> - -<h3 id="Ruby_positioned_under_the_text" name="Ruby_positioned_under_the_text">テキストの下に配置したルビ</h3> - -<pre class="brush: html" style="display: none;"><ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> -</ruby> -</pre> - -<pre class="brush: css">ruby { - ruby-position:under; -}</pre> - -<p>結果は以下のとおりです。</p> - -<p>{{EmbedLiveSample("Ruby_positioned_under_the_text", 100, 40)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}</td> - <td>{{Spec2('CSS3 Ruby')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.ruby-position")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}}</li> - <li>CSS のルビ関連プロパティ: {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}</li> -</ul> diff --git a/files/ja/web/css/ruby-position/index.md b/files/ja/web/css/ruby-position/index.md new file mode 100644 index 0000000000..dc12a3ee96 --- /dev/null +++ b/files/ja/web/css/ruby-position/index.md @@ -0,0 +1,135 @@ +--- +title: ruby-position +slug: Web/CSS/ruby-position +tags: + - CSS + - CSS プロパティ + - CSS ルビ + - Reference + - recipe:css-property +browser-compat: css.properties.ruby-position +translation_of: Web/CSS/ruby-position +--- +{{CSSRef}} + +**`ruby-position`** は CSS のプロパティで、ベース要素に対するルビ要素の位置を定義します。要素の上方 (`over`)、下方 (`under`)、文字の間の右側 (`inter-character`) に配置できます。 + +## 構文 + +```css +/* キーワード値 */ +ruby-position: over; +ruby-position: under; +ruby-position: inter-character; +ruby-position: alternate; + +/* グローバル値 */ +ruby-position: inherit; +ruby-position: initial; +ruby-position: revert; +ruby-position: unset; +``` + +### 値 + +- `over` + - : ルビを主テキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。 +- `under` + - : ルビを主テキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。 +- `inter-character` + - : ルビをそれぞれの文字の間に配置することを示すキーワードです。 +- `alternate` + - : 複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Ruby_positioned_over_the_text">テキストの上に配置したルビ</h3> + +#### HTML + +```html +<ruby> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-position:over; +} +``` + +#### 結果 + +{{EmbedLiveSample("Ruby_positioned_over_the_text", 100, 40)}} + +<h3 id="Ruby_positioned_under_the_text">テキストの下に配置したルビ</h3> + +#### HTML + +```html +<ruby> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-position:under; +} +``` + +#### 結果 + +{{EmbedLiveSample("Ruby_positioned_under_the_text", 100, 40)}} + +<h3 id="Ruby_alternate">交互のルビ</h3> + +#### HTML + +```html +<ruby> + <rb>A<rb>B<rb>C</rb> + <rtc>Above</rtc> + <rtc>Below</rtc> +</ruby> +``` + +#### CSS + +```css +ruby { + ruby-position: alternate; /* 初期値でもある */ +} +``` + +#### 結果 + +{{EmbedLiveSample("Ruby_alternate", 100, 40)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}} +- CSS のルビ関連プロパティ: {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}} diff --git a/files/ja/web/css/scale/index.html b/files/ja/web/css/scale/index.html deleted file mode 100644 index 48b7e4cbf7..0000000000 --- a/files/ja/web/css/scale/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: scale -slug: Web/CSS/scale -tags: - - CSS - - CSS Property - - Reference - - Transforms - - 'recipe:css-property' -translation_of: Web/CSS/scale ---- -<div>{{CSSRef}}</div> - -<p><strong><code>scale</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 <code>transform</code> の値で変換関数を指定する実際の順序を思い出す手間を軽減します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* キーワード値 */ -scale: none; - -/* １つの値 */ -/* 1より大きい値で要素を拡大 */ -scale: 2; -/* 1より小さい値で要素を縮小 */ -scale: 0.5; - -/* ２つの値 */ -scale: 2 0.5; - -/* ３つの値 */ -scale: 2 0.5 2;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>１つの数値</dt> - <dd>該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X 及び Y 軸で同じ倍率になります。 <code>scale()</code> (2D 倍率) 関数に１つの値を指定した場合と等価です。</dd> - <dt>２つの長さ/パーセント値</dt> - <dd>２つの {{CSSxRef("<number>")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 <code>scale()</code> (2D 倍率) 関数に２つの値を指定した場合と等価です。</dd> - <dt>３つの長さ/パーセント値</dt> - <dd>３つの {{CSSxRef("<number>")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 <code>translate3d()</code> (3D 倍率) 関数と等価です。</dd> - <dt id="none"><code>none</code></dt> - <dd>拡大率が適用されないことを示します。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Scaling_an_element_on_hover" name="Scaling_an_element_on_hover">上に乗った際の要素の拡大Scaling an element on hover</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div> - <p class="scale">Scaling</p> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">* { - box-sizing: border-box; -} - -html { - font-family: sans-serif; -} - -div { - width: 150px; - margin: 0 auto; -} - -p { - padding: 10px 5px; - border: 3px solid black; - border-radius: 20px; - width: 150px; - font-size: 1.2rem; - text-align: center; -} - -.scale { - transition: scale 1s; -} - -div:hover .scale { - scale: 2 0.7; -} -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Scaling_an_element_on_hover")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}</td> - <td>{{Spec2("CSS Transforms 2")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scale")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref('translate')}}</li> - <li>{{cssxref('rotate')}}</li> - <li>{{cssxref('transform')}}</li> -</ul> - -<p>注: skew は独立した変形値ではありません</p> diff --git a/files/ja/web/css/scale/index.md b/files/ja/web/css/scale/index.md new file mode 100644 index 0000000000..6c67160e65 --- /dev/null +++ b/files/ja/web/css/scale/index.md @@ -0,0 +1,125 @@ +--- +title: scale +slug: Web/CSS/scale +tags: + - CSS + - CSS プロパティ + - Reference + - 座標変換 + - recipe:css-property +browser-compat: css.properties.scale +translation_of: Web/CSS/scale +--- +{{CSSRef}} + +**`scale`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立しての拡大縮小変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。 + +## 構文 + +```css +/* キーワード値 */ +scale: none; + +/* 1 つの値 */ +/* 1 より大きい値で要素を拡大 */ +scale: 2; +/* 1 より小さい値で要素を縮小 */ +scale: 0.5; + +/* 2 つの値 */ +scale: 2 0.5; + +/* 3 つの値 */ +scale: 2 0.5 2; + +/* グローバル値 */ +scale: inherit; +scale: initial; +scale: revert; +scale: unset; +``` + +### 値 + +- 1 つの数値 + - : 該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X および Y 軸で同じの拡大縮小になります。 `scale()` (2D の拡大縮小) 関数に 1 つの値を指定した場合と等価です。 +- 2 つの長さ/パーセント値 + - : 2 つの {{CSSxRef("<number>")}} 値で、2D の拡大縮小における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 `scale()` (2D の拡大縮小) 関数に 2 つの値を指定した場合と等価です。 +- 3 つの長さ/パーセント値 + - : 3 つの {{CSSxRef("<number>")}} 値で、3D の拡大縮小における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 `scale3d()` (3D の拡大縮小) 関数と等価です。 +- `none` + - : 拡大率が適用されないことを示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Scaling_an_element_on_hover">上に乗った際の要素の拡大</h3> + +#### HTML + +```html +<div> + <p class="scale">Scaling</p> +</div> +``` + +#### CSS + +```css +* { + box-sizing: border-box; +} + +html { + font-family: sans-serif; +} + +div { + width: 150px; + margin: 0 auto; +} + +p { + padding: 10px 5px; + border: 3px solid black; + border-radius: 20px; + width: 150px; + font-size: 1.2rem; + text-align: center; +} + +.scale { + transition: scale 1s; +} + +div:hover .scale { + scale: 2 0.7; +} +``` + +#### Result + +{{EmbedLiveSample("Scaling_an_element_on_hover")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref('translate')}} +- {{cssxref('rotate')}} +- {{cssxref('transform')}} + +メモ: `skew` には独立した `transform` の値はありません diff --git a/files/ja/web/css/scroll-margin-block-end/index.md b/files/ja/web/css/scroll-margin-block-end/index.md new file mode 100644 index 0000000000..4e3ada2149 --- /dev/null +++ b/files/ja/web/css/scroll-margin-block-end/index.md @@ -0,0 +1,55 @@ +--- +title: scroll-margin-block-end +slug: Web/CSS/scroll-margin-block-end +tags: + - CSS + - recipe:css-property + - scroll-margin-block-end +browser-compat: css.properties.scroll-margin-block-end +translation_of: Web/CSS/scroll-margin-block-end +--- +{{CSSRef}} + +`scroll-margin-block-end` プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-block-end: 10px; +scroll-margin-block-end: 1em; + +/* グローバル値 */ +scroll-margin-block-end: inherit; +scroll-margin-block-end: initial; +scroll-margin-block-end: revert; +scroll-margin-block-end: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーのブロック方向における末尾側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-block-start/index.md b/files/ja/web/css/scroll-margin-block-start/index.md new file mode 100644 index 0000000000..dcca78a7cc --- /dev/null +++ b/files/ja/web/css/scroll-margin-block-start/index.md @@ -0,0 +1,57 @@ +--- +title: scroll-margin-block-start +slug: Web/CSS/scroll-margin-block-start +tags: + - 初心者 + - CSS + - Example + - recipe:css-property + - scroll-margin-block-start +browser-compat: css.properties.scroll-margin-block-start +translation_of: Web/CSS/scroll-margin-block-start +--- +{{CSSRef}} + +`scroll-margin-block-start` プロパティは、スクロールスナップ領域のインライン方向における先頭側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-block-start: 10px; +scroll-margin-block-start: 1em; + +/* グローバル値 */ +scroll-margin-block-start: inherit; +scroll-margin-block-start: initial; +scroll-margin-block-start: revert; +scroll-margin-block-start: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーのブロック方向における先頭側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-block/index.md b/files/ja/web/css/scroll-margin-block/index.md new file mode 100644 index 0000000000..bad9d0adea --- /dev/null +++ b/files/ja/web/css/scroll-margin-block/index.md @@ -0,0 +1,65 @@ +--- +title: scroll-margin-block +slug: Web/CSS/scroll-margin-block +tags: + - CSS + - recipe:css-shorthand-property + - scroll-margin-block +browser-compat: css.properties.scroll-margin-block +--- +{{CSSRef}} + +`scroll-margin-block` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、ブロック方向のスクロールマージンを設定します。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}} + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`scroll-margin-block-end`](/ja/docs/Web/CSS/scroll-margin-block-end) +- [`scroll-margin-block-start`](/ja/docs/Web/CSS/scroll-margin-block-start) + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-block: 10px; +scroll-margin-block: 1em .5em ; + +/* Global values */ +scroll-margin-block: inherit; +scroll-margin-block: initial; +scroll-margin-block: revert; +scroll-margin-block: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーの対応する辺からの距離です。 + +## 解説 + +`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-bottom/index.html b/files/ja/web/css/scroll-margin-bottom/index.html deleted file mode 100644 index 12df44a35e..0000000000 --- a/files/ja/web/css/scroll-margin-bottom/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: scroll-margin-bottom -slug: Web/CSS/scroll-margin-bottom -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-margin - - scroll-margin-bottom -translation_of: Web/CSS/scroll-margin-bottom ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-bottom</code> プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-bottom: 10px; -scroll-margin-bottom: 1em; - -/* グローバル値 */ -scroll-margin-bottom: inherit; -scroll-margin-bottom: initial; -scroll-margin-bottom: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーの下側の辺からみた外部の距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-bottom")}}</p> diff --git a/files/ja/web/css/scroll-margin-bottom/index.md b/files/ja/web/css/scroll-margin-bottom/index.md new file mode 100644 index 0000000000..c5542827d7 --- /dev/null +++ b/files/ja/web/css/scroll-margin-bottom/index.md @@ -0,0 +1,60 @@ +--- +title: scroll-margin-bottom +slug: Web/CSS/scroll-margin-bottom +tags: + - CSS + - CSS プロパティ + - Reference + - Scroll margin bottom + - Web + - recipe:css-property + - scroll-margin + - scroll-margin-bottom +browser-compat: css.properties.scroll-margin-bottom +translation_of: Web/CSS/scroll-margin-bottom +--- +{{CSSRef}} + +`scroll-margin-bottom` プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-bottom: 10px; +scroll-margin-bottom: 1em; + +/* グローバル値 */ +scroll-margin-bottom: inherit; +scroll-margin-bottom: initial; +scroll-margin-bottom: revert; +scroll-margin-bottom: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーの下側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-inline-end/index.html b/files/ja/web/css/scroll-margin-inline-end/index.html deleted file mode 100644 index 7047a4c8fa..0000000000 --- a/files/ja/web/css/scroll-margin-inline-end/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: scroll-margin-inline-end -slug: Web/CSS/scroll-margin-inline-end -tags: - - Advanced - - CSS - - NeedsExample - - Reference - - 上級者 -translation_of: Web/CSS/scroll-margin-inline-end ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-inline-end</code> プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-inline-end: 10px; -scroll-margin-inline-end: 1em; - -/* グローバル値 */ -scroll-margin-inline-end: inherit; -scroll-margin-inline-end: initial; -scroll-margin-inline-end: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-inline-end")}}</p> diff --git a/files/ja/web/css/scroll-margin-inline-end/index.md b/files/ja/web/css/scroll-margin-inline-end/index.md new file mode 100644 index 0000000000..19c0c2a764 --- /dev/null +++ b/files/ja/web/css/scroll-margin-inline-end/index.md @@ -0,0 +1,141 @@ +--- +title: scroll-margin-inline-end +slug: Web/CSS/scroll-margin-inline-end +tags: + - 上級者 + - CSS + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-margin-inline-end +translation_of: Web/CSS/scroll-margin-inline-end +--- +{{CSSRef}} + +`scroll-margin-inline-end` プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-inline-end: 10px; +scroll-margin-inline-end: 1em; + +/* グローバル値 */ +scroll-margin-inline-end: inherit; +scroll-margin-inline-end: initial; +scroll-margin-inline-end: revert; +scroll-margin-inline-end: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Simple_demonstration">簡単なデモ</h3> + +この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。 + +ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの右端に近いところでスナップします。 + +#### HTML + +ブロックを表す HTML はとても簡単です。 + +```html +<div class="scroller"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> +</div> +``` + +#### CSS + +外側のコンテナーのスタイルは以下のようになっています。 + +```css +.scroller { + text-align: left; + width: 250px; + height: 250px; + overflow-x: scroll; + display: flex; + box-sizing: border-box; + border: 1px solid #000; + scroll-snap-type: x mandatory; +} +``` + +スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。 + +子要素のスタイルは次のようになっています。 + +```css +.scroller > div { + flex: 0 0 250px; + width: 250px; + background-color: #663399; + color: #fff; + font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + scroll-snap-align: end; +} + +.scroller > div:nth-child(2n) { + background-color: #fff; + color: #663399; +} +``` + +ここで最も重要なのは `scroll-snap-align: end` で、これは右側の端 (ここでは x 軸に沿った「末尾」) をスナップ点として指定するものです。 + + +最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。 + +```css +.scroller > div:nth-child(2) { + scroll-margin-inline-end: 1rem; +} + +.scroller > div:nth-child(3) { + scroll-margin-inline-end: 2rem; +} +``` + +つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。 + +#### 結果 + +自分でやってみましょう。 + +{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-inline-start/index.html b/files/ja/web/css/scroll-margin-inline-start/index.html deleted file mode 100644 index 18090254ea..0000000000 --- a/files/ja/web/css/scroll-margin-inline-start/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: scroll-margin-inline-start -slug: Web/CSS/scroll-margin-inline-start -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-margin-inline - - scroll-margin-inline-start -translation_of: Web/CSS/scroll-margin-inline-start ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-inline-start</code> プロパティは、スクロールスナップ領域のインライン方向における開始側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-inline-start: 10px; -scroll-margin-inline-start: 1em; - -/* グローバル値 */ -scroll-margin-inline-start: inherit; -scroll-margin-inline-start: initial; -scroll-margin-inline-start: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-inline-start")}}</p> diff --git a/files/ja/web/css/scroll-margin-inline-start/index.md b/files/ja/web/css/scroll-margin-inline-start/index.md new file mode 100644 index 0000000000..948c70f909 --- /dev/null +++ b/files/ja/web/css/scroll-margin-inline-start/index.md @@ -0,0 +1,143 @@ +--- +title: scroll-margin-inline-start +slug: Web/CSS/scroll-margin-inline-start +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-property + - scroll-margin-inline + - scroll-margin-inline-start +browser-compat: css.properties.scroll-margin-inline-start +translation_of: Web/CSS/scroll-margin-inline-start +--- +{{CSSRef}} + +`scroll-margin-inline-start` プロパティは、スクロールスナップ領域のインライン方向における先頭側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-inline-start: 10px; +scroll-margin-inline-start: 1em; + +/* グローバル値 */ +scroll-margin-inline-start: inherit; +scroll-margin-inline-start: initial; +scroll-margin-inline-start: revert; +scroll-margin-inline-start: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Simple_demonstration">簡単なデモ</h3> + +この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。 + +ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの左端に近いところでスナップします。 + +#### HTML + +ブロックを表す HTML はとても簡単です。 + +```html +<div class="scroller"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> +</div> +``` + +#### CSS + +外側のコンテナーのスタイルは以下のようになっています。 + +```css +.scroller { + text-align: left; + width: 250px; + height: 250px; + overflow-x: scroll; + display: flex; + box-sizing: border-box; + border: 1px solid #000; + scroll-snap-type: x mandatory; +} +``` + +スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。 + +子要素のスタイルは次のようになっています。 + +```css +.scroller > div { + flex: 0 0 250px; + width: 250px; + background-color: #663399; + color: #fff; + font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + scroll-snap-align: start; +} + +.scroller > div:nth-child(2n) { + background-color: #fff; + color: #663399; +} +``` + +ここで最も重要なのは `scroll-snap-align: start` で、これは左側の端 (ここでは x 軸に沿った「先頭」) をスナップ点として指定するものです。 + + +最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。 + +```css +.scroller > div:nth-child(2) { + scroll-margin-inline-start: 1rem; +} + +.scroller > div:nth-child(3) { + scroll-margin-inline-start: 2rem; +} +``` + +つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの先頭から `1rem`、3 番目の `<div>` のインラインの先頭から `2rem` のところでスナップすることになります。 + +#### 結果 + +自分でやってみましょう。 + +{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-inline/index.html b/files/ja/web/css/scroll-margin-inline/index.html deleted file mode 100644 index 06d1900196..0000000000 --- a/files/ja/web/css/scroll-margin-inline/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: scroll-margin-inline -slug: Web/CSS/scroll-margin-inline -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-margin - - scroll-margin-inline -translation_of: Web/CSS/scroll-margin-inline ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-inline</code> プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。</p> - -<p>scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-inline: 10px; -scroll-margin-inline: 1em .5em ; - -/* グローバル値 */ -scroll-margin-inline: inherit; -scroll-margin-inline: initial; -scroll-margin-inline: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーの対応する辺からの距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-inline")}}</p> diff --git a/files/ja/web/css/scroll-margin-inline/index.md b/files/ja/web/css/scroll-margin-inline/index.md new file mode 100644 index 0000000000..6fb2eda59d --- /dev/null +++ b/files/ja/web/css/scroll-margin-inline/index.md @@ -0,0 +1,154 @@ +--- +title: scroll-margin-inline +slug: Web/CSS/scroll-margin-inline +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-shorthand-property + - scroll-margin + - scroll-margin-inline +browser-compat: css.properties.scroll-margin-inline +translation_of: Web/CSS/scroll-margin-inline +--- +{{CSSRef}} + +`scroll-margin-inline` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、インライン方向のスクロールマージンを設定します。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`scroll-margin-inline-end`](/ja/docs/Web/CSS/scroll-margin-inline-end) +- [`scroll-margin-inline-start`](/ja/docs/Web/CSS/scroll-margin-inline-start) + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-inline: 10px; +scroll-margin-inline: 1em .5em ; + +/* グローバル値 */ +scroll-margin-inline: inherit; +scroll-margin-inline: initial; +scroll-margin-inline: revert; +scroll-margin-inline: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーの対応する辺からの距離です。 + +## 解説 + +scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Simple_demonstration">簡単なデモ</h3> + +この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。 + +ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの右端に近いところでスナップします。 + +#### HTML + +ブロックを表す HTML はとても簡単です。 + +```html +<div class="scroller"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> +</div> +``` + +#### CSS + +外側のコンテナーのスタイルは以下のようになっています。 + +```css +.scroller { + text-align: left; + width: 250px; + height: 250px; + overflow-x: scroll; + display: flex; + box-sizing: border-box; + border: 1px solid #000; + scroll-snap-type: x mandatory; +} +``` + +スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。 + +子要素のスタイルは次のようになっています。 + +```css +.scroller > div { + flex: 0 0 250px; + width: 250px; + background-color: #663399; + color: #fff; + font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + scroll-snap-align: end; +} + +.scroller > div:nth-child(2n) { + background-color: #fff; + color: #663399; +} +``` + +ここで最も重要なのは `scroll-snap-align: end` で、これは右側の端 (ここでは x 軸に沿った「末尾」) をスナップ点として指定するものです。 + + +最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。 + +```css +.scroller > div:nth-child(2) { + scroll-margin-inline: 1rem; +} + +.scroller > div:nth-child(3) { + scroll-margin-inline: 2rem; +} +``` + +つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの末尾から `1rem`、3 番目の `<div>` のインラインの末尾から `2rem` のところでスナップすることになります。 + +> **Note:** ここでは `scroll-margin` をインライン軸 (この場合は X 軸) の先頭*と*末尾に一度に設定していますが、実際に関係するのは末尾側だけです。例えば `scroll-margin-inline: 0 1rem` や `scroll-margin-inline-end: 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。 + +#### 結果 + +自分でやってみましょう。 + +{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-left/index.html b/files/ja/web/css/scroll-margin-left/index.html deleted file mode 100644 index f9c243e949..0000000000 --- a/files/ja/web/css/scroll-margin-left/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: scroll-margin-left -slug: Web/CSS/scroll-margin-left -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Scroll margin left - - Web - - scroll-margin - - scroll-margin-left -translation_of: Web/CSS/scroll-margin-left ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-left</code> プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-left: 10px; -scroll-margin-left: 1em; - -/* グローバル値 */ -scroll-margin-left: inherit; -scroll-margin-left: initial; -scroll-margin-left: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーの左側の辺からみた外部の距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-left")}}</p> diff --git a/files/ja/web/css/scroll-margin-left/index.md b/files/ja/web/css/scroll-margin-left/index.md new file mode 100644 index 0000000000..308b7b7f61 --- /dev/null +++ b/files/ja/web/css/scroll-margin-left/index.md @@ -0,0 +1,60 @@ +--- +title: scroll-margin-left +slug: Web/CSS/scroll-margin-left +tags: + - CSS + - CSS プロパティ + - Reference + - Scroll margin left + - Web + - recipe:css-property + - scroll-margin + - scroll-margin-left +browser-compat: css.properties.scroll-margin-left +translation_of: Web/CSS/scroll-margin-left +--- +{{CSSRef}} + +`scroll-margin-left` プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-left: 10px; +scroll-margin-left: 1em; + +/* グローバル値 */ +scroll-margin-left: inherit; +scroll-margin-left: initial; +scroll-margin-left: revert; +scroll-margin-left: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーの左側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-right/index.html b/files/ja/web/css/scroll-margin-right/index.html deleted file mode 100644 index a04c35e12e..0000000000 --- a/files/ja/web/css/scroll-margin-right/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: scroll-margin-right -slug: Web/CSS/scroll-margin-right -tags: - - CSS - - CSS Property - - Reference - - Web - - scroll-margin - - scroll-margin-right -translation_of: Web/CSS/scroll-margin-right ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-right</code> プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-right: 10px; -scroll-margin-right: 1em; - -/* グローバル値 */ -scroll-margin-right: inherit; -scroll-margin-right: initial; -scroll-margin-right: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーの右側の辺からみた外部の距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-right")}}</p> diff --git a/files/ja/web/css/scroll-margin-right/index.md b/files/ja/web/css/scroll-margin-right/index.md new file mode 100644 index 0000000000..b941665957 --- /dev/null +++ b/files/ja/web/css/scroll-margin-right/index.md @@ -0,0 +1,59 @@ +--- +title: scroll-margin-right +slug: Web/CSS/scroll-margin-right +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-property + - scroll-margin + - scroll-margin-right +browser-compat: css.properties.scroll-margin-right +translation_of: Web/CSS/scroll-margin-right +--- +{{CSSRef}} + +`scroll-margin-right` プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-right: 10px; +scroll-margin-right: 1em; + +/* グローバル値 */ +scroll-margin-right: inherit; +scroll-margin-right: initial; +scroll-margin-right: revert; +scroll-margin-right: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーの右側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin-top/index.html b/files/ja/web/css/scroll-margin-top/index.html deleted file mode 100644 index 04f356c5c5..0000000000 --- a/files/ja/web/css/scroll-margin-top/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: scroll-margin-top -slug: Web/CSS/scroll-margin-top -tags: - - CSS - - CSS Property - - CodingScripting - - Reference - - Web - - scroll-margin - - scroll-margin-top -translation_of: Web/CSS/scroll-margin-top ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-margin-top</code> プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin-top: 10px; -scroll-margin-top: 1em; - -/* グローバル値 */ -scroll-margin-top: inherit; -scroll-margin-top: initial; -scroll-margin-top: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length></var></code></dt> - <dd>スクロールコンテナーの上側の辺からみた外部の距離です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-margin-top")}}</p> diff --git a/files/ja/web/css/scroll-margin-top/index.md b/files/ja/web/css/scroll-margin-top/index.md new file mode 100644 index 0000000000..c2efe1c843 --- /dev/null +++ b/files/ja/web/css/scroll-margin-top/index.md @@ -0,0 +1,59 @@ +--- +title: scroll-margin-top +slug: Web/CSS/scroll-margin-top +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-property + - scroll-margin + - scroll-margin-top +browser-compat: css.properties.scroll-margin-top +translation_of: Web/CSS/scroll-margin-top +--- +{{CSSRef}} + +`scroll-margin-top` プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}} + +## 構文 + +```css +/* <length> 値 */ +scroll-margin-top: 10px; +scroll-margin-top: 1em; + +/* グローバル値 */ +scroll-margin-top: inherit; +scroll-margin-top: initial; +scroll-margin-top: revert; +scroll-margin-top: unset; +``` + +### 値 + +- `<length>` + - : スクロールコンテナーの上側の辺からみた外部の距離です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-margin/index.html b/files/ja/web/css/scroll-margin/index.html deleted file mode 100644 index d604272ca1..0000000000 --- a/files/ja/web/css/scroll-margin/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: scroll-margin -slug: Web/CSS/scroll-margin -tags: - - CSS - - Reference - - scroll-margin -translation_of: Web/CSS/scroll-margin ---- -<div>{{CSSRef}}</div> - -<p><strong><code>scroll-margin</code></strong> プロパティは一括指定プロパティであり、すべての個別指定の <code>scroll-margin</code> プロパティに対して、ちょうど <code>margin</code> プロパティが個別指定の <code>margin-*</code> に値を割り当てるように、値を割り当てます。</p> - -<p><code>scroll-margin</code> の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -scroll-margin: 10px; -scroll-margin: 1em .5em 1em 1em; - -/* グローバル値 */ -scroll-margin: inherit; -scroll-margin: initial; -scroll-margin: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>スクロールコンテナーの辺からの張り出し部分です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.scroll-margin")}}</p> diff --git a/files/ja/web/css/scroll-margin/index.md b/files/ja/web/css/scroll-margin/index.md new file mode 100644 index 0000000000..75699bb7a4 --- /dev/null +++ b/files/ja/web/css/scroll-margin/index.md @@ -0,0 +1,161 @@ +--- +title: scroll-margin +slug: Web/CSS/scroll-margin +tags: + - CSS + - プロパティ + - Reference + - margin + - recipe:css-shorthand-property + - scroll-margin + - scrollbar + - scrolling +browser-compat: css.properties.scroll-margin +translation_of: Web/CSS/scroll-margin +--- +{{CSSRef}} + +**`scroll-margin`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のスクロールマージンを一度にすべて、ちょうど `margin` プロパティが個別指定の `margin-*` に値を割り当てるように、値を割り当てます。 + +{{EmbedInteractiveExample("pages/css/scroll-margin.html")}} + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`scroll-margin-bottom`](/ja/docs/Web/CSS/scroll-margin-bottom) +- [`scroll-margin-left`](/ja/docs/Web/CSS/scroll-margin-left) +- [`scroll-margin-right`](/ja/docs/Web/CSS/scroll-margin-right) +- [`scroll-margin-top`](/ja/docs/Web/CSS/scroll-margin-top) + +## 構文 + +```css +/* <length> 値 */ +scroll-margin: 10px; +scroll-margin: 1em .5em 1em 1em; + +/* グローバル値 */ +scroll-margin: inherit; +scroll-margin: initial; +scroll-margin: revert; +scroll-margin: unset; +``` + +### 値 + +- {{cssxref("<length>")}} + - : スクロールコンテナーの辺からの張り出し部分です。 + +## 解説 + +`scroll-margin` の効果は、例のコンテンツの 2 つの「ページ」の間の一部の位置にスクロールすることで見ることができます。`scroll-margin` に指定された値は、主にスナップポートの外側にあるページのうち、どれだけの部分を表示したままにするかを決定します。 + +`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Simple_demonstration">簡単なデモ</h3> + +この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。 + +ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの左端に近いところでスナップします。 + +#### HTML + +ブロックを表す HTML はとても簡単です。 + +```html +<div class="scroller"> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> +</div> +``` + +#### CSS + +外側のコンテナーのスタイルは以下のようになっています。 + +```css +.scroller { + text-align: left; + width: 250px; + height: 250px; + overflow-x: scroll; + display: flex; + box-sizing: border-box; + border: 1px solid #000; + scroll-snap-type: x mandatory; +} +``` + +スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。 + +子要素のスタイルは次のようになっています。 + +```css +.scroller > div { + flex: 0 0 250px; + width: 250px; + background-color: #663399; + color: #fff; + font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + scroll-snap-align: start; +} + +.scroller > div:nth-child(2n) { + background-color: #fff; + color: #663399; +} +``` + +ここで最も重要なのは `scroll-snap-align: start` で、これは左側の端 (ここでは x 軸に沿った「先頭」) をスナップ点として指定するものです。 + + +最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。 + +```css +.scroller > div:nth-child(2) { + scroll-margin: 1rem; +} + +.scroller > div:nth-child(3) { + scroll-margin: 2rem; +} +``` + +つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` の左端から `1rem`、3 番目の `<div>` の左端から `2rem` のところでスナップすることになります。 + +> **Note:** ここでは `scroll-margin` をすべての辺に一度に設定していますが、実際に関係するのは先頭側だけです。例えば `scroll-margin-inline-start: 1rem` や `scroll-margin: 0 0 0 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。 + +#### 結果 + +自分でやってみましょう。 + +{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-block-end/index.html b/files/ja/web/css/scroll-padding-block-end/index.html deleted file mode 100644 index 55373c9991..0000000000 --- a/files/ja/web/css/scroll-padding-block-end/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: scroll-padding-block-end -slug: Web/CSS/scroll-padding-block-end -tags: - - CSS - - CSS Property - - Reference - - Web - - 'recipe:css-property' - - scroll-padding-block - - scroll-padding-block-end -translation_of: Web/CSS/scroll-padding-block-end ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-block-end</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* キーワード値 */ -scroll-padding-block-end: auto; - -/* <length> 値 */ -scroll-padding-block-end: 10px; -scroll-padding-block-end: 1em; -scroll-padding-block-end: 10%; - -/* グローバル値 */ -scroll-padding-block-end: inherit; -scroll-padding-block-end: initial; -scroll-padding-block-end: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-block-end")}}</p> diff --git a/files/ja/web/css/scroll-padding-block-end/index.md b/files/ja/web/css/scroll-padding-block-end/index.md new file mode 100644 index 0000000000..ef8fddfbfc --- /dev/null +++ b/files/ja/web/css/scroll-padding-block-end/index.md @@ -0,0 +1,65 @@ +--- +title: scroll-padding-block-end +slug: Web/CSS/scroll-padding-block-end +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-property + - scroll-padding-block + - scroll-padding-block-end +browser-compat: css.properties.scroll-padding-block-end +translation_of: Web/CSS/scroll-padding-block-end +--- +{{CSSRef}} + +`scroll-padding-block-end` プロパティは、スクロールポートの*最適表示領域*のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-block-end: auto; + +/* <length> 値 */ +scroll-padding-block-end: 10px; +scroll-padding-block-end: 1em; +scroll-padding-block-end: 10%; + +/* グローバル値 */ +scroll-padding-block-end: inherit; +scroll-padding-block-end: initial; +scroll-padding-block-end: revert; +scroll-padding-block-end: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-block-start/index.html b/files/ja/web/css/scroll-padding-block-start/index.html deleted file mode 100644 index 4094bd5b12..0000000000 --- a/files/ja/web/css/scroll-padding-block-start/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: scroll-padding-block-start -slug: Web/CSS/scroll-padding-block-start -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-padding-block - - scroll-padding-block-start -translation_of: Web/CSS/scroll-padding-block-start ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-block-start</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-block-start: auto; - -/* <length> 値 */ -scroll-padding-block-start: 10px; -scroll-padding-block-start: 1em; -scroll-padding-block-start: 10%; - -/* グローバル値 */ -scroll-padding-block-start: inherit; -scroll-padding-block-start: initial; -scroll-padding-block-start: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-block-start")}}</p> diff --git a/files/ja/web/css/scroll-padding-block-start/index.md b/files/ja/web/css/scroll-padding-block-start/index.md new file mode 100644 index 0000000000..89aa5cd02f --- /dev/null +++ b/files/ja/web/css/scroll-padding-block-start/index.md @@ -0,0 +1,64 @@ +--- +title: scroll-padding-block-start +slug: Web/CSS/scroll-padding-block-start +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-property + - scroll-padding-block + - scroll-padding-block-start +browser-compat: css.properties.scroll-padding-block-start +translation_of: Web/CSS/scroll-padding-block-start +--- +{{CSSRef}} + +`scroll-padding-block-start` プロパティは、スクロールポートの*最適表示領域*のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-block-start: auto; + +/* <length> 値 */ +scroll-padding-block-start: 10px; +scroll-padding-block-start: 1em; +scroll-padding-block-start: 10%; + +/* グローバル値 */ +scroll-padding-block-start: inherit; +scroll-padding-block-start: initial; +scroll-padding-block-start: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-block/index.html b/files/ja/web/css/scroll-padding-block/index.html deleted file mode 100644 index 7a0916cbb3..0000000000 --- a/files/ja/web/css/scroll-padding-block/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: scroll-padding-block -slug: Web/CSS/scroll-padding-block -tags: - - CSS - - CSS Scroll Snap - - Property - - Reference - - Web - - scroll-padding - - scroll-padding-block -translation_of: Web/CSS/scroll-padding-block ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-block</code> プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。</p> - -<p>scroll-padding 系のプロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-block: auto; - -/* <length> 値 */ -scroll-padding-block: 10px; -scroll-padding-block: 1em .5em; -scroll-padding-block: 10%; - -/* グローバル値 */ -scroll-padding-block: inherit; -scroll-padding-block: initial; -scroll-padding-block: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.scroll-padding-block")}}</p> diff --git a/files/ja/web/css/scroll-padding-block/index.md b/files/ja/web/css/scroll-padding-block/index.md new file mode 100644 index 0000000000..9dda14bb19 --- /dev/null +++ b/files/ja/web/css/scroll-padding-block/index.md @@ -0,0 +1,74 @@ +--- +title: scroll-padding-block +slug: Web/CSS/scroll-padding-block +tags: + - CSS + - CSS スクロールスナップ + - Reference + - Web + - recipe:css-shorthand-property + - scroll-padding + - scroll-padding-block +browser-compat: css.properties.scroll-padding-block +translation_of: Web/CSS/scroll-padding-block +--- +{{CSSRef}} + +`scroll-padding-block` は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のブロック軸のスクロールパディングを設定します。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}} + +scroll-padding 系のプロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`scroll-padding-block-end`](/ja/docs/Web/CSS/scroll-padding-block-end) +- [`scroll-padding-block-start`](/ja/docs/Web/CSS/scroll-padding-block-start) + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-block: auto; + +/* <length> 値 */ +scroll-padding-block: 10px; +scroll-padding-block: 1em .5em; +scroll-padding-block: 10%; + +/* グローバル値 */ +scroll-padding-block: inherit; +scroll-padding-block: initial; +scroll-padding-block: revert; +scroll-padding-block: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ユーザーエージェントはゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-bottom/index.html b/files/ja/web/css/scroll-padding-bottom/index.html deleted file mode 100644 index cb4b2198af..0000000000 --- a/files/ja/web/css/scroll-padding-bottom/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: scroll-padding-bottom -slug: Web/CSS/scroll-padding-bottom -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - Web - - scroll-padding - - scroll-padding-bottom -translation_of: Web/CSS/scroll-padding-bottom ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-bottom</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-bottom: auto; - -/* <length> 値 */ -scroll-padding-bottom: 10px; -scroll-padding-bottom: 1em; -scroll-padding-bottom: 10%; - -/* グローバル値 */ -scroll-padding-bottom: inherit; -scroll-padding-bottom: initial; -scroll-padding-bottom: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-bottom")}}</p> diff --git a/files/ja/web/css/scroll-padding-bottom/index.md b/files/ja/web/css/scroll-padding-bottom/index.md new file mode 100644 index 0000000000..5ca49d42b7 --- /dev/null +++ b/files/ja/web/css/scroll-padding-bottom/index.md @@ -0,0 +1,65 @@ +--- +title: scroll-padding-bottom +slug: Web/CSS/scroll-padding-bottom +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-property + - scroll-padding + - scroll-padding-bottom +browser-compat: css.properties.scroll-padding-bottom +translation_of: Web/CSS/scroll-padding-bottom +--- +{{CSSRef}} + +`scroll-padding-bottom` プロパティは、スクロールポートの*最適表示領域*の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-bottom: auto; + +/* <length> 値 */ +scroll-padding-bottom: 10px; +scroll-padding-bottom: 1em; +scroll-padding-bottom: 10%; + +/* グローバル値 */ +scroll-padding-bottom: inherit; +scroll-padding-bottom: initial; +scroll-padding-bottom: revert; +scroll-padding-bottom: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-inline-end/index.html b/files/ja/web/css/scroll-padding-inline-end/index.html deleted file mode 100644 index 5e977ca930..0000000000 --- a/files/ja/web/css/scroll-padding-inline-end/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: scroll-padding-inline-end -slug: Web/CSS/scroll-padding-inline-end -tags: - - CSS - - CSS Property - - CSS プロパティ - - Web - - scroll-padding-inline - - scroll-padding-inline-end -translation_of: Web/CSS/scroll-padding-inline-end ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-inline-end</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-inline-end: auto; - -/* <length> 値 */ -scroll-padding-inline-end: 10px; -scroll-padding-inline-end: 1em; -scroll-padding-inline-end: 10%; - -/* グローバル値 */ -scroll-padding-inline-end: inherit; -scroll-padding-inline-end: initial; -scroll-padding-inline-end: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-inline-end")}}</p> diff --git a/files/ja/web/css/scroll-padding-inline-end/index.md b/files/ja/web/css/scroll-padding-inline-end/index.md new file mode 100644 index 0000000000..4bff47c185 --- /dev/null +++ b/files/ja/web/css/scroll-padding-inline-end/index.md @@ -0,0 +1,64 @@ +--- +title: scroll-padding-inline-end +slug: Web/CSS/scroll-padding-inline-end +tags: + - CSS + - CSS プロパティ + - Web + - recipe:css-property + - scroll-padding-inline + - scroll-padding-inline-end +browser-compat: css.properties.scroll-padding-inline-end +translation_of: Web/CSS/scroll-padding-inline-end +--- +{{CSSRef}} + +`scroll-padding-inline-end` プロパティは、スクロールポートの*最適表示領域*のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-inline-end: auto; + +/* <length> 値 */ +scroll-padding-inline-end: 10px; +scroll-padding-inline-end: 1em; +scroll-padding-inline-end: 10%; + +/* グローバル値 */ +scroll-padding-inline-end: inherit; +scroll-padding-inline-end: initial; +scroll-padding-inline-end: revert; +scroll-padding-inline-end: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-inline-start/index.html b/files/ja/web/css/scroll-padding-inline-start/index.html deleted file mode 100644 index 72596cabe7..0000000000 --- a/files/ja/web/css/scroll-padding-inline-start/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: scroll-padding-inline-start -slug: Web/CSS/scroll-padding-inline-start -tags: - - CSS - - CSS Property - - CSS プロパティ - - Web - - scroll-padding-inline - - scroll-padding-inline-start -translation_of: Web/CSS/scroll-padding-inline-start ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-inline-start</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-inline-start: auto; - -/* <length> 値 */ -scroll-padding-inline-start: 10px; -scroll-padding-inline-start: 1em; -scroll-padding-inline-start: 10%; - -/* グローバル値 */ -scroll-padding-inline-start: inherit; -scroll-padding-inline-start: initial; -scroll-padding-inline-start: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-inline-start")}}</p> diff --git a/files/ja/web/css/scroll-padding-inline-start/index.md b/files/ja/web/css/scroll-padding-inline-start/index.md new file mode 100644 index 0000000000..86bc29a96e --- /dev/null +++ b/files/ja/web/css/scroll-padding-inline-start/index.md @@ -0,0 +1,64 @@ +--- +title: scroll-padding-inline-start +slug: Web/CSS/scroll-padding-inline-start +tags: + - CSS + - CSS プロパティ + - Web + - recipe:css-property + - scroll-padding-inline + - scroll-padding-inline-start +browser-compat: css.properties.scroll-padding-inline-start +translation_of: Web/CSS/scroll-padding-inline-start +--- +{{CSSRef}} + +`scroll-padding-inline-start` プロパティは、スクロールポートの*最適表示領域*のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-inline-start: auto; + +/* <length> 値 */ +scroll-padding-inline-start: 10px; +scroll-padding-inline-start: 1em; +scroll-padding-inline-start: 10%; + +/* グローバル値 */ +scroll-padding-inline-start: inherit; +scroll-padding-inline-start: initial; +scroll-padding-inline-start: revert; +scroll-padding-inline-start: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-inline/index.html b/files/ja/web/css/scroll-padding-inline/index.html deleted file mode 100644 index 21ed10d7e4..0000000000 --- a/files/ja/web/css/scroll-padding-inline/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: scroll-padding-inline -slug: Web/CSS/scroll-padding-inline -tags: - - CSS - - CSS Property - - Reference - - Web - - scroll-padding-inline - - scroll-padding-inline-end - - scroll-padding-inline-start -translation_of: Web/CSS/scroll-padding-inline ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-inline</code> プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>scroll-padding 系のプロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-inline: auto; - -/* <length> 値 */ -scroll-padding-inline: 10px; -scroll-padding-inline: 1em .5em; -scroll-padding-inline: 10%; - -/* グローバル値 */ -scroll-padding-inline: inherit; -scroll-padding-inline: initial; -scroll-padding-inline: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-inline")}}</p> diff --git a/files/ja/web/css/scroll-padding-inline/index.md b/files/ja/web/css/scroll-padding-inline/index.md new file mode 100644 index 0000000000..73f75dbaba --- /dev/null +++ b/files/ja/web/css/scroll-padding-inline/index.md @@ -0,0 +1,75 @@ +--- +title: scroll-padding-inline +slug: Web/CSS/scroll-padding-inline +tags: + - CSS + - CSS プロパティ + - Reference + - Web + - recipe:css-shorthand-property + - scroll-padding-inline + - scroll-padding-inline-end + - scroll-padding-inline-start +browser-compat: css.properties.scroll-padding-inline +translation_of: Web/CSS/scroll-padding-inline +--- +{{CSSRef}} + +`scroll-padding-inline` プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}} + +scroll-padding 系のプロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`scroll-padding-inline-end`](/ja/docs/Web/CSS/scroll-padding-inline-end) +- [`scroll-padding-inline-start`](/ja/docs/Web/CSS/scroll-padding-inline-start) + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-inline: auto; + +/* <length> 値 */ +scroll-padding-inline: 10px; +scroll-padding-inline: 1em .5em; +scroll-padding-inline: 10%; + +/* グローバル値 */ +scroll-padding-inline: inherit; +scroll-padding-inline: initial; +scroll-padding-inline: revert; +scroll-padding-inline: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-left/index.html b/files/ja/web/css/scroll-padding-left/index.html deleted file mode 100644 index 8a70079ed2..0000000000 --- a/files/ja/web/css/scroll-padding-left/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: scroll-padding-left -slug: Web/CSS/scroll-padding-left -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference - - scroll-padding - - scroll-padding-left -translation_of: Web/CSS/scroll-padding-left ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-left</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-left: auto; - -/* <length> 値 */ -scroll-padding-left: 10px; -scroll-padding-left: 1em; -scroll-padding-left: 10%; - -/* グローバル値 */ -scroll-padding-left: inherit; -scroll-padding-left: initial; -scroll-padding-left: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-left")}}</p> diff --git a/files/ja/web/css/scroll-padding-left/index.md b/files/ja/web/css/scroll-padding-left/index.md new file mode 100644 index 0000000000..64a4c8d223 --- /dev/null +++ b/files/ja/web/css/scroll-padding-left/index.md @@ -0,0 +1,64 @@ +--- +title: scroll-padding-left +slug: Web/CSS/scroll-padding-left +tags: + - CSS + - CSS プロパティ + - Reference + - recipe:css-property + - scroll-padding + - scroll-padding-left +browser-compat: css.properties.scroll-padding-left +translation_of: Web/CSS/scroll-padding-left +--- +{{CSSRef}} + +`scroll-padding-left` プロパティは、スクロールポートの*最適表示領域*の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-left: auto; + +/* <length> 値 */ +scroll-padding-left: 10px; +scroll-padding-left: 1em; +scroll-padding-left: 10%; + +/* グローバル値 */ +scroll-padding-left: inherit; +scroll-padding-left: initial; +scroll-padding-left: revert; +scroll-padding-left: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-right/index.html b/files/ja/web/css/scroll-padding-right/index.html deleted file mode 100644 index c9d2181584..0000000000 --- a/files/ja/web/css/scroll-padding-right/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: scroll-padding-right -slug: Web/CSS/scroll-padding-right -tags: - - CSS - - Reference - - Web - - scroll-padding - - scroll-padding-right -translation_of: Web/CSS/scroll-padding-right ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-right</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-right: auto; - -/* <length> 値 */ -scroll-padding-right: 10px; -scroll-padding-right: 1em; -scroll-padding-right: 10%; - -/* グローバル値 */ -scroll-padding-right: inherit; -scroll-padding-right: initial; -scroll-padding-right: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-right")}}</p> diff --git a/files/ja/web/css/scroll-padding-right/index.md b/files/ja/web/css/scroll-padding-right/index.md new file mode 100644 index 0000000000..f3e310121a --- /dev/null +++ b/files/ja/web/css/scroll-padding-right/index.md @@ -0,0 +1,64 @@ +--- +title: scroll-padding-right +slug: Web/CSS/scroll-padding-right +tags: + - CSS + - Reference + - Web + - recipe:css-property + - scroll-padding + - scroll-padding-right +browser-compat: css.properties.scroll-padding-right +translation_of: Web/CSS/scroll-padding-right +--- +{{CSSRef}} + +`scroll-padding-right` プロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-right: auto; + +/* <length> 値 */ +scroll-padding-right: 10px; +scroll-padding-right: 1em; +scroll-padding-right: 10%; + +/* グローバル値 */ +scroll-padding-right: inherit; +scroll-padding-right: initial; +scroll-padding-right: revert; +scroll-padding-right: unset; +``` + +### 値 + +- `<length-percentage>` + - : スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding-top/index.html b/files/ja/web/css/scroll-padding-top/index.html deleted file mode 100644 index f352156457..0000000000 --- a/files/ja/web/css/scroll-padding-top/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: scroll-padding-top -slug: Web/CSS/scroll-padding-top -tags: - - CSS - - Reference - - Web - - scroll-padding - - scroll-padding-top -translation_of: Web/CSS/scroll-padding-top ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-padding-top</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-padding-top: auto; - -/* <length> 値 */ -scroll-padding-top: 10px; -scroll-padding-top: 1em; -scroll-padding-top: 10%; - -/* グローバル値 */ -scroll-padding-top: inherit; -scroll-padding-top: initial; -scroll-padding-top: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><length-percentage></var></code></dt> - <dd>スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd> - <dt><code>auto</code></dt> - <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding-top")}}</p> diff --git a/files/ja/web/css/scroll-padding-top/index.md b/files/ja/web/css/scroll-padding-top/index.md new file mode 100644 index 0000000000..4ab41db589 --- /dev/null +++ b/files/ja/web/css/scroll-padding-top/index.md @@ -0,0 +1,64 @@ +--- +title: scroll-padding-top +slug: Web/CSS/scroll-padding-top +tags: + - CSS + - Reference + - Web + - recipe:css-property + - scroll-padding + - scroll-padding-top +browser-compat: css.properties.scroll-padding-top +translation_of: Web/CSS/scroll-padding-top +--- +{{CSSRef}} + +`scroll-padding-top` プロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。 + +{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding-top: auto; + +/* <length> 値 */ +scroll-padding-top: 10px; +scroll-padding-top: 1em; +scroll-padding-top: 10%; + +/* グローバル値 */ +scroll-padding-top: inherit; +scroll-padding-top: initial; +scroll-padding-top: revert; +scroll-padding-top: unset; +``` + +### 値 + +- `{{cssxref("<length-percentage>")}}` + - : スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。 +- `auto` + - : オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-padding/index.html b/files/ja/web/css/scroll-padding/index.html deleted file mode 100644 index 5de5104bbb..0000000000 --- a/files/ja/web/css/scroll-padding/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: scroll-padding -slug: Web/CSS/scroll-padding -tags: - - CSS - - CSS Property - - 'recipe:css-shorthand-property' - - scroll-snap -translation_of: Web/CSS/scroll-padding ---- -<div>{{CSSRef}}</div> - -<p><strong><code>scroll-padding</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。</p> - -<div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p><code>scroll-padding-*</code> プロパティは、スクロールポートの<dfn>最適な表示領域</dfn>のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。</p> - -<h2 id="Constituent_properties" name="Constituent_properties">構成するプロパティ</h2> - -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> - -<ul> - <li>{{cssxref("scroll-padding-bottom")}}</li> - <li>{{cssxref("scroll-padding-left")}}</li> - <li>{{cssxref("scroll-padding-right")}}</li> - <li>{{cssxref("scroll-padding-top")}}</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* キーワード値 */ -scroll-padding: auto; - -/* <length> 値 */ -scroll-padding: 10px; -scroll-padding: 1em .5em 1em 1em; -scroll-padding: 10%; - -/* グローバル値 */ -scroll-padding: inherit; -scroll-padding: initial; -scroll-padding: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length-percentage>")}}</dt> - <dd>スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("<length>")}} または {{cssxref("<percentage>")}} として指定します。</dd> - <dt><code>auto</code></dt> - <dd>オフセットがユーザーエージェントによって決定されます。これは一般的には <code>0px</code> になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-padding")}}</p> diff --git a/files/ja/web/css/scroll-padding/index.md b/files/ja/web/css/scroll-padding/index.md new file mode 100644 index 0000000000..f329213d95 --- /dev/null +++ b/files/ja/web/css/scroll-padding/index.md @@ -0,0 +1,73 @@ +--- +title: scroll-padding +slug: Web/CSS/scroll-padding +tags: + - CSS + - CSS プロパティ + - recipe:css-shorthand-property + - scroll-snap +browser-compat: css.properties.scroll-padding +translation_of: Web/CSS/scroll-padding +--- +{{CSSRef}} + +**`scroll-padding`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。 + +{{EmbedInteractiveExample("pages/css/scroll-padding.html")}} + +`scroll-padding-*` プロパティは、スクロールポートの*最適な表示領域*のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- {{CSSXref("scroll-padding-bottom")}} +- {{CSSXref("scroll-padding-left")}} +- {{CSSXref("scroll-padding-right")}} +- {{CSSXref("scroll-padding-top")}} + +## 構文 + +```css +/* キーワード値 */ +scroll-padding: auto; + +/* <length> 値 */ +scroll-padding: 10px; +scroll-padding: 1em .5em 1em 1em; +scroll-padding: 10%; + +/* グローバル値 */ +scroll-padding: inherit; +scroll-padding: initial; +scroll-padding: revert; +scroll-padding: unset; +``` + +### 値 + +- {{cssxref("<length-percentage>")}} + - : スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("<length>")}} または {{cssxref("<percentage>")}} として指定します。 +- `auto` + - : オフセットがユーザーエージェントによって決定されます。これは一般的には `0px` になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-align/index.html b/files/ja/web/css/scroll-snap-align/index.html deleted file mode 100644 index 09909e000c..0000000000 --- a/files/ja/web/css/scroll-snap-align/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: scroll-snap-align -slug: Web/CSS/scroll-snap-align -tags: - - Advanced - - CSS - - Example - - NeedsLiveSample - - Reference - - 上級者 -translation_of: Web/CSS/scroll-snap-align ---- -<div>{{CSSRef}}</div> - -<p><code>scroll-snap-align</code> プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -scroll-snap-align: none; -scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */ -scroll-snap-align: center; - -/* グローバル値 */ -scroll-snap-align: inherit; -scroll-snap-align: initial; -scroll-snap-align: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>このボックスでは、その軸のスナップ位置を定義しません。</dd> - <dt><code>start</code></dt> - <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。</dd> - <dt><code>end</code></dt> - <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。</dd> - <dt><code>center</code></dt> - <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<div class="blockIndicator warning"> -<p>Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">バグ #191865</a> を参照してください。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.scroll-snap-align")}}</p> diff --git a/files/ja/web/css/scroll-snap-align/index.md b/files/ja/web/css/scroll-snap-align/index.md new file mode 100644 index 0000000000..1b7ee93990 --- /dev/null +++ b/files/ja/web/css/scroll-snap-align/index.md @@ -0,0 +1,65 @@ +--- +title: scroll-snap-align +slug: Web/CSS/scroll-snap-align +tags: + - 上級者 + - CSS + - Example + - NeedsLiveSample + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-align +translation_of: Web/CSS/scroll-snap-align +--- +{{CSSRef}} + +`scroll-snap-align` プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。 + +## 構文 + +```css +/* キーワード値 */ +scroll-snap-align: none; +scroll-snap-align: start end; /* 2 つの値を指定すると、1 番目がブロック、2 番目がインラインとなる */ +scroll-snap-align: center; + +/* グローバル値 */ +scroll-snap-align: inherit; +scroll-snap-align: initial; +scroll-snap-align: revert; +scroll-snap-align: unset; +``` + +### 値 + +- `none` + - : このボックスでは、その軸のスナップ位置を定義しません。 +- `start` + - : このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。 +- `end` + - : このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。 +- `center` + - : このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。 + +Safari は現在のところ、2 つの値の構文を誤った順序で実装しており、最初の値がインラインで次の値がブロックになっています。[bug #191865](https://bugs.webkit.org/show_bug.cgi?id=191865) を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-coordinate/index.html b/files/ja/web/css/scroll-snap-coordinate/index.html deleted file mode 100644 index 1a9e185a3b..0000000000 --- a/files/ja/web/css/scroll-snap-coordinate/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: scroll-snap-coordinate -slug: Web/CSS/scroll-snap-coordinate -tags: - - CSS - - CSS スクロールスナップ - - CSS プロパティ - - Deprecated - - Reference - - scroll-snap-coordinate -translation_of: Web/CSS/scroll-snap-coordinate ---- -<div>{{CSSRef}}{{deprecated_header}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -scroll-snap-coordinate: none; - -/* <position> 値 */ -scroll-snap-coordinate: 50px 50px; /* 単一の座標 */ -scroll-snap-coordinate: 100px 100px, 100px bottom; /* 複数の座標 */ - -/* グローバル値 */ -scroll-snap-coordinate: inherit; -scroll-snap-coordinate: initial; -scroll-snap-coordinate: unset;</pre> - -<p>要素が変形されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。</p> - -<div>{{cssinfo}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>要素がスナップ点を提供しないことを示します。</dd> - <dt>{{cssxref("<position>")}}</dt> - <dd>スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div> - <p>At coordinate (0, 0)</p> - <div class="scrollContainer coordinate0"> - <div>1</div> - <div>2</div> - <div>3</div> - </div> - </div> - - <div> - <p>At coordinate (25, 0)</p> - <div class="scrollContainer coordinate25"> - <div>1</div> - <div>2</div> - <div>3</div> - </div> - </div> - - <div> - <p>At coordinate (50, 0)</p> - <div class="scrollContainer coordinate50"> - <div>1</div> - <div>2</div> - <div>3</div> - </div> - </div> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#container { - display: flex; -} - -#container > div:nth-child(-n+2) { - margin-right: 20px; -} - -.scrollContainer { - width: 100px; - overflow: auto; - white-space: nowrap; - scroll-snap-type: mandatory; - font-size: 0; -} - -.scrollContainer > div { - width: 100px; - height: 100px; - display: inline-block; - line-height: 100px; - text-align: center; - font-size: 50px; -} - -.coordinate0 > div { - scroll-snap-coordinate: 0 0; -} - -.coordinate25 > div { - scroll-snap-coordinate: 25px 0; -} - -.coordinate50 > div { - scroll-snap-coordinate: 50px 0; -} - -.scrollContainer > div:nth-child(even) { - background-color: #87ea87; -} - -.scrollContainer > div:nth-child(odd) { - background-color: #87ccea; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Example", "100%", "170")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p> diff --git a/files/ja/web/css/scroll-snap-coordinate/index.md b/files/ja/web/css/scroll-snap-coordinate/index.md new file mode 100644 index 0000000000..6e7f09e553 --- /dev/null +++ b/files/ja/web/css/scroll-snap-coordinate/index.md @@ -0,0 +1,152 @@ +--- +title: scroll-snap-coordinate +slug: Web/CSS/scroll-snap-coordinate +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - 非推奨 + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-coordinate +translation_of: Web/CSS/scroll-snap-coordinate +--- +{{CSSRef}}{{deprecated_header}} + +**`scroll-snap-coordinate`** は [CSS](/ja/docs/Web/CSS)のプロパティで、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。 + +```css +/* キーワード値 */ +scroll-snap-coordinate: none; + +/* <position> 値 */ +scroll-snap-coordinate: 50px 50px; /* 単一の座標 */ +scroll-snap-coordinate: 100px 100px, 100px bottom; /* 複数の座標 */ + +/* グローバル値 */ +scroll-snap-coordinate: inherit; +scroll-snap-coordinate: initial; +scroll-snap-coordinate: unset; +``` + +要素が変換されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。 + +## 構文 + +### 値 + +- `none` + - : 要素がスナップ点を提供しないことを示します。 +- {{cssxref("<position>")}} + - : スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_scroll_snap_coordinates">スクロールスナップ座標の設定</h3> + +#### HTML + +```html +<div id="container"> + <div> + <p>At coordinate (0, 0)</p> + <div class="scrollContainer coordinate0"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>At coordinate (25, 0)</p> + <div class="scrollContainer coordinate25"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>At coordinate (50, 0)</p> + <div class="scrollContainer coordinate50"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> +</div> +``` + +#### CSS + +```css +#container { + display: flex; +} + +#container > div:nth-child(-n+2) { + margin-right: 20px; +} + +.scrollContainer { + width: 100px; + overflow: auto; + white-space: nowrap; + scroll-snap-type: mandatory; + font-size: 0; +} + +.scrollContainer > div { + width: 100px; + height: 100px; + display: inline-block; + line-height: 100px; + text-align: center; + font-size: 50px; +} + +.coordinate0 > div { + scroll-snap-coordinate: 0 0; +} + +.coordinate25 > div { + scroll-snap-coordinate: 25px 0; +} + +.coordinate50 > div { + scroll-snap-coordinate: 50px 0; +} + +.scrollContainer > div:nth-child(even) { + background-color: #87ea87; +} + +.scrollContainer > div:nth-child(odd) { + background-color: #87ccea; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_scroll_snap_coordinates", "100%", "170")}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-destination/index.html b/files/ja/web/css/scroll-snap-destination/index.html deleted file mode 100644 index 98b8ccb23f..0000000000 --- a/files/ja/web/css/scroll-snap-destination/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: scroll-snap-destination -slug: Web/CSS/scroll-snap-destination -tags: - - CSS - - CSS スクロールスナップ - - CSS プロパティ - - Deprecated - - Reference -translation_of: Web/CSS/scroll-snap-destination ---- -<div>{{CSSRef}}{{deprecated_header}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-destination</code></strong> プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。</p> - -<pre class="brush:css no-line-numbers">/* <position> 値 */ -scroll-snap-destination: 400px 600px; - -/* グローバル値 */ -scroll-snap-destination: inherit; -scroll-snap-destination: initial; -scroll-snap-destination: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><position></code></dt> - <dd>スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="container"> - <div> - <p>At coordinate (0, 0)</p> - <div class="scrollContainer destination0"> - <div>1</div> - <div>2</div> - <div>3</div> - </div> - </div> - - <div> - <p>At coordinate (25, 0)</p> - <div class="scrollContainer destination25"> - <div>1</div> - <div>2</div> - <div>3</div> - </div> - </div> - - <div> - <p>At coordinate (50, 0)</p> - <div class="scrollContainer destination50"> - <div>1</div> - <div>2</div> - <div>3</div> - </div> - </div> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#container { - display: flex; -} - -#container > div:nth-child(-n+2) { - margin-right: 20px; -} - -.scrollContainer { - width: 100px; - overflow: auto; - white-space: nowrap; - scroll-snap-points-x: repeat(100%); - scroll-snap-type: mandatory; - scroll-snap-destination: 20px 0; - font-size: 0; -} - -.destination0 { - scroll-snap-destination: 0 0; -} - -.destination25 { - scroll-snap-destination: 25px 0; -} - -.destination50 { - scroll-snap-destination: 50px 0; -} - -.scrollContainer > div { - width: 100px; - height: 100px; - display: inline-block; - line-height: 100px; - text-align: center; - font-size: 50px; -} - -.scrollContainer > div:nth-child(even) { - background-color: #87EA87; -} - -.scrollContainer > div:nth-child(odd) { - background-color: #87CCEA; -}</pre> - -<div>{{EmbedLiveSample("Example", "100%", "170")}}</div> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div>{{Compat("css.properties.scroll-snap-destination")}}</div> diff --git a/files/ja/web/css/scroll-snap-destination/index.md b/files/ja/web/css/scroll-snap-destination/index.md new file mode 100644 index 0000000000..6bb7353adf --- /dev/null +++ b/files/ja/web/css/scroll-snap-destination/index.md @@ -0,0 +1,146 @@ +--- +title: scroll-snap-destination +slug: Web/CSS/scroll-snap-destination +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - 非推奨 + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-destination +translation_of: Web/CSS/scroll-snap-destination +--- +{{CSSRef}}{{deprecated_header}} + +**`scroll-snap-destination`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}内の要素のスナップ点が配置される X および Y 座標の位置を定義します。 + +```css +/* <position> 値 */ +scroll-snap-destination: 400px 600px; + +/* グローバル値 */ +scroll-snap-destination: inherit; +scroll-snap-destination: initial; +scroll-snap-destination: unset; +``` + +## 構文 + +### 値 + +- `<position>` + - : スクロールコンテナーの視覚ビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_scroll_snap_destination">スクロールスナップの宛先を設定</h3> + +#### HTML + +```html +<div id="container"> + <div> + <p>At coordinate (0, 0)</p> + <div class="scrollContainer destination0"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>At coordinate (25, 0)</p> + <div class="scrollContainer destination25"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> + + <div> + <p>At coordinate (50, 0)</p> + <div class="scrollContainer destination50"> + <div>1</div> + <div>2</div> + <div>3</div> + </div> + </div> +</div> +``` + +#### CSS + +```css +#container { + display: flex; +} + +#container > div:nth-child(-n+2) { + margin-right: 20px; +} + +.scrollContainer { + width: 100px; + overflow: auto; + white-space: nowrap; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + scroll-snap-destination: 20px 0; + font-size: 0; +} + +.destination0 { + scroll-snap-destination: 0 0; +} + +.destination25 { + scroll-snap-destination: 25px 0; +} + +.destination50 { + scroll-snap-destination: 50px 0; +} + +.scrollContainer > div { + width: 100px; + height: 100px; + display: inline-block; + line-height: 100px; + text-align: center; + font-size: 50px; +} + +.scrollContainer > div:nth-child(even) { + background-color: #87EA87; +} + +.scrollContainer > div:nth-child(odd) { + background-color: #87CCEA; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_scroll_snap_destination", "100%", "170")}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-points-x/index.md b/files/ja/web/css/scroll-snap-points-x/index.md new file mode 100644 index 0000000000..debd568733 --- /dev/null +++ b/files/ja/web/css/scroll-snap-points-x/index.md @@ -0,0 +1,107 @@ +--- +title: scroll-snap-points-x +slug: Web/CSS/scroll-snap-points-x +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - 非推奨 + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-points-x +translation_of: Web/CSS/scroll-snap-points-x +--- +{{CSSRef}}{{deprecated_header}} + +**`scroll-snap-points-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の水平位置を定義します。 + +```css +/* キーワード値 */ +scroll-snap-points-x: none; + +/* 反復スナップ点 */ +scroll-snap-points-x: repeat(400px); + +/* グローバル値 */ +scroll-snap-points-x: inherit; +scroll-snap-points-x: initial; +scroll-snap-points-x: unset; +``` + +## 構文 + +### 値 + +- `none` + - : スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。 +- `repeat(<length-percentage>)` + - : スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_horizontal_scroll_snap_points">水平スクロールスナップ点の設定</h3> + +#### HTML + +```html +<div id="container"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> +``` + +#### CSS + +```css +#container { + width: 200px; + overflow: auto; + white-space: nowrap; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + font-size: 0; +} + +#container > div { + width: 200px; + height: 200px; + display: inline-block; + line-height: 200px; + text-align: center; + font-size: 100px; +} + +#container > div:nth-child(even) { + background-color: #87ea87; +} + +#container > div:nth-child(odd) { + background-color: #87ccea; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_horizontal_scroll_snap_points", 220, 220)}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-points-y/index.md b/files/ja/web/css/scroll-snap-points-y/index.md new file mode 100644 index 0000000000..6c11289051 --- /dev/null +++ b/files/ja/web/css/scroll-snap-points-y/index.md @@ -0,0 +1,107 @@ +--- +title: scroll-snap-points-y +slug: Web/CSS/scroll-snap-points-y +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - 非推奨 + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-points-y +translation_of: Web/CSS/scroll-snap-points-y +--- +{{CSSRef}}{{deprecated_header}} + +**`scroll-snap-points-y`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用先のスクロールコンテナーの内容物におけるスナップ点の垂直位置を定義します。 + +```css +/* キーワード値 */ +scroll-snap-points-y: none; + +/* 反復スナップ点 */ +scroll-snap-points-y: repeat(400px); + +/* グローバル値 */ +scroll-snap-points-y: inherit; +scroll-snap-points-y: initial; +scroll-snap-points-y: unset; +``` + +## 構文 + +### 値 + +- `none` + - : スクロールコンテナーはスナップ点を定義しません。スクロールコンテナー内の要素は、スクロールコンテナーに代わってスナップ点を定義することができます。 +- `repeat(<length-percentage>)` + - : スナップ点を定義するための間隔を、コンテナーの関連する先頭の橋から定義します。正の長さのみが許可されます。パーセント値はコンテナーの幅を示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_vertical_scroll_snap_points">垂直スクロールスナップ点の設定</h3> + +#### HTML + +```html +<div id="container"> + <div>1</div> + <div>2</div> + <div>3</div> +</div> +``` + +#### CSS + +```css +#container { + width: 200px; + overflow: auto; + white-space: nowrap; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + font-size: 0; +} + +#container > div { + width: 200px; + height: 200px; + display: inline-block; + line-height: 200px; + text-align: center; + font-size: 100px; +} + +#container > div:nth-child(even) { + background-color: #87ea87; +} + +#container > div:nth-child(odd) { + background-color: #87ccea; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_vertical_scroll_snap_points", 220, 220)}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-stop/index.html b/files/ja/web/css/scroll-snap-stop/index.html deleted file mode 100644 index b9f4d8b80b..0000000000 --- a/files/ja/web/css/scroll-snap-stop/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: scroll-snap-stop -slug: Web/CSS/scroll-snap-stop -tags: - - CSS - - CSS スクロールスナップ - - Reference - - scroll-snap-stop - - ウェブ -translation_of: Web/CSS/scroll-snap-stop ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-stop</code></strong> プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -scroll-snap-stop: normal; -scroll-snap-stop: always; - -/* グローバル値 */ -scroll-snap-type: inherit; -scroll-snap-type: initial; -scroll-snap-type: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。</dd> - <dt><code>always</code></dt> - <dd>スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<p>この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。</p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* setup */ -:root, body { - height: 100%; - display: flex; - align-items: center; - justify-content: space-between; - flex-flow: column nowrap; - font-family: monospace; -} -.container { - display: flex; - overflow: auto; - outline: 1px dashed lightgray; - flex: none; -} - -.container.x { - width: 100%; - height: 128px; - flex-flow: row nowrap; -} - -.container.y { - width: 256px; - height: 256px; - flex-flow: column nowrap; -} -/* definite scroll snap */ -.mandatory-scroll-snapping { - scroll-snap-stop: always; -} -.proximity-scroll-snapping { - scroll-snap-stop: normal; -} -/* scroll-snap */ -.x.mandatory-scroll-snapping { - scroll-snap-type: x mandatory; -} - -.y.mandatory-scroll-snapping { - scroll-snap-type: y mandatory; -} - -.x.proximity-scroll-snapping { - scroll-snap-type: x proximity; -} - -.y.proximity-scroll-snapping { - scroll-snap-type: y proximity; -} - -.container > div { - text-align: center; - scroll-snap-align: center; - flex: none; -} - -.x.container > div { - line-height: 128px; - font-size: 64px; - width: 100%; - height: 128px; -} - -.y.container > div { - line-height: 256px; - font-size: 128px; - width: 256px; - height: 256px; -} -/* appearance fixes */ -.y.container > div:first-child { - line-height: 1.3; - font-size: 64px; -} -/* coloration */ -.container > div:nth-child(even) { - background-color: #87EA87; -} - -.container > div:nth-child(odd) { - background-color: #87CCEA; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div class="container x mandatory-scroll-snapping" dir="ltr"> - <div>X Mand. LTR </div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container x proximity-scroll-snapping" dir="ltr"> - <div>X Proximity LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y mandatory-scroll-snapping" dir="ltr"> - <div>Y Mand. LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y proximity-scroll-snapping" dir="ltr"> - <div>Y Prox. LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container x mandatory-scroll-snapping" dir="rtl"> - <div>X Mandatory RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container x proximity-scroll-snapping" dir="rtl"> - <div>X Proximity RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y mandatory-scroll-snapping" dir="rtl"> - <div>Y Mand. RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y proximity-scroll-snapping" dir="rtl"> - <div>Y Prox. RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> -</pre> - -<p>{{EmbedLiveSample("Example", "100%", "1630")}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.scroll-snap-stop")}}</p> diff --git a/files/ja/web/css/scroll-snap-stop/index.md b/files/ja/web/css/scroll-snap-stop/index.md new file mode 100644 index 0000000000..bb974027f9 --- /dev/null +++ b/files/ja/web/css/scroll-snap-stop/index.md @@ -0,0 +1,223 @@ +--- +title: scroll-snap-stop +slug: Web/CSS/scroll-snap-stop +tags: + - CSS + - CSS スクロールスナップ + - Reference + - Web + - recipe:css-property + - scroll-snap-stop +browser-compat: css.properties.scroll-snap-stop +translation_of: Web/CSS/scroll-snap-stop +--- +{{CSSRef}} + +**`scroll-snap-stop`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。 + +```css +/* キーワード値 */ +scroll-snap-stop: normal; +scroll-snap-stop: always; + +/* グローバル値 */ +scroll-snap-type: inherit; +scroll-snap-type: initial; +scroll-snap-type: unset; +``` + +## 構文 + +### 値 + +- `normal` + - : スクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことを許可します。 +- `always` + - : スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことを許可しません。最初の要素のスナップ位置にスナップします。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Snapping_in_different_axes">様々な軸でのスナップ</h3> + +この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。 + +#### CSS + +```css +/* setup */ +:root, body { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + flex-flow: column nowrap; + font-family: monospace; +} +.container { + display: flex; + overflow: auto; + outline: 1px dashed lightgray; + flex: none; +} + +.container.x { + width: 100%; + height: 128px; + flex-flow: row nowrap; +} + +.container.y { + width: 256px; + height: 256px; + flex-flow: column nowrap; +} +/* definite scroll snap */ +.mandatory-scroll-snapping > div { + scroll-snap-stop: always; +} +.proximity-scroll-snapping > div { + scroll-snap-stop: normal; +} +/* scroll-snap */ +.x.mandatory-scroll-snapping { + scroll-snap-type: x mandatory; +} + +.y.mandatory-scroll-snapping { + scroll-snap-type: y mandatory; +} + +.x.proximity-scroll-snapping { + scroll-snap-type: x proximity; +} + +.y.proximity-scroll-snapping { + scroll-snap-type: y proximity; +} + +.container > div { + text-align: center; + scroll-snap-align: center; + flex: none; +} + +.x.container > div { + line-height: 128px; + font-size: 64px; + width: 100%; + height: 128px; +} + +.y.container > div { + line-height: 256px; + font-size: 128px; + width: 256px; + height: 256px; +} +/* appearance fixes */ +.y.container > div:first-child { + line-height: 1.3; + font-size: 64px; +} +/* coloration */ +.container > div:nth-child(even) { + background-color: #87EA87; +} + +.container > div:nth-child(odd) { + background-color: #87CCEA; +} +``` + +#### HTML + +```html +<div class="container x mandatory-scroll-snapping" dir="ltr"> + <div>X Mand. LTR </div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x proximity-scroll-snapping" dir="ltr"> + <div>X Proximity LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y mandatory-scroll-snapping" dir="ltr"> + <div>Y Mand. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y proximity-scroll-snapping" dir="ltr"> + <div>Y Prox. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x mandatory-scroll-snapping" dir="rtl"> + <div>X Mandatory RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x proximity-scroll-snapping" dir="rtl"> + <div>X Proximity RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y mandatory-scroll-snapping" dir="rtl"> + <div>Y Mand. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y proximity-scroll-snapping" dir="rtl"> + <div>Y Prox. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> +``` + +#### 結果 + +{{EmbedLiveSample("Snapping_in_different_axes", "100%", "1630")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/scroll-snap-type/index.html b/files/ja/web/css/scroll-snap-type/index.html deleted file mode 100644 index b80fe7bda1..0000000000 --- a/files/ja/web/css/scroll-snap-type/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: scroll-snap-type -slug: Web/CSS/scroll-snap-type -tags: - - CSS - - CSS スクロールスナップ - - CSS プロパティ - - Reference -translation_of: Web/CSS/scroll-snap-type ---- -<div>{{CSSRef}}</div> - -<p><strong><code>scroll-snap-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。</p> - -<p>スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、代わりにユーザーエージェントに委ねられます。</p> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -scroll-snap-type: none; -scroll-snap-type: x; -scroll-snap-type: y; -scroll-snap-type: block; -scroll-snap-type: inline; -scroll-snap-type: both; - -/* 任意の mandatory | proximity*/ -scroll-snap-type: x mandatory; -scroll-snap-type: y proximity; -scroll-snap-type: both mandatory; - -/* など */ - -/* グローバル値 */ -scroll-snap-type: inherit; -scroll-snap-type: initial; -scroll-snap-type: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>このスクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。</dd> - <dt><code>x</code></dt> - <dd>スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。</dd> - <dt><code>y</code></dt> - <dd>スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。</dd> - <dt><code>block</code></dt> - <dd>スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。</dd> - <dt><code>inline</code></dt> - <dd>スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。</dd> - <dt><code>both</code></dt> - <dd>スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。</dd> - <dt><code>mandatory</code></dt> - <dd>このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。</dd> - <dt><code>proximity</code></dt> - <dd>このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html"><div class="holster"> -<div class="container x mandatory-scroll-snapping" dir="ltr"> - <div>X Mand. LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container x proximity-scroll-snapping" dir="ltr"> - <div>X Prox. LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y mandatory-scroll-snapping" dir="ltr"> - <div>Y Mand. LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y proximity-scroll-snapping" dir="ltr"> - <div>Y Prox. LTR</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container x mandatory-scroll-snapping" dir="rtl"> - <div>X Mand. RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container x proximity-scroll-snapping" dir="rtl"> - <div>X Prox. RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y mandatory-scroll-snapping" dir="rtl"> - <div>Y Mand. RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> - -<div class="container y proximity-scroll-snapping" dir="rtl"> - <div>Y Prox. RTL</div> - <div>2</div> - <div>3</div> - <div>4</div> - <div>5</div> -</div> -</div> -</pre> - -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> - -<pre class="brush: css">/* setup */ -html, body, .holster { - height: 100%; -} -.holster { - display: flex; - align-items: center; - justify-content: space-between; - flex-flow: column nowrap; - font-family: monospace; -} - -.container { - display: flex; - overflow: auto; - outline: 1px dashed lightgray; - flex: none; -} - -.container.x { - width: 100%; - height: 128px; - flex-flow: row nowrap; -} - -.container.y { - width: 256px; - height: 256px; - flex-flow: column nowrap; -} -/* scroll-snap */ -.x.mandatory-scroll-snapping { - scroll-snap-type: x mandatory; -} - -.y.mandatory-scroll-snapping { - scroll-snap-type: y mandatory; -} - -.x.proximity-scroll-snapping { - scroll-snap-type: x proximity; -} - -.y.proximity-scroll-snapping { - scroll-snap-type: y proximity; -} - -.container > div { - text-align: center; - scroll-snap-align: center; - flex: none; -} - -.x.container > div { - line-height: 128px; - font-size: 64px; - width: 100%; - height: 128px; -} - -.y.container > div { - line-height: 256px; - font-size: 128px; - width: 256px; - height: 100%; -} -/* appearance fixes */ -.y.container > div:first-child { - line-height: 1.3; - font-size: 64px; -} -/* coloration */ -.container > div:nth-child(even) { - background-color: #87EA87; -} - -.container > div:nth-child(odd) { - background-color: #87CCEA; -} -</pre> - -<p>{{EmbedLiveSample("Example", "100%", "1630")}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td> - <td>{{Spec2("CSS Scroll Snap Points")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.scroll-snap-type")}}</p> diff --git a/files/ja/web/css/scroll-snap-type/index.md b/files/ja/web/css/scroll-snap-type/index.md new file mode 100644 index 0000000000..e57550e90c --- /dev/null +++ b/files/ja/web/css/scroll-snap-type/index.md @@ -0,0 +1,245 @@ +--- +title: scroll-snap-type +slug: Web/CSS/scroll-snap-type +tags: + - CSS + - CSS プロパティ + - CSS スクロールスナップ + - Reference + - recipe:css-property +browser-compat: css.properties.scroll-snap-type +translation_of: Web/CSS/scroll-snap-type +--- +{{CSSRef}} + +**`scroll-snap-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。 + +{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}} + +スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、ユーザーエージェントに委ねられます。 + +```css +/* キーワード値 */ +scroll-snap-type: none; +scroll-snap-type: x; +scroll-snap-type: y; +scroll-snap-type: block; +scroll-snap-type: inline; +scroll-snap-type: both; + +/* 任意の mandatory | proximity*/ +scroll-snap-type: x mandatory; +scroll-snap-type: y proximity; +scroll-snap-type: both mandatory; + +/* など */ + +/* グローバル値 */ +scroll-snap-type: inherit; +scroll-snap-type: initial; +scroll-snap-type: unset; +``` + +## 構文 + +### 値 + +- `none` + - : このスクロールコンテナーの視覚{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。 +- `x` + - : スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。 +- `y` + - : スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。 +- `block` + - : スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。 +- `inline` + - : スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。 +- `both` + - : スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。 +- `mandatory` + - : このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。 +- `proximity` + - : このスクロールコンテナーの視覚ビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Snapping_in_different_axes">様々な軸にスナップ</h3> + +#### HTML + +```html +<div class="holster"> +<div class="container x mandatory-scroll-snapping" dir="ltr"> + <div>X Mand. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x proximity-scroll-snapping" dir="ltr"> + <div>X Prox. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y mandatory-scroll-snapping" dir="ltr"> + <div>Y Mand. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y proximity-scroll-snapping" dir="ltr"> + <div>Y Prox. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x mandatory-scroll-snapping" dir="rtl"> + <div>X Mand. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x proximity-scroll-snapping" dir="rtl"> + <div>X Prox. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y mandatory-scroll-snapping" dir="rtl"> + <div>Y Mand. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y proximity-scroll-snapping" dir="rtl"> + <div>Y Prox. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> +</div> +``` + +#### CSS + +```css +/* setup */ +html, body, .holster { + height: 100%; +} +.holster { + display: flex; + align-items: center; + justify-content: space-between; + flex-flow: column nowrap; + font-family: monospace; +} + +.container { + display: flex; + overflow: auto; + outline: 1px dashed lightgray; + flex: none; +} + +.container.x { + width: 100%; + height: 128px; + flex-flow: row nowrap; +} + +.container.y { + width: 256px; + height: 256px; + flex-flow: column nowrap; +} +/* scroll-snap */ +.x.mandatory-scroll-snapping { + scroll-snap-type: x mandatory; +} + +.y.mandatory-scroll-snapping { + scroll-snap-type: y mandatory; +} + +.x.proximity-scroll-snapping { + scroll-snap-type: x proximity; +} + +.y.proximity-scroll-snapping { + scroll-snap-type: y proximity; +} + +.container > div { + text-align: center; + scroll-snap-align: center; + flex: none; +} + +.x.container > div { + line-height: 128px; + font-size: 64px; + width: 100%; + height: 128px; +} + +.y.container > div { + line-height: 256px; + font-size: 128px; + width: 256px; + height: 100%; +} +/* appearance fixes */ +.y.container > div:first-child { + line-height: 1.3; + font-size: 64px; +} +/* coloration */ +.container > div:nth-child(even) { + background-color: #87EA87; +} + +.container > div:nth-child(odd) { + background-color: #87CCEA; +} +``` + +#### 結果 + +{{EmbedLiveSample("Snapping_in_different_axes", "100%", "1630")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS スクロールスナップ](/ja/docs/Web/CSS/CSS_Scroll_Snap) +- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) diff --git a/files/ja/web/css/shape-image-threshold/index.html b/files/ja/web/css/shape-image-threshold/index.html deleted file mode 100644 index 06a839dbed..0000000000 --- a/files/ja/web/css/shape-image-threshold/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: shape-image-threshold -slug: Web/CSS/shape-image-threshold -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Opacity - - Property - - Reference - - Shape - - 'recipe:css-property' - - shape-image-threshold -translation_of: Web/CSS/shape-image-threshold ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>shape-image-threshold</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。</span></p> - -<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 <code>0.5</code> の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ -shape-image-threshold: 0.7; - -/* グローバル値 */ -shape-image-threshold: inherit; -shape-image-threshold: initial; -shape-image-threshold: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<alpha-value>")}}</dt> - <dd>画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Aligning_text_to_a_gradient" name="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3> - -<p>この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは <code>shape-outside</code> を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div id="gradient-shape"></div> - -<p> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi - voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint - facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat - adipisci, libero quae nihil porro debitis laboriosam inventore animi - impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque - a mollitia dicta repudiandae illum exercitationem aliquam repellendus - ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto - nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit - accusamus iusto dolore, at provident eius alias maxime pariatur non - deleniti ipsum sequi rem eveniet laboriosam magni expedita? -</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; hightlight[9] notranslate">#gradient-shape { - width: 150px; - height: 150px; - float: left; - background-image: linear-gradient(30deg, black, transparent 80%, - transparent); - shape-outside: linear-gradient(30deg, black, transparent 80%, - transparent); - shape-image-threshold: 0.2; -}</pre> - -<p>シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。</p> - -<p>シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 <code>shape-image-threadhold</code> の値を <code>0.2</code> にして使用して作成しています。</p> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.shape-image-threshold")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li>{{cssxref("<basic-shape>")}}</li> - <li>{{cssxref("shape-outside")}}</li> - <li>{{cssxref("shape-margin")}}</li> -</ul> diff --git a/files/ja/web/css/shape-image-threshold/index.md b/files/ja/web/css/shape-image-threshold/index.md new file mode 100644 index 0000000000..cc22c46709 --- /dev/null +++ b/files/ja/web/css/shape-image-threshold/index.md @@ -0,0 +1,115 @@ +--- +title: shape-image-threshold +slug: Web/CSS/shape-image-threshold +tags: + - 境界 + - CSS + - CSS プロパティ + - CSS シェイプ + - 浮動領域 + - Opacity + - プロパティ + - Reference + - シェイプ + - recipe:css-property + - shape-image-threshold +browser-compat: css.properties.shape-image-threshold +translation_of: Web/CSS/shape-image-threshold +--- +{{CSSRef}} + +**`shape-image-threshold`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。 + +{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}} + +アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 `0.5` の値は不透過度が 50% よりも大きいピクセルをすべて含めた図形になるという意味です。 + +## 構文 + +```css +/* <number> 値 */ +shape-image-threshold: 0.7; + +/* グローバル値 */ +shape-image-threshold: inherit; +shape-image-threshold: initial; +shape-image-threshold: revert; +shape-image-threshold: unset; +``` + +### 値 + +- {{cssxref("<alpha-value>")}} + - : 画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3> + +この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは `shape-outside` を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。 + +#### HTML + +```html +<div id="gradient-shape"></div> + +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi + voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint + facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat + adipisci, libero quae nihil porro debitis laboriosam inventore animi + impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque + a mollitia dicta repudiandae illum exercitationem aliquam repellendus + ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto + nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit + accusamus iusto dolore, at provident eius alias maxime pariatur non + deleniti ipsum sequi rem eveniet laboriosam magni expedita? +</p> +``` + +#### CSS + +```css +#gradient-shape { + width: 150px; + height: 150px; + float: left; + background-image: linear-gradient(30deg, black, transparent 80%, + transparent); + shape-outside: linear-gradient(30deg, black, transparent 80%, + transparent); + shape-image-threshold: 0.2; +} +``` + +シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。 + +シェイプの部分として扱うグラデーション内のピクセルは 20% の不透過度がしきい値なので、 `shape-image-threadhold` の値を `0.2` にして使用して作成しています。 + +#### 結果 + +{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- {{cssxref("<basic-shape>")}} +- {{cssxref("shape-outside")}} +- {{cssxref("shape-margin")}} diff --git a/files/ja/web/css/shape-margin/index.html b/files/ja/web/css/shape-margin/index.html deleted file mode 100644 index 9b46e2aff7..0000000000 --- a/files/ja/web/css/shape-margin/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: shape-margin -slug: Web/CSS/shape-margin -tags: - - CSS - - CSS シェイプ - - CSS プロパティ - - Reference - - float - - margin - - shape-margin - - シェイプ - - プロパティ - - 境界 - - 浮動領域 -translation_of: Web/CSS/shape-margin ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>shape-margin</code></strong> プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。</span></p> - -<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>マージンで、シェイプ (<strong>浮動要素</strong>) の縁と周囲のコンテンツとの間隔を調整することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ -shape-margin: 10px; -shape-margin: 20mm; - -/* <percentage> 値 */ -shape-margin: 60%; - -/* グローバル値 */ -shape-margin: inherit; -shape-margin: initial; -shape-margin: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>シェイプのマージンを {{cssxref("<length>")}} 値又は要素の内包ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><section> -<div class="shape"></div> -We are not quite sure of any one thing in biology; our knowledge of geology -is relatively very slight, and the economic laws of society are -uncertain to every one except some individual who attempts to set them -forth; but before the world was fashioned the square on the hypotenuse -was equal to the sum of the squares on the other two sides of a right -triangle, and it will be so after this world is dead; and the inhabitant -of Mars, if he exists, probably knows its truth as we know it.</section></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">section { - max-width: 400px; -} - -.shape { - float: left; - width: 150px; - height: 150px; - background-color: maroon; - clip-path: polygon(0 0, 150px 150px, 0 150px); - shape-outside: polygon(0 0, 150px 150px, 0 150px); - shape-margin: 20px; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 500, 250)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.shape-margin")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li>{{cssxref("shape-outside")}}</li> - <li>{{cssxref("shape-image-threshold")}}</li> - <li>{{cssxref("<basic-shape>")}}</li> -</ul> diff --git a/files/ja/web/css/shape-margin/index.md b/files/ja/web/css/shape-margin/index.md new file mode 100644 index 0000000000..0747095dfb --- /dev/null +++ b/files/ja/web/css/shape-margin/index.md @@ -0,0 +1,112 @@ +--- +title: shape-margin +slug: Web/CSS/shape-margin +tags: + - 境界 + - CSS + - CSS プロパティ + - CSS シェイプ + - 浮動領域 + - プロパティ + - Reference + - シェイプ + - float + - マージン + - recipe:css-property + - shape-margin +browser-compat: css.properties.shape-margin +translation_of: Web/CSS/shape-margin +--- +{{CSSRef}} + +**`shape-margin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。 + +{{EmbedInteractiveExample("pages/css/shape-margin.html")}} + +マージンで、シェイプ (**浮動要素**) の縁と周囲のコンテンツとの間隔を調整することができます。 + +## 構文 + +```css +/* <length> 値 */ +shape-margin: 10px; +shape-margin: 20mm; + +/* <percentage> 値 */ +shape-margin: 60%; + +/* グローバル値 */ +shape-margin: inherit; +shape-margin: initial; +shape-margin: revert; +shape-margin: unset; +``` + +### 値 + +- `<length-percentage>` + - : シェイプのマージンを {{cssxref("<length>")}} 値または要素の包含ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Adding_a_margin_to_a_polygon">多角形にマージンを追加</h3> + +#### HTML + +```html +<section> +<div class="shape"></div> +We are not quite sure of any one thing in biology; our knowledge of geology +is relatively very slight, and the economic laws of society are +uncertain to every one except some individual who attempts to set them +forth; but before the world was fashioned the square on the hypotenuse +was equal to the sum of the squares on the other two sides of a right +triangle, and it will be so after this world is dead; and the inhabitant +of Mars, if one exists, probably knows its truth as we know it.</section> +``` + +#### CSS + +```css +section { + max-width: 400px; +} + +.shape { + float: left; + width: 150px; + height: 150px; + background-color: maroon; + clip-path: polygon(0 0, 150px 150px, 0 150px); + shape-outside: polygon(0 0, 150px 150px, 0 150px); + shape-margin: 20px; +} +``` + +#### 結果 + +{{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- {{cssxref("shape-outside")}} +- {{cssxref("shape-image-threshold")}} +- {{cssxref("<basic-shape>")}} diff --git a/files/ja/web/css/shape-outside/index.md b/files/ja/web/css/shape-outside/index.md new file mode 100644 index 0000000000..3dfe78086f --- /dev/null +++ b/files/ja/web/css/shape-outside/index.md @@ -0,0 +1,175 @@ +--- +title: shape-outside +slug: Web/CSS/shape-outside +tags: + - 境界 + - CSS + - CSS プロパティ + - CSS シェイプ + - 浮動領域 + - プロパティ + - Reference + - シェイプ + - マージン + - recipe:css-property + - shape-outside + - wrapping +browser-compat: css.properties.shape-outside +translation_of: Web/CSS/shape-outside +--- +{{CSSRef}} + +**`shape-outside`** は [CSS](/ja/docs/Web/CSS) のプロパティで、隣接するインラインコンテンツが回り込むシェイプ (形状) を — 矩形でない場合もありますが — 定義します。既定では、インラインコンテンツはマージンボックスを回り込みます。`shape-outside` によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。 + +{{EmbedInteractiveExample("pages/css/shape-outside.html")}} + +## 構文 + +```css +/* キーワード値 */ +shape-outside: none; +shape-outside: margin-box; +shape-outside: content-box; +shape-outside: border-box; +shape-outside: padding-box; + +/* 関数値 */ +shape-outside: circle(); +shape-outside: ellipse(); +shape-outside: inset(10px 10px 10px 10px); +shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); +shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); + +/* <url> 値 */ +shape-outside: url(image.png); + +/* <gradient> 値 */ +shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); + +/* グローバル値 */ +shape-outside: initial; +shape-outside: inherit; +shape-outside: revert; +shape-outside: unset; +``` + +`shape-outside` プロパティは、*浮動領域*と*浮動要素*を表す以下に挙げた値を使用して指定します。浮動領域はインラインコンテンツ (浮動要素) が囲む形状を指定します。 + +### 値 + +- `none` + - : 浮動領域は影響を受けません。インラインコンテンツは通常通り、要素のマージンボックスを回り込みます。 +- `<shape-box>` + + - : 浮動領域は浮動要素の辺の形状に従って ([CSS ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) で定義された通りに) 計算されます。これは`margin-box`、`border-box`、`padding-box`、`content-box` の何れかになります。この形状は {{cssxref("border-radius")}} プロパティで生成された丸い角も含みます ({{cssxref("background-clip")}} と同様の動作です)。 + + - `margin-box` + - : マージンの外側の縁で囲まれた形状を定義します。この形状の角の半径は、対応する {{cssxref("border-radius")}} および {{cssxref("margin")}} の値で決定されます。 `border-radius / margin` の比率が `1` 以上の場合、マージンの角の半径は `border-radius + margin` です。この比率が `1` 未満の場合、マージンの角の半径は `border-radius + (margin * (1 + (ratio-1)^3))` となります。 + - `border-box` + - : 境界の外側の縁で囲まれた形状を定義します。この形状は、境界の外側の形状における通常のルールに従います。 + - `padding-box` + - : パディングの外側の縁で囲まれた形状を定義します。この形状は、境界の内側の形状における通常のルールに従います。 + - `content-box` + - : コンテンツの外側の縁で囲まれた形状を定義します。このボックスのそれぞれの角の半径は、 `0` と `border-radius - border-width - padding` の大きい方になります。 + +- {{cssxref("<basic-shape>")}} + - : 浮動領域は、{{cssxref("basic-shape/inset()","inset()")}}、{{cssxref("basic-shape/circle()","circle()")}}、{{cssxref("basic-shape/ellipse()","ellipse()")}}、{{cssxref("basic-shape/polygon()","polygon()")}}、またはレベル 2 の仕様書で追加された `path()` の何れかによって生成された形状に基づいて計算されます。`<shape-box>` も提供された場合は、`<basic-shape>` 関数の参照ボックスを定義します。それ以外の場合、参照ボックスは既定で `margin-box` になります。 +- {{cssxref("<image>")}} + - : 浮動領域は指定された {{cssxref("<image>")}} のアルファチャンネルに基づいて、 {{cssxref("shape-image-threshold")}} で定義されたように抽出され計算されます。 + +> **Note:** {{glossary("User agent", "ユーザーエージェント")}}は、`shape-outside` の値に含まれるすべての URL に対して、HTML5 の仕様で定義されている CORS に対応している可能性のあるフェッチメソッドを使用する必要があります。読み取りの際、ユーザーエージェントは "Anonymous" モードを使用し、参照元をスタイルシートの URL に設定し、文書の URL を含むオリジンを設定しなければなりません。この結果、有効な代替画像がないなどのネットワークエラーが発生した場合は、**`none`** の値を指定したのと同様になります。 + +## 補間 + +1 つ目と 2 つ目の `<basic-shape>` の間でアニメーションを行う場合、次のルールが適用されます。シェイプ関数の中の値は、単純なリストとして補間されます。このリストの値の補間は、可能な限り {{cssxref("<length>")}}、{{cssxref("<percentage>")}}、{{cssxref("calc()")}} のいずれかとして補間されます。リストの値がこれらの型ではなく、同一であった場合 (両方のリストの同じ位置に `nonzero` があった場合など)、それらの値は補間されます。 + +- 両方の形状は、同じ参照ボックスを使用する必要があります。 +- 両方の形状が同じ型であった場合、その型が `ellipse()` または `circle()` であり、かつどの半径にも `closest-side` や `farthest-side` のキーワードを使用していない場合は、シェイプ関数内のそれぞれの値の間で補間されます。 +- 両方の形状が `inset()` 型であった場合、シェイプ関数内のそれぞれの値の間で補間されます。 +- 両方の形状が `polygon()` 型であった場合、両方の多角形の頂点の数が同じで、同じ `<fill-rule>` を使用していた場合は、シェイプ関数内のそれぞれの値の間で補完されます。 +- それ以外の場合は、補間は行われません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式定義 + +{{csssyntax}} + +## 例 + +<h3 id="Funneling_text">漏斗状のテキスト</h3> + +#### HTML + +```html +<div class="main"> + <div class="left"></div> + <div class="right"></div> + <p> + Sometimes a web page's text content appears to be + funneling your attention towards a spot on the page + to drive you to follow a particular link. Sometimes + you don't notice. + </p> +</div> +``` + +#### CSS + +```css +.main { + width: 530px; +} + +.left, +.right { + width: 40%; + height: 12ex; + background-color: lightgray; +} + +.left { + -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); + shape-outside: polygon(0 0, 100% 100%, 0 100%); + float: left; + -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); + clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.right { + -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); + shape-outside: polygon(100% 0, 100% 100%, 0 100%); + float: right; + -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); + clip-path: polygon(100% 0, 100% 100%, 0 100%); +} + +p { + text-align: center; +} +``` + +#### 結果 + +{{EmbedLiveSample("Funneling_text", "100%", 130)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- [ボックス値からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/From_box_values) +- [基本シェイプ](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) +- [画像からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) +- {{cssxref("<basic-shape>")}} +- {{cssxref("shape-margin")}} +- {{cssxref("shape-image-threshold")}} diff --git a/files/ja/web/css/tab-size/index.html b/files/ja/web/css/tab-size/index.html deleted file mode 100644 index ca89ae5ed3..0000000000 --- a/files/ja/web/css/tab-size/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: tab-size -slug: Web/CSS/tab-size -tags: - - CSS - - CSS Property - - CSS テキスト - - CSS プロパティ - - Experimental - - Reference -translation_of: Web/CSS/tab-size ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>CSS の <strong><code>tab-size</code></strong> プロパティは、タブ文字 (<code>U+0009</code>) の表示幅の指定に用います。</p> - -<pre class="brush:css">/* <integer> 値 */ -tab-size: 4; -tab-size: 0; - -/* <length> 値 */ -tab-size: 10px; -tab-size: 2em; - -/* グローバル値 */ -tab-size: inherit; -tab-size: initial; -tab-size: unset; -</pre> - -<p>{{CSSInfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{CSSxRef("<integer>")}}</dt> - <dd>タブの空白文字の文字数です。正の数でなければなりません。</dd> - <dt>{{CSSxRef("<length>")}}</dt> - <dd>タブの幅です。正の数でなければなりません。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css">pre { - tab-size: 4; /* スペース 4 つ分となります */ -} -</pre> - -<pre class="brush: css">pre { - tab-size: 0; /* インデント除去 */ -} -</pre> - -<pre class="brush: css">pre { - tab-size: 2; /* タブの幅をスペース 2 個分に設定 */ -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - - - -<p>{{Compat("css.properties.tab-size")}}</p> - -<p> </p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a> - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール</li> -</ul> diff --git a/files/ja/web/css/tab-size/index.md b/files/ja/web/css/tab-size/index.md new file mode 100644 index 0000000000..31c387cac8 --- /dev/null +++ b/files/ja/web/css/tab-size/index.md @@ -0,0 +1,108 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Reference + - recipe:css-property +browser-compat: css.properties.tab-size +translation_of: Web/CSS/tab-size +--- +{{CSSRef}} + +CSS の **`tab-size`** プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。 + +## 構文 + +```css +/* <integer> 値 */ +tab-size: 4; +tab-size: 0; + +/* <length> 値 */ +tab-size: 10px; +tab-size: 2em; + +/* グローバル値 */ +tab-size: inherit; +tab-size: initial; +tab-size: revert; +tab-size: unset; +``` + +### 値 + +- {{CSSxRef("<integer>")}} + - : タブの幅として使用される空白文字（U+0020）の幅の倍数です。正の数でなければなりません。 +- {{CSSxRef("<length>")}} + - : タブの幅です。正の数でなければなりません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### 文字数による展開 + +```css +pre { + tab-size: 4; /* スペース 4 つ分となります */ +} +``` + +### タブの折り畳み + +```css +pre { + tab-size: 0; /* インデント除去 */ +} +``` + +<h3 id="Comparing_to_the_default_size">既定の大きさの比較</h3> + +この例では、既定のタブの大きさとカスタムのタブの大きさを比較しています。タブがつぶれないように、 {{cssxref("white-space")}} を `pre` に設定していることに注意してください。 + +#### HTML + +```html +<p>no tab</p> +<p>	default tab size of 8 characters wide</p> +<p class="custom">	custom tab size of 3 characters wide</p> +<p> 3 spaces, equivalent to the custom tab size</p> +``` + +#### CSS + +```css +p { + white-space: pre; +} + +.custom { + tab-size: 3; + -moz-tab-size: 3; +} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_to_the_default_size')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Controlling size of a tab character (U+0009)](https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html) - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール diff --git a/files/ja/web/css/table-layout/index.html b/files/ja/web/css/table-layout/index.html deleted file mode 100644 index 8df6fb10d4..0000000000 --- a/files/ja/web/css/table-layout/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: table-layout -slug: Web/CSS/table-layout -tags: - - CSS - - CSS プロパティ - - CSS 表 - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/table-layout ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>table-layout</code></strong> プロパティは、 {{htmlelement("table")}} のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -table-layout: auto; -table-layout: fixed; - -/* グローバル値 */ -table-layout: inherit; -table-layout: initial; -table-layout: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{Cssxref("auto")}}</dt> - <dd>既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。</dd> - <dt><code>fixed</code></dt> - <dd>表と列の幅は <code>table</code> 要素と <code>col</code> 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列幅の設定に影響しません。</dd> - <dd>"fixed" レイアウト方法に於いては、一度テーブルの一行目のみをダウンロードして解析した後、テーブル全体をレンダリングします。これは自動テーブルレイアウトアルゴリズムよりレンダリング速度を速くする事が出来ますが、後続するセルのコンテンツが用意された列幅に収まらないかもしれません。セルは {{Cssxref("overflow")}} プロパティを使用して、表の幅が分かっている場合、はみ出すコンテンツを切り取るかどうかを定めます。そうでなければ、セルははみ出しません。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<p>この例は表の固定レイアウトを使用し、 {{cssxref("width")}} プロパティとの組み合わせで、表の幅を制限しています。 {{cssxref("text-overflow")}} プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。</p> - -<p>表のレイアウトが <code>auto</code> である場合、表は指定された <code>width</code> よりも内容に合わせて広がります。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><table> - <tr><td>Ed</td><td>Wood</td></tr> - <tr><td>Albert</td><td>Schweitzer</td></tr> - <tr><td>Jane</td><td>Fonda</td></tr> - <tr><td>William</td><td>Shakespeare</td></tr> -</table></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">table { - table-layout: fixed; - width: 120px; - border: 1px solid red; -} - -td { - border: 1px solid blue; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -}</pre> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample('Example')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.table-layout")}}</p> diff --git a/files/ja/web/css/table-layout/index.md b/files/ja/web/css/table-layout/index.md new file mode 100644 index 0000000000..74507ca0d3 --- /dev/null +++ b/files/ja/web/css/table-layout/index.md @@ -0,0 +1,98 @@ +--- +title: table-layout +slug: Web/CSS/table-layout +tags: + - CSS + - CSS プロパティ + - CSS 表 + - Reference + - recipe:css-property +browser-compat: css.properties.table-layout +translation_of: Web/CSS/table-layout +--- +{{CSSRef}} + +**`table-layout`** は CSS のプロパティで、{{htmlelement("table")}} のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。 + +{{EmbedInteractiveExample("pages/css/table-layout.html")}} + +## 構文 + +```css +/* キーワード値 */ +table-layout: auto; +table-layout: fixed; + +/* グローバル値 */ +table-layout: inherit; +table-layout: initial; +table-layout: unset; +``` + +### 値 + +- `auto` + - : 既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。 +- `fixed` + + - : 表と列の幅は `table` 要素と `col` 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。 + + 「固定」("fixed") レイアウト方式においては、表の 1 行目がダウンロードされ解析された時点で表全体がレンダリングできるようになります。これは「自動」レイアウト方式よりもレンダリング時間を高速にすることができますが、後続するセルのコンテンツが列の幅に合わなくなる可能性があります。各セルでは表の幅が分かっている場合、{{Cssxref("overflow")}} プロパティを使用して、はみ出すコンテンツを切り取るかどうかを決めます。それ以外の場合、セルからはみ出すことはありません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Fixed-width_tables_with_text-overflow">固定幅の表に text-overflow を付けた場合</h3> + +この例は表の固定レイアウトを使用し、{{cssxref("width")}} プロパティとの組み合わせで、表の幅を制限しています。{{cssxref("text-overflow")}} プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。表のレイアウトが `auto` である場合、表は指定された `width` よりも内容に合わせて広がります。 + +#### HTML + +```html +<table> + <tr><td>Ed</td><td>Wood</td></tr> + <tr><td>Albert</td><td>Schweitzer</td></tr> + <tr><td>Jane</td><td>Fonda</td></tr> + <tr><td>William</td><td>Shakespeare</td></tr> +</table> +``` + +#### CSS + +```css +table { + table-layout: fixed; + width: 120px; + border: 1px solid red; +} + +td { + border: 1px solid blue; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +``` + +#### 結果 + +{{EmbedLiveSample('Fixed-width_tables_with_text-overflow')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`<table>`](/ja/docs/Web/HTML/Element/table) diff --git a/files/ja/web/css/text-align-last/index.html b/files/ja/web/css/text-align-last/index.html deleted file mode 100644 index 09b63d62dd..0000000000 --- a/files/ja/web/css/text-align-last/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: text-align-last -slug: Web/CSS/text-align-last -tags: - - CSS - - CSS Property - - CSS テキスト - - Experimental - - Reference -translation_of: Web/CSS/text-align-last ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>text-align-last</code></strong> プロパティは、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -text-align-last: auto; -text-align-last: start; -text-align-last: end; -text-align-last: left; -text-align-last: right; -text-align-last: center; -text-align-last: justify; - -/* グローバル値 */ -text-align-last: inherit; -text-align-last: initial; -text-align-last: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が <code>justify</code> である場合は、<code>text-align-last</code> に <code>start</code> を設定した場合と同じ効果になります。</dd> - <dt><code>start</code></dt> - <dd>文章の記述方向が左から右であれば <code>left</code>、右から左であれば <code>right</code> と同じです。</dd> - <dt><code>end</code></dt> - <dd>文章の記述方向が左から右であれば <code>right</code>、右から左であれば <code>left</code> と同じです。</dd> - <dt><code>left</code></dt> - <dd>インライン要素は行ボックスの左端に配置されます。</dd> - <dt><code>right</code></dt> - <dd>インライン要素は行ボックスの右端に配置されます。</dd> - <dt><code>center</code></dt> - <dd>インラインコンテンツは行ボックスの中央に配置されます。</dd> - <dt><code>justify</code></dt> - <dd>テキストは行末揃えになります。テキストは段落の左端から右端までに配置されるでしょう。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<div class="hidden"> -<pre class="brush: html"><p>Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> -</pre> -</div> - -<pre class="brush: css">p { - font-size: 1.4em; - text-align: justify; - text-align-last: center; -}</pre> - -<p>{{EmbedLiveSample('Example','560')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-align-last")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("text-align")}}</li> -</ul> diff --git a/files/ja/web/css/text-align-last/index.md b/files/ja/web/css/text-align-last/index.md new file mode 100644 index 0000000000..96c69c2777 --- /dev/null +++ b/files/ja/web/css/text-align-last/index.md @@ -0,0 +1,96 @@ +--- +title: text-align-last +slug: Web/CSS/text-align-last +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Experimental + - Reference + - recipe:css-property +browser-compat: css.properties.text-align-last +translation_of: Web/CSS/text-align-last +--- +{{CSSRef}} + +**`text-align-last`** は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。 + +{{EmbedInteractiveExample("pages/css/text-align-last.html")}} + +## 構文 + +```css +/* キーワード値 */ +text-align-last: auto; +text-align-last: start; +text-align-last: end; +text-align-last: left; +text-align-last: right; +text-align-last: center; +text-align-last: justify; + +/* グローバル値 */ +text-align-last: inherit; +text-align-last: initial; +text-align-last: revert; +text-align-last: unset; +``` + +### 値 + +- `auto` + - : {{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が `justify` である場合は、`text-align-last` に `start` を設定した場合と同じ効果になります。 +- `start` + - : 書字方向が左書きであれば `left`、右書きであれば `right` と同じです。 +- `end` + - : 書字方向が左書きであれば `right`、右書きであれば `left` と同じです。 +- `left` + - : インラインコンテンツが行ボックスの左端に配置されます。 +- `right` + - : インラインコンテンツが行ボックスの右端に配置されます。 +- `center` + - : インラインコンテンツが行ボックスの中央に配置されます。 +- `justify` + - : テキストは両端揃えになります。テキストは段落の左端から右端までに配置されます。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Justifying_the_last_line">最後の行を中央揃えにする</h3> + +```html hidden +<p>Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> +``` + +#### CSS + +```css +p { + font-size: 1.4em; + text-align: justify; + text-align-last: center; +} +``` + +#### 結果s + +{{EmbedLiveSample('Justifying_the_last_line','560')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-align")}} diff --git a/files/ja/web/css/text-align/index.html b/files/ja/web/css/text-align/index.html deleted file mode 100644 index 40f11c6cfa..0000000000 --- a/files/ja/web/css/text-align/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: text-align -slug: Web/CSS/text-align -tags: - - CSS - - CSS Property - - CSS Text - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/text-align ---- -<div>{{CSSRef}}</div> - -<p><strong><code>text-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ -text-align: left; -text-align: right; -text-align: center; -text-align: justify; -text-align: justify-all; -text-align: start; -text-align: end; -text-align: match-parent; - -/* 表の列における文字ベースの配置 */ -text-align: "."; -text-align: "." center; - -/* ブロック配置の値 (標準外の構文) */ -text-align: -moz-center; -text-align: -webkit-center; - -/* グローバル値 */ -text-align: inherit; -text-align: initial; -text-align: unset; -</pre> - -<p><code>text-align</code> プロパティは、以下の方法のうちの一つで指定されます。</p> - -<ul> - <li>キーワード値 <code><a href="#start">start</a></code>, <code><a href="#end">end</a></code>, <code><a href="#left">left</a></code>, <code><a href="#right">right</a></code>, <code><a href="#center">center</a></code>, <code><a href="#justify">justify</a></code>, <code><a href="#justify-all">justify-all</a></code>, <code><a href="#match-parent">match-parent</a></code> の使用。</li> - <li><code><a href="#string"><string></a></code> 値のみを使用、この場合は他の値の既定値が <code><a href="#right">right</a></code> になります。</li> - <li>キーワード値または <code><a href="#string"><string></a></code> 値の使用。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="start"><code>start</code> {{experimental_inline}}</dt> - <dd>書字方向が左から右であれば <code>left</code> と、右から左であれば <code>right</code> と同じです。</dd> - <dt id="end"><code>end</code> {{experimental_inline}}</dt> - <dd>書字方向が左から右であれば <code>right</code> と、右から左であれば <code>left</code> と同じです。</dd> - <dt id="left"><code>left</code></dt> - <dd>インラインコンテンツは行ボックスの左辺に寄せられます。</dd> - <dt id="right"><code>right</code></dt> - <dd>インラインコンテンツは行ボックスの右辺に寄せられます。</dd> - <dt id="center"><code>center</code></dt> - <dd>インラインコンテンツは行ボックス内で中央寄せされます。</dd> - <dt id="justify"><code>justify</code></dt> - <dd>インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。</dd> - <dt id="justify-all"><code>justify-all</code> {{experimental_inline}}</dt> - <dd><code>justify</code> と同じですが、最終行も強制的に両端揃えされます。</dd> - <dt id="match-parent"><code>match-parent</code> {{experimental_inline}}</dt> - <dd><code>inherit</code> に似ていますが、 <code>start</code> と <code>end</code> 値が親要素の {{cssxref("direction")}} に従って計算され、適切な <code>left</code> か <code>right</code> 値に置き換えられます。</dd> - <dt id="string">{{cssxref("<string>")}} {{experimental_inline}}</dt> - <dd>表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。</dd> -</dl> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Left_alignment" name="Left_alignment">左揃え</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p class="example"> - Integer elementum massa at nulla placerat varius. - Suspendisse in libero risus, in interdum massa. - Vestibulum ac leo vitae metus faucibus gravida ac in neque. - Nullam est eros, suscipit sed dictum quis, accumsan a ligula. -</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight:[2] notranslate">.example { - text-align: left; - border: solid; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p> - -<h3 id="Centered_text" name="Centered_text">中央揃え</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html notranslate"><p class="example"> - Integer elementum massa at nulla placerat varius. - Suspendisse in libero risus, in interdum massa. - Vestibulum ac leo vitae metus faucibus gravida ac in neque. - Nullam est eros, suscipit sed dictum quis, accumsan a ligula. -</p></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css; highlight:[2] notranslate">.example { - text-align: center; - border: solid; -}</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p> - -<h3 id="Justify" name="Justify">両端揃え</h3> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html notranslate"><p class="example"> - Integer elementum massa at nulla placerat varius. - Suspendisse in libero risus, in interdum massa. - Vestibulum ac leo vitae metus faucibus gravida ac in neque. - Nullam est eros, suscipit sed dictum quis, accumsan a ligula. -</p></pre> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css; highlight:[2] notranslate">.example { - text-align: justify; - border: solid; -}</pre> - -<h4 id="Result_3" name="Result_3">結果</h4> - -<p>{{EmbedLiveSample("Justify","100%","100%")}}</p> - -<h3 id="Notes" name="Notes">注</h3> - -<p>インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right {{cssxref("margin")}} を <code>auto</code> に設定することです。</p> - -<pre class="brush: css notranslate">.something { - margin: auto; -} -</pre> - -<pre class="brush: css notranslate">.something { - margin: 0 auto; -} -</pre> - -<pre class="brush: css notranslate">.something { - margin-left: auto; - margin-right: auto; -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td> - <td>{{Spec2('CSS4 Text')}}</td> - <td><code><string></code> 値を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td><code>start</code> と <code>end</code>、<code>match-parent</code> キーワードを追加。名前のなかった初期値を（まさにそれである）<code>start</code> に変更。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-align")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}</li> -</ul> diff --git a/files/ja/web/css/text-align/index.md b/files/ja/web/css/text-align/index.md new file mode 100644 index 0000000000..51e7e5336a --- /dev/null +++ b/files/ja/web/css/text-align/index.md @@ -0,0 +1,179 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Reference + - recipe:css-property +browser-compat: css.properties.text-align +translation_of: Web/CSS/text-align +--- +{{CSSRef}} + +**`text-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。 + +{{EmbedInteractiveExample("pages/css/text-align.html")}} + +## 構文 + +```css +/* キーワード値 */ +text-align: start; +text-align: end; +text-align: left; +text-align: right; +text-align: center; +text-align: justify; +text-align: justify-all; +text-align: match-parent; + +/* 表の列における文字ベースの配置 */ +text-align: "."; +text-align: "." center; + +/* ブロック配置の値 (標準外の構文) */ +text-align: -moz-center; +text-align: -webkit-center; + +/* グローバル値 */ +text-align: inherit; +text-align: initial; +text-align: revert; +text-align: unset; +``` + +`text-align` プロパティは、以下の方法のうちの一つで指定されます。 + + - キーワード値 `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, `match-parent` のいずれかを使用。 + - `<string>` 値のみを使用、この場合は他の値の既定値が `right` になります。 + - キーワード値または [`<string>`](#string) 値の使用。 + +### 値 + +- `start` + - : 書字方向が左書きであれば `left`、右書きであれば `right` と同じです。 +- `end` + - : 書字方向が左書きであれば `right`、右書きであれば `left` と同じです。 +- `left` + - : インラインコンテンツは行ボックスの左辺に寄せられます。 +- `right` + - : インラインコンテンツは行ボックスの右辺に寄せられます。 +- `center` + - : インラインコンテンツは行ボックス内で中央寄せされます。 +- `justify` + - : インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。 +- `justify-all` {{experimental_inline}} + - : `justify` と同じですが、最終行も強制的に両端揃えされます。 +- `match-parent` + - : `inherit` に似ていますが、 `start` と `end` 値が親要素の {{cssxref("direction")}} に従って計算され、適切な `left` か `right` 値に置き換えられます。 +- {{cssxref("<string>")}} {{experimental_inline}} + - : 表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。 + +## アクセシビリティの考慮 + +両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。 + +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +<h3 id="Start_alignment">先頭へ配置</h3> + +#### HTML + +```html +<p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p> +``` + +#### CSS + +```css +.example { + text-align: start; + border: solid; +} +``` + +#### 結果 + +{{EmbedLiveSample("Start_alignment","100%","100%")}} + +<h3 id="Centered_text">中央揃え</h3> + +#### HTML + +```html +<p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p> +``` + +#### CSS + +```css +.example { + text-align: center; + border: solid; +} +``` + +#### 結果 + +{{EmbedLiveSample("Centered_text","100%","100%")}} + +<h3 id="Justify">両端揃え</h3> + +#### HTML + +```html +<p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p> +``` + +#### CSS + +```css +.example { + text-align: justify; + border: solid; +} +``` + +#### 結果 + +{{EmbedLiveSample("Justify","100%","100%")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}} diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html deleted file mode 100644 index f41da12a5c..0000000000 --- a/files/ja/web/css/text-decoration-color/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: text-decoration-color -slug: Web/CSS/text-decoration-color -tags: - - CSS - - CSS Property - - CSS Text - - CSS Text Decoration - - HTML Colors - - HTML Styles - - Reference - - Styling HTML - - Styling text - - color - - colors - - 'recipe:css-property' -browser-compat: css.properties.text-decoration-color -translation_of: Web/CSS/text-decoration-color ---- -<div>{{ CSSRef }}</div> - -<p><strong><code>text-decoration-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。</p> - -<p>色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> - - -<p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <color> 値 */ -text-decoration-color: currentcolor; -text-decoration-color: red; -text-decoration-color: #00ff00; -text-decoration-color: rgba(255, 128, 128, 0.5); -text-decoration-color: transparent; - -/* グローバル値 */ -text-decoration-color: inherit; -text-decoration-color: initial; -text-decoration-color: revert; -text-decoration-color: unset; -</pre> - -<h3 id="Values">値</h3> - -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>装飾線の色です。</dd> -</dl> - -<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> - -<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h3 id="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="Basic_example">基本的な例</h3> - -<pre class="brush: html"><p>This paragraph has <s>some erroneous text</s> - inside it that I want to call attention to.</p></pre> - -<pre class="brush: css">p { - text-decoration-line: underline; - text-decoration-color: cyan; -} - -s { - text-decoration-line: line-through; - text-decoration-color: red; - text-decoration-style: wavy; -}</pre> - -<p>{{ EmbedLiveSample('Examples') }}</p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> - <li>{{cssxref("<color>")}} データ型</li> - <li>色に関する他のプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> -</ul> diff --git a/files/ja/web/css/text-decoration-color/index.md b/files/ja/web/css/text-decoration-color/index.md new file mode 100644 index 0000000000..23fe1ab726 --- /dev/null +++ b/files/ja/web/css/text-decoration-color/index.md @@ -0,0 +1,107 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - CSS + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles + - Reference + - Styling HTML + - Styling text + - color + - colors + - recipe:css-property +browser-compat: css.properties.text-decoration-color +translation_of: Web/CSS/text-decoration-color +--- +{{ CSSRef }} + +**`text-decoration-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。 + +色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。 + +{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}} + +CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (`text-decoration-color` で) 線の色を指定することで実現できます。 + +## 構文 + +```css +/* <color> 値 */ +text-decoration-color: currentcolor; +text-decoration-color: red; +text-decoration-color: #00ff00; +text-decoration-color: rgba(255, 128, 128, 0.5); +text-decoration-color: transparent; + +/* グローバル値 */ +text-decoration-color: inherit; +text-decoration-color: initial; +text-decoration-color: revert; +text-decoration-color: unset; +``` + +### 値 + +- {{cssxref("<color>")}} + - : 装飾線の色です。 + +## アクセシビリティの考慮 + +テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。 + +色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。 + +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### 基本的な例 + +```html +<p>This paragraph has <s>some erroneous text</s> + inside it that I want to call attention to.</p> +``` + +```css +p { + text-decoration-line: underline; + text-decoration-color: cyan; +} + +s { + text-decoration-line: line-through; + text-decoration-color: red; + text-decoration-style: wavy; +} +``` + +{{ EmbedLiveSample('Examples') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。 +- {{cssxref("<color>")}} データ型 +- 色に関する他のプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/text-decoration-line/index.html b/files/ja/web/css/text-decoration-line/index.html deleted file mode 100644 index b64e8c68c1..0000000000 --- a/files/ja/web/css/text-decoration-line/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: text-decoration-line -slug: Web/CSS/text-decoration-line -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference -translation_of: Web/CSS/text-decoration-line ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-line</code></strong> プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 単一のキーワード */ -text-decoration-line: none; -text-decoration-line: underline; -text-decoration-line: overline; -text-decoration-line: line-through; -text-decoration-line: blink; - -/* 複数のキーワード */ -text-decoration-line: underline overline; /* 2つの装飾線 */ -text-decoration-line: overline underline line-through; /* 複数の装飾線 */ - -/* グローバル値 */ -text-decoration-line: inherit; -text-decoration-line: initial; -text-decoration-line: unset; -</pre> - -<p><code>text-decoration-line</code> プロパティは <code>none</code> または以下のリストにある<strong>1つ以上の</strong>空白で区切られた値を指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>テキストの装飾を行いません。</dd> - <dt><code>underline</code></dt> - <dd>テキストの各行に下線を引きます。</dd> - <dt><code>overline</code></dt> - <dd>テキストの各行の上線を引きます。</dd> - <dt><code>line-through</code></dt> - <dd>テキストの各行の中央を貫く線を引きます。</dd> - <dt><code>blink</code> {{deprecated_inline}}</dt> - <dd>テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は<strong>非推奨</strong>であり、 <a href="/ja/docs/Web/CSS/animation">CSS アニメーション</a>に取って代わりました。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: html"><p class="wavy">Here's some text with wavy red underline!</p> -<p class="both">This text has lines both above and below it.</p></pre> - -<pre class="brush: css">.wavy { - text-decoration-line: underline; - text-decoration-style: wavy; - text-decoration-color: red; -} - -.both { - text-decoration-line: underline overline; -}</pre> - -<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-decoration-line")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> -</ul> diff --git a/files/ja/web/css/text-decoration-line/index.md b/files/ja/web/css/text-decoration-line/index.md new file mode 100644 index 0000000000..37387415f4 --- /dev/null +++ b/files/ja/web/css/text-decoration-line/index.md @@ -0,0 +1,98 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Reference + - recipe:css-property +browser-compat: css.properties.text-decoration-line +translation_of: Web/CSS/text-decoration-line +--- +{{CSSRef}} + +**`text-decoration-line`** は [CSS](/ja/docs/Web/CSS) のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。 + +{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}} + +複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。 + +## 構文 + +```css +/* 単一のキーワード */ +text-decoration-line: none; +text-decoration-line: underline; +text-decoration-line: overline; +text-decoration-line: line-through; +text-decoration-line: blink; + +/* 複数のキーワード */ +text-decoration-line: underline overline; /* 2 つの装飾線 */ +text-decoration-line: overline underline line-through; /* 複数の装飾線 */ + +/* グローバル値 */ +text-decoration-line: inherit; +text-decoration-line: initial; +text-decoration-line: revert; +text-decoration-line: unset; +``` + +`text-decoration-line` プロパティは `none` または以下のリストにある **1 つ以上の**空白で区切られた値を指定します。 + +### 値 + +- `none` + - : テキストの装飾を行いません。 +- `underline` + - : テキストの各行に下線を引きます。 +- `overline` + - : テキストの各行の上線を引きます。 +- `line-through` + - : テキストの各行の中央を貫く線を引きます。 +- `blink` {{deprecated_inline}} + - : テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は**非推奨**であり、 [CSS アニメーション](/ja/docs/Web/CSS/animation)に取って代わりました。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### 基本的な例 + +```html +<p class="wavy">こちらのテキストには赤い波線の下線が付いています。</p> +<p class="both">このテキストには上線と下線がついています。</p> +``` + +```css +.wavy { + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: red; +} + +.both { + text-decoration-line: underline overline; +} +``` + +{{ EmbedLiveSample('Examples', '', '', '') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。 diff --git a/files/ja/web/css/text-decoration-skip-ink/index.html b/files/ja/web/css/text-decoration-skip-ink/index.html deleted file mode 100644 index 587f6629c7..0000000000 --- a/files/ja/web/css/text-decoration-skip-ink/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: text-decoration-skip-ink -slug: Web/CSS/text-decoration-skip-ink -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Experimental - - Reference - - Web - - text-decoration-skip-ink - - ウェブ - - レイアウト -translation_of: Web/CSS/text-decoration-skip-ink ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-skip-ink</code></strong> プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。</span></p> - -<div>{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p><code>text-decoration-skip-ink</code> は {{cssxref("text-decoration")}} 一括指定の一部ではありません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 単一キーワード */ -text-decoration-skip-ink: none; -text-decoration-skip-ink: auto; -text-decoration-skip-ink: all; - -/* グローバルキーワード */ -text-decoration-skip: inherit; -text-decoration-skip: initial; -text-decoration-skip: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。</dd> - <dt><code>auto</code></dt> - <dd>既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う<em>可能性があります</em>。つまり、線が文字を横切ろうとするところで中断されます。</dd> - <dt><code>all</code></dt> - <dd>ブラウザーは、下線や上線が文字に触れたり近づいたりしないように<em>必ず</em>中断を行います。これは、 <code>auto</code> の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。</dd> - <dd><img alt='"text-decoration-skip-ink" の例' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>You should go on a quest for a cup of coffee.</p> -<p class="no-skip-ink">Or maybe you'd prefer some tea?</p> -<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> -<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[4]">p { - font-size: 1.5em; - text-decoration: underline blue; - text-decoration-skip-ink: auto; /* this is the default anyway */ -} - -.no-skip-ink { - text-decoration-skip-ink: none; -} - -.skip-ink-all{ - text-decoration-skip-ink: all; -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples", "100%", 250)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}</td> - <td>{{Spec2("CSS4 Text Decoration")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-decoration-skip-ink")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li>{{cssxref('text-decoration')}}</li> - <li>{{cssxref('text-decoration-skip')}}</li> -</ul> diff --git a/files/ja/web/css/text-decoration-skip-ink/index.md b/files/ja/web/css/text-decoration-skip-ink/index.md new file mode 100644 index 0000000000..26a2734684 --- /dev/null +++ b/files/ja/web/css/text-decoration-skip-ink/index.md @@ -0,0 +1,104 @@ +--- +title: text-decoration-skip-ink +slug: Web/CSS/text-decoration-skip-ink +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Experimental + - レイアウト + - Reference + - Web + - recipe:css-property + - text-decoration-skip-ink +browser-compat: css.properties.text-decoration-skip-ink +translation_of: Web/CSS/text-decoration-skip-ink +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`text-decoration-skip-ink`** プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。 + +{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}} + +`text-decoration-skip-ink` は {{cssxref("text-decoration")}} 一括指定の一部ではありません。 + +## 構文 + +```css +/* 単一キーワード */ +text-decoration-skip-ink: none; +text-decoration-skip-ink: auto; +text-decoration-skip-ink: all; + +/* グローバルキーワード */ +text-decoration-skip: inherit; +text-decoration-skip: initial; +text-decoration-skip-ink: revert; +text-decoration-skip: unset; +``` + +### 値 + +- `none` + - : 下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。 +- `auto` + - : 既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う*可能性があります*。つまり、線が文字を横切ろうとするところで中断されます。 +- `all` + + - : ブラウザーは、下線や上線が文字に触れたり近づいたりしないように*必ず*中断を行います。これは、 `auto` の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。 + +  + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>You should go on a quest for a cup of coffee.</p> +<p class="no-skip-ink">Or maybe you'd prefer some tea?</p> +<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> +<p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> +``` + +### CSS + +```css +p { + font-size: 1.5em; + text-decoration: underline blue; + text-decoration-skip-ink: auto; /* this is the default anyway */ +} + +.no-skip-ink { + text-decoration-skip-ink: none; +} + +.skip-ink-all{ + text-decoration-skip-ink: all; +} +``` + +### Result + +{{EmbedLiveSample("Examples", "100%", 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref('text-decoration')}} +- {{cssxref('text-decoration-skip')}} diff --git a/files/ja/web/css/text-decoration-skip/index.html b/files/ja/web/css/text-decoration-skip/index.html deleted file mode 100644 index a429cc4cb6..0000000000 --- a/files/ja/web/css/text-decoration-skip/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: text-decoration-skip -slug: Web/CSS/text-decoration-skip -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Experimental - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/text-decoration-skip ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>text-decoration-skip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。</span>これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。</p> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。</p> -</div> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -text-decoration-skip: none; -text-decoration-skip: objects; -text-decoration-skip: spaces; -text-decoration-skip: edges; -text-decoration-skip: box-decoration; - -/* 複数のキーワード */ -text-decoration-skip: objects spaces; -text-decoration-skip: leading-spaces trailing-spaces; -text-decoration-skip: objects edges box-decoration; - -/* グローバル値 */ -text-decoration-skip: inherit; -text-decoration-skip: initial; -text-decoration-skip: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。</dd> - <dt><code>objects</code></dt> - <dd>要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。</dd> - <dt><code>spaces</code></dt> - <dd>すべての空白をスキップします。すべての <a href="https://www.unicode.org/reports/tr44/#White_Space">Unicode ホワイトスペース文字</a>、すべての単語区切りに加えて、子孫の {{cssxref("letter-spacing")}} または {{cssxref("word-spacing")}} すべてです。</dd> - <dt><code>leading-spaces</code></dt> - <dd>先頭の空白のみがスキップされるという点を除いて、 <code>spaces</code> と同じです。</dd> - <dt><code>trailing-spaces</code></dt> - <dd>末尾の空白のみがスキップされるという点を除いて、 <code>spaces</code> と同じです。</dd> - <dt><code>edges</code></dt> - <dd>テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語で、区切って下線を引くのに重要です。)</dd> - <dd><img alt='"text-decoration-skip: edges;" の例です。' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png"></dd> - <dt><code>box-decoration</code></dt> - <dd>テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。<em>装飾ボックス</em>はボックスの装飾の上に描画を行いません。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Hey, grab a cup of <em>coffee!</em></p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[4]">p { - margin: 0; - font-size: 3em; - text-decoration: underline; - text-decoration-skip: edges; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", "100%", 150)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td> - <td>{{Spec2("CSS4 Text Decoration")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-decoration-skip")}}</p> diff --git a/files/ja/web/css/text-decoration-skip/index.md b/files/ja/web/css/text-decoration-skip/index.md new file mode 100644 index 0000000000..3c9c0ddab5 --- /dev/null +++ b/files/ja/web/css/text-decoration-skip/index.md @@ -0,0 +1,108 @@ +--- +title: text-decoration-skip +slug: Web/CSS/text-decoration-skip +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Experimental + - レイアウト + - Reference + - Web + - recipe:css-property +browser-compat: css.properties.text-decoration-skip +translation_of: Web/CSS/text-decoration-skip +--- +{{CSSRef}} + +**`text-decoration-skip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。 + +> **Note:** 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。 + +```css +/* キーワード値 */ +text-decoration-skip: none; +text-decoration-skip: objects; +text-decoration-skip: spaces; +text-decoration-skip: edges; +text-decoration-skip: box-decoration; + +/* 複数のキーワード */ +text-decoration-skip: objects spaces; +text-decoration-skip: leading-spaces trailing-spaces; +text-decoration-skip: objects edges box-decoration; + +/* グローバル値 */ +text-decoration-skip: inherit; +text-decoration-skip: initial; +text-decoration-skip: revert; +text-decoration-skip: unset; +``` + +## 構文 + +### 値 + +- `none` + - : 何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。 +- `objects` + - : 要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。 +- `spaces` + - : すべての空白をスキップします。すべての [Unicode ホワイトスペース文字](https://www.unicode.org/reports/tr44/#White_Space)、すべての単語区切りに加えて、子孫の {{cssxref("letter-spacing")}} または {{cssxref("word-spacing")}} すべてです。 +- `leading-spaces` + - : 先頭の空白のみがスキップされるという点を除いて、 `spaces` と同じです。 +- `trailing-spaces` + - : 末尾の空白のみがスキップされるという点を除いて、 `spaces` と同じです。 +- `edges` + + - : テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語では、区切って下線を引くのに重要です。) + +  + +- `box-decoration` + - : テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。*装飾ボックス*はボックスの装飾の上に描画を行いません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Skipping_edges">エッジをスキップ</h3> + +#### HTML + +```html +<p>Hey, grab a cup of <em>coffee!</em></p> +``` + +#### CSS + +```css +p { + margin: 0; + font-size: 3em; + text-decoration: underline; + text-decoration-skip: edges; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skipping_edges", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`text-decoration-skip-ink`](/ja/docs/Web/CSS/text-decoration-skip-ink) diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html deleted file mode 100644 index 76e20dd2f2..0000000000 --- a/files/ja/web/css/text-decoration-style/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: text-decoration-style -slug: Web/CSS/text-decoration-style -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Layout - - Reference - - レイアウト -translation_of: Web/CSS/text-decoration-style ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-style</code></strong> プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され <code>text-decoration-line</code> で定義された線ごとに異なる種類を定義する方法はありません。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。</p> - -<p>線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -text-decoration-style: solid; -text-decoration-style: double; -text-decoration-style: dotted; -text-decoration-style: dashed; -text-decoration-style: wavy; - -/* グローバル値 */ -text-decoration-style: inherit; -text-decoration-style: initial; -text-decoration-style: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>solid</dt> - <dd>単独線を描画します。</dd> - <dt>double</dt> - <dd>二重線を描画します。</dd> - <dt>dotted</dt> - <dd>点線を描画します。</dd> - <dt>dashed</dt> - <dd>破線を描画します。</dd> - <dt>wavy</dt> - <dd>波線を描画します。</dd> - <dt>-moz-none{{ non-standard_inline }}</dt> - <dd>線を描画しません。代わりに {{ cssxref("text-decoration-line") }}<code>: none</code> を使用してください。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: css" class="hidden">.example { - -moz-text-decoration-line: underline; - -moz-text-decoration-style: wavy; - -moz-text-decoration-color: red; - -webkit-text-decoration-line: underline; - -webkit-text-decoration-style: wavy; - -webkit-text-decoration-color: red; -}</pre> - -<pre class="brush: css">.wavy { - text-decoration-line: underline; - text-decoration-style: wavy; - text-decoration-color: red; -} -</pre> - -<pre class="brush: html"><p class="wavy">This text has a wavy red line beneath it.</p> -</pre> - -<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td> - <td>{{ Spec2('CSS3 Text Decoration') }}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-decoration-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> -</ul> diff --git a/files/ja/web/css/text-decoration-style/index.md b/files/ja/web/css/text-decoration-style/index.md new file mode 100644 index 0000000000..c57688cb8f --- /dev/null +++ b/files/ja/web/css/text-decoration-style/index.md @@ -0,0 +1,109 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - レイアウト + - Reference + - recipe:css-property +browser-compat: css.properties.text-decoration-style +translation_of: Web/CSS/text-decoration-style +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`text-decoration-style`** プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され `text-decoration-line` で定義された線ごとに異なる種類を定義する方法はありません。 + +{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}} + +文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{ HTMLElement("del") }} や {{ HTMLElement("s") }} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。 + +線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。 + +## 構文 + +```css +/* キーワード値 */ +text-decoration-style: solid; +text-decoration-style: double; +text-decoration-style: dotted; +text-decoration-style: dashed; +text-decoration-style: wavy; + +/* グローバル値 */ +text-decoration-style: inherit; +text-decoration-style: initial; +text-decoration-style: revert; +text-decoration-style: unset; +``` + +### 値 + +- solid + - : 単独線を描画します。 +- double + - : 二重線を描画します。 +- dotted + - : 点線を描画します。 +- dashed + - : 破線を描画します。 +- wavy + - : 波線を描画します。 +- \-moz-none{{ non-standard_inline }} + - : 線を描画しません。代わりに {{ cssxref("text-decoration-line") }}`: none` を使用してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +<h3 id="Setting_a_wavy_underline">波線の下線を設定</h3> + +```css +.example { + -moz-text-decoration-line: underline; + -moz-text-decoration-style: wavy; + -moz-text-decoration-color: red; + -webkit-text-decoration-line: underline; + -webkit-text-decoration-style: wavy; + -webkit-text-decoration-color: red; +} +``` + +#### CSS + +```css +.wavy { + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: red; +} +``` + +#### HTML + +```html +<p class="wavy">このテキストには付近に赤い波線があります。</p> +``` + +#### Results + +{{ EmbedLiveSample('Setting_a_wavy_underline', '', '', '') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。 diff --git a/files/ja/web/css/text-decoration-thickness/index.html b/files/ja/web/css/text-decoration-thickness/index.html deleted file mode 100644 index 63fcce1a71..0000000000 --- a/files/ja/web/css/text-decoration-thickness/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: text-decoration-thickness -slug: Web/CSS/text-decoration-thickness -tags: - - CSS - - CSS Text Decoration - - Property - - Reference - - 'recipe:css-property' - - text-decoration - - text-decoration-thickness -translation_of: Web/CSS/text-decoration-thickness ---- -<div>{{CSSRef}}</div> - -<p><strong><code>text-decoration-thickness</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 単独のキーワード */ -text-decoration-thickness: auto; -text-decoration-thickness: from-font; - -/* 長さ */ -text-decoration-thickness: 0.1em; -text-decoration-thickness: 3px; - -/* パーセント値 */ -text-decoration-thickness: 10%; - -/* グローバル値 */ -text-decoration-thickness: inherit; -text-decoration-thickness: initial; -text-decoration-thickness: unset; -</pre> - -<h3 id="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>ブラウザーがテキスト装飾線の適切な太さを選択します。</dd> - <dt><code>from-font</code></dt> - <dd>フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 <code>auto</code> が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。</dd> - <dt><code><length></code></dt> - <dd>テキスト装飾線の太さを {{cssxref('length')}} として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。</dd> - <dt><code><percentage></code></dt> - <dd>テキスト装飾線の太さを現在のフォントの <strong>1em</strong> に対する {{cssxref('percentage')}} で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。</dd> -</dl> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="Varying_thickness">様々な太さ</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p class="thin">赤い 1px の下線を引いたテキストです。</p> -<p class="thick">赤い 5px の下線を引いたテキストです。</p> -<p class="shorthand">これは同等の一括指定を使用しています。</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.thin { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-color: red; - text-decoration-thickness: 1px; -} - -.thick { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-color: red; - text-decoration-thickness: 5px; -} - -.shorthand { - text-decoration: underline solid red 5px; -}</pre> - -<h4 id="Results">結果</h4> - -<p>{{ EmbedLiveSample('Varying_thickness', '', '', '') }}</p> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}</td> - <td>{{Spec2('CSS4 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div class="notecard note"> -<p><strong>注</strong>: このプロパティは <code>text-decoration-width</code> と呼ばれていましたが、 2019 年に <code>text-decoration-thickness</code> に更新されました。</p> -</div> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-decoration-thickness")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("text-decoration")}}</li> - <li>{{cssxref("text-underline-offset")}}</li> -</ul> diff --git a/files/ja/web/css/text-decoration-thickness/index.md b/files/ja/web/css/text-decoration-thickness/index.md new file mode 100644 index 0000000000..b2d8586caf --- /dev/null +++ b/files/ja/web/css/text-decoration-thickness/index.md @@ -0,0 +1,110 @@ +--- +title: text-decoration-thickness +slug: Web/CSS/text-decoration-thickness +tags: + - CSS + - CSS テキスト装飾 + - プロパティ + - Reference + - recipe:css-property + - text-decoration + - text-decoration-thickness +browser-compat: css.properties.text-decoration-thickness +translation_of: Web/CSS/text-decoration-thickness +--- +{{CSSRef}} + +**`text-decoration-thickness`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。 + +## 構文 + +```css +/* 単独のキーワード */ +text-decoration-thickness: auto; +text-decoration-thickness: from-font; + +/* 長さ */ +text-decoration-thickness: 0.1em; +text-decoration-thickness: 3px; + +/* パーセント値 */ +text-decoration-thickness: 10%; + +/* グローバル値 */ +text-decoration-thickness: inherit; +text-decoration-thickness: initial; +text-decoration-thickness: revert; +text-decoration-thickness: unset; +``` + +### 値 + +- `auto` + - : ブラウザーがテキスト装飾線の適切な太さを選択します。 +- `from-font` + - : フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、 `auto` が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。 +- `<length>` + - : テキスト装飾線の太さを {{cssxref('length')}} として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。 +- `<percentage>` + - : テキスト装飾線の太さを現在のフォントの **1em** に対する {{cssxref('percentage')}} で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +<h3 id="Varying_thickness">様々な太さ</h3> + +#### HTML + +```html +<p class="thin">赤い 1px の下線を引いたテキストです。</p> +<p class="thick">赤い 5px の下線を引いたテキストです。</p> +<p class="shorthand">これは同等の一括指定を使用しています。</p> +``` + +#### CSS + +```css +.thin { + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-color: red; + text-decoration-thickness: 1px; +} + +.thick { + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-color: red; + text-decoration-thickness: 5px; +} + +.shorthand { + text-decoration: underline solid red 5px; +} +``` + +#### Results + +{{ EmbedLiveSample('Varying_thickness', '', '', '') }} + +## 仕様書 + +{{Specifications}} + +> **Note:** このプロパティは `text-decoration-width` と呼ばれていましたが、 2019 年に `text-decoration-thickness` に更新されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-decoration")}} +- {{cssxref("text-underline-offset")}} diff --git a/files/ja/web/css/text-decoration/index.html b/files/ja/web/css/text-decoration/index.html deleted file mode 100644 index 8e77aba241..0000000000 --- a/files/ja/web/css/text-decoration/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: text-decoration -slug: Web/CSS/text-decoration -tags: - - CSS - - CSS Property - - CSS Text Decoration - - Reference - - 'recipe:css-shorthand-property' - - text-decoration - - text-decoration-color - - text-decoration-line - - text-decoration-style -translation_of: Web/CSS/text-decoration ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>text-decoration</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、テキストの装飾的な線の表示を設定します。</span>これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> - -<p>文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <code><p>This text has <em>some emphasized words</em> in it.</p></code> というマークアップと、 <code>p { text-decoration: underline; }</code> のスタイル規則では、段落全体に下線が引かれます。 <code>em { text-decoration: none; }</code> のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 <code>em { text-decoration: overline; }</code> の規則で "some emphasized words" に第二の装飾が施されます。</p> - -<h2 id="Constituent_properties">構成要素のプロパティ</h2> - -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> - -<ul> - <li><a href="/ja/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li> -</ul> - -<h2 id="Syntax">構文</h2> - -<p><code>text-decoration</code> プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。</p> - -<h3 id="Values">値</h3> - -<dl> - <dt>{{cssxref("text-decoration-line")}}</dt> - <dd>使用する装飾の種類を設定します。 <code>underline</code> や <code>line-through</code> などです。</dd> - <dt>{{cssxref("text-decoration-color")}}</dt> - <dd>装飾の色を設定します。</dd> - <dt>{{cssxref("text-decoration-style")}}</dt> - <dd>装飾に使用する線のスタイルを設定します。 <code>solid</code>, <code>wavy</code>, <code>dashed</code> などです。</dd> - <dt>{{cssxref("text-decoration-thickness")}}</dt> -<dd>装飾に使われる線の太さを設定します。</dd> -</dl> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="Demonstration_of_text-decoration_values">text-decoration の値のデモ</h3> - -<pre class="brush: css">.under { - text-decoration: underline red; -} - -.over { - text-decoration: wavy overline lime; -} - -.line { - text-decoration: line-through; -} - -.plain { - text-decoration: none; -} - -.underover { - text-decoration: dashed underline overline; -} - -.thick { - text-decoration: solid underline purple 4px; -} - -.blink { - text-decoration: blink; -} -</pre> - -<pre class="brush: html"><p class="under">This text has a line underneath it.</p> -<p class="over">This text has a line over it.</p> -<p class="line">This text has a line going through it.</p> -<p>This <a class="plain" href="#">link will not be underlined</a>, - as links generally are by default. Be careful when removing - the text decoration on anchors since users often depend on - the underline to denote hyperlinks.</p> -<p class="underover">This text has lines above <em>and</em> below it.</p> -<p class="thick">This text has a really thick purple underline in supporting browsers.</p> -<p class="blink">This text might blink for you, - depending on the browser you use.</p> -</pre> - -<p>{{EmbedLiveSample('Examples','auto','320')}}</p> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Text Decoration')}}</td> - <td>{{Spec2('CSS4 Text Decoration')}}</td> - <td>{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>実質的な変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-decoration")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} です。</li> - <li>{{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。</li> -</ul> diff --git a/files/ja/web/css/text-decoration/index.md b/files/ja/web/css/text-decoration/index.md new file mode 100644 index 0000000000..4f93ab28ee --- /dev/null +++ b/files/ja/web/css/text-decoration/index.md @@ -0,0 +1,126 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.text-decoration +translation_of: Web/CSS/text-decoration +--- +{{CSSRef}} + +**`text-decoration`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、テキストの装飾的な線の表示を設定します。これは {{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。 + +{{EmbedInteractiveExample("pages/css/text-decoration.html")}} + +文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、`<p>This text has <em>some emphasized words</em> in it.</p>` というマークアップと、 `p { text-decoration: underline; }` のスタイル規則では、段落全体に下線が引かれます。 `em { text-decoration: none; }` のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 `em { text-decoration: overline; }` の規則で "some emphasized words" に第二の装飾が施されます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`text-decoration-color`](/ja/docs/Web/CSS/text-decoration-color) +- [`text-decoration-line`](/ja/docs/Web/CSS/text-decoration-line) +- [`text-decoration-style`](/ja/docs/Web/CSS/text-decoration-style) +- [`text-decoration-thickness`](/ja/docs/Web/CSS/text-decoration-thickness) + +## 構文 + +```css +text-decoration: underline; +text-decoration: overline red; +text-decoration: none; + +/* グローバル値 */ +text-decoration: inherit; +text-decoration: initial; +text-decoration: revert; +text-decoration: unset; +``` + +`text-decoration` プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。 + +### 値 + +- {{cssxref("text-decoration-line")}} + - : 使用する装飾の種類を設定します。 `underline` や `line-through` などです。 +- {{cssxref("text-decoration-color")}} + - : 装飾の色を設定します。 +- {{cssxref("text-decoration-style")}} + - : 装飾に使用する線のスタイルを設定します。 `solid`, `wavy`, `dashed` などです。 +- {{cssxref("text-decoration-thickness")}} + - : 装飾に使われる線の太さを設定します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### text-decoration の値のデモ + +```css +.under { + text-decoration: underline red; +} + +.over { + text-decoration: wavy overline lime; +} + +.line { + text-decoration: line-through; +} + +.plain { + text-decoration: none; +} + +.underover { + text-decoration: dashed underline overline; +} + +.thick { + text-decoration: solid underline purple 4px; +} + +.blink { + text-decoration: blink; +} +``` + +```html +<p class="under">This text has a line underneath it.</p> +<p class="over">This text has a line over it.</p> +<p class="line">This text has a line going through it.</p> +<p>This <a class="plain" href="#">link will not be underlined</a>, + as links generally are by default. Be careful when removing + the text decoration on anchors since users often depend on + the underline to denote hyperlinks.</p> +<p class="underover">This text has lines above <em>and</em> below it.</p> +<p class="thick">This text has a really thick purple underline in supporting browsers.</p> +<p class="blink">This text might blink for you, + depending on the browser you use.</p> +``` + +{{EmbedLiveSample('Examples','auto','320')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-decoration-style")}} です。 +- {{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。 diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html deleted file mode 100644 index 44da77376c..0000000000 --- a/files/ja/web/css/text-emphasis-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: text-emphasis-color -slug: Web/CSS/text-emphasis-color -tags: - - CSS - - CSS スタイル - - CSS テキスト装飾 - - CSS プロパティ - - HTML 色 - - Reference - - Styling HTML - - Text Emphasis - - 'recipe:css-property' - - text-decoration-color -browser-compat: css.properties.text-emphasis-color -translation_of: Web/CSS/text-emphasis-color ---- -<div>{{CSSRef}}</div> - -<p><strong><code>text-emphasis-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</p> - -<pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis-color: currentcolor; - -/* <color> */ -text-emphasis-color: #555; -text-emphasis-color: blue; -text-emphasis-color: rgba(90, 200, 160, 0.8); -text-emphasis-color: transparent; - -/* グローバル値 */ -text-emphasis-color: inherit; -text-emphasis-color: initial; -text-emphasis-color: revert; -text-emphasis-color: unset; -</pre> - -<h2 id="Syntax">構文</h2> - -<h3 id="Values">値</h3> - -<dl> - <dt><code><color></code></dt> - <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentcolor</code> になります。</dd> -</dl> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h3 id="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="Emphasis_with_a_color_and_custom_character">色と固有の文字で強調</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">em { - text-emphasis-color: green; - text-emphasis-style: "*"; -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p>Here's an example:</p> - -<em>This has emphasis marks!</em> -</pre> - -<h4 id="Result">結果</h4> - -<p>{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}</p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<color>")}} データ型</li> - <li>他の強調記号に関するプロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, {{cssxref("text-emphasis-position")}}.</li> - <li>色に関する他のプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> -</ul> diff --git a/files/ja/web/css/text-emphasis-color/index.md b/files/ja/web/css/text-emphasis-color/index.md new file mode 100644 index 0000000000..2071d50a60 --- /dev/null +++ b/files/ja/web/css/text-emphasis-color/index.md @@ -0,0 +1,94 @@ +--- +title: text-emphasis-color +slug: Web/CSS/text-emphasis-color +tags: + - CSS + - CSS プロパティ + - CSS スタイル + - CSS テキスト装飾 + - HTML 色 + - Reference + - HTML のスタイル付け + - テキストの強調 + - recipe:css-property + - text-decoration-color +browser-compat: css.properties.text-emphasis-color +translation_of: Web/CSS/text-emphasis-color +--- +{{CSSRef}} + +**`text-emphasis-color`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。 + +```css +/* 初期値 */ +text-emphasis-color: currentcolor; + +/* <color> */ +text-emphasis-color: #555; +text-emphasis-color: blue; +text-emphasis-color: rgba(90, 200, 160, 0.8); +text-emphasis-color: transparent; + +/* グローバル値 */ +text-emphasis-color: inherit; +text-emphasis-color: initial; +text-emphasis-color: revert; +text-emphasis-color: unset; +``` + +## 構文 + +### 値 + +- `<color>` + - : 記号の色を定義します。 color が存在しない場合、既定で `currentcolor` になります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +<h3 id="Emphasis_with_a_color_and_custom_character">色と固有の文字で強調</h3> + +#### CSS + +```css +em { + -webkit-text-emphasis-color: green; + text-emphasis-color: green; + -webkit-text-emphasis-style: "*"; + text-emphasis-style: "*"; +} +``` + +#### HTML + +```html +<p>例:</p> + +<em>これには圏点があります！</em> +``` + +#### Result + +{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<color>")}} データ型 +- 他の強調記号に関するプロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, {{cssxref("text-emphasis-position")}}. +- 色に関する他のプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/text-emphasis-position/index.html b/files/ja/web/css/text-emphasis-position/index.html deleted file mode 100644 index 7ba827b564..0000000000 --- a/files/ja/web/css/text-emphasis-position/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: text-emphasis-position -slug: Web/CSS/text-emphasis-position -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference -translation_of: Web/CSS/text-emphasis-position ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>text-emphasis-position</code></strong> プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。</p> - -<pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis-position: over right; - -/* キーワード値 */ -text-emphasis-position: over left; -text-emphasis-position: under right; -text-emphasis-position: under left; - -text-emphasis-position: left over; -text-emphasis-position: right under; -text-emphasis-position: left under; - -/* グローバル値 */ -text-emphasis-position: inherit; -text-emphasis-position: initial; -text-emphasis-position: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Preferred_position" name="Preferred_position">望ましい位置</h2> - -<p>圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は <span class="css">over right</span> です。一方中国語では、望ましい位置は <span class="css">under right</span> となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。</p> - -<table> - <caption>望ましい圏点とルビの位置</caption> - <thead> - <tr> - <th rowspan="2" scope="col">言語</th> - <th colspan="2" scope="col">望ましい位置</th> - <th colspan="2" rowspan="2" scope="col">説明</th> - </tr> - <tr> - <th>横書き</th> - <th>縦書き</th> - </tr> - </thead> - <tbody> - <tr> - <td>日本語</td> - <td rowspan="2">over</td> - <td rowspan="2">right</td> - <td rowspan="2"><img alt="日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="日本語のテキストの上に適用された圏点 (分かりやすいよう青で表示)"></td> - <td rowspan="3"><img alt="日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="日本語のテキストの右に適用された圏点"></td> - </tr> - <tr> - <td>モンゴル語</td> - </tr> - <tr> - <td>中国語</td> - <td>under</td> - <td>right</td> - <td><img alt="中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="中国語のテキストの下に適用された圏点 (分かりやすいよう青で表示)"></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>メモ</strong>: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 <code>text-emphasis-position</code> を設定することはできず、また初期化されることもありません。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><dfn>over</dfn></code></dt> - <dd>横書きモードでテキストの上に圏点を描きます。</dd> - <dt><code><dfn>under</dfn></code></dt> - <dd>横書きモードでテキストの下に圏点を描きます。</dd> - <dt><code><dfn>right</dfn></code></dt> - <dd>縦書きモードでテキストの右に圏点を描きます。</dd> - <dt><code><dfn>left</dfn></code></dt> - <dd>縦書きモードでテキストの左に圏点を描きます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。</p> - -<pre class="brush: css">ruby { - text-emphasis: none; -} -</pre> - -<p>編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。</p> - -<pre class="brush: css">em { - text-emphasis: dot; /* <em> 要素に text-emphasis を設定 */ -} - -em rt { - display: none; /* <em> 要素内のルビを隠す */ -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-emphasis-position")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}</li> -</ul> diff --git a/files/ja/web/css/text-emphasis-position/index.md b/files/ja/web/css/text-emphasis-position/index.md new file mode 100644 index 0000000000..5909273bf9 --- /dev/null +++ b/files/ja/web/css/text-emphasis-position/index.md @@ -0,0 +1,158 @@ +--- +title: text-emphasis-position +slug: Web/CSS/text-emphasis-position +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Reference + - recipe:css-property +browser-compat: css.properties.text-emphasis-position +translation_of: Web/CSS/text-emphasis-position +--- +{{CSSRef}} + +**`text-emphasis-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。 + +```css +/* 初期値 */ +text-emphasis-position: over right; + +/* キーワード値 */ +text-emphasis-position: over left; +text-emphasis-position: under right; +text-emphasis-position: under left; + +text-emphasis-position: left over; +text-emphasis-position: right under; +text-emphasis-position: left under; + +/* グローバル値 */ +text-emphasis-position: inherit; +text-emphasis-position: initial; +text-emphasis-postition: revert; +text-emphasis-position: unset; +``` + +## 構文 + +### 値 + +- `over` + - : 横書きモードでテキストの上に圏点を描きます。 +- `under` + - : 横書きモードでテキストの下に圏点を描きます。 +- `right` + - : 縦書きモードでテキストの右に圏点を描きます。 +- `left` + - : 縦書きモードでテキストの左に圏点を描きます。 + +## Description + +圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は `over right` です。一方、中国語では、望ましい位置は `under right` となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。 + +<table> + <caption> + 望ましい圏点とルビの位置 + </caption> + <thead> + <tr> + <th rowspan="2" scope="col">言語</th> + <th colspan="2" scope="col">望ましい位置</th> + <th colspan="2" rowspan="2" scope="col">図</th> + </tr> + <tr> + <th>横書き</th> + <th>縦書き</th> + </tr> + </thead> + <tbody> + <tr> + <td>日本語</td> + <td rowspan="3">over</td> + <td rowspan="3">right</td> + <td rowspan="3"> + <img + alt="日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。" + src="text-emphasis-ja.png" + title="日本語のテキストの上に適用された圏点 (分かりやすいよう青で表示)" + /> + </td> + <td rowspan="4"> + <img + alt="日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。" + src="text-emphasis-v.gif" + title="日本語のテキストの右に適用された圏点" + /> + </td> + </tr> + <tr> + <td>韓国語</td> + </tr> + <tr> + <td>モンゴル語</td> + </tr> + <tr> + <td>中国語</td> + <td>under</td> + <td>right</td> + <td> + <img + alt="中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。" + src="text-emphasis-zh.gif" + title="中国語のテキストの下に適用された圏点 (分かりやすいよう青で表示)" + /> + </td> + </tr> + </tbody> +</table> + +> **Note:** {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 `text-emphasis-position` を設定することはできず、また初期化されることもありません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +### ルビを圏点より優先させる場合 + +編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。 + +```css +ruby { + -webkit-text-emphasis: none; + text-emphasis: none; +} +``` + +### 圏点よりルビを優先させる場合 + +編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。 + +```css +em { + -webkit-text-emphasis: dot; + text-emphasis: dot; /* text-emphasis を <em> 要素に設定 */ +} + +em rt { + display: none; /* <em> 要素内のルビを隠す */ +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}} diff --git a/files/ja/web/css/text-emphasis-style/index.html b/files/ja/web/css/text-emphasis-style/index.html deleted file mode 100644 index 6c2e0bd827..0000000000 --- a/files/ja/web/css/text-emphasis-style/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: text-emphasis-style -slug: Web/CSS/text-emphasis-style -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference - - text-emphasis -translation_of: Web/CSS/text-emphasis-style ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-style</code></strong> プロパティは、圏点の表示を設定します。設定や解除に一括指定の {{cssxref("text-emphasis")}} を使用することもできます。</p> - -<pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis-style: none; /* 圏点なし */ - -/* <string> 値 */ -text-emphasis-style: 'x'; -text-emphasis-style: '点'; -text-emphasis-style: '\25B2'; -text-emphasis-style: '*'; -text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */ - -/* キーワード値 */ -text-emphasis-style: filled; -text-emphasis-style: open; -text-emphasis-style: dot; -text-emphasis-style: circle; -text-emphasis-style: double-circle; -text-emphasis-style: triangle; -text-emphasis-style: filled sesame; -text-emphasis-style: open sesame; - -/* グローバル値 */ -text-emphasis-style: inherit; -text-emphasis-style: initial; -text-emphasis-style: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>圏点なし。</dd> - <dt><code>filled</code></dt> - <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> - <dt><code>open</code></dt> - <dd>図形は中抜きになります。</dd> - <dt><code>dot</code></dt> - <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd> - <dt><code>circle</code></dt> - <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。</dd> - <dt><code>double-circle</code></dt> - <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd> - <dt><code>triangle</code></dt> - <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd> - <dt><code>sesame</code></dt> - <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は <code>'﹆'</code> (<code>U+FE46</code>) です。</dd> - <dt><code><string></code></dt> - <dd>記号として文字列を表示します。 <code><string></code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre><code>h2 { - text-emphasis-style: sesame; -}</code></pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-emphasis-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連プロパティ: {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}}</li> - <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li> -</ul> diff --git a/files/ja/web/css/text-emphasis-style/index.md b/files/ja/web/css/text-emphasis-style/index.md new file mode 100644 index 0000000000..834cc632d7 --- /dev/null +++ b/files/ja/web/css/text-emphasis-style/index.md @@ -0,0 +1,98 @@ +--- +title: text-emphasis-style +slug: Web/CSS/text-emphasis-style +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Reference + - recipe:css-property +browser-compat: css.properties.text-emphasis-style +translation_of: Web/CSS/text-emphasis-style +--- +{{CSSRef}} + +**`text-emphasis-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点の表示を設定します。設定やリセットに一括指定の {{cssxref("text-emphasis")}} を使用することもできます。 + +```css +/* 初期値 */ +text-emphasis-style: none; /* 圏点なし */ + +/* <string> 値 */ +text-emphasis-style: 'x'; +text-emphasis-style: '点'; +text-emphasis-style: '\25B2'; +text-emphasis-style: '*'; +text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */ + +/* キーワード値 */ +text-emphasis-style: filled; +text-emphasis-style: open; +text-emphasis-style: dot; +text-emphasis-style: circle; +text-emphasis-style: double-circle; +text-emphasis-style: triangle; +text-emphasis-style: filled sesame; +text-emphasis-style: open sesame; + +/* グローバル値 */ +text-emphasis-style: inherit; +text-emphasis-style: initial; +text-emphasis-style: revert; +text-emphasis-style: unset; +``` + +## 構文 + +### 値 + +- `none` + - : 圏点なし。 +- `filled` + - : 図形は単色で塗りつぶされます。 `filled` も `open` も指定されない場合は、これが既定値です。 +- `open` + - : 図形は中抜きになります。 +- `dot` + - : 記号として小さな円を表示します。 filled dot は `'•'` (`U+2022`)、 open dot は `'◦'` (`U+25E6`) です。 +- `circle` + - : 記号として大きな円を表示します。 filled circle は `'●'` (`U+25CF`)、 open circle は `'○'` (`U+25CB`) です。 +- `double-circle` + - : 記号として二重丸を表示します。 filled double-circle は `'◉'` (`U+25C9`)、 open double-circle は `'◎'` (`U+25CE`) です。 +- `triangle` + - : 記号として三角形を表示します。 filled triangle は `'▲'` (`U+25B2`)、 open triangle は `'△'` (`U+25B3`) です。 +- `sesame` + - : 記号としてゴマを表示します。 filled sesame は `'﹅'` (`U+FE45`)、 open sesame は `'﹆'` (`U+FE46`) です。 +- `<string>` + - : 記号として文字列を表示します。`<string>` には 1 *文字*を超える文字列を指定しないでください。ユーザーエージェントは、2 文字以上の書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +### 基本的な例 + +```css +h2 { + -webkit-text-emphasis-style: sesame; + text-emphasis-style: sesame; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連プロパティ: {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}} +- 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html deleted file mode 100644 index 6d0ae6bf2c..0000000000 --- a/files/ja/web/css/text-emphasis/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: text-emphasis -slug: Web/CSS/text-emphasis -tags: - - CSS - - CSS テキスト装飾 - - CSS プロパティ - - Reference - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - 一括指定プロパティ -translation_of: Web/CSS/text-emphasis ---- -<div>{{CSSRef}}</div> - -<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> - -<p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p> - -<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> - -<div class="note"> -<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> -</div> - -<h2 id="Constituent_properties">構成要素のプロパティ</h2> - -<p>このプロパティは以下のプロパティの一括指定です。</p> - -<ul> - <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li> - <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li> -</ul> - -<h2 id="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis: none; /* 圏点なし */ - -/* <string> 値 */ -text-emphasis: 'x'; -text-emphasis: '点'; -text-emphasis: '\25B2'; -text-emphasis: '*' #555; -text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */ - -/* キーワード値 */ -text-emphasis: filled; -text-emphasis: open; -text-emphasis: filled sesame; -text-emphasis: open sesame; - -/* 色と組み合わせたキーワード値 */ -text-emphasis: filled sesame #555; - -/* グローバル値 */ -text-emphasis: inherit; -text-emphasis: initial; -text-emphasis: revert; -text-emphasis: unset; -</pre> - -<h3 id="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>圏点なし。</dd> - <dt><code>filled</code></dt> - <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> - <dt><code>open</code></dt> - <dd>図形が中抜きになります。</dd> - <dt><code>dot</code></dt> - <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd> - <dt><code>circle</code></dt> - <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。</dd> - <dt><code>double-circle</code></dt> - <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd> - <dt><code>triangle</code></dt> - <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd> - <dt><code>sesame</code></dt> - <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd> - <dt><code><string></code></dt> - <dd>記号として文字列を表示します。 <code><string></code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> - <dt><code><color></code></dt> - <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd> -</dl> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> - -<p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">h2 { - text-emphasis: triangle #D55; -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><h2>これは重要です！</h2></pre> - -<h4 id="Result">結果</h4> - -<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li> - <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li> -</ul> diff --git a/files/ja/web/css/text-emphasis/index.md b/files/ja/web/css/text-emphasis/index.md new file mode 100644 index 0000000000..5cfe98ea06 --- /dev/null +++ b/files/ja/web/css/text-emphasis/index.md @@ -0,0 +1,128 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +tags: + - CSS + - CSS プロパティ + - CSS テキスト装飾 + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.text-emphasis +translation_of: Web/CSS/text-emphasis +--- +{{CSSRef}} + +**`text-emphasis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)です。 + +{{EmbedInteractiveExample("pages/css/text-emphasis.html")}} + +`text-emphasis` プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 `text-decoration` プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 `text-emphasis` は継承されます。これは、子孫に対して圏点を変更できることを意味します。 + +圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 `text-emphasis` は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。 + +> **Note:** `text-emphasis` は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。珍しくもこれを必要とするような場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`text-emphasis-color`](/ja/docs/Web/CSS/text-emphasis-color) +- [`text-emphasis-style`](/ja/docs/Web/CSS/text-emphasis-style) + +## 構文 + +```css +/* 初期値 */ +text-emphasis: none; /* 圏点なし */ + +/* <string> 値 */ +text-emphasis: 'x'; +text-emphasis: '点'; +text-emphasis: '\25B2'; +text-emphasis: '*' #555; +text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */ + +/* キーワード値 */ +text-emphasis: filled; +text-emphasis: open; +text-emphasis: filled sesame; +text-emphasis: open sesame; + +/* 色と組み合わせたキーワード値 */ +text-emphasis: filled sesame #555; + +/* グローバル値 */ +text-emphasis: inherit; +text-emphasis: initial; +text-emphasis: revert; +text-emphasis: unset; +``` + +### 値 + +- `none` + - : 圏点なし。 +- `filled` + - : 図形が単色で塗りつぶされます。 `filled` も `open` も指定されていない場合は、これが既定値です。 +- `open` + - : 図形が中抜きになります。 +- `dot` + - : 記号として小さな円を表示します。filled dot は `'•'` (`U+2022`)、open dot は `'◦'` (`U+25E6`) です。 +- `circle` + - : 記号として大きな円を表示します。filled circle は `'●'` (`U+25CF`)、open circle は `'○'` (`U+25CB`) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。 +- `double-circle` + - : 記号として二重丸を表示します。filled double-circle は `'◉'` (`U+25C9`)、open double-circle は `'◎'` (`U+25CE`) です。 +- `triangle` + - : 記号として三角形を表示します。filled triangle は `'▲'` (`U+25B2`)、open triangle は `'△'` (`U+25B3`) です。 +- `sesame` + - : 記号としてゴマを表示します。filled sesame は `'﹅'` (`U+FE45`)、open sesame は`'﹆'` (`U+FE46`) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。 +- `<string>` + - : 記号として文字列を表示します。 `<string>` には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。 +- `<color>` + - : 記号の色を定義します。 color を指定しない場合、既定では `currentcolor` です。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> + +この例は、見出しの各文字に三角形の圏点を付けて描画します。 + +#### CSS + +```css +h2 { + -webkit-text-emphasis: triangle #D55; + text-emphasis: triangle #D55; +} +``` + +#### HTML + +```html +<h2>これは重要です！</h2> +``` + +#### Result + +{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 90)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}} +- 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ diff --git a/files/ja/web/css/text-indent/index.html b/files/ja/web/css/text-indent/index.html deleted file mode 100644 index 8deb5c87e4..0000000000 --- a/files/ja/web/css/text-indent/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: text-indent -slug: Web/CSS/text-indent -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - レイアウト -translation_of: Web/CSS/text-indent ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>text-indent</code></strong> プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* <length> 値 */ -text-indent: 3mm; -text-indent: 40px; - -/* <percentage> 値 - 包含ブロックの幅に対する割合 */ -text-indent: 15%; - -/* Keyword values */ -text-indent: 5em each-line; -text-indent: 5em hanging; -text-indent: 5em hanging each-line; - -/* Global values */ -text-indent: inherit; -text-indent: initial; -text-indent: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>{{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。</dd> - <dt><code>each-line</code> {{experimental_inline}}</dt> - <dd><strong>強制的な改行</strong>の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし<strong>自動折り返し</strong>の次の行はインデントしません。</dd> - <dt><code>hanging</code> {{experimental_inline}}</dt> - <dd>インデントされる行が逆になります。つまり、先頭行<strong>以外の</strong>すべての行を字下げします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Simple_indent" name="Simple_indent">単純なインデントの例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> -<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { - text-indent: 5em; - background: powderblue; -}</pre> - -<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p> - -<h2 id="Percentage_indent_example" name="Percentage_indent_example">パーセント表記のインデントの例</h2> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> -<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></pre> - -<h3 id="CSS_2">CSS</h3> - -<pre class="brush: css">p { - text-indent: 30%; - background: plum; -}</pre> - -<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td><code>hanging</code> と <code>each-line</code> キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td><code>text-indent</code> がアニメーション可能に。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>display: inline-block</code> と無名ブロックボックスの場合の動作が明確に定義されるようになりました。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-indent")}}</p> diff --git a/files/ja/web/css/text-indent/index.md b/files/ja/web/css/text-indent/index.md new file mode 100644 index 0000000000..95e5a0fa47 --- /dev/null +++ b/files/ja/web/css/text-indent/index.md @@ -0,0 +1,195 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - 字下げ + - レイアウト + - Reference + - recipe:css-property + - text-indent +browser-compat: css.properties.text-indent +translation_of: Web/CSS/text-indent +--- +{{CSSRef}} + +**`text-indent`** は CSS のプロパティで、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。 + +{{EmbedInteractiveExample("pages/css/text-indent.html")}} + +包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。 + +## 構文 + +```css +/* <length> 値 */ +text-indent: 3mm; +text-indent: 40px; + +/* <percentage> 値 + 包含ブロックの幅に対する割合 */ +text-indent: 15%; + +/* Keyword values */ +text-indent: 5em each-line; +text-indent: 5em hanging; +text-indent: 5em hanging each-line; + +/* Global values */ +text-indent: inherit; +text-indent: initial; +text-indent: revert; +text-indent: unset; +``` + +### 値 + +- {{cssxref("<length>")}} + - : {{cssxref("<length>")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("<length>")}} をご覧ください。 +- {{cssxref("<percentage>")}} + - : 包含ブロックの幅の {{cssxref("<percentage>")}} 分だけ字下げされます。 +- `each-line` {{experimental_inline}} + - : *強制的な改行*の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし*自動折り返し*の次の行は字下げしません。 +- `hanging` {{experimental_inline}} + - : インデントされる行が逆になります。つまり、先頭行*以外の*すべての行を字下げします。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h2 id="Simple_indent">単純なインデントの例</h2> + +#### HTML + +```html +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +``` + +#### CSS + +```css +p { + text-indent: 5em; + background: powderblue; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Simple_indent','100%','100%') }} + +<h3 id="Skipping_indentation_on_the_first_paragraph">最初の段落の字下げをスキップ</h3> + +段落の字下げがある場合の一般的な組版では、最初の段落の字下げを省略します。_The Chicago Manual of Style_ によると、「中間見出しに続くテキストの最初の行は、完全に左端から始めてもよいし、通常の段落の字下げで字下げしてもよい」とされています。 + +最初の段落とそれ以降の段落を別扱いにするには、次の例のように[隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator)を使います。 + +#### HTML + +```html +<h2>Lorem ipsum</h2> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu +venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus. +Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros +et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac +sapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui +interdum.</p> + +<p>Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in, +tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi. +In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper. +Donec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar +elementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in +eleifend ante convallis sit amet.</p> + +<h2>Donec ullamcorper elit nisl</h2> + +<p>Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce +tempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia, +nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum +nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames +ac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus +lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam +velit.</p> + +<p>Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed +sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam +iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac +dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero, +sed euismod ipsum ullamcorper sed.</p> +``` + +#### CSS + +```css +p { + text-align: justify; + margin: 1em 0 0 0; +} +p + p { + text-indent: 2em; + margin: 0; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Skipping_indentation_on_the_first_paragraph','','500px') }} + +<h3 id="Percentage_indent">パーセント値の字下げ</h3> + +#### HTML + +```html +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> +``` + +#### CSS + +```css +p { + text-indent: 30%; + background: plum; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Percentage_indent','100%','100%') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を使用した HTML のスタイル付け](/ja/docs/Learn/CSS) +- 関連する CSS プロパティ: + + - [`text-justify`](/ja/docs/Web/CSS/text-justify) + - [`text-orientation`](/ja/docs/Web/CSS/text-orientation) + - [`text-overflow`](/ja/docs/Web/CSS/text-overflow) + - [`text-rendering`](/ja/docs/Web/CSS/text-rendering) + - [`text-transform`](/ja/docs/Web/CSS/text-transform) + +- [CSS テキスト装飾](/ja/docs/Web/CSS/CSS_Text_Decoration) CSS モジュール +- [CSS テキスト](/ja/docs/Web/CSS/CSS_Text) モジュール diff --git a/files/ja/web/css/text-justify/index.html b/files/ja/web/css/text-justify/index.html deleted file mode 100644 index 0c7a270d9f..0000000000 --- a/files/ja/web/css/text-justify/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: text-justify -slug: Web/CSS/text-justify -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - text-justify -translation_of: Web/CSS/text-justify ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>text-justify</code></strong> プロパティは、要素に {{cssxref("text-align")}}<code>: justify;</code> が設定された時にテキストに適用される両端揃えの種類を設定します。</p> - -<pre class="brush: css no-line-numbers">text-justify: none; -text-justify: auto; -text-justify: inter-word; -text-justify: inter-character; -text-justify: distribute; /* 非推奨の値 */ -</pre> - -<div>{{cssinfo}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>text-justify</code> プロパティは、以下の値のリストのうち一つのキーワードで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。</dd> - <dt><code>auto</code></dt> - <dd>ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは <code>text-justify</code> をまったく設定しない場合に使われる既定の揃え方です。</dd> - <dt><code>inter-word</code></dt> - <dd>単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。</dd> - <dt><code>inter-character</code></dt> - <dd>文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。</dd> - <dt><code>distribute</code> {{deprecated_inline}}</dt> - <dd><code>inter-character</code> と同じ動作を見せます。この値は後方互換性のためのものです。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<div class="hidden"> -<pre class="brush: html"><p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> -<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p></pre> -</div> - -<pre class="brush: css">p { - font-size: 1.5em; - border: 1px solid black; - padding: 10px; - width: 95%; - margin: 10px auto; - text-align: justify; -} - -.none { - text-justify: none; -} - -.auto { - text-justify: auto; -} - -.dist { - text-justify: distribute; -} - -.word { - text-justify: inter-word; -} - -.char { - text-justify: inter-character; -}</pre> - -<div>{{EmbedLiveSample("Examples","100%",400)}}</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div>{{Compat("css.properties.text-justify")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("text-align")}}</li> -</ul> diff --git a/files/ja/web/css/text-justify/index.md b/files/ja/web/css/text-justify/index.md new file mode 100644 index 0000000000..13781819fe --- /dev/null +++ b/files/ja/web/css/text-justify/index.md @@ -0,0 +1,110 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Reference + - recipe:css-property + - text-justify +browser-compat: css.properties.text-justify +translation_of: Web/CSS/text-justify +--- +{{CSSRef}} + +**`text-justify`** は CSS のプロパティで、要素に {{cssxref("text-align")}}`: justify;` が設定された時にテキストに適用される両端揃えの種類を設定します。 + +## 構文 + +```css +text-justify: none; +text-justify: auto; +text-justify: inter-word; +text-justify: inter-character; +text-justify: distribute; /* 非推奨の値 */ + +/* Global values */ +text-justify: inherit; +text-justify: initial; +text-justify: revert; +text-justify: unset; +``` + +### 値 + +- `none` + - : テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。 +- `auto` + - : ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは `text-justify` をまったく設定しない場合に使われる既定の揃え方です。 +- `inter-word` + - : 単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。 +- `inter-character` + - : 文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。 +- `distribute` {{deprecated_inline}} + - : `inter-character` と同じ動作を見せます。この値は後方互換性のためのものです。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +### text-justify の様々な値のデモ + +```html hidden +<p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p> +``` + +```css +p { + font-size: 1.5em; + border: 1px solid black; + padding: 10px; + width: 95%; + margin: 10px auto; + text-align: justify; +} + +.none { + text-justify: none; +} + +.auto { + text-justify: auto; +} + +.dist { + text-justify: distribute; +} + +.word { + text-justify: inter-word; +} + +.char { + text-justify: inter-character; +} +``` + +{{EmbedLiveSample("Examples","100%",400)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-align")}} diff --git a/files/ja/web/css/text-orientation/index.html b/files/ja/web/css/text-orientation/index.html deleted file mode 100644 index 268ca05408..0000000000 --- a/files/ja/web/css/text-orientation/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: text-orientation -slug: Web/CSS/text-orientation -tags: - - CSS - - CSS プロパティ - - CSS 書字方向 - - Reference - - 日本語処理 -translation_of: Web/CSS/text-orientation ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>text-orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が <code>horizontal-tb</code> 以外の場合) でのみ効果があります。</span>これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* キーワード値 */ -text-orientation: mixed; -text-orientation: upright; -text-orientation: sideways-right; -text-orientation: sideways; -text-orientation: use-glyph-orientation; - -/* グローバル値 */ -text-orientation: inherit; -text-orientation: initial; -text-orientation: unset; -</pre> - -<p><code>text-orientation</code> プロパティは、以下のリストから単一のキーワードとして指定されます。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>mixed</code></dt> - <dd>このキーワードは、横書きのみの文字を右に 90°回転させ、縦書き文字のグリフは自然にレイアウトされます。</dd> - <dt><code>upright</code></dt> - <dd>このキーワードは、横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。このキーワードは、すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの {{cssxref("direction")}} に <code>ltr</code> が指定されているものとします。</dd> - <dt><code>sideways</code></dt> - <dd>このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします。{{cssxref("writing-mode")}} が <code>vertical-rl</code> の場合は右へ回転、<code>vertical-lr</code> の場合は左へ回転します。</dd> - <dt><code>sideways-right</code></dt> - <dd>これは、互換性を維持するためのキーワードであり、<code>sideways</code> の別名です。</dd> - <dt><code>use-glyph-orientation</code></dt> - <dd>SVG 要素上で、このキーワードは、非推奨の SVG プロパティ <code>glyph-orientation-vertical</code> と <code>glyph-orientation-horizontal</code> の値を使用します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Lorem ipsum dolet semper quisquam.</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { - writing-mode: vertical-rl; - text-orientation: upright; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Examples')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}</td> - <td>{{Spec2('CSS3 Writing Modes')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-orientation")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}}</li> - <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> - <li><a href="https://www.w3.org/International/articles/vertical-text/">縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)</a></li> - <li>広範なブラウザーの対応状況テキスト結果: <a href="https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation">https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation</a></li> -</ul> diff --git a/files/ja/web/css/text-orientation/index.md b/files/ja/web/css/text-orientation/index.md new file mode 100644 index 0000000000..d8d66906d0 --- /dev/null +++ b/files/ja/web/css/text-orientation/index.md @@ -0,0 +1,94 @@ +--- +title: text-orientation +slug: Web/CSS/text-orientation +tags: + - CSS + - CSS プロパティ + - CSS Writing Modes + - Reference + - recipe:css-property + - 日本語処理 +browser-compat: css.properties.text-orientation +translation_of: Web/CSS/text-orientation +--- +{{CSSRef}} + +**`text-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が `horizontal-tb` 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。 + +{{EmbedInteractiveExample("pages/css/text-orientation.html")}} + +## 構文 + +```css +/* キーワード値 */ +text-orientation: mixed; +text-orientation: upright; +text-orientation: sideways-right; +text-orientation: sideways; +text-orientation: use-glyph-orientation; + +/* グローバル値 */ +text-orientation: inherit; +text-orientation: initial; +text-orientation: initial; +text-orientation: unset; +``` + +`text-orientation` プロパティは、以下のリストから単一のキーワードとして指定されます。 + +### 値 + +- `mixed` + - : 横書き用の文字を右に 90° 回転させ、縦書き用の文字は自然に配置します。既定値です。 +- `upright` + - : 横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。 {{cssxref("direction")}} の使用値は `ltr` に強制されます。 +- `sideways` + - : 全行を横書きで書いて 90° 回転したように配置します。 +- `sideways-right` + - : `sideways` の別名です。これは互換性のために維持されています。 +- `use-glyph-orientation` + - : SVG 要素上で、非推奨の SVG プロパティ `glyph-orientation-vertical` と `glyph-orientation-horizontal` の値を使用します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>Lorem ipsum dolet semper quisquam.</p> +``` + +### CSS + +```css +p { + writing-mode: vertical-rl; + text-orientation: upright; +} +``` + +### 結果 + +{{EmbedLiveSample('Examples')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}} +- [CSS 論理的プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties) +- [縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)](https://www.w3.org/International/articles/vertical-text/) +- 広範なブラウザーの対応状況のテスト結果: <https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation> diff --git a/files/ja/web/css/text-shadow/index.html b/files/ja/web/css/text-shadow/index.html deleted file mode 100644 index 1cfba9a47b..0000000000 --- a/files/ja/web/css/text-shadow/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: text-shadow -slug: Web/CSS/text-shadow -tags: - - CSS - - CSS Property - - CSS Styles - - CSS Text Decoration - - CSS スタイル - - CSS テキスト装飾 - - CSS プロパティ - - HTML Colors - - HTML Styles - - HTML スタイル - - HTML 色 - - Reference - - Styles - - Styling HTML - - color - - 'recipe:css-property' - - スタイル -translation_of: Web/CSS/text-shadow ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>text-shadow</code></strong> は CSS のプロパティで、テキストに影を追加します。文字列及びその<code><a href="/ja/docs/Web/CSS/text-decoration">装飾</a></code>に適用される影のカンマで区切られたリストを受け付けます。</span>それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* offset-x | offset-y | blur-radius | color */ -text-shadow: 1px 1px 2px black; - -/* color | offset-x | offset-y | blur-radius */ -text-shadow: #fc0 1px 0 10px; - -/* offset-x | offset-y | color */ -text-shadow: 5px 5px #558abb; - -/* color | offset-x | offset-y */ -text-shadow: white 2px 5px; - -/* offset-x | offset-y -/* color および blur-radius は既定値を使用 */ -text-shadow: 5px 10px; - -/* グローバル値 */ -text-shadow: inherit; -text-shadow: initial; -text-shadow: unset; -</pre> - -<p>このプロパティは、影のカンマで区切られたリストとして指定します。</p> - -<p>それぞれの影は2つ又は3つの <code><length></code> 値と、任意でその後に <code><color></code> 値を続けることで指定します。最初の2つの <code><length></code> 値は、 <code><offset-x></code> 及び <code><offset-y></code> の値です。3番目の <code><length></code> 値は、任意で、 <code><blur-radius></code> です。 <code><color></code> 値は影の色です。</p> - -<p>複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。</p> - -<p>このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>に適用されます。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。</dd> - <dt><code><offset-x> <offset-y></code></dt> - <dd>必須。これらの <code><length></code> 値はテキストに対する影のオフセットを指定します。 <code><offset-x></code> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <code><offset-y></code> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が <code>0</code> ならば、影はテキストの真後ろに配置されますが、 <code><blur-radius></code> の効果により一部だけが見えるかもしれません。</dd> - <dt><code><blur-radius></code></dt> - <dd>省略可。これは {{ cssxref("<length>") }} 値です。指定されなければ、既定では <code>0</code> になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Simple_shadow" name="Simple_shadow">単純な影</h3> - -<div> -<pre class="brush: css notranslate">.red-text-shadow { - text-shadow: red 0 -2px; -}</pre> - -<pre class="brush: html notranslate"><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste - natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> - -<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> - -<h3 id="Multiple_shadows" name="Multiple_shadows">複数の影</h3> - -<div> -<pre class="brush:css notranslate">.white-text-with-blue-shadow { - text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; - color: white; - font: 1.5em Georgia, serif; -}</pre> - -<pre class="brush: html notranslate"><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste - natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre> -</div> - -<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>CSS プロパティ <code>text-shadow</code> は <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">CSS2 で不適切に定義され</a>、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a> に移動しました。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-shadow")}}</p> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<ul> - <li>Gecko には {{cssxref("transition")}} にバグがあり、色が指定された <code>text-shadow</code> から色が指定されていない <code>text-shadow</code> への移行が動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> 又は <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("<color>")}} データ型 (影の色を指定するため)</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li> -</ul> diff --git a/files/ja/web/css/text-shadow/index.md b/files/ja/web/css/text-shadow/index.md new file mode 100644 index 0000000000..2810367e16 --- /dev/null +++ b/files/ja/web/css/text-shadow/index.md @@ -0,0 +1,128 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - CSS プロパティ + - CSS スタイル + - CSS テキスト装飾 + - HTML 色 + - HTML スタイル + - Reference + - スタイル + - HTML のスタイル付け + - color + - recipe:css-property +browser-compat: css.properties.text-shadow +translation_of: Web/CSS/text-shadow +--- +{{CSSRef}} + +**`text-shadow`** は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 ([`decoration`](/ja/docs/Web/CSS/text-decoration)) に適用される影のリストをカンマで区切ったリストで受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。 + +{{EmbedInteractiveExample("pages/css/text-shadow.html")}} + +## 構文 + +```css +/* offset-x | offset-y | blur-radius | color */ +text-shadow: 1px 1px 2px black; + +/* color | offset-x | offset-y | blur-radius */ +text-shadow: #fc0 1px 0 10px; + +/* offset-x | offset-y | color */ +text-shadow: 5px 5px #558abb; + +/* color | offset-x | offset-y */ +text-shadow: white 2px 5px; + +/* offset-x | offset-y +/* color および blur-radius は既定値を使用 */ +text-shadow: 5px 10px; + +/* グローバル値 */ +text-shadow: inherit; +text-shadow: initial; +text-shadow: revert; +text-shadow: unset; +``` + +このプロパティは、影のカンマで区切られたリストとして指定します。 + +それぞれの影は 2 つまたは 3 つの `<length>` 値と、任意でその後に `<color>` 値を続けることで指定します。最初の 2 つの `<length>` 値は、 `<offset-x>` および `<offset-y>` の値です。3 番目の `<length>` 値は任意で `<blur-radius>` です。 `<color>` 値は影の色です。 + +複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。 + +このプロパティは {{cssxref("::first-line")}} および {{cssxref("::first-letter")}} の両方の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)に適用されます。 + +### 値 + +- {{cssxref("<color>")}} + - : 省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を保つために、明示的に定義することが求められます。 +- `<offset-x> <offset-y>` + - : 必須。これらの `<length>` 値はテキストに対する影のオフセットを指定します。 `<offset-x>` は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 `<offset-y>` は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が `0` ならば、影はテキストの真後ろに配置されますが、 `<blur-radius>` の効果により一部だけが見えるかもしれません。 +- `<blur-radius>` + - : 省略可。これは {{cssxref("<length>")}} 値です。指定されなければ、既定では `0` になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## Examples + +<h3 id="Simple_shadow">単純な影</h3> + +```css +.red-text-shadow { + text-shadow: red 0 -2px; +} +``` + +```html +<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste + natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore.</p> +``` + +{{EmbedLiveSample('Simple_shadow', '660px', '90px')}} + +<h3 id="Multiple_shadows">複数の影</h3> + +```css +.white-text-with-blue-shadow { + text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; + color: white; + font: 1.5em Georgia, serif; +} +``` + +```html +<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste + natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore.</p> +``` + +{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +### Quantum CSS のメモ + +- Gecko には {{cssxref("transition")}} にバグがあり、色が指定された `text-shadow` から色が指定されていない `text-shadow` へのトランジションが動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン ([Quantum CSS](https://wiki.mozilla.org/Quantum) または [Stylo](https://wiki.mozilla.org/Quantum/Stylo) とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。 + +## 関連情報 + +- {{cssxref("box-shadow")}} +- {{cssxref("<color>")}} データ型 (影の色を指定するため) +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/text-size-adjust/index.html b/files/ja/web/css/text-size-adjust/index.html deleted file mode 100644 index cf53f80c9d..0000000000 --- a/files/ja/web/css/text-size-adjust/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: text-size-adjust -slug: Web/CSS/text-size-adjust -tags: - - CSS - - CSS プロパティ - - CSS モバイル文字サイズ調整 - - Experimental - - NeedsExample - - リファレンス -translation_of: Web/CSS/text-size-adjust ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>text-size-adjust</code></strong> プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。</p> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -text-size-adjust: none; -text-size-adjust: auto; - -/* <percentage> 値 */ -text-size-adjust: 80%; - -/* グローバル値 */ -text-size-adjust: inherit; -text-size-adjust: initial; -text-size-adjust: unset; -</pre> - -<p>モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。</p> - -<p>こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 <code>text-size-adjust</code> プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>text-size-adjust</code> プロパティは <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>, <code><a href="#<percentage>"><percentage></a></code> の何れかで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="none"><code>none</code></dt> - <dd>ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。</dd> - <dt id="auto"><code>auto</code></dt> - <dd>ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した <code>none</code> 値を取り消すのに使います。</dd> - <dt id="<percentage>"><code><percentage></code></dt> - <dd>ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td> - <td>{{Spec2("CSS Text Size Adjust")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-size-adjust")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="link-https" href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16">Apple のドキュメント</a></li> - <li>L. David Baron による、 <a class="external" href="http://dbaron.org/log/20111126-font-inflation">Gecko の挙動の説明</a></li> - <li><a class="external" href="https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS">Microsoft のドキュメント</a></li> -</ul> diff --git a/files/ja/web/css/text-size-adjust/index.md b/files/ja/web/css/text-size-adjust/index.md new file mode 100644 index 0000000000..d788ef5008 --- /dev/null +++ b/files/ja/web/css/text-size-adjust/index.md @@ -0,0 +1,84 @@ +--- +title: text-size-adjust +slug: Web/CSS/text-size-adjust +tags: + - CSS + - CSS Mobile Text Size Adjustment + - CSS プロパティ + - Experimental + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.text-size-adjust +translation_of: Web/CSS/text-size-adjust +--- +{{CSSRef}}{{SeeCompatTable}} + +**`text-size-adjust`** は [CSS](/ja/docs/Web/API/CSS) のプロパティで、一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。 + +```css +/* キーワード値 */ +text-size-adjust: none; +text-size-adjust: auto; + +/* <percentage> 値 */ +text-size-adjust: 80%; + +/* グローバル値 */ +text-size-adjust: inherit; +text-size-adjust: initial; +text-size-adjust: revert; +text-size-adjust: unset; +``` + +モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800px や 1000px などのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。 + +こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 `text-size-adjust` プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。 + +## 構文 + +`text-size-adjust` プロパティは `none`, `auto`, `<percentage>` の何れかで指定します。 + +### 値 + +- `none` + - : ブラウザーのテキスト自動拡大アルゴリズムを無効化します。 +- `auto` + - : ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した `none` 値を取り消すのに使います。</dd> +- `<percentage>` + - : ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。</dd> + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な無効化の使用方法 + +上記に示すとおり、適切に設計されたレスポンシブサイトでは、`text-size-adjust` の動作は必要ありませんので、開発者は none の値を指定してこれをオフにすることができます。 + +```css +p { + -webkit-text-size-adjust: none; + text-size-adjust: none; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Apple のドキュメント](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16) +- [Gecko's behavior description](https://dbaron.org/log/20111126-font-inflation), by L. David Baron +- [Microsoft のドキュメント](<https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS>) diff --git a/files/ja/web/css/text-transform/index.html b/files/ja/web/css/text-transform/index.html deleted file mode 100644 index ed7b49fb81..0000000000 --- a/files/ja/web/css/text-transform/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: text-transform -slug: Web/CSS/text-transform -tags: - - CSS - - CSS Property - - Layout - - Reference - - Text - - 'recipe:css-property' - - 日本語処理 -translation_of: Web/CSS/text-transform ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>text-transform</code></strong> プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。</p> - -<div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p><code>text-transform</code> プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。</p> - -<ul> - <li> - <p>トルコ語 (<code>tr</code>)、アゼルバイジャン語 (<code>az</code>)、クリミア・タタール語 (<code>crh</code>)、ヴォルガ・タタール語 (<code>tt</code>)、バシキール語 (<code>ba</code>) などのチュルク語族にはドットの有無が異なる 2 種類の <code>i</code> があり、大文字・小文字のペアも <code>i</code>/<code>İ</code> と <code>ı</code>/<code>I</code> の 2 組があります。</p> - </li> - <li> - <p>ドイツ語 (<code>de</code>) では、<code>ß</code> の大文字が <code>SS</code> になります。</p> - </li> - <li> - <p>オランダ語 (<code>nl</code>) では二重音字 <code>ij</code> が、単語の最初の文字のみ大文字にする <code>text-transform: capitalize</code> を指定しても <code>IJ</code> になります。</p> - </li> - <li> - <p>ギリシャ語 (<code>el</code>) では離接的接続のエータ (<code>ή</code>/<code>Ή</code>) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (<code>ά</code>/<code>Α</code>)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (<code>άι</code>/<code>ΑΪ</code>)。</p> - </li> - <li> - <p>ギリシャ語 (<code>el</code>) で、小文字のシグマは <code>σ</code> と <code>ς</code> の 2 種類あります。<code>ς</code> は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (<code>Σ</code>) に <code>text-transform: lowercase</code> を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。</p> - </li> - <li>アイルランド語 (<code>ga</code>) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば <code>text-transform: uppercase</code> は <code>ar aon tslí</code> を、予想される <code>AR AON TSLÍ </code> ではなく <code>AR AON tSLÍ</code> にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、<code>an t-uisce</code> は <code>AN tUISCE </code> になります (また、<code>text-transform: lowercase</code> ではハイフンが適切に再挿入されます)。</li> -</ul> - -<p>言語は HTML の <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性や XML の <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性で定義します。</p> - -<div class="note"> -<p><strong>注:</strong> これらの特定のケースはブラウザーにより異なりますので、<a href="#Browser_compatibility">ブラウザーの互換性</a>を確認してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -text-transform: none; -text-transform: capitalize; -text-transform: uppercase; -text-transform: lowercase; -text-transform: full-width; -text-transform: full-size-kana; - -/* グローバル値 */ -text-transform: inherit; -text-transform: initial; -text-transform: unset; -</pre> - -<dl> - <dt><code>capitalize</code></dt> - <dd> - <p>それぞれの単語の最初の<em>文字</em>を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。</p> - - <div class="note"><code>capitalize</code> が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。</div> - - <div class="note"><code>capitalize</code> キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は <code>-</code> および <code>_</code> を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は <code>ⓐ</code> のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の <code>capitalize</code> の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。</div> - </dd> - <dt><code>uppercase</code></dt> - <dd>すべての文字を大文字に変換させるキーワードです。</dd> - <dt><code>lowercase</code></dt> - <dd>すべての文字を小文字に変換させるキーワードです。</dd> - <dt><code>none</code></dt> - <dd>すべての文字を変換させないキーワードです。</dd> - <dt><code>full-width</code></dt> - <dd>一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。</dd> - <dt><code>full-size-kana</code></dt> - <dd>このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。</dd> -</dl> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>テキストの長い区間に <code>text-transform</code> の値を <code>uppercase</code> で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="none" name="none"><code>none</code></h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> -</p> -<p>text-transform: none - <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> -</p> -</pre> - -<pre class="brush: css notranslate">span { - text-transform: none; -} -strong { float: right; }</pre> - -<p>文字を変換しない例です。</p> - -<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> - -<h3 id="capitalize_General" name="capitalize_General">capitalize (一般的)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> -</p> -<p>text-transform: capitalize - <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>頭文字を大文字にする例です。</p> - -<p>{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}</p> - -<h3 id="capitalize_Punctuation" name="capitalize_Punctuation">capitalize (句読点)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> -</p> -<p>text-transform: capitalize - <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。</p> - -<p>{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}</p> - -<h3 id="capitalize_Symbols" name="capitalize_Symbols">capitalize (記号)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> -</p> -<p>text-transform: capitalize - <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。</p> - -<p>{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}</p> - -<h3 id="capitalize_Dutch_ij_digraph" name="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong lang="nl">The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</strong> -</p> -<p>text-transform: capitalize - <strong><span lang="nl">The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: capitalize; -} -strong { float: right; }</pre> - -<p>オランダ語の二重音字 <em>ij</em> を1文字として扱わなければならないことを示す例です。</p> - -<p>{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}</p> - -<h3 id="uppercase_General" name="uppercase_General">uppercase (一般的)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> -</p> -<p>text-transform: uppercase - <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: uppercase; -} -strong { float: right; }</pre> - -<p>テキストを大文字に変換する例です。</p> - -<p>{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}</p> - -<h3 id="uppercase_Greek_Vowels" name="uppercase_Greek_Vowels">uppercase> (ギリシャ語の母音字)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> -</p> -<p>text-transform: uppercase - <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: uppercase; -} -strong { float: right; }</pre> - -<p>離接的接続の <em>eta</em> を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。</p> - -<p>{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}</p> - -<h3 id="lowercase_General" name="lowercase_General">lowercase (一般的)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> -</p> -<p>text-transform: lowercase - <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: lowercase; -} -strong { float: right; }</pre> - -<p>テキストを小文字に変換する例です。</p> - -<p>{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}</p> - -<h3 id="lowercase_Greek_Σ" name="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong> -</p> -<p>text-transform: lowercase - <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: lowercase; -} -strong { float: right; }</pre> - -<p>ギリシャ文字のシグマ (<code>Σ</code>) が、状況に応じて一般的な小文字のシグマ (<code>σ</code>) または単語の末尾での表記 (<code>ς</code>) に変換される例です。</p> - -<p>{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}</p> - -<h3 id="lowercase_Lithuanian" name="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>Ĩ is a Lithuanian LETTER as is J́</strong> -</p> -<p>text-transform: lowercase - <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: lowercase; -} -strong { float: right; }</pre> - -<p>これはリヒテンシュタインの文字 <code>Ĩ</code> および <code>J́</code> が小文字に変換されるとドットを保持する様子を示します。</p> - -<p>{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}</p> - -<h3 id="full-width_General" name="full-width_General">full-width (一般)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong> -</p> -<p>text-transform: full-width - <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: full-width; -} -strong { width: 100%; float: right; }</pre> - -<p>一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。</p> - -<p>{{ EmbedLiveSample('full-width_General', '100%', '175px') }}</p> - -<h3 id="full-width_Japanese_half-width_katakana" name="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3> - -<pre class="brush: html notranslate"><p>Initial String - <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong> -</p> -<p>text-transform: full-width - <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong> -</p></pre> - -<pre class="brush: css notranslate">span { - text-transform: full-width; -} -strong { width: 100%; float: right; }</pre> - -<p>日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 <code>full-width</code> は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。</p> - -<p>{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}</p> - -<h3 id="full-size-kana">full-size-kana</h3> - -<pre class="brush: html notranslate"><p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> -<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> -</p></pre> - -<pre class="brush: css notranslate">p:nth-of-type(2) { - text-transform: full-size-kana; -}</pre> - -<p>{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 <code>capitalize</code> の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための <code>full-width</code> および <code>full-size-kana</code> キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-transform")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("font-variant")}}</li> -</ul> diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md new file mode 100644 index 0000000000..805e6c2cee --- /dev/null +++ b/files/ja/web/css/text-transform/index.md @@ -0,0 +1,378 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - レイアウト + - Reference + - recipe:css-property + - 日本語処理 +browser-compat: css.properties.text-transform +translation_of: Web/CSS/text-transform +--- +{{CSSRef}} + +**`text-transform`** は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。 + +{{EmbedInteractiveExample("pages/css/text-transform.html")}} + +`text-transform` プロパティは、以下のように言語固有の大文字小文字の扱いを考慮します。 + +- トルコ語 (`tr`)、アゼルバイジャン語 (`az`)、クリミア・タタール語 (`crh`)、ヴォルガ・タタール語 (`tt`)、バシキール語 (`ba`) などのチュルク語族にはドットの有無が異なる 2 種類の `i` があり、大文字・小文字のペアも `i`/`İ` と `ı`/`I` の 2 組があります。 +- ドイツ語 (`de`) では、`ß` の大文字が `SS` になります。 +- オランダ語 (`nl`) では二重音字 `ij` が、単語の最初の文字のみ大文字にする `text-transform: capitalize` を指定しても `IJ` になります。 +- ギリシャ語 (`el`) では離接的接続のエータ (`ή`/`Ή`) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (`ά`/`Α`)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (`άι`/`ΑΪ`)。 +- ギリシャ語 (`el`) で、小文字のシグマは `σ` と `ς` の 2 種類あります。`ς` は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (`Σ`) に `text-transform: lowercase` を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。 +- アイルランド語 (`ga`) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば `text-transform: uppercase` は `ar aon tslí` を、予想される `AR AON TSLÍ ` ではなく `AR AON tSLÍ` にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、`an t-uisce` は `AN tUISCE ` になります (また、`text-transform: lowercase` ではハイフンが適切に再挿入されます)。 + +言語は HTML の [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性や XML の [`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性で定義します。 + +> **Note:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性一覧表](#browser_compatibility)を確認してください。 + +## 構文 + +```css +/* キーワード値 */ +text-transform: none; +text-transform: capitalize; +text-transform: uppercase; +text-transform: lowercase; +text-transform: full-width; +text-transform: full-size-kana; + +/* グローバル値 */ +text-transform: inherit; +text-transform: initial; +text-transform: revert; +text-transform: unset; +``` + +- `capitalize` + + - : それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。 + + > **Note:** `capitalize` が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。 + + > **Note:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。 + +- `uppercase` + - : すべての文字を大文字に変換させるキーワードです。 +- `lowercase` + - : すべての文字を小文字に変換させるキーワードです。 +- `none` + - : すべての文字を変換させないキーワードです。 +- `full-width` + - : 一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。 +- `full-size-kana` + - : このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。 + +## アクセシビリティの考慮 + +テキストの長い区間に `text-transform` の値を `uppercase` で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。 + +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation) + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### `none` + +```html +<p>Initial String + <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p> +<p>text-transform: none + <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> +</p> +``` + +```css +span { + text-transform: none; +} +strong { float: right; } +``` + +文字を変換しない例です。 + +{{ EmbedLiveSample('none', '100%', '100px') }} + +<h3 id="capitalize_General">capitalize (一般的)</h3> + +```html +<p>Initial String + <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p> +<p>text-transform: capitalize + <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> +</p> +``` + +```css +span { + text-transform: capitalize; +} +strong { float: right; } +``` + +頭文字を大文字にする例です。 + +{{ EmbedLiveSample('capitalize_General', '100%', '100px') }} + +<h3 id="capitalize_Punctuation">capitalize (句読点)</h3> + +```html +<p>Initial String + <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> +</p> +<p>text-transform: capitalize + <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> +</p> +``` + +```css +span { + text-transform: capitalize; +} +strong { float: right; } +``` + +単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。 + +{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }} + +<h3 id="capitalize_Symbols">capitalize (記号)</h3> + +```html +<p>Initial String + <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> +</p> +<p>text-transform: capitalize + <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong> +</p> +``` + +```css +span { + text-transform: capitalize; +} +strong { float: right; } +``` + +頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。 + +{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }} + +<h3 id="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3> + +```html +<p>Initial String + <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong> +</p> +<p>text-transform: capitalize + <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong> +</p> +``` + +```css +span { + text-transform: capitalize; +} +strong { float: right; } +``` + +オランダ語の二重音字 _ij_ を 1 文字として扱わなければならないことを示す例です。 + +{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }} + +<h3 id="uppercase_General">uppercase (一般的)</h3> + +```html +<p>Initial String + <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p> +<p>text-transform: uppercase + <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> +</p> +``` + +```css +span { + text-transform: uppercase; +} +strong { float: right; } +``` + +テキストを大文字に変換する例です。 + +{{ EmbedLiveSample('uppercase_General', '100%', '100px') }} + +<h3 id="uppercase_Greek_Vowels">uppercase (ギリシャ語の母音字)</h3> + +```html +<p>Initial String + <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> +</p> +<p>text-transform: uppercase + <strong><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> +</p> +``` + +```css +span { + text-transform: uppercase; +} +strong { float: right; } +``` + +離接的接続の _eta_ を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。 + +{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }} + +<h3 id="lowercase_General">lowercase (一般的)</h3> + +```html +<p>Initial String + <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p> +<p>text-transform: lowercase + <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> +</p> +``` + +```css +span { + text-transform: lowercase; +} +strong { float: right; } +``` + +テキストを小文字に変換する例です。 + +{{ EmbedLiveSample('lowercase_General', '100%', '100px') }} + +<h3 id="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3> + +```html +<p>Initial String + <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong> +</p> +<p>text-transform: lowercase + <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong> +</p> +``` + +```css +span { + text-transform: lowercase; +} +strong { float: right; } +``` + +ギリシャ文字のシグマ (`Σ`) が、状況に応じて一般的な小文字のシグマ (`σ`) または単語の末尾での表記 (`ς`) に変換される例です。 + +{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }} + +<h3 id="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3> + +```html +<p>Initial String + <strong>Ĩ is a Lithuanian LETTER as is J́</strong> +</p> +<p>text-transform: lowercase + <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong> +</p> +``` + +```css +span { + text-transform: lowercase; +} +strong { float: right; } +``` + +これはリヒテンシュタインの文字 `Ĩ` および `J́` が小文字に変換されるとドットを保持する様子を示します。 + +{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }} + +<h3 id="full-width_General">full-width (一般)</h3> + +```html +<p>Initial String + <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong> +</p> +<p>text-transform: full-width + <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong> +</p> +``` + +```css +span { + text-transform: full-width; +} +strong { width: 100%; float: right; } +``` + +一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。 + +{{ EmbedLiveSample('full-width_General', '100%', '175px') }} + +<h3 id="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3> + +```html +<p>Initial String + <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong> +</p> +<p>text-transform: full-width + <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong> +</p> +``` + +```css +span { + text-transform: full-width; +} +strong { width: 100%; float: right; } +``` + +日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。 + +{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }} + +<h3 id="full-size-kana">full-size-kana</h3> + +```html +<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> +<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> +</p> +``` + +```css +p:nth-of-type(2) { + text-transform: full-size-kana; +} +``` + +{{ EmbedLiveSample('full-size-kana', '100%', '175px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}} diff --git a/files/ja/web/css/text-underline-offset/index.html b/files/ja/web/css/text-underline-offset/index.html deleted file mode 100644 index fd95b1560c..0000000000 --- a/files/ja/web/css/text-underline-offset/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: text-underline-offset -slug: Web/CSS/text-underline-offset -tags: - - CSS - - CSS Text Decoration - - CSS テキスト装飾 - - Property - - Reference - - text-decoration - - text-underline-offset - - プロパティ -translation_of: Web/CSS/text-underline-offset ---- -<div>{{CSSRef}}</div> - -<p><strong><code>text-underline-offset</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、 ({{cssxref("text-decoration")}} を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。</p> - -<p><code>text-underline-offset</code> は {{cssxref('text-decoration')}} の一括指定の一部ではありません。一つの要素が複数の <code>text-decoration</code> による線を持つため、 <code>text-underline-offset</code> は下線のみに影響し、 <code>overline</code> や <code>line-through</code> などの他の装飾線には影響<strong>しません</strong>。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 単一のキーワード */ -text-underline-offset: auto; - -/* 長さ */ -text-underline-offset: 0.1em; -text-underline-offset: 3px; - -/* パーセント値 */ -text-underline-offset: 20%; - -/* グローバル値 */ -text-underline-offset: inherit; -text-underline-offset: initial; -text-underline-offset: unset; -</pre> - -<p><code>text-underline-offset</code> プロパティは、以下のリストのうち一つの値で指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>ブラウザーが下線の適切なオフセットを選択します。</dd> - <dt><code><length></code></dt> - <dd>下線のオフセットを {{cssxref('length')}} で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 <code>em</code> 単位を使用することを推奨します。</dd> - <dt><code><percentage></code></dt> - <dd>下線のオフセットを、要素のフォントにおける <strong>1 em</strong> に対する {{cssxref('percentage')}} で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: html"><p class="oneline">Here's some text with an offset wavy red underline!</p> -<br> -<p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p></pre> - -<pre class="brush: css">p { - text-decoration: underline wavy red; - text-underline-offset: 1em; -} - -.twolines { - text-decoration-color: purple; - text-decoration-line: underline overline; -}</pre> - -<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Text Decoration', '#underline-offset', 'text-underline-offset')}}</td> - <td>{{Spec2('CSS4 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-underline-offset")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("text-decoration")}}</li> - <li>{{cssxref("text-decoration-thickness")}}</li> -</ul> diff --git a/files/ja/web/css/text-underline-offset/index.md b/files/ja/web/css/text-underline-offset/index.md new file mode 100644 index 0000000000..5b26c324d9 --- /dev/null +++ b/files/ja/web/css/text-underline-offset/index.md @@ -0,0 +1,95 @@ +--- +title: text-underline-offset +slug: Web/CSS/text-underline-offset +tags: + - CSS + - CSS Text Decoration + - プロパティ + - Reference + - recipe:css-property + - text-decoration + - text-underline-offset +browser-compat: css.properties.text-underline-offset +translation_of: Web/CSS/text-underline-offset +--- +{{CSSRef}} + +**`text-underline-offset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 ({{cssxref("text-decoration")}} を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。 + +`text-underline-offset` は {{cssxref('text-decoration')}} の一括指定の一部ではありません。一つの要素が複数の `text-decoration` による線を持つため、 `text-underline-offset` は下線のみに影響し、 `overline` や `line-through` などの他の装飾線には影響**しません**。 + +## 構文 + +```css +/* 単一のキーワード */ +text-underline-offset: auto; + +/* 長さ */ +text-underline-offset: 0.1em; +text-underline-offset: 3px; + +/* パーセント値 */ +text-underline-offset: 20%; + +/* グローバル値 */ +text-underline-offset: inherit; +text-underline-offset: initial; +text-underline-offset: revert; +text-underline-offset: unset; +``` + +`text-underline-offset` プロパティは、以下のリストのうち一つの値で指定します。 + +### 値 + +- `auto` + - : ブラウザーが下線の適切なオフセットを選択します。 +- `<length>` + - : 下線のオフセットを {{cssxref('length')}} で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 `em` 単位を使用することを推奨します。 +- `<percentage>` + - : 下線のオフセットを、要素のフォントにおける **1 em** に対する {{cssxref('percentage')}} で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### text-underline-offset のデモ + +```html +<p class="oneline">Here's some text with an offset wavy red underline!</p> +<br> +<p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p> +``` + +```css +p { + text-decoration: underline wavy red; + text-underline-offset: 1em; +} + +.twolines { + text-decoration-color: purple; + text-decoration-line: underline overline; +} +``` + +{{ EmbedLiveSample('Examples', '', '', '') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-decoration")}} +- {{cssxref("text-decoration-thickness")}} diff --git a/files/ja/web/css/text-underline-position/index.md b/files/ja/web/css/text-underline-position/index.md new file mode 100644 index 0000000000..4eab2b820d --- /dev/null +++ b/files/ja/web/css/text-underline-position/index.md @@ -0,0 +1,133 @@ +--- +title: text-underline-position +slug: Web/CSS/text-underline-position +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Reference + - recipe:css-property +browser-compat: css.properties.text-underline-position +translation_of: Web/CSS/text-underline-position +--- +{{CSSRef}} + +**`text-underline-position`** は [CSS](/ja/docs/Web/CSS) のプロパティであり、{{cssxref("text-decoration")}} プロパティの `underline` の値で設定される下線 (傍線) の位置を指定します。 + +{{EmbedInteractiveExample("pages/css/text-underline-position.html")}} + +## 構文 + +```css +/* 単一のキーワード */ +text-underline-position: auto; +text-underline-position: under; +text-underline-position: left; +text-underline-position: right; + +/* 複数のキーワード */ +text-underline-position: under left; +text-underline-position: right under; + +/* グローバル値 */ +text-underline-position: inherit; +text-underline-position: initial; +text-underline-position: revert; +text-underline-position: unset; +``` + +### 値 + +- `auto` + - : {{glossary("user agent", "ユーザーエージェント")}}は、傍線を文字のベースラインの位置に配置するか、その下に配置するかを独自のアルゴリズムで決定します。 +- `from-font` + - : フォントファイルに推奨される位置についての情報があった場合、その値を使用します。フォントファイルにこの情報がない場合は、`auto` が設定された場合の動作と同様、ブラウザーが適切な位置を選択します。 +- `under` + - : 文字のベースラインの下、ディセンダーを越えない位置に強制的に傍線を設定します。これは、下付き文字が多用される化学式や数式の読みやすさを確保するのに便利です。 +- `left` + - : 縦書きモードでは、このキーワードは強制的に傍線をテキストの*左*端に配置します。横書きモードでは、`under` と同じです。 +- `right` + - : 縦書きモードでは、このキーワードは強制的に傍線をテキストの*右*側に配置します。横書きモードでは、`under` と同じです。 +- `auto-pos` {{non-standard_inline}} + - : `auto` と同じですので、代わりにそちらを使用してください。 +- `above` {{non-standard_inline}} + - : 強制的に傍線をテキストの上部に配置します。東アジアのテキストで使用すると、`auto` キーワードが同様の効果になります。 +- `below` {{non-standard_inline}} + - : 強制的に傍線をテキストの下部に配置します。アルファベットのテキストで使用すると、`auto` キーワードが同様の効果になります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="A_simple_example">単純な例</h3> + +2 つの段落の例を見てみましょう。 + +```html +<p class="horizontal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit +amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan +tellus ac erat posuere.</p> + +<p class="vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit +amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan +tellus ac erat posuere.</p> +``` + +CSS はこのようになります。 + +```css +p { + font-size: 1.5rem; + text-transform: capitalize; + text-decoration: underline; + text-decoration-thickness: 2px; +} + +.horizontal { + text-underline-position: under; +} + +.vertical { + writing-mode: vertical-rl; + text-underline-position: left; +} +``` + +この例では、どちらの段落にも太い下線を引いています。横書きのテキストでは `text-underline-position: under;` を使用して、下線をすべてのディセンダーの下に引いています。 + +[`writing-mode`](/ja/docs/Web/CSS/writing-mode) を縦書きに設定した場合、必要に応じて `left` または `right` を使用して、傍線をテキストの左と右のどちらに引くか決めることができます。 + +ライブサンプルはこのようになります。 + +{{EmbedLiveSample('A_simple_example', '100%', 600)}} + +### グローバルに text-underline-position を設定する + +`text-underline-position` プロパティは継承され、{{cssxref("text-decoration")}} 一括指定プロパティでリセットされないため、グローバルレベルでこの値を設定する方が適切かもしれません。例えば、数多くの化学式や数式があり、下付き文字をたくさん使用している文書では、 `under` の値が適切かもしれません。 + +```css +:root { + text-underline-position: under; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("text-decoration")}} プロパティは、{{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-decoration-style")}} など、ほとんどのテキスト装飾プロパティを設定します。しかし、 `text-underline-position` は設定しません。 +- Microsoft [non-standard values documentation](https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx) diff --git a/files/ja/web/css/transform-origin/index.html b/files/ja/web/css/transform-origin/index.html deleted file mode 100644 index 3e48cbe9c0..0000000000 --- a/files/ja/web/css/transform-origin/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: transform-origin -slug: Web/CSS/transform-origin -tags: - - CSS - - CSS Property - - CSS Transforms - - Reference - - 'default value: center' - - 'recipe:css-property' - - transform-origin -translation_of: Web/CSS/transform-origin ---- -<div>{{ CSSRef }}</div> - -<p><strong><code>transform-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<ruby>変形<rp> (</rp><rt>transform</rt><rp>) </rp></ruby>における原点を設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>変形の原点とは、それを中心に変形が適用される点です。例えば、 <code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></code> 関数における変形の原点は、回転の中心です。</p> - -<p>このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。<br> - すなわち、</p> - -<pre class="brush: css notranslate">transform-origin: -100% 50%; -transform: rotate(45deg); -</pre> - -<p>この定義は以下の変形と同じです。</p> - -<pre class="brush: css notranslate">transform-origin: 0 0; -transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);</pre> - -<p>既定で、変形の原点は <code>center</code> です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* 値１つの構文 */ -transform-origin: 2px; -transform-origin: bottom; - -/* x-offset | y-offset */ -transform-origin: 3cm 2px; - -/* x-offset-keyword | y-offset */ -transform-origin: left 2px; - -/* x-offset-keyword | y-offset-keyword */ -transform-origin: right top; - -/* y-offset-keyword | x-offset-keyword */ -transform-origin: top right; - -/* x-offset | y-offset | z-offset */ -transform-origin: 2px 30% 10px; - -/* x-offset-keyword | y-offset | z-offset */ -transform-origin: left 5px -3px; - -/* x-offset-keyword | y-offset-keyword | z-offset */ -transform-origin: right bottom 2cm; - -/* y-offset-keyword | x-offset-keyword | z-offset */ -transform-origin: bottom right 2cm; - -/* グローバル値 */ -transform-origin: inherit; -transform-origin: initial; -transform-origin: unset; -</pre> - -<p><code>transform-origin</code> プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する<a href="/ja/docs/Web/CSS/initial_value">初期値</a>にリセットされます。</p> - -<p>２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが <code>center</code> だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。</p> - -<ul> - <li>値１つの構文: - <ul> - <li>値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又は <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code> のうちの１つでなければなりません。</li> - </ul> - </li> - <li>値２つの構文: - <ul> - <li>一方の値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又はキーワードの <code>left</code>, <code>center</code>, <code>right</code> のうちの１つでなければなりません。</li> - <li>もう一方の値は、 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 又はキーワードの <code>top</code>, <code>center</code>, <code>bottom</code> のうちの１つでなければなりません。</li> - </ul> - </li> - <li>値３つの構文: - <ul> - <li>１番目と２番目の値は、値２つの構文と同じです。</li> - <li>３番目の値は {{cssxref("<length>")}} でなければなりません。これは常に Z オフセットを表します。</li> - </ul> - </li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><var>x-offset</var></dt> - <dd>{{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの左端から変形の原点までの距離を示す値です。</dd> - <dt><var>offset-keyword</var></dt> - <dd><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、対応するオフセットを表します。</dd> - <dt><var>y-offset</var></dt> - <dd>{{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの右端から変形の原点までの距離を示す値です。</dd> - <dt><var>x-offset-keyword</var></dt> - <dd><code>left</code>, <code>right</code>, <code>center</code> のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。</dd> - <dt><var>y-offset-keyword</var></dt> - <dd><code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。</dd> - <dt><var>z-offset</var></dt> - <dd>{{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。</dd> -</dl> - -<p>キーワードは便利な速記であり、次の {{cssxref("<percentage>")}} 値に相当します。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">キーワード</th> - <th scope="col">値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>left</code></td> - <td><code>0%</code></td> - </tr> - <tr> - <td><code>center</code></td> - <td><code>50%</code></td> - </tr> - <tr> - <td><code>right</code></td> - <td><code>100%</code></td> - </tr> - <tr> - <td><code>top</code></td> - <td><code>0%</code></td> - </tr> - <tr> - <td><code>bottom</code></td> - <td><code>100%</code></td> - </tr> - </tbody> -</table> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>コード</th> - <th>サンプル</th> - </tr> - <tr> - <td> - <p><code>transform: none;</code></p> - </td> - <td> - <div class="hidden" id="transform_none"> - <pre class="brush: html notranslate"> -<div class="box1">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box1 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: none; --webkit-transform: none; -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_only"> - <pre class="brush: html notranslate"> -<div class="box2">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box2 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: rotate(30deg); --webkit-transform: rotate(30deg); -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: 0 0;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate"> - <pre class="brush: html notranslate"> -<div class="box3">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box3 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: 0 0; --webkit-transform-origin: 0 0; -transform: rotate(30deg); --webkit-transform: rotate(30deg); -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: 100% 100%;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_with_percentage"> - <pre class="brush: html notranslate"> -<div class="box4">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box4 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: 100% 100%; --webkit-transform-origin: 100% 100%; -transform: rotate(30deg); --webkit-transform: rotate(30deg); -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: rotate(30deg);<br> - transform-origin: -1em -3em;</code></p> - </td> - <td> - <div class="hidden" id="transform_rotate_with_em"> - <pre class="brush: html notranslate"> -<div class="box5">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box5 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform-origin: -1em -3em; --webkit-transform-origin: -1em -3em; -transform: rotate(30deg); --webkit-transform: rotate(30deg); -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.7);</code></p> - </td> - <td> - <div class="hidden" id="transform_scale_only"> - <pre class="brush: html notranslate"> -<div class="box6">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box6 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(<code>1.7</code>); --webkit-transform: scale(<code>1.7</code>); -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.7);<br> - transform-origin: 0 0;</code></p> - </td> - <td> - <div class="hidden" id="transform_scale_without_origin"> - <pre class="brush: html notranslate"> -<div class="box7">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box7 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(<code>1.7</code>); --webkit-transform: scale(<code>1.7</code>); -transform-origin: 0 0; --webkit-transform-origin: 0 0; -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: scale(1.7);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_scale"> - <pre class="brush: html notranslate"> -<div class="box8">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box8 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: scale(<code>1.7</code>); --webkit-transform: scale(<code>1.7</code>); -transform-origin: 100% -30%; --webkit-transform-origin: 100% -30%; -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: skewX(50deg);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_skew_x"> - <pre class="brush: html notranslate"> -<div class="box9">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box9 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: skewX(50deg); --webkit-transform: skewX(50deg); -transform-origin: 100% -30%; --webkit-transform-origin: 100% -30%; -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - <tr> - <td> - <p><code>transform: skewY(50deg);<br> - transform-origin: 100% -30%;</code></p> - </td> - <td> - <div class="hidden" id="transform_skew_y"> - <pre class="brush: html notranslate"> -<div class="box10">&nbsp;</div> -</pre> - - <pre class="brush: css notranslate"> -.box10 { -margin: 0.5em; -width: 3em; -height: 3em; -border: solid 1px; -background-color: palegreen; -transform: skewY(50deg); --webkit-transform: skewY(50deg); -transform-origin: 100% -30%; --webkit-transform-origin: 100% -30%; -} -</pre> - </div> - - <div>{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}</div> - </td> - </tr> - </tbody> -</table> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td> - <td>{{ Spec2('CSS3 Transforms') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.transform-origin")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li> - <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li> -</ul> diff --git a/files/ja/web/css/transform-origin/index.md b/files/ja/web/css/transform-origin/index.md new file mode 100644 index 0000000000..1418eb51a2 --- /dev/null +++ b/files/ja/web/css/transform-origin/index.md @@ -0,0 +1,326 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS プロパティ + - CSS 座標変換 + - Reference + - 'default value: center' + - recipe:css-property + - transform-origin +browser-compat: css.properties.transform-origin +translation_of: Web/CSS/transform-origin +--- +{{ CSSRef }} + +**`transform-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の座標変換 (transform) における原点を設定します。 + +{{EmbedInteractiveExample("pages/css/transform-origin.html")}} + +座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 `[rotate()](/ja/docs/Web/CSS/transform-function/rotate)` 関数における座標変換の原点は、回転の中心です。 + +実際には、このプロパティは一対の座標変換で、その要素の他の座標変換の周りを囲みます。最初の座標変換は、原点を真の原点である <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math> に移動させます。その後、他の座標変換が適用されますが、座標変換の原点は <math><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo stretchy="false">)</mo></mrow></math> にあるので、これらの座標変換はその原点の周りで作用します。最後に逆方向の変換を行い，座標変換の原点を元の位置に戻します。したがって，この定義は 次のようになります。 + +```css +transform-origin: -100% 50%; +transform: rotate(45deg); +``` + +この定義は以下の座標変換と同じです。 + +```css +transform-origin: 0 0; +transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); +``` + +右から左に読むと、`translate(100%, -50%)` は変換の原点を進の原点に移動するもので、`rotate(45deg)` は本来の座標変換であり、`translate(-100%, 50%)` は変換の原点をもとの場所に戻す変換です。 + +既定で、座標変換の原点は `center` です。 + +## 構文 + +```css +/* 値１つの構文 */ +transform-origin: 2px; +transform-origin: bottom; + +/* x-offset | y-offset */ +transform-origin: 3cm 2px; + +/* x-offset-keyword | y-offset */ +transform-origin: left 2px; + +/* x-offset-keyword | y-offset-keyword */ +transform-origin: right top; + +/* y-offset-keyword | x-offset-keyword */ +transform-origin: top right; + +/* x-offset | y-offset | z-offset */ +transform-origin: 2px 30% 10px; + +/* x-offset-keyword | y-offset | z-offset */ +transform-origin: left 5px -3px; + +/* x-offset-keyword | y-offset-keyword | z-offset */ +transform-origin: right bottom 2cm; + +/* y-offset-keyword | x-offset-keyword | z-offset */ +transform-origin: bottom right 2cm; + +/* グローバル値 */ +transform-origin: inherit; +transform-origin: initial; +transform-origin: revert; +transform-origin: unset; +``` + +`transform-origin` プロパティは、オフセットを表す 1 ～ 3 つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する[初期値](/ja/docs/Web/CSS/initial_value)にリセットされます。 + +単一の {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が定義された場合、これは水平方向のオフセットを表します。 + +2 つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが `center` だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。 + +- 値 1 つの構文: + + - 値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `left`, `center`, `right`, `top`, `bottom` のいずれかでなければなりません。 + +- 値 2 つの構文: + + - 一方の値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, またはキーワードの `left`, `center`, `right` のいずれかでなければなりません。 + - もう一方の値は、 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, またはキーワードの `top`, `center`, `bottom` のいずれかでなければなりません。 + +- 値 3 つの構文: + + - 1 番目と 2 番目の値は、値 2 つの構文と同じです。 + - 3 番目の値は {{cssxref("<length>")}} でなければなりません。これは常に Z オフセットを表します。 + +### 値 + +- _x-offset_ + - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの左端から座標変換の原点までの距離を示す値です。 +- _offset-keyword_ + - : `left`, `right`, `top`, `bottom`, `center` のいずれかのキーワードで、対応するオフセットを表します。 +- _y-offset_ + - : {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の、ボックスの右端から座標変換の原点までの距離を示す値です。 +- _x-offset-keyword_ + - : `left`, `right`, `center` のいずれかのキーワードで、ボックスの左端から座標変換の原点までの距離を示します。 +- _y-offset-keyword_ + - : `top`, `bottom`, `center` のいずれかのキーワードで、ボックスの上端から座標変換の原点までの距離を示します。 +- _z-offset_ + - : {{cssxref("<length>")}} 値 ({{cssxref("<percentage>")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。 + +キーワードは便利な速記形であり、次の {{cssxref("<percentage>")}} 値に相当します。 + +| Keyword | Value | +| -------- | ------ | +| `left` | `0%` | +| `center` | `50%` | +| `right` | `100%` | +| `top` | `0%` | +| `bottom` | `100%` | + +## 公式定義 + +{{CSSInfo}} + +> **Note:** `transform-origin` の初期値は、ルートの `<svg>` 要素と [foreignObject](/ja/docs/Web/SVG/Element/foreignObject) の直接の子である `<svg>` 要素を除いたすべての SVG 要素では `0 0` です。また、 `transform-origin` は他の CSS 要素と同様に `50% 50%` です。詳しくは [SVG transform-origin](/ja/docs/Web/SVG/Attribute/transform-origin) 属性を参照してください。 + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="A_demonstration_of_various_transform_values">様々な変換値のデモ</h3> + +この例は、様々な変換関数で様々なt `transform-origin` の値を選択した場合の効果を表します。 + +```html hidden +<div class="container"> + +<div class="example"> + <div class="box box1"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: none; +</pre> + +<div class="example"> + <div class="box box2"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: rotate(30deg); +</pre> + +<div class="example"> + <div class="box box3"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: rotate(30deg); +transform-origin: 0 0; +</pre> + +<div class="example"> + <div class="box box4"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: rotate(30deg); +transform-origin: 100% 100%; +</pre> + +<div class="example"> + <div class="box box5"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: rotate(30deg); +transform-origin: -1em -3em; +</pre> + +<div class="example"> + <div class="box box6"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: scale(1.7); +</pre> + +<div class="example"> + <div class="box box7"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: scale(1.7); +transform-origin: 0 0; +</pre> + +<div class="example"> + <div class="box box8"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: scale(1.7); +transform-origin: 100% -30%; +</pre> + +<div class="example"> + <div class="box box9"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: skewX(50deg); +transform-origin: 100% -30%; +</pre> + +<div class="example"> + <div class="box box10"> </div> + <div class="box original"> </div> +</div> + +<pre> +transform: skewY(50deg); +transform-origin: 100% -30%; +</pre> + +</div> +``` + +```css hidden +.container { + display: grid; + grid-template-columns: 200px 100px; + gap: 20px; +} + +.example { + position: relative; + margin: 0 2em 4em 5em; +} + +.box { + display: inline-block; + width: 3em; + height: 3em; + border: solid 1px; + background-color: palegreen; +} + +.original { + position: absolute; + left: 0; + opacity: 20%; +} + +.box1 { + transform: none; +} + +.box2 { + transform: rotate(30deg); +} + +.box3 { + transform: rotate(30deg); + transform-origin: 0 0; +} + +.box4 { + transform: rotate(30deg); + transform-origin: 100% 100%; +} + +.box5 { + transform: rotate(30deg); + transform-origin: -1em -3em; +} + +.box6 { + transform: scale(1.7); +} + +.box7 { + transform: scale(1.7); + transform-origin: 0 0; +} + +.box8 { + transform: scale(1.7); + transform-origin: 100% -30%; +} + +.box9 { + transform: skewX(50deg); + transform-origin: 100% -30%; +} + +.box10 { + transform: skewY(50deg); + transform-origin: 100% -30%; +} +``` + +{{EmbedLiveSample('A_demonstration_of_various_transform_values', '', 1350) }} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- <https://css-tricks.com/almanac/properties/t/transform-origin/> diff --git a/files/ja/web/css/transform-style/index.html b/files/ja/web/css/transform-style/index.html deleted file mode 100644 index 8384df1d3e..0000000000 --- a/files/ja/web/css/transform-style/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: transform-style -slug: Web/CSS/transform-style -tags: - - CSS - - CSS Property - - CSS Transforms - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/transform-style ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>transform-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。</span></p> - -<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>平面化した場合、子要素は自身の 3D 空間に存在しなくなります。</p> - -<p>このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -transform-style: flat; -transform-style: preserve-3d; - -/* グローバル値 */ -transform-style: inherit; -transform-style: initial; -transform-style: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>flat</code></dt> - <dd>要素の子要素を要素自身の平面上に配置することを示します。</dd> - <dt><code>preserve-3d</code></dt> - <dd>要素の子要素を 3D 空間に配置することを示します。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Transform_style_demonstration" name="Transform_style_demonstration">変換スタイルのデモ</h3> - -<p>この例では、変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で <code>transform-style: preserve-3d</code> が設定されているため、3D 空間で変換され、意図したとおりに表示されます。</p> - -<p>また、これと <code>transform-style: flat</code> の間で切り替えられるチェックボックスも用意されています。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><section id="example-element"> - <div class="face front">1</div> - <div class="face back">2</div> - <div class="face right">3</div> - <div class="face left">4</div> - <div class="face top">5</div> - <div class="face bottom">6</div> -</section> - -<div class="checkbox"> - <label for="preserve"><code>preserve-3d</code></label> - <input type="checkbox" id="preserve" checked> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">#example-element { - margin: 50px; - width: 100px; - height: 100px; - transform-style: preserve-3d; - transform: rotate3d(1, 1, 1, 30deg); -} - -.face { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - position: absolute; - backface-visibility: inherit; - font-size: 60px; - color: #fff; -} - -.front { - background: rgba(90,90,90,.7); - transform: translateZ(50px); -} - -.back { - background: rgba(0,210,0,.7); - transform: rotateY(180deg) translateZ(50px); -} - -.right { - background: rgba(210,0,0,.7); - transform: rotateY(90deg) translateZ(50px); -} - -.left { - background: rgba(0,0,210,.7); - transform: rotateY(-90deg) translateZ(50px); -} - -.top { - background: rgba(210,210,0,.7); - transform: rotateX(90deg) translateZ(50px); -} - -.bottom { - background: rgba(210,0,210,.7); - transform: rotateX(-90deg) translateZ(50px); -}</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js notranslate">const cube = document.getElementById('example-element'); -const checkbox = document.getElementById('preserve'); - -checkbox.addEventListener('change', () => { - if(checkbox.checked) { - cube.style.transformStyle = 'preserve-3d'; - } else { - cube.style.transformStyle = 'flat'; - } -})</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.transform-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/CSS/Using_CSS_transforms">CSS 変形の使用</a></li> -</ul> diff --git a/files/ja/web/css/transform-style/index.md b/files/ja/web/css/transform-style/index.md new file mode 100644 index 0000000000..f9bf92eaba --- /dev/null +++ b/files/ja/web/css/transform-style/index.md @@ -0,0 +1,162 @@ +--- +title: transform-style +slug: Web/CSS/transform-style +tags: + - CSS + - CSS プロパティ + - CSS 座標変換 + - 実験的 + - Reference + - recipe:css-property +browser-compat: css.properties.transform-style +translation_of: Web/CSS/transform-style +--- +{{CSSRef}} + +**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。 + +{{EmbedInteractiveExample("pages/css/transform-style.html")}} + +平面化した場合、子要素は自身の 3D 空間に存在しなくなります。 + +このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。 + +## 構文 + +```css +/* キーワード値 */ +transform-style: flat; +transform-style: preserve-3d; + +/* グローバル値 */ +transform-style: inherit; +transform-style: initial; +transform-style: revert; +transform-style: unset; +``` + +### 値 + +- `flat` + - : 要素の子要素を要素自身の平面上に配置することを示します。 +- `preserve-3d` + - : 要素の子要素を 3D 空間に配置することを示します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Transform_style_demonstration">座標変換スタイルのデモ</h3> + +この例では、座標変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で座標変換され、意図したとおりに表示されます。 + +また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意しました。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。 + +#### HTML + +```html +<section id="example-element"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> +</section> + +<div class="checkbox"> + <label for="preserve"><code>preserve-3d</code></label> + <input type="checkbox" id="preserve" checked> +</div> +``` + +#### CSS + +```css +#example-element { + margin: 50px; + width: 100px; + height: 100px; + transform-style: preserve-3d; + transform: rotate3d(1, 1, 1, 30deg); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} +``` + +#### JavaScript + +```js +const cube = document.getElementById('example-element'); +const checkbox = document.getElementById('preserve'); + +checkbox.addEventListener('change', () => { + if(checkbox.checked) { + cube.style.transformStyle = 'preserve-3d'; + } else { + cube.style.transformStyle = 'flat'; + } +}) +``` + +#### 結果 + +{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) diff --git a/files/ja/web/css/transform/index.html b/files/ja/web/css/transform/index.html deleted file mode 100644 index 360b12a5a4..0000000000 --- a/files/ja/web/css/transform/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: transform -slug: Web/CSS/transform -tags: - - CSS - - CSS プロパティ - - CSS 変形 - - Reference -translation_of: Web/CSS/transform ---- -<div>{{CSSRef}}</div> - -<div><a href="/ja/docs/Web/CSS">CSS</a> のプロパティ <strong><code>transform</code></strong> は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>の座標空間を変更します。</div> - -<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p> - -<div class="warning"> -<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/ja/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* キーワード値 */ -transform: none; - -/* 関数値 */ -transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); -transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -transform: perspective(17px); -transform: rotate(0.5turn); -transform: rotate3d(1, 2.0, 3.0, 10deg); -transform: rotateX(10deg); -transform: rotateY(10deg); -transform: rotateZ(10deg); -transform: translate(12px, 50%); -transform: translate3d(12px, 50%, 3em); -transform: translateX(2em); -transform: translateY(3in); -transform: translateZ(2px); -transform: scale(2, 0.5); -transform: scale3d(2.5, 1.2, 0.3); -transform: scaleX(2); -transform: scaleY(0.5); -transform: scaleZ(0.3); -transform: skew(30deg, 20deg); -transform: skewX(30deg); -transform: skewY(1.07rad); - -/* 複数の関数値 */ -transform: translateX(10px) rotate(10deg) translateY(5px); -transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); - -/* グローバル値 */ -transform: inherit; -transform: initial; -transform: unset; -</pre> - -<p><code>transform</code> プロパティには、キーワード値 <code><a href="#none">none</a></code> か <code><a href="#<transform-function>"><transform-function></a></code> の値のいずれかが指定されます。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt> - <dd>適用される 1 つ以上の <a href="/ja/docs/Web/CSS/transform-function">CSS 変形関数</a>です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。</dd> - <dt id="none"><code>none</code></dt> - <dd>変形を何も適用しないことを指定します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<p>{{cssxref("transform-function/perspective", "perspective()")}} を複数の関数の中で使用する場合は、最初に配置しなければなりません。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>Transformed element</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">div { - border: solid red; - transform: translate(30px, 20px) rotate(20deg); - width: 140px; - height: 60px; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples", "400", "160")}}</p> - -<p>その他の例は、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_transforms">CSS Transforms の利用</a> および {{cssxref("<transform-function>")}} をご覧ください。</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。</p> - -<p>また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。</p> - -<p>詳しくは以下の文書を参照してください。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN WCAG の理解、ガイドライン 2.3 の解説</a></li> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>3D 変換関数を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> - <td>{{Spec2('CSS3 Transforms')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.transform")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li> - <li>{{cssxref("<transform-function>")}} データ型にすべての変形関数の説明があります</li> - <li>CSS 変形機能を視覚化するオンラインツール: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li> -</ul> diff --git a/files/ja/web/css/transform/index.md b/files/ja/web/css/transform/index.md new file mode 100644 index 0000000000..cd519224bb --- /dev/null +++ b/files/ja/web/css/transform/index.md @@ -0,0 +1,134 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - CSS プロパティ + - Reference + - 座標変換 + - recipe:css-property +browser-compat: css.properties.transform +translation_of: Web/CSS/transform +--- +{{CSSRef}} + +**`transform`** は [CSS](/ja/docs/Web/CSS) のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の[視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)の座標空間を変更します。 + +{{EmbedInteractiveExample("pages/css/transform.html")}} + +このプロパティに `none` 以外の値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` であるすべての要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。 + +> **Warning:** 座標変換可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[置換要素でないインラインボックス](/ja/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。 + +## 構文 + +```css +/* キーワード値 */ +transform: none; + +/* 関数値 */ +transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); +transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); +transform: perspective(17px); +transform: rotate(0.5turn); +transform: rotate3d(1, 2.0, 3.0, 10deg); +transform: rotateX(10deg); +transform: rotateY(10deg); +transform: rotateZ(10deg); +transform: translate(12px, 50%); +transform: translate3d(12px, 50%, 3em); +transform: translateX(2em); +transform: translateY(3in); +transform: translateZ(2px); +transform: scale(2, 0.5); +transform: scale3d(2.5, 1.2, 0.3); +transform: scaleX(2); +transform: scaleY(0.5); +transform: scaleZ(0.3); +transform: skew(30deg, 20deg); +transform: skewX(30deg); +transform: skewY(1.07rad); + +/* 複数の関数値 */ +transform: translateX(10px) rotate(10deg) translateY(5px); +transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); + +/* グローバル値 */ +transform: inherit; +transform: initial; +transform: revert; +transform: unset; +``` + +`transform` プロパティには、キーワード値 `none` か 1 つ以上の `<transform-function>` の値のいずれかが指定されます。 + +複数の関数値に {{cssxref("transform-function/perspective()", "perspective()")}} が含まれる場合は、先頭に置く必要があります。 + +### 値 + +- {{cssxref("<transform-function>")}} + - : 適用される 1 つ以上の [CSS 座標変換関数](/ja/docs/Web/CSS/transform-function)です。座標変換関数は、左から右へ順に重ねられ、つまり右から左の順に座標変換の合成の効果が適用されます。 +- `none` + - : 座標変換を何も適用しないことを指定します。 + +## アクセシビリティの考慮 + +拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 + +また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 + +詳しくは以下の文書を参照してください。 + +- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) +- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Translating_and_rotating_an_element">要素の移動と回転</h3> + +#### HTML + +```html +<div>Transformed element</div> +``` + +#### CSS + +```css +div { + border: solid red; + transform: translate(30px, 20px) rotate(20deg); + width: 140px; + height: 60px; +} +``` + +#### 結果 + +{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}} + +### その他の例 + +その他の例は、[CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)および {{cssxref("<transform-function>")}} をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- {{cssxref("<transform-function>")}} データ型にすべての座標変換関数の説明があります +- CSS 座標変換機能を視覚化するオンラインツール: [CSS Transform Playground](https://css-transform.moro.es/) diff --git a/files/ja/web/css/transition-timing-function/index.html b/files/ja/web/css/transition-timing-function/index.html deleted file mode 100644 index bce50156f2..0000000000 --- a/files/ja/web/css/transition-timing-function/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: transition-timing-function -slug: Web/CSS/transition-timing-function -tags: - - CSS - - CSS Reference - - 'CSS:Mozilla Extensions' - - Fixit - - NeedsNewCompatTable -translation_of: Web/CSS/transition-timing-function ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>transition-timing-function</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">トランジション効果</a>の作用を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>このプロパティは、簡単に言えば加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。</p> - -<p>この加速曲線は、トランジションが行われるプロパティごとに 1 つの {{cssxref("<timing-function>")}} を用いて定義されます。</p> - -<p>複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 <code>transition-property</code> のリストとして振るまいます。指定されたタイミング関数が <code>transition-property</code> のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">/* キーワード値 */ -transition-timing-function: ease; -transition-timing-function: ease-in; -transition-timing-function: ease-out; -transition-timing-function: ease-in-out; -transition-timing-function: linear; -transition-timing-function: step-start; -transition-timing-function: step-end; - -/* 関数値 */ -transition-timing-function: steps(4, jump-end); -transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); - -/* 段階式の関数のキーワード */ -transition-timing-function: steps(4, jump-start); -transition-timing-function: steps(10, jump-end); -transition-timing-function: steps(20, jump-none); -transition-timing-function: steps(5, jump-both); -transition-timing-function: steps(6, start); -transition-timing-function: steps(8, end); - -/* 複数のタイミング関数 */ -transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); - -/* グローバル値 */ -transition-timing-function: inherit; -transition-timing-function: initial; -transition-timing-function: unset;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><timing-function></code></dt> - <dd>各々の {{cssxref("<timing-function>")}} は {{ cssxref("transition-property") }} で指定された、トランジションを行うプロパティに対応するタイミング関数を表します。 - <p>非段階のキーワード値 (ease, linear, ease-in-out, など) はそれぞれ4つの固定点による二次元ベジェ曲線を表しており、 cubic-bezier() 関数の値は定義済みの値以外を使用することができます。 The step timing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.</p> - - <dl> - <dt><code>ease</code></dt> - <dd>Equal to <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>, the default value, increases in velocity towards the middle of the transition, slowing back down at the end.</dd> - <dt><code>linear</code></dt> - <dd>Equal to <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>, transitions at an even speed.</dd> - <dt><code>ease-in</code></dt> - <dd>Equal to <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code>, starts off slowly, with the transition speed increasing until complete.</dd> - <dt><code>ease-out</code></dt> - <dd>Equal to <code>cubic-bezier(0, 0, 0.58, 1.0)</code>, starts transitioning quickly, slowing down the transition continues. •</dd> - <dt><code>ease-in-out</code></dt> - <dd>Equal to <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code>, starts transitioning slowly, speeds up, and then slows down again.</dd> - <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt> - <dd>An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.</dd> - <dt><code>steps( n, <jumpterm>)</code></dt> - <dd>Displays the transition along <em>n stops along the transition, displaying each stop for </em>equal lengths of time. For example, if <em>n</em> is 5, there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: - <dl> - <dt><code>jump-start</code></dt> - <dd>Denotes a left-continuous function, so that the first jump happens when the transition begins;</dd> - <dt><code>jump-end</code></dt> - <dd>Denotes a right-continuous function, so that the last jump happens when the animation ends;</dd> - <dt><code>jump-none</code></dt> - <dd>There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration</dd> - <dt><code>jump-both</code></dt> - <dd>Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.</dd> - <dt><code>start</code></dt> - <dd>Same as <code>jump-start.</code></dd> - <dt><code>end</code></dt> - <dd>Same as <code>jump-end.</code></dd> - </dl> - </dd> - <dt><code>step-start</code></dt> - <dd>Equal to <code>steps(1, jump-start)</code></dd> - <dt><code>step-end</code></dt> - <dd>Equal to <code>steps(1, jump-end)</code></dd> - </dl> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<div> -<h3 id="Cubic-Bezier_examples">Cubic-Bezier examples</h3> - -<div class="hidden"> -<pre class="brush:html"><div class="parent"> - <div class="ease">ease</div> - <div class="easein">ease-in</div> - <div class="easeout">ease-out</div> - <div class="easeinout">ease-in-out</div> - <div class="linear">linear</div> - <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> -</div></pre> - -<pre class="brush:css;">.parent {} -.parent > div[class] { - width: 12em; - min-width: 12em; - margin-bottom: 4px; - background-color: black; - border: 1px solid red; - color: white; - transition-property: all; - transition-duration: 7s; -} -.parent > div.box1{ - width: 90vw; - min-width: 24em; - background-color: magenta; - color: yellow; - border: 1px solid orange; - transition-property: all; - transition-duration: 2s; -} -</pre> - -<pre class="brush:js">function updateTransition() { - var els = document.querySelectorAll(".parent > div[class]"); - for(var c = els.length, i = 0; i < c; i++) { - els[i].classList.toggle("box1"); - } -} - -var intervalID = window.setInterval(updateTransition, 10000); -</pre> -</div> - -<pre class="brush: css">.ease { - transition-timing-function: ease; -} -.easein { - transition-timing-function: ease-in; -} -.easeout { - transition-timing-function: ease-out; -} -.easeinout { - transition-timing-function: ease-in-out; -} -.linear { - transition-timing-function: linear; -} -.cb { - transition-timing-function: cubic-bezier(0.2,-2,0.8,2); -}</pre> - -<div>{{EmbedLiveSample("Cubic-Bezier_examples")}}</div> -</div> - -<div> -<h3 id="Step_examples">Step examples</h3> - -<div class="hidden"> -<pre class="brush:html"><div class="parent"> - <div class="jump-start">jump-start</div> - <div class="jump-end">jump-end</div> - <div class="jump-both">jump-both</div> - <div class="jump-none">jump-none</div> - <div class="step-start">step-start</div> - <div class="step-end">step-end</div> -</div></pre> - -<pre class="brush:css;">.parent {} -.parent > div[class] { - width: 12em; - min-width: 12em; - margin-bottom: 4px; - background-color: black; - border: 1px solid red; - color: white; - transition-property: all; - transition-duration:7s; -} -.parent > div.box1{ - width: 90vw; - min-width: 24em; - background-color: magenta; - color: yellow; - border: 1px solid orange; - transition-property: all; - transition-duration:2s; -} -</pre> - -<pre class="brush:js">function updateTransition() { - var els = document.querySelectorAll(".parent > div[class]"); - for(var c = els.length, i = 0; i < c; i++) { - els[i].classList.toggle("box1"); - } -} - -var intervalID = window.setInterval(updateTransition, 10000); -</pre> -</div> - -<pre class="brush: css">.jump-start { - transition-timing-function: steps(5, jump-start); -} -.jump-end { - transition-timing-function: steps(5, jump-end); -} -.jump-none { - transition-timing-function: steps(5, jump-none); -} -.jump-both { - transition-timing-function: steps(5, jump-both); -} -.step-start { - transition-timing-function: step-start; -} -.step-end { - transition-timing-function: step-end; -}</pre> - -<div>{{EmbedLiveSample("Step_examples")}}</div> -</div> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> - -<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }}</td> - <td>{{ Spec2('CSS3 Transitions') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.transition-timing-function")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="CSS transition の使用">CSS transition の使用</a></li> - <li>{{cssxref('transition')}}</li> - <li>{{cssxref('transition-property')}}</li> - <li>{{cssxref('transition-duration')}}</li> - <li>{{cssxref('transition-delay')}}</li> - <li>{{domxref("TransitionEvent")}}</li> -</ul> diff --git a/files/ja/web/css/transition-timing-function/index.md b/files/ja/web/css/transition-timing-function/index.md new file mode 100644 index 0000000000..7acaa451be --- /dev/null +++ b/files/ja/web/css/transition-timing-function/index.md @@ -0,0 +1,272 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +tags: + - CSS + - CSS プロパティ + - CSS Transitions + - Reference + - recipe:css-property +browser-compat: css.properties.transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +{{CSSRef}} + +**`transition-timing-function`** は CSS のプロパティで、[トランジション効果](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)の影響を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。 + +{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}} + +このプロパティは、簡単に言えば加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。 + +この加速曲線は、トランジションが行われるプロパティごとに 1 つの {{cssxref("<easing-function>")}} を用いて定義されます。 + +複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 `transition-property` のリストとして振るまいます。指定されたタイミング関数が `transition-property` のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。 + +## 構文 + +```css +/* キーワード値 */ +transition-timing-function: ease; +transition-timing-function: ease-in; +transition-timing-function: ease-out; +transition-timing-function: ease-in-out; +transition-timing-function: linear; +transition-timing-function: step-start; +transition-timing-function: step-end; + +/* 関数値 */ +transition-timing-function: steps(4, jump-end); +transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); + +/* 段階式の関数のキーワード */ +transition-timing-function: steps(4, jump-start); +transition-timing-function: steps(10, jump-end); +transition-timing-function: steps(20, jump-none); +transition-timing-function: steps(5, jump-both); +transition-timing-function: steps(6, start); +transition-timing-function: steps(8, end); + +/* 複数のタイミング関数 */ +transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); + +/* グローバル値 */ +transition-timing-function: inherit; +transition-timing-function: initial; +transition-timing-function: revert; +transition-timing-function: unset; +``` + +<h3 id="Values" name="Values">値</h3> + +- `<easing-function>` + + - : 各々の {{cssxref("<easing-function>")}} は {{ cssxref("transition-property") }} で指定された、トランジションを行うプロパティに対応するイージング関数を表します。 + + 段階のないキーワード値 (ease、linear、ease-in-out、など) はそれぞれ 4 つの固定点による三次ベジェ曲線を表しており、 cubic-bezier() 関数の値は定義済みの値以外を使用することができます。段階のあるタイミング関数は、入力の時間を時間的に等しい間隔で指定された数に分割します。これは、ステップ数とステップ位置によって定義されます。 + + - `ease` + - : `cubic-bezier(0.25, 0.1, 0.25, 1.0)` と同等であり、既定値です。トランジションの半ばまで変化量が増加し、最後にはまた遅くなります。 + - `linear` + - : `cubic-bezier(0.0, 0.0, 1.0, 1.0)` と同等であり、トランジションは均等の速度になります。 + - `ease-in` + - : `cubic-bezier(0.42, 0, 1.0, 1.0)` と同等であり、最初は遅く、トランジションの速度は完了まで増加し続けます。 + - `ease-out` + - : `cubic-bezier(0, 0, 0.58, 1.0)` と同等であり、トランジションは速い速度で始まり、速度を次第に遅くしていきます。 + - `ease-in-out` + - : `cubic-bezier(0.42, 0, 0.58, 1.0)` と同等であり、トランジションをゆっくり開始し、速度を上げた後、再び速度を遅くします。 + - `cubic-bezier(p1, p2, p3, p4)` + - : 作者が定義する三次ベジェ曲線です。p1 と p3 の値は 0 から 1 の範囲でなければなりません。 + - `steps( n, <jumpterm>)` + + - : トランジションは _n_ 個の停止点を辿って表示され、それぞれの停止点の表示時間は均等な長さになります。例えば、_n_ が 5 の場合、5 つのステップがあることになります。一時的に停止する点が 0%, 20%, 40%, 60%, 80% であるのか、20%, 40%, 60%, 80%, 100% であるのか、トランジションに沿って 0% と 100% の中間で 5 回停止するのか、それとも 0% と 100% の位置を含めて 5 回 (0%, 25%, 50%, 75%, 100%) 停止するのかについては、以下のジャンプ用語のどれを使うかで決まります。 + + - `jump-start` + - : 左連続関数を表します。すなわち、トランジションの開始時に最初のジャンプが発生します。 + - `jump-end` + - : 右連続関数を表します。すなわち、アニメーションの終了時に最後のジャンプが発生します。 + - `jump-none` + - : どちら側にもジャンプが発生しません。0% の位置と 100% の位置の両方が長さの 1/n だけ表示されます。 + - `jump-both` + - : 0% と 100% の両方で停止が含まれます。その結果、トランジションの時間内にステップが 1 つ追加されます。 + - `start` + - : `jump-start` と同じです。 + - `end` + - : `jump-end` と同じです。 + + - `step-start` + - : `steps(1, jump-start)` と同じです。 + - `step-end` + - : `steps(1, jump-end)` と同じです。 + +## アクセシビリティの考慮 + +アニメーションは、ユーザーがどのようなアクションを期待されているのかを理解するためのガイド、ユーザーインターフェイス内の関係性の表示、どのようなアクションが発生したのかをユーザーに通知するなど、役に立つことがあります。アニメーションは、認知的な負荷を軽減し、変化に気づかないことを防ぎ、空間的な関係をよりよく思い出すことに役立ちます。しかし、アニメーションの中には、注意欠陥多動性障害 (ADHD) の人の認知に問題が発生するものや、前庭障害、てんかん、片頭痛、スコトープ過敏症の引き金となるような動きをするものもあります。 + +アニメーションを一時停止または無効にする機能を提供するとともに、[動きの縮減メディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)を使用して、アニメーションを使用しないことを希望するユーザーにも快適な利用環境を提供することを検討してください。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Cubic-Bezier_examples">三次ベジェの例</h3> + +```html hidden +<div class="parent"> + <div class="ease">ease</div> + <div class="easein">ease-in</div> + <div class="easeout">ease-out</div> + <div class="easeinout">ease-in-out</div> + <div class="linear">linear</div> + <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> +</div> +``` + +```css hidden +.parent {} +.parent > div[class] { + width: 12em; + min-width: 12em; + margin-bottom: 4px; + background-color: black; + border: 1px solid red; + color: white; + transition-property: all; + transition-duration: 7s; +} +.parent > div.box1{ + width: 90vw; + min-width: 24em; + background-color: magenta; + color: yellow; + border: 1px solid orange; + transition-property: all; + transition-duration: 2s; +} +``` + +```js hidden +function updateTransition() { + var els = document.querySelectorAll(".parent > div[class]"); + for(var c = els.length, i = 0; i < c; i++) { + els[i].classList.toggle("box1"); + } +} + +var intervalID = window.setInterval(updateTransition, 10000); +``` + +```css +.ease { + transition-timing-function: ease; +} +.easein { + transition-timing-function: ease-in; +} +.easeout { + transition-timing-function: ease-out; +} +.easeinout { + transition-timing-function: ease-in-out; +} +.linear { + transition-timing-function: linear; +} +.cb { + transition-timing-function: cubic-bezier(0.2,-2,0.8,2); +} +``` + +{{EmbedLiveSample("Cubic-Bezier_examples")}} + +<h3 id="Step_examples">ステップの例</h3> + +```html hidden +<div class="parent"> + <div class="jump-start">jump-start</div> + <div class="jump-end">jump-end</div> + <div class="jump-both">jump-both</div> + <div class="jump-none">jump-none</div> + <div class="step-start">step-start</div> + <div class="step-end">step-end</div> +</div> +``` + +```css hidden +.parent {} +.parent > div[class] { + width: 12em; + min-width: 12em; + margin-bottom: 4px; + background-color: black; + border: 1px solid red; + color: white; + transition-property: all; + transition-duration:7s; +} +.parent > div.box1{ + width: 90vw; + min-width: 24em; + background-color: magenta; + color: yellow; + border: 1px solid orange; + transition-property: all; + transition-duration:2s; +} +``` + +```js hidden +function updateTransition() { + var els = document.querySelectorAll(".parent > div[class]"); + for(var c = els.length, i = 0; i < c; i++) { + els[i].classList.toggle("box1"); + } +} + +var intervalID = window.setInterval(updateTransition, 10000); +``` + +```css +.jump-start { + transition-timing-function: steps(5, jump-start); +} +.jump-end { + transition-timing-function: steps(5, jump-end); +} +.jump-none { + transition-timing-function: steps(5, jump-none); +} +.jump-both { + transition-timing-function: steps(5, jump-both); +} +.step-start { + transition-timing-function: step-start; +} +.step-end { + transition-timing-function: step-end; +} +``` + +{{EmbedLiveSample("Step_examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- {{cssxref('transition')}} +- {{cssxref('transition-property')}} +- {{cssxref('transition-duration')}} +- {{cssxref('transition-delay')}} +- {{domxref("TransitionEvent")}} diff --git a/files/ja/web/css/translate/index.html b/files/ja/web/css/translate/index.html deleted file mode 100644 index c006580ae4..0000000000 --- a/files/ja/web/css/translate/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: translate -slug: Web/CSS/translate -tags: - - CSS - - CSS Property - - CSS 変形 - - Experimental - - Reference - - Transforms -translation_of: Web/CSS/translate ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>translate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、平行移動による変形を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 <code>transform</code> の値で指定する変形関数を正確に思い出す必要がなくなります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -translate: none; - -/* 単一の値 */ -translate: 100px; -translate: 50%; - -/* 二つの値 */ -translate: 100px 200px; -translate: 50% 105px; - -/* 三つの値 */ -translate: 50% 105px 5rem; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>単一の {{cssxref("<length-percentage>")}} 値</dt> - <dd>単一の {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 <code>translate()</code> (二次元の平行移動) 関数に単一の値を指定したものと同等です。</dd> - <dt>二つの {{cssxref("<length-percentage>")}} 値</dt> - <dd>二つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 <code>translate()</code> (二次元の平行移動) 関数に二つの値を指定したものと同等です。</dd> - <dt>三つの値</dt> - <dd>二つの {{cssxref("<length-percentage>")}} 値と一つの {{cssxref("<length>")}} 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 <code>translate3d()</code> (三次元の平行移動) 関数と同等です。</dd> - <dt id="none"><code>none</code></dt> - <dd>平行移動が適用されないことを指定します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p class="translate">Translation</p> -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">* { - box-sizing: border-box; -} - -html { - font-family: sans-serif; -} - -div { - width: 150px; - margin: 0 auto; -} - -p { - padding: 10px 5px; - border: 3px solid black; - border-radius: 20px; - width: 150px; - font-size: 1.2rem; - text-align: center; -} - -.translate { - transition: translate 1s; -} - -div:hover .translate { - translate: 200px 50px; -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Examples')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.translate")}}</p> diff --git a/files/ja/web/css/translate/index.md b/files/ja/web/css/translate/index.md new file mode 100644 index 0000000000..bea674339d --- /dev/null +++ b/files/ja/web/css/translate/index.md @@ -0,0 +1,122 @@ +--- +title: translate +slug: Web/CSS/translate +tags: + - CSS + - CSS プロパティ + - Reference + - 座標変換 + - recipe:css-property +browser-compat: css.properties.translate +translation_of: Web/CSS/translate +--- +{{CSSRef}} + +**`translate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、平行移動の座標変換を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 `transform` の値で指定する変換関数を正確に思い出す必要がなくなります。 + +## 構文 + +```css +/* キーワード値 */ +translate: none; + +/* 単一の値 */ +translate: 100px; +translate: 50%; + +/* 二つの値 */ +translate: 100px 200px; +translate: 50% 105px; + +/* 三つの値 */ +translate: 50% 105px 5rem; + +/* グローバル値 */ +translate: inherit; +translate: initial; +translate: revert; +translate: unset; +``` + +### 値 + +- 単一の {{cssxref("<length-percentage>")}} 値 + - : 単一の {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 `translate()` (二次元の平行移動) 関数に単一の値を指定したものと同等です。 +- 二つの {{cssxref("<length-percentage>")}} 値 + - : 二つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 `translate()` (二次元の平行移動) 関数に二つの値を指定したものと同等です。 +- 三つの値 + - : 二つの {{cssxref("<length-percentage>")}} 値と一つの {{cssxref("<length>")}} 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 `translate3d()` (三次元の平行移動) 関数と同等です。 +- `none` + - : 平行移動が適用されないことを指定します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div> + <p class="translate">Translation</p> +</div> +``` + +### CSS + +```css +* { + box-sizing: border-box; +} + +html { + font-family: sans-serif; +} + +div { + width: 150px; + margin: 0 auto; +} + +p { + padding: 10px 5px; + border: 3px solid black; + border-radius: 20px; + width: 150px; + font-size: 1.2rem; + text-align: center; +} + +.translate { + transition: translate 1s; +} + +div:hover .translate { + translate: 200px 50px; +} +``` + +### 結果 + +{{EmbedLiveSample('Examples')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref('scale')}} +- {{cssxref('rotate')}} +- {{cssxref('transform')}} + +メモ: `skew` には独立した `transform` の値はありません diff --git a/files/ja/web/css/webkit_extensions/index.html b/files/ja/web/css/webkit_extensions/index.html deleted file mode 100644 index efcb61d7ac..0000000000 --- a/files/ja/web/css/webkit_extensions/index.html +++ /dev/null @@ -1,614 +0,0 @@ ---- -title: WebKit CSS 拡張 -slug: Web/CSS/WebKit_Extensions -tags: - - CSS - - Non-standard - - Reference - - WebKit 拡張 -translation_of: Web/CSS/WebKit_Extensions ---- -<div>{{CSSRef}}</div> - -<p>Safari や Chrome のような WebKit または blink ベースのアプリケーションは、数多くの特殊な <strong><a href="/ja/docs/Web/CSS">CSS</a> の WebKit 拡張</strong>に対応しています。これらの拡張には一般に <code>-webkit</code> の接頭辞が付きます。 <code>-webkit</code> の接頭辞が付いたプロパティの多くは <code>-apple</code> の接頭辞でも動作します。少数ながら <code>-epub</code> の接頭辞も存在します。</p> - -<h2 id="WebKit-only_properties" name="WebKit-only_properties">WebKit 独自のプロパティ</h2> - -<div class="note"> -<p><strong>メモ:</strong> ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。</p> -</div> - -<div class="index"> -<h3 id="A">A</h3> - -<ul> - <li>{{CSSxRef("-webkit-animation-trigger")}}</li> - <li>{{CSSxRef("-webkit-app-region")}}</li> - <li>{{CSSxRef("-webkit-appearance")}}*</li> - <li>{{CSSxRef("-webkit-aspect-ratio")}}</li> -</ul> - -<h3 id="B">B</h3> - -<ul> - <li>{{CSSxRef("-webkit-backdrop-filter")}}</li> - <li>{{CSSxRef("-webkit-background-composite")}}</li> - <li>{{CSSxRef("border-block-end","-webkit-border-after")}}**</li> - <li>{{CSSxRef("border-block-end-color","-webkit-border-after-color")}}**</li> - <li>{{CSSxRef("border-block-end-style","-webkit-border-after-style")}}**</li> - <li>{{CSSxRef("border-block-end-width","-webkit-border-after-width")}}**</li> - <li>{{CSSxRef("border-block-start","-webkit-border-before")}}**</li> - <li>{{CSSxRef("border-block-start-color","-webkit-border-before-color")}}**</li> - <li>{{CSSxRef("border-block-start-style","-webkit-border-before-style")}}**</li> - <li>{{CSSxRef("border-block-start-width","-webkit-border-before-width")}}**</li> - <li>{{CSSxRef("border-inline-end", "-webkit-border-end")}}**</li> - <li>{{CSSxRef("border-inline-end-color","-webkit-border-end-color")}}**</li> - <li>{{CSSxRef("border-inline-end-style","-webkit-border-end-style")}}**</li> - <li>{{CSSxRef("border-inline-end-width","-webkit-border-end-width")}}**</li> - <li>{{CSSxRef("-webkit-border-fit")}}</li> - <li>{{CSSxRef("-webkit-border-horizontal-spacing")}}</li> - <li>{{CSSxRef("border-inline-start", "-webkit-border-start")}}**</li> - <li>{{CSSxRef("border-inline-start-color", "-webkit-border-start-color")}}**</li> - <li>{{CSSxRef("border-inline-start-style", "-webkit-border-start-style")}}**</li> - <li>{{CSSxRef("border-inline-start-width", "-webkit-border-start-width")}}**</li> - <li>{{CSSxRef("-webkit-border-vertical-spacing")}}</li> - <li>{{CSSxRef("align-items","-webkit-box-align")}}**</li> - <li>{{CSSxRef("flex-direction", "-webkit-box-direction")}}**</li> - <li>{{CSSxRef("-webkit-box-flex-group")}}**</li> - <li>{{CSSxRef("flex-grow", "-webkit-box-flex")}}**</li> - <li>{{CSSxRef("flex-flow", "-webkit-box-lines")}}**</li> - <li>{{CSSxRef("order", "-webkit-box-ordinal-group")}}**</li> - <li>{{CSSxRef("flex-direction","-webkit-box-orient")}}**</li> - <li>{{CSSxRef("justify-content", "-webkit-box-pack")}}**</li> - <li>{{CSSxRef("-webkit-box-reflect")}}**</li> -</ul> - -<h3 id="C">C</h3> - -<ul> - <li>{{CSSxRef("-webkit-column-axis")}}</li> - <li>{{CSSxRef("-webkit-column-break-after")}}</li> - <li>{{CSSxRef("-webkit-column-break-before")}}</li> - <li>{{CSSxRef("-webkit-column-break-inside")}}</li> - <li>{{CSSxRef("-webkit-column-progression")}}</li> - <li>{{CSSxRef("-webkit-cursor-visibility")}}</li> -</ul> - -<h3 id="D-I">D-I</h3> - -<ul> - <li>{{CSSxRef("-webkit-dashboard-region")}}</li> - <li>{{CSSxRef("-webkit-font-size-delta")}}</li> - <li>{{CSSxRef("-webkit-font-smoothing")}}</li> - <li>{{CSSxRef("-webkit-highlight")}}</li> - <li>{{CSSxRef("-webkit-hyphenate-character")}}</li> - <li>{{CSSxRef("-webkit-hyphenate-limit-after")}}</li> - <li>{{CSSxRef("-webkit-hyphenate-limit-before")}}</li> - <li>{{CSSxRef("-webkit-hyphenate-limit-lines")}}</li> - <li>{{CSSxRef("-webkit-initial-letter")}}</li> -</ul> - -<h3 id="L">L</h3> - -<ul> - <li>{{CSSxRef("-webkit-line-align")}}</li> - <li>{{CSSxRef("-webkit-line-box-contain")}}</li> - <li>{{CSSxRef("-webkit-line-clamp")}}</li> - <li>{{CSSxRef("-webkit-line-grid")}}</li> - <li>{{CSSxRef("-webkit-line-snap")}}</li> - <li>{{CSSxRef("-webkit-locale")}}</li> - <li>{{CSSxRef("-webkit-logical-height")}}</li> - <li>{{CSSxRef("-webkit-logical-width")}}</li> -</ul> - -<h3 id="M">M</h3> - -<ul> - <li>{{CSSxRef("-webkit-margin-after-collapse")}}</li> - <li>{{CSSxRef("-webkit-margin-after")}}</li> - <li>{{CSSxRef("-webkit-margin-before-collapse")}}</li> - <li>{{CSSxRef("-webkit-margin-before")}}</li> - <li>{{CSSxRef("-webkit-margin-bottom-collapse")}}</li> - <li>{{CSSxRef("-webkit-margin-collapse")}}</li> - <li>{{CSSxRef("margin-block-end", "-webkit-margin-end")}}**</li> - <li>{{CSSxRef("margin-block-start", "-webkit-margin-start")}}**</li> - <li>{{CSSxRef("-webkit-margin-top-collapse")}}</li> - <li>{{CSSxRef("-webkit-marquee-direction")}}</li> - <li>{{CSSxRef("-webkit-marquee-increment")}}</li> - <li>{{CSSxRef("-webkit-marquee-repetition")}}</li> - <li>{{CSSxRef("-webkit-marquee-speed")}}</li> - <li>{{CSSxRef("-webkit-marquee-style")}}</li> - <li>{{CSSxRef("-webkit-marquee")}}</li> - <li>{{CSSxRef("-webkit-mask-box-image-outset")}}</li> - <li>{{CSSxRef("-webkit-mask-box-image-repeat")}}</li> - <li>{{CSSxRef("-webkit-mask-box-image-slice")}}</li> - <li>{{CSSxRef("-webkit-mask-box-image-source")}}</li> - <li>{{CSSxRef("-webkit-mask-box-image-width")}}</li> - <li>{{CSSxRef("-webkit-mask-box-image")}}</li> - <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li> - <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li> - <li>{{CSSxRef("-webkit-mask-source-type")}}</li> - <li>{{CSSxRef("-webkit-max-logical-height")}}</li> - <li>{{CSSxRef("-webkit-max-logical-width")}}</li> - <li>{{CSSxRef("-webkit-min-logical-height")}}</li> - <li>{{CSSxRef("-webkit-min-logical-width")}}</li> -</ul> - -<h3 id="N">N</h3> - -<ul> - <li>{{CSSxRef("-webkit-nbsp-mode")}}</li> -</ul> - -<h3 id="P">P</h3> - -<ul> - <li>{{CSSxRef("padding-block-end","-webkit-padding-after")}}**</li> - <li>{{CSSxRef("padding-block-start","-webkit-padding-before")}}**</li> - <li>{{CSSxRef("padding-inline-end","-webkit-padding-end")}}**</li> - <li>{{CSSxRef("padding-inline-start","-webkit-padding-start")}}**</li> - <li>{{CSSxRef("-webkit-perspective-origin-x")}}</li> - <li>{{CSSxRef("-webkit-perspective-origin-y")}}</li> - <li>{{CSSxRef("-webkit-print-color-adjust")}}</li> -</ul> - -<h3 id="R-S">R-S</h3> - -<ul> - <li>{{CSSxRef("-webkit-rtl-ordering")}}</li> - <li>{{CSSxRef("-webkit-svg-shadow")}}</li> -</ul> - -<h3 id="T">T</h3> - -<ul> - <li>{{CSSxRef("-webkit-tap-highlight-color")}}</li> - <li>{{CSSxRef("-webkit-text-combine")}}</li> - <li>{{CSSxRef("-webkit-text-decoration-skip")}}</li> - <li>{{CSSxRef("-webkit-text-decorations-in-effect")}}</li> - <li>{{CSSxRef("-webkit-text-fill-color")}}</li> - <li>{{CSSxRef("-webkit-text-security")}}</li> - <li>{{CSSxRef("-webkit-text-stroke-color")}}</li> - <li>{{CSSxRef("-webkit-text-stroke-width")}}</li> - <li>{{CSSxRef("-webkit-text-stroke")}}</li> - <li>{{CSSxRef("-webkit-text-zoom")}}</li> - <li>{{CSSxRef("-webkit-transform-origin-x")}}</li> - <li>{{CSSxRef("-webkit-transform-origin-y")}}</li> - <li>{{CSSxRef("-webkit-transform-origin-z")}}</li> -</ul> - -<h3 id="U">U</h3> - -<ul> - <li>{{CSSxRef("-webkit-user-drag")}}</li> - <li>{{CSSxRef("-webkit-user-modify")}}</li> -</ul> -</div> - -<p>* 一部は標準化され、接頭辞がなくなりました。<br> - ** 新しい構文が標準化されています。プロパティは新しい構文にリンクしています。古い構文は一部のブラウザーが対応しています。</p> - -<h2 id="WebKit-prefixed_properties_on_the_standards_track" name="WebKit-prefixed_properties_on_the_standards_track">標準化過程にある WebKit の接頭辞のついたプロパティ</h2> - -<div class="index"> -<ul> - <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li> - <li>{{CSSxRef("-webkit-font-size-delta")}}</li> - <li>{{CSSxRef("-webkit-mask-composite")}}</li> - <li>{{CSSxRef("-webkit-mask-position-x")}}</li> - <li>{{CSSxRef("-webkit-mask-position-y")}}</li> - <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li> - <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li> -</ul> -</div> - -<h2 id="Formerly_proprietary_properties_that_are_now_standard" name="Formerly_proprietary_properties_that_are_now_standard">以前は独自プロパティであったものが標準化されたもの</h2> - -<div class="note"> -<p><strong>メモ:</strong> CSS の互換性を最大化したい場合は、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。</p> -</div> - -<div class="index"> -<h3 id="A_2">A</h3> - -<ul> - <li>{{CSSxRef("align-content","-webkit-align-content")}}</li> - <li>{{CSSxRef("align-items","-webkit-align-items")}}</li> - <li>{{CSSxRef("align-self","-webkit-align-self")}}</li> - <li>{{CSSxRef("animation","-webkit-animation")}}</li> - <li>{{CSSxRef("animation-delay","-webkit-animation-delay")}}</li> - <li>{{CSSxRef("animation-direction","-webkit-animation-direction")}}</li> - <li>{{CSSxRef("animation-duration","-webkit-animation-duration")}}</li> - <li>{{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}</li> - <li>{{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}</li> - <li>{{CSSxRef("animation-name","-webkit-animation-name")}}</li> - <li>{{CSSxRef("animation-play-state","-webkit-animation-play-state")}}</li> - <li>{{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}</li> -</ul> - -<h3 id="B_2">B</h3> - -<ul> - <li>{{CSSxRef("backface-visibility","-webkit-backface-visibility")}}</li> - <li>{{CSSxRef("background-clip","-webkit-background-clip")}}</li> - <li>{{CSSxRef("background-origin","-webkit-background-origin")}}</li> - <li>{{CSSxRef("background-size","-webkit-background-size")}}</li> - <li>{{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}</li> - <li>{{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}</li> - <li>{{CSSxRef("border-image","-webkit-border-image")}}</li> - <li>{{CSSxRef("border-radius","-webkit-border-radius")}}</li> - <li>{{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}</li> - <li>{{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}</li> - <li>{{CSSxRef("box-decoration-break","-webkit-box-decoration-break")}}</li> - <li>{{CSSxRef("box-shadow","-webkit-box-shadow")}}</li> - <li>{{CSSxRef("box-sizing","-webkit-box-sizing")}}</li> -</ul> - -<h3 id="C_2">C</h3> - -<ul> - <li>{{CSSxRef("clip-path","-webkit-clip-path")}}</li> - <li>{{CSSxRef("column-count","-webkit-column-count")}}</li> - <li>{{CSSxRef("column-fill","-webkit-column-fill")}}</li> - <li>{{CSSxRef("column-gap","-webkit-column-gap")}}</li> - <li>{{CSSxRef("column-rule","-webkit-column-rule")}}</li> - <li>{{CSSxRef("column-rule-color","-webkit-column-rule-color")}}</li> - <li>{{CSSxRef("column-rule-style","-webkit-column-rule-style")}}</li> - <li>{{CSSxRef("column-rule-width","-webkit-column-rule-width")}}</li> - <li>{{CSSxRef("column-span","-webkit-column-span")}}</li> - <li>{{CSSxRef("column-width","-webkit-column-width")}}</li> - <li>{{CSSxRef("columns","-webkit-columns")}}</li> -</ul> - -<h3 id="F">F</h3> - -<ul> - <li>{{CSSxRef("filter","-webkit-filter")}}</li> - <li>{{CSSxRef("flex","-webkit-flex")}}</li> - <li>{{CSSxRef("flex-basis","-webkit-flex-basis")}}</li> - <li>{{CSSxRef("flex-direction","-webkit-flex-direction")}}</li> - <li>{{CSSxRef("flex-flow","-webkit-flex-flow")}}</li> - <li>{{CSSxRef("flex-grow","-webkit-flex-grow")}}</li> - <li>{{CSSxRef("flex-shrink","-webkit-flex-shrink")}}</li> - <li>{{CSSxRef("flex-wrap","-webkit-flex-wrap")}}</li> - <li>{{CSSxRef("-webkit-font-feature-settings")}}</li> - <li>{{CSSxRef("-webkit-font-kerning")}}</li> - <li>{{CSSxRef("-webkit-font-variant-ligatures")}}</li> -</ul> - -<h3 id="G-J">G-J</h3> - -<ul> - <li>{{CSSxRef("grid","-webkit-grid")}}</li> - <li>{{CSSxRef("grid-area","-webkit-grid-area")}}</li> - <li>{{CSSxRef("grid-auto-columns","-webkit-grid-auto-columns")}}</li> - <li>{{CSSxRef("grid-auto-flow","-webkit-grid-auto-flow")}}</li> - <li>{{CSSxRef("grid-auto-rows","-webkit-grid-auto-rows")}}</li> - <li>{{CSSxRef("grid-column","-webkit-grid-column")}}</li> - <li>{{CSSxRef("grid-column-end","-webkit-grid-column-end")}}</li> - <li>{{CSSxRef("grid-column-gap","-webkit-grid-column-gap")}}</li> - <li>{{CSSxRef("grid-column-start","-webkit-grid-column-start")}}</li> - <li>{{CSSxRef("grid-gap","-webkit-grid-gap")}}</li> - <li>{{CSSxRef("grid-row","-webkit-grid-row")}}</li> - <li>{{CSSxRef("grid-row-end","-webkit-grid-row-end")}}</li> - <li>{{CSSxRef("grid-row-gap","-webkit-grid-row-gap")}}</li> - <li>{{CSSxRef("grid-row-start","-webkit-grid-row-start")}}</li> - <li>{{CSSxRef("grid-template","-webkit-grid-template")}}</li> - <li>{{CSSxRef("grid-template-areas","-webkit-grid-template-areas")}}</li> - <li>{{CSSxRef("grid-template-columns","-webkit-grid-template-columns")}}</li> - <li>{{CSSxRef("grid-template-rows","-webkit-grid-template-rows")}}</li> -</ul> - -<h3 id="H-L">H-L</h3> - -<ul> - <li>{{CSSxRef("hyphens","-webkit-hyphens")}}</li> - <li>{{CSSxRef("justify-content","-webkit-justify-content")}}</li> - <li>{{CSSxRef("justify-items","-webkit-justify-items")}}</li> - <li>{{CSSxRef("justify-self","-webkit-justify-self")}}</li> - <li>{{CSSxRef("line-break","-webkit-line-break")}}</li> -</ul> - -<h3 id="M_2">M</h3> - -<ul> - <li>{{CSSxRef("mask","-webkit-mask")}}</li> - <li>{{CSSxRef("mask-clip","-webkit-mask-clip")}}</li> - <li>{{CSSxRef("mask-composite","-webkit-mask-composite")}}</li> - <li>{{CSSxRef("mask-image","-webkit-mask-image")}}</li> - <li>{{CSSxRef("mask-origin","-webkit-mask-origin")}}</li> - <li>{{CSSxRef("mask-position","-webkit-mask-position")}}</li> - <li>{{CSSxRef("mask-repeat","-webkit-mask-repeat")}}</li> - <li>{{CSSxRef("mask-size","-webkit-mask-size")}}</li> -</ul> - -<h3 id="O-R">O-R</h3> - -<ul> - <li>{{CSSxRef("opacity","-webkit-opacity")}}</li> - <li>{{CSSxRef("order","-webkit-order")}}</li> - <li>{{CSSxRef("perspective","-webkit-perspective")}}</li> - <li>{{CSSxRef("perspective-origin","-webkit-perspective-origin")}}</li> - <li>{{CSSxRef("ruby-position","-webkit-ruby-position")}}</li> -</ul> - -<h3 id="S">S</h3> - -<ul> - <li>{{CSSxRef("scroll-snap-type","-webkit-scroll-snap-type")}}</li> - <li>{{CSSxRef("shape-image-threshold","-webkit-shape-image-threshold")}}</li> - <li>{{CSSxRef("shape-margin","-webkit-shape-margin")}}</li> - <li>{{CSSxRef("shape-outside","-webkit-shape-outside")}}</li> -</ul> - -<h3 id="T_2">T</h3> - -<ul> - <li>{{CSSxRef("text-decoration", "-epub-text-decoration")}}</li> - <li>{{CSSxRef("text-decoration-color", "-webkit-text-color-decoration")}}</li> - <li>{{CSSxRef("text-decoration-line", "-webkit-text-decoration-line")}}</li> - <li>{{CSSxRef("text-decoration-style", "-webkit-text-decoration-style")}}</li> - <li>{{CSSxRef("text-emphasis", "-epub-text-emphasis")}}</li> - <li>{{CSSxRef("text-emphasis","-webkit-text-emphasis")}}</li> - <li>{{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}</li> - <li>{{CSSxRef("text-emphasis-color","-webkit-text-emphasis-color")}}</li> - <li>{{CSSxRef("text-emphasis-position","-webkit-text-emphasis-position")}}</li> - <li>{{CSSxRef("text-emphasis-style","-epub-text-emphasis-style")}}</li> - <li>{{CSSxRef("text-emphasis-style","-webkit-text-emphasis-style")}}</li> - <li>{{CSSxRef("text-justify","-webkit-text-justify")}}</li> - <li>{{CSSxRef("text-orientation","-webkit-text-orientation")}}</li> - <li>{{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}</li> - <li>{{CSSxRef("text-underline-position","-webkit-text-underline-position")}}</li> - <li>{{CSSxRef("transform","-webkit-transform")}}</li> - <li>{{CSSxRef("transform-origin","-webkit-transform-origin")}}</li> - <li>{{CSSxRef("transform-style","-webkit-transform-style")}}</li> - <li>{{CSSxRef("transition","-webkit-transition")}}</li> - <li>{{CSSxRef("transition-delay","-webkit-transition-delay")}}</li> - <li>{{CSSxRef("transition-duration","-webkit-transition-duration")}}</li> - <li>{{CSSxRef("transition-property","-webkit-transition-property")}}</li> - <li>{{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}</li> -</ul> - -<h3 id="U-W">U-W</h3> - -<ul> - <li>{{CSSxRef("user-select","-webkit-user-select")}}</li> - <li>{{CSSxRef("word-break", "-epub-word-break")}}</li> - <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li> -</ul> -</div> - -<h2 id="Supported_in_non-webkit_browsers_without_a_prefix_but_not_standard" name="Supported_in_non-webkit_browsers_without_a_prefix_but_not_standard">WebKit 以外のブラウザーで接頭辞なしのものが対応されているが、標準ではないもの</h2> - -<p>以下のプロパティは1つ以上のブラウザーが接頭辞なしで対応していますが、標準化路線には乗っていません。</p> - -<div class="index"> -<ul> - <li>{{CSSxRef("mask-position-x","-webkit-mask-position-x")}}*</li> - <li>{{CSSxRef("mask-position-y","-webkit-mask-position-y")}}*</li> -</ul> -</div> - -<p>* Firefox が接頭辞なしで対応、 Safari が接頭辞付きで対応。</p> - -<h2 id="Supported_in_Firefox_with_-webkit-_prefix" name="Supported_in_Firefox_with_-webkit-_prefix"><code>-webkit-</code> 接頭辞付きで Firefox が対応しているもの</h2> - -<p>以下のプロパティは Firefox が <code>-webkit-</code> 接頭辞付きで対応しています。多くのものは同様に接頭辞なしでも対応しています。前述の<a href="#Formerly_proprietary_properties_that_are_now_standard">以前は独自プロパティであったものが標準化されたもの</a>を参照してください。</p> - -<div class="blockIndicator note"> -<p>メモ: 多数のウェブサイトが古いコードで -webkit- 接頭辞の付いたプロパティを使用しているため、 Edge や Firefox は -webkit- 接頭辞のついた多くのプロパティを -moz-, -ms-, 接頭辞なしの同等のプロパティに転送しています。</p> -</div> - -<div class="index"> -<h3 id="A_3">A</h3> - -<ul> - <li>{{CSSxRef("-webkit-align-content")}}</li> - <li>{{CSSxRef("-webkit-align-items")}}</li> - <li>{{CSSxRef("-webkit-align-self")}}</li> - <li>{{CSSxRef("-webkit-animation")}}</li> - <li>{{CSSxRef("-webkit-animation-delay")}}</li> - <li>{{CSSxRef("-webkit-animation-direction")}}</li> - <li>{{CSSxRef("-webkit-animation-duration")}}</li> - <li>{{CSSxRef("-webkit-animation-fill-mode")}}</li> - <li>{{CSSxRef("-webkit-animation-iteration-count")}}</li> - <li>{{CSSxRef("-webkit-animation-name")}}</li> - <li>{{CSSxRef("-webkit-animation-play-state")}}</li> - <li>{{CSSxRef("-webkit-animation-timing-function")}}</li> - <li>{{CSSxRef("-webkit-appearance")}}*</li> -</ul> - -<h3 id="B_3">B</h3> - -<ul> - <li>{{CSSxRef("-webkit-backface-visibility")}}</li> - <li>{{CSSxRef("-webkit-background-clip")}}</li> - <li>{{CSSxRef("-webkit-background-origin")}}</li> - <li>{{CSSxRef("-webkit-background-size")}}</li> - <li>{{CSSxRef("-webkit-border-bottom-left-radius")}}</li> - <li>{{CSSxRef("-webkit-border-bottom-right-radius")}}</li> - <li>{{CSSxRef("-webkit-border-image")}}</li> - <li>{{CSSxRef("-webkit-border-radius")}}</li> - <li>{{CSSxRef("-webkit-box-align")}}**, ***</li> - <li>{{CSSxRef("-webkit-box-direction")}}**, ***</li> - <li>{{CSSxRef("-webkit-box-flex")}}**, ***</li> - <li>{{CSSxRef("-webkit-box-orient")}}**, ***</li> - <li>{{CSSxRef("-webkit-box-pack")}}**, ***</li> - <li>{{CSSxRef("-webkit-box-shadow")}}</li> - <li>{{CSSxRef("-webkit-box-sizing")}}</li> - <li>{{CSSxRef("-webkit-border-top-left-radius")}}</li> - <li>{{CSSxRef("-webkit-border-top-right-radius")}}</li> -</ul> - -<h3 id="F_2">F</h3> - -<ul> - <li>{{CSSxRef("-webkit-filter")}}</li> - <li>{{CSSxRef("-webkit-flex")}}</li> - <li>{{CSSxRef("-webkit-flex-basis")}}</li> - <li>{{CSSxRef("-webkit-flex-direction")}}</li> - <li>{{CSSxRef("-webkit-flex-flow")}}</li> - <li>{{CSSxRef("-webkit-flex-grow")}}</li> - <li>{{CSSxRef("-webkit-flex-shrink")}}</li> - <li>{{CSSxRef("-webkit-flex-wrap")}}</li> -</ul> - -<h3 id="J">J</h3> - -<ul> - <li>{{CSSxRef("-webkit-justify-content")}}</li> -</ul> - -<h3 id="M_3">M</h3> - -<ul> - <li>{{CSSxRef("-webkit-mask")}}</li> - <li>{{CSSxRef("-webkit-mask-clip")}}</li> - <li>{{CSSxRef("-webkit-mask-composite")}}*</li> - <li>{{CSSxRef("-webkit-mask-image")}}</li> - <li>{{CSSxRef("-webkit-mask-origin")}}</li> - <li>{{CSSxRef("-webkit-mask-position")}}</li> - <li>{{CSSxRef("-webkit-mask-position-x")}}**</li> - <li>{{CSSxRef("-webkit-mask-position-y")}}**</li> - <li>{{CSSxRef("-webkit-mask-repeat")}}</li> - <li>{{CSSxRef("-webkit-mask-size")}}</li> -</ul> - -<h3 id="O-P">O-P</h3> - -<ul> - <li>{{CSSxRef("-webkit-order")}}</li> - <li>{{CSSxRef("-webkit-perspective")}}</li> - <li>{{CSSxRef("-webkit-perspective-origin")}}</li> -</ul> - -<h3 id="T_3">T</h3> - -<ul> - <li>{{CSSxRef("-webkit-text-fill-color")}}**</li> - <li>{{CSSxRef("-webkit-text-size-adjust")}}</li> - <li>{{CSSxRef("-webkit-text-stroke")}}**</li> - <li>{{CSSxRef("-webkit-text-stroke-color")}}**</li> - <li>{{CSSxRef("-webkit-text-stroke-width")}}**</li> - <li>{{CSSxRef("-webkit-transform")}}</li> - <li>{{CSSxRef("-webkit-transform-origin")}}</li> - <li>{{CSSxRef("-webkit-transition")}}</li> - <li>{{CSSxRef("-webkit-transition-delay")}}</li> - <li>{{CSSxRef("-webkit-transition-duration")}}</li> - <li>{{CSSxRef("-webkit-transition-property")}}</li> - <li>{{CSSxRef("-webkit-transition-timing-function")}}</li> -</ul> - -<h3 id="U_2">U</h3> - -<ul> - <li>{{CSSxRef("-webkit-user-select")}}</li> -</ul> -</div> - -<p>* Firefox では <code>-moz-</code> と <code>-webkit-</code> の接頭辞に対応していますが、 接頭辞のないものには対応していません。 Microsoft Edge と IE Mobile は、同様に相互運用性のためにこのプロパティを <code>-ms-</code> ではなく <code>-webkit-</code> の接頭辞付きで対応しています。<br> - ** これらの値は、標準ではなく標準化路線にもなっていませんが、対応しています。<br> - *** 代わりにフレックスボックスプロパティを使用してください。</p> - -<h2 id="Deprecated_-webkit-_properties" name="Deprecated_-webkit-_properties">非推奨の <code>-webkit-</code> プロパティ</h2> - -<p>以下のプロパティはいったん -webkit- 接頭辞付きで対応していましたが、すでに <code>-webkit-</code> 接頭辞のありなしに関わらず、主要なブラウザーで対応されなくなりました。</p> - -<div class="index"> -<ul> - <li><code>-webkit-alt*</code></li> - <li><code>-webkit-color-correction</code></li> - <li><code>-webkit-flow-from</code></li> - <li><code>-webkit-flow-into</code></li> - <li><code>-webkit-grid-columns</code> ({{cssxref("grid-column")}} を参照)</li> - <li><code>-webkit-grid-rows</code> ({{cssxref("grid-row")}} を参照)</li> - <li><code>-webkit-hyphenate-charset</code></li> - <li><code>-webkit-image-set</code></li> - <li><code>-webkit-mask-attachment</code></li> - <li><code>-webkit-match-nearest-mail-blockquote-color</code></li> - <li>{{CSSxRef("-webkit-overflow-scrolling")}}</li> - <li><code>-webkit-region-break-after</code></li> - <li><code>-webkit-region-break-before</code></li> - <li><code>-webkit-region-break-inside</code></li> - <li><code>-webkit-region-fragment</code></li> - <li><code>-webkit-shape-inside</code></li> - <li><code>-webkit-touch-callout</code> ({{cssxref("touch-action")}} を参照)</li> - <li><code>background-origin-x</code> (unprefixed!)</li> - <li><code>background-origin-y</code> (unprefixed!)</li> -</ul> -</div> - -<p>* Still supported in the Safari Technology Preview, but not in a generally released browser.</p> - -<h2 id="Pseudo-classes" name="Pseudo-classes">疑似クラス</h2> - -<div class="index"> -<ul> - <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li> - <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li> - <li>{{CSSxRef(":any-link", ":-webkit-any-link")}} *</li> - <li>{{CSSxRef(":autofill",":-webkit-autofill")}}</li> - <li>{{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}</li> - <li>{{CSSxRef(":drag",":-webkit-drag")}}</li> - <li>{{CSSxRef(":full-page-media",":-webkit-full-page-media")}}</li> - <li>{{CSSxRef(":full-screen", ":-webkit-full-screen")}}*</li> - <li>{{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}</li> - <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li> - <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li> -</ul> -</div> - -<p>* 標準化されました。</p> - -<div class="note"> -<p><strong>メモ:</strong> セレクターのチェーンまたはグループ内に無効な疑似クラスがあった場合、セレクターのリスト全体が無効になります。</p> -</div> - -<h2 id="Pseudo-elements" name="Pseudo-elements">疑似要素</h2> - -<p>ウェブの互換性のため、 Blink, WebKit, Gecko のブラウザーは、 <code>::-webkit-</code> がついたすべての疑似要素を妥当として扱います。</p> - -<div class="index"> -<ul> - <li>{{CSSxRef("::-webkit-file-upload-button")}}</li> - <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li> - <li>{{CSSxRef("::-webkit-input-placeholder")}}</li> - <li>{{CSSxRef("::-webkit-meter-bar")}}</li> - <li>{{CSSxRef("::-webkit-meter-even-less-good-value")}}</li> - <li>{{CSSxRef("::-webkit-meter-inner-element")}}</li> - <li>{{CSSxRef("::-webkit-meter-optimum-value")}}</li> - <li>{{CSSxRef("::-webkit-meter-suboptimum-value")}}</li> - <li>{{CSSxRef("::-webkit-outer-spin-button")}}</li> - <li>{{CSSxRef("::-webkit-progress-bar")}}</li> - <li>{{CSSxRef("::-webkit-progress-inner-element")}}</li> - <li>{{CSSxRef("::-webkit-progress-value")}}</li> - <li>{{CSSxRef("::-webkit-search-cancel-button")}}</li> - <li>{{CSSxRef("::-webkit-search-results-button")}}</li> - <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li> - <li>{{CSSxRef("::-webkit-slider-thumb")}}</li> -</ul> -</div> - -<div class="note"> -<p><strong>メモ:</strong> 一般に、セレクターのチェーンまたはグループ内に無効な疑似要素または疑似クラスがあった場合、セレクターのリスト全体が無効になります。擬似要素 (疑似クラスではない) に -webkit- という接頭辞が付いている場合、 Firefox 63 以降, Blink, WebKit, Gecko のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。</p> -</div> - -<h2 id="Media_features" name="Media_features">メディア特性</h2> - -<div class="index"> -<ul> - <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li> - <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li> - <li>{{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li> - <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li> - <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li> -</ul> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls">Styling Form Controls on the WebKit Trac</a></li> - <li><a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 拡張</a></li> - <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 拡張</a></li> -</ul> diff --git a/files/ja/web/css/webkit_extensions/index.md b/files/ja/web/css/webkit_extensions/index.md new file mode 100644 index 0000000000..1ee785820c --- /dev/null +++ b/files/ja/web/css/webkit_extensions/index.md @@ -0,0 +1,531 @@ +--- +title: WebKit の CSS 拡張 +slug: Web/CSS/WebKit_Extensions +tags: + - CSS + - CSS:WebKit 拡張 + - ガイド + - 標準外 + - 概要 + - リファレンス +translation_of: Web/CSS/WebKit_Extensions +--- +{{CSSRef}} + +Safari や Chrome のような WebKit または blink ベースのアプリケーションは、数多くの特殊な **[CSS](/ja/docs/Web/CSS) の WebKit 拡張**に対応しています。これらの拡張には一般に `-webkit-` の接頭辞が付きます。 `-webkit-` の接頭辞が付いたプロパティの多くは `-apple-` の接頭辞でも動作します。少数ながら `-epub-` の接頭辞も存在します。 + +## WebKit 独自のプロパティ + +> **Note:** ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。 + +### A + +- {{CSSxRef("-webkit-animation-trigger", "-webkit-animation-trigger")}} +- {{CSSxRef("-webkit-app-region", "-webkit-app-region")}} +- {{CSSxRef("appearance", "-webkit-appearance")}}\* +- {{CSSxRef("-webkit-aspect-ratio", "-webkit-aspect-ratio")}} + +### B + +- {{CSSxRef("-webkit-backdrop-filter", "-webkit-backdrop-filter")}} +- {{CSSxRef("-webkit-background-composite", "-webkit-background-composite")}} +- {{CSSxRef("border-block-end","-webkit-border-after")}}\*\* +- {{CSSxRef("border-block-end-color","-webkit-border-after-color")}}\*\* +- {{CSSxRef("border-block-end-style","-webkit-border-after-style")}}\*\* +- {{CSSxRef("border-block-end-width","-webkit-border-after-width")}}\*\* +- {{CSSxRef("border-block-start","-webkit-border-before")}}\*\* +- {{CSSxRef("border-block-start-color","-webkit-border-before-color")}}\*\* +- {{CSSxRef("border-block-start-style","-webkit-border-before-style")}}\*\* +- {{CSSxRef("border-block-start-width","-webkit-border-before-width")}}\*\* +- {{CSSxRef("border-inline-end", "-webkit-border-end")}}\*\* +- {{CSSxRef("border-inline-end-color","-webkit-border-end-color")}}\*\* +- {{CSSxRef("border-inline-end-style","-webkit-border-end-style")}}\*\* +- {{CSSxRef("border-inline-end-width","-webkit-border-end-width")}}\*\* +- {{CSSxRef("border-image-repeat", "-webkit-border-fit")}} +- {{CSSxRef("-webkit-border-horizontal-spacing", "-webkit-border-horizontal-spacing")}} +- {{CSSxRef("border-inline-start", "-webkit-border-start")}}\*\* +- {{CSSxRef("border-inline-start-color", "-webkit-border-start-color")}}\*\* +- {{CSSxRef("border-inline-start-style", "-webkit-border-start-style")}}\*\* +- {{CSSxRef("border-inline-start-width", "-webkit-border-start-width")}}\*\* +- {{CSSxRef("-webkit-border-vertical-spacing", "-webkit-border-vertical-spacing")}} +- {{CSSxRef("align-items","-webkit-box-align")}}\*\* +- {{CSSxRef("flex-direction", "-webkit-box-direction")}}\*\* +- {{CSSxRef("-webkit-box-flex-group", "-webkit-box-flex-group")}}\*\* +- {{CSSxRef("flex-grow", "-webkit-box-flex")}}\*\* +- {{CSSxRef("flex-flow", "-webkit-box-lines")}}\*\* +- {{CSSxRef("order", "-webkit-box-ordinal-group")}}\*\* +- {{CSSxRef("flex-direction","-webkit-box-orient")}}\*\* +- {{CSSxRef("justify-content", "-webkit-box-pack")}}\*\* +- {{CSSxRef("-webkit-box-reflect", "-webkit-box-reflect")}}\*\* + +### C + +- {{CSSxRef("-webkit-column-axis", "-webkit-column-axis")}} +- {{CSSxRef("-webkit-column-break-after", "-webkit-column-break-after")}} +- {{CSSxRef("-webkit-column-break-before", "-webkit-column-break-before")}} +- {{CSSxRef("-webkit-column-break-inside", "-webkit-column-break-inside")}} +- {{CSSxRef("-webkit-column-progression", "-webkit-column-progression")}} +- {{CSSxRef("-webkit-cursor-visibility", "-webkit-cursor-visibility")}} + +### D-I + +- {{CSSxRef("-webkit-dashboard-region", "-webkit-dashboard-region")}} +- {{CSSxRef("-webkit-font-size-delta", "-webkit-font-size-delta")}} +- {{CSSxRef("font-smooth", "-webkit-font-smoothing")}} +- {{CSSxRef("-webkit-highlight", "-webkit-highlight")}} +- {{CSSxRef("-webkit-hyphenate-character", "-webkit-hyphenate-character")}} +- {{CSSxRef("-webkit-hyphenate-limit-after", "-webkit-hyphenate-limit-after")}} +- {{CSSxRef("-webkit-hyphenate-limit-before", "-webkit-hyphenate-limit-before")}} +- {{CSSxRef("-webkit-hyphenate-limit-lines", "-webkit-hyphenate-limit-lines")}} +- {{CSSxRef("-webkit-initial-letter", "-webkit-initial-letter")}} + +### L + +- {{CSSxRef("-webkit-line-align", "-webkit-line-align")}} +- {{CSSxRef("-webkit-line-box-contain", "-webkit-line-box-contain")}} +- {{CSSxRef("-webkit-line-clamp", "-webkit-line-clamp")}} +- {{CSSxRef("-webkit-line-grid", "-webkit-line-grid")}} +- {{CSSxRef("-webkit-line-snap", "-webkit-line-snap")}} +- {{CSSxRef("-webkit-locale", "-webkit-locale")}} +- {{CSSxRef("-webkit-logical-height", "-webkit-logical-height")}} +- {{CSSxRef("-webkit-logical-width", "-webkit-logical-width")}} + +### M + +- {{CSSxRef("-webkit-margin-after-collapse", "-webkit-margin-after-collapse")}} +- {{CSSxRef("-webkit-margin-after", "-webkit-margin-after")}} +- {{CSSxRef("-webkit-margin-before-collapse", "-webkit-margin-before-collapse")}} +- {{CSSxRef("-webkit-margin-before", "-webkit-margin-before")}} +- {{CSSxRef("-webkit-margin-bottom-collapse", "-webkit-margin-bottom-collapse")}} +- {{CSSxRef("-webkit-margin-collapse", "-webkit-margin-collapse")}} +- {{CSSxRef("margin-block-end", "-webkit-margin-end")}}\*\* +- {{CSSxRef("margin-block-start", "-webkit-margin-start")}}\*\* +- {{CSSxRef("-webkit-margin-top-collapse", "-webkit-margin-top-collapse")}} +- {{CSSxRef("-webkit-marquee-direction", "-webkit-marquee-direction")}} +- {{CSSxRef("-webkit-marquee-increment", "-webkit-marquee-increment")}} +- {{CSSxRef("-webkit-marquee-repetition", "-webkit-marquee-repetition")}} +- {{CSSxRef("-webkit-marquee-speed", "-webkit-marquee-speed")}} +- {{CSSxRef("-webkit-marquee-style", "-webkit-marquee-style")}} +- {{CSSxRef("-webkit-marquee", "-webkit-marquee")}} +- {{CSSxRef("-webkit-mask-box-image-outset", "-webkit-mask-box-image-outset")}} +- {{CSSxRef("-webkit-mask-box-image-repeat", "-webkit-mask-box-image-repeat")}} +- {{CSSxRef("-webkit-mask-box-image-slice", "-webkit-mask-box-image-slice")}} +- {{CSSxRef("-webkit-mask-box-image-source", "-webkit-mask-box-image-source")}} +- {{CSSxRef("-webkit-mask-box-image-width", "-webkit-mask-box-image-width")}} +- {{CSSxRef("-webkit-mask-box-image", "-webkit-mask-box-image")}} +- {{CSSxRef("-webkit-mask-repeat-x", "-webkit-mask-repeat-x")}} +- {{CSSxRef("-webkit-mask-repeat-y", "-webkit-mask-repeat-y")}} +- {{CSSxRef("-webkit-mask-source-type", "-webkit-mask-source-type")}} +- {{CSSxRef("-webkit-max-logical-height", "-webkit-max-logical-height")}} +- {{CSSxRef("-webkit-max-logical-width", "-webkit-max-logical-width")}} +- {{CSSxRef("-webkit-min-logical-height", "-webkit-min-logical-height")}} +- {{CSSxRef("-webkit-min-logical-width", "-webkit-min-logical-width")}} + +### N + +- {{CSSxRef("-webkit-nbsp-mode", "-webkit-nbsp-mode")}} + +### P + +- {{CSSxRef("padding-block-end","-webkit-padding-after")}}\*\* +- {{CSSxRef("padding-block-start","-webkit-padding-before")}}\*\* +- {{CSSxRef("padding-inline-end","-webkit-padding-end")}}\*\* +- {{CSSxRef("padding-inline-start","-webkit-padding-start")}}\*\* +- {{CSSxRef("-webkit-perspective-origin-x", "-webkit-perspective-origin-x")}} +- {{CSSxRef("-webkit-perspective-origin-y", "-webkit-perspective-origin-y")}} +- {{CSSxRef("-webkit-print-color-adjust", "-webkit-print-color-adjust")}} + +### R-S + +- {{CSSxRef("-webkit-rtl-ordering", "-webkit-rtl-ordering")}} +- {{CSSxRef("-webkit-svg-shadow", "-webkit-svg-shadow")}} + +### T + +- {{CSSxRef("-webkit-tap-highlight-color", "-webkit-tap-highlight-color")}} +- {{CSSxRef("-webkit-text-combine", "-webkit-text-combine")}} +- {{CSSxRef("-webkit-text-decoration-skip", "-webkit-text-decoration-skip")}} +- {{CSSxRef("-webkit-text-decorations-in-effect", "-webkit-text-decorations-in-effect")}} +- {{CSSxRef("-webkit-text-fill-color", "-webkit-text-fill-color")}} +- {{CSSxRef("-webkit-text-security", "-webkit-text-security")}} +- {{CSSxRef("-webkit-text-stroke-color", "-webkit-text-stroke-color")}} +- {{CSSxRef("-webkit-text-stroke-width", "-webkit-text-stroke-width")}} +- {{CSSxRef("-webkit-text-stroke", "-webkit-text-stroke")}} +- {{CSSxRef("-webkit-text-zoom", "-webkit-text-zoom")}} +- {{CSSxRef("-webkit-transform-origin-x", "-webkit-transform-origin-x")}} +- {{CSSxRef("-webkit-transform-origin-y", "-webkit-transform-origin-y")}} +- {{CSSxRef("-webkit-transform-origin-z", "-webkit-transform-origin-z")}} + +### U + +- {{CSSxRef("-webkit-user-drag", "-webkit-user-drag")}} +- {{CSSxRef("-webkit-user-modify", "-webkit-user-modify")}} + +\* 一部は標準化され、接頭辞がなくなりました。 +\*\* 新しい構文が標準化されています。プロパティは新しい構文にリンクしています。古い構文は一部のブラウザーが対応しています。 + +## 標準化過程にある WebKit の接頭辞のついたプロパティ + +- {{CSSxRef("appearance", "-webkit-appearance")}} +- {{CSSxRef("-webkit-font-size-delta", "-webkit-font-size-delta")}} +- {{CSSxRef("-webkit-mask-composite", "-webkit-mask-composite")}} +- {{CSSxRef("-webkit-mask-position-x", "-webkit-mask-position-x")}} +- {{CSSxRef("-webkit-mask-position-y", "-webkit-mask-position-y")}} +- {{CSSxRef("-webkit-mask-repeat-x", "-webkit-mask-repeat-x")}} +- {{CSSxRef("-webkit-mask-repeat-y", "-webkit-mask-repeat-y")}} + +## 以前は独自プロパティであったものが標準化されたもの + +> **Note:** CSS の互換性を最大化するために、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。 + +### A + +- {{CSSxRef("align-content","-webkit-align-content")}} +- {{CSSxRef("align-items","-webkit-align-items")}} +- {{CSSxRef("align-self","-webkit-align-self")}} +- {{CSSxRef("animation","-webkit-animation")}} +- {{CSSxRef("animation-delay","-webkit-animation-delay")}} +- {{CSSxRef("animation-direction","-webkit-animation-direction")}} +- {{CSSxRef("animation-duration","-webkit-animation-duration")}} +- {{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}} +- {{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}} +- {{CSSxRef("animation-name","-webkit-animation-name")}} +- {{CSSxRef("animation-play-state","-webkit-animation-play-state")}} +- {{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}} + +### B + +- {{CSSxRef("backface-visibility","-webkit-backface-visibility")}} +- {{CSSxRef("background-clip","-webkit-background-clip")}} +- {{CSSxRef("background-origin","-webkit-background-origin")}} +- {{CSSxRef("background-size","-webkit-background-size")}} +- {{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}} +- {{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}} +- {{CSSxRef("border-image","-webkit-border-image")}} +- {{CSSxRef("border-radius","-webkit-border-radius")}} +- {{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}} +- {{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}} +- {{CSSxRef("box-decoration-break","-webkit-box-decoration-break")}} +- {{CSSxRef("box-shadow","-webkit-box-shadow")}} +- {{CSSxRef("box-sizing","-webkit-box-sizing")}} + +### C + +- {{CSSxRef("clip-path","-webkit-clip-path")}} +- {{CSSxRef("column-count","-webkit-column-count")}} +- {{CSSxRef("column-fill","-webkit-column-fill")}} +- {{CSSxRef("column-gap","-webkit-column-gap")}} +- {{CSSxRef("column-rule","-webkit-column-rule")}} +- {{CSSxRef("column-rule-color","-webkit-column-rule-color")}} +- {{CSSxRef("column-rule-style","-webkit-column-rule-style")}} +- {{CSSxRef("column-rule-width","-webkit-column-rule-width")}} +- {{CSSxRef("column-span","-webkit-column-span")}} +- {{CSSxRef("column-width","-webkit-column-width")}} +- {{CSSxRef("columns","-webkit-columns")}} + +### F + +- {{CSSxRef("filter","-webkit-filter")}} +- {{CSSxRef("flex","-webkit-flex")}} +- {{CSSxRef("flex-basis","-webkit-flex-basis")}} +- {{CSSxRef("flex-direction","-webkit-flex-direction")}} +- {{CSSxRef("flex-flow","-webkit-flex-flow")}} +- {{CSSxRef("flex-grow","-webkit-flex-grow")}} +- {{CSSxRef("flex-shrink","-webkit-flex-shrink")}} +- {{CSSxRef("flex-wrap","-webkit-flex-wrap")}} +- {{CSSxRef("font-feature-settings", "-webkit-font-feature-settings")}} +- {{CSSxRef("font-kerning", "-webkit-font-kerning")}} +- {{CSSxRef("font-variant-ligatures", "-webkit-font-variant-ligatures")}} + +### G-J + +- {{CSSxRef("grid","-webkit-grid")}} +- {{CSSxRef("grid-area","-webkit-grid-area")}} +- {{CSSxRef("grid-auto-columns","-webkit-grid-auto-columns")}} +- {{CSSxRef("grid-auto-flow","-webkit-grid-auto-flow")}} +- {{CSSxRef("grid-auto-rows","-webkit-grid-auto-rows")}} +- {{CSSxRef("grid-column","-webkit-grid-column")}} +- {{CSSxRef("grid-column-end","-webkit-grid-column-end")}} +- {{CSSxRef("column-gap","-webkit-grid-column-gap")}} +- {{CSSxRef("grid-column-start","-webkit-grid-column-start")}} +- {{CSSxRef("gap","-webkit-grid-gap")}} +- {{CSSxRef("grid-row","-webkit-grid-row")}} +- {{CSSxRef("grid-row-end","-webkit-grid-row-end")}} +- {{CSSxRef("row-gap","-webkit-grid-row-gap")}} +- {{CSSxRef("grid-row-start","-webkit-grid-row-start")}} +- {{CSSxRef("grid-template","-webkit-grid-template")}} +- {{CSSxRef("grid-template-areas","-webkit-grid-template-areas")}} +- {{CSSxRef("grid-template-columns","-webkit-grid-template-columns")}} +- {{CSSxRef("grid-template-rows","-webkit-grid-template-rows")}} + +### H-L + +- {{CSSxRef("hyphens","-webkit-hyphens")}} +- {{CSSxRef("justify-content","-webkit-justify-content")}} +- {{CSSxRef("justify-items","-webkit-justify-items")}} +- {{CSSxRef("justify-self","-webkit-justify-self")}} +- {{CSSxRef("line-break","-webkit-line-break")}} + +### M + +- {{CSSxRef("mask","-webkit-mask")}} +- {{CSSxRef("mask-clip","-webkit-mask-clip")}} +- {{CSSxRef("mask-composite","-webkit-mask-composite")}} +- {{CSSxRef("mask-image","-webkit-mask-image")}} +- {{CSSxRef("mask-origin","-webkit-mask-origin")}} +- {{CSSxRef("mask-position","-webkit-mask-position")}} +- {{CSSxRef("mask-repeat","-webkit-mask-repeat")}} +- {{CSSxRef("mask-size","-webkit-mask-size")}} + +### O-R + +- {{CSSxRef("opacity","-webkit-opacity")}} +- {{CSSxRef("order","-webkit-order")}} +- {{CSSxRef("perspective","-webkit-perspective")}} +- {{CSSxRef("perspective-origin","-webkit-perspective-origin")}} +- {{CSSxRef("ruby-position","-webkit-ruby-position")}} + +### S + +- {{CSSxRef("scroll-snap-type","-webkit-scroll-snap-type")}} +- {{CSSxRef("shape-image-threshold","-webkit-shape-image-threshold")}} +- {{CSSxRef("shape-margin","-webkit-shape-margin")}} +- {{CSSxRef("shape-outside","-webkit-shape-outside")}} + +### T + +- {{CSSxRef("text-decoration", "-epub-text-decoration")}} +- {{CSSxRef("text-decoration-color", "-webkit-text-color-decoration")}} +- {{CSSxRef("text-decoration-line", "-webkit-text-decoration-line")}} +- {{CSSxRef("text-decoration-style", "-webkit-text-decoration-style")}} +- {{CSSxRef("text-emphasis", "-epub-text-emphasis")}} +- {{CSSxRef("text-emphasis","-webkit-text-emphasis")}} +- {{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}} +- {{CSSxRef("text-emphasis-color","-webkit-text-emphasis-color")}} +- {{CSSxRef("text-emphasis-position","-webkit-text-emphasis-position")}} +- {{CSSxRef("text-emphasis-style","-epub-text-emphasis-style")}} +- {{CSSxRef("text-emphasis-style","-webkit-text-emphasis-style")}} +- {{CSSxRef("text-justify","-webkit-text-justify")}} +- {{CSSxRef("text-orientation","-webkit-text-orientation")}} +- {{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}} +- {{CSSxRef("text-underline-position","-webkit-text-underline-position")}} +- {{CSSxRef("transform","-webkit-transform")}} +- {{CSSxRef("transform-origin","-webkit-transform-origin")}} +- {{CSSxRef("transform-style","-webkit-transform-style")}} +- {{CSSxRef("transition","-webkit-transition")}} +- {{CSSxRef("transition-delay","-webkit-transition-delay")}} +- {{CSSxRef("transition-duration","-webkit-transition-duration")}} +- {{CSSxRef("transition-property","-webkit-transition-property")}} +- {{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}} + +### U-W + +- {{CSSxRef("user-select","-webkit-user-select")}} +- {{CSSxRef("word-break", "-epub-word-break")}} +- {{CSSxRef("writing-mode", "-epub-writing-mode")}} + +## WebKit 以外のブラウザーで接頭辞なしのものが対応されているが、標準ではないもの + +以下のプロパティは 1 つ以上のブラウザーが接頭辞なしで対応していますが、標準化路線には乗っていません。 + +- {{CSSxRef("mask-position-x","-webkit-mask-position-x")}}\* +- {{CSSxRef("mask-position-y","-webkit-mask-position-y")}}\* + +\* Firefox が接頭辞なしで対応、 Safari が接頭辞付きで対応。 + +## `-webkit-` 接頭辞付きで Firefox が対応しているもの + +以下のプロパティは Firefox が `-webkit-` 接頭辞付きで対応しています。多くのものは同様に接頭辞なしでも対応しています。前述の[以前は独自プロパティであったものが標準化されたもの](#以前は独自プロパティであったものが標準化されたもの)を参照してください。 + +> **Note:** 多数のウェブサイトが古いコードで -webkit- 接頭辞の付いたプロパティを使用しているため、 Edge や Firefox は -webkit- 接頭辞のついた多くのプロパティを -moz-, -ms-, 接頭辞なしの同等のプロパティに転送しています。 + +### A + +- {{CSSxRef("align-content", "-webkit-align-content")}} +- {{CSSxRef("align-items", "-webkit-align-items")}} +- {{CSSxRef("align-self", "-webkit-align-self")}} +- {{CSSxRef("animation", "-webkit-animation")}} +- {{CSSxRef("animation-delay", "-webkit-animation-delay")}} +- {{CSSxRef("animation-direction", "-webkit-animation-direction")}} +- {{CSSxRef("animation-duration", "-webkit-animation-duration")}} +- {{CSSxRef("animation-fill-mode", "-webkit-animation-fill-mode")}} +- {{CSSxRef("animation-iteration-count", "-webkit-animation-iteration-count")}} +- {{CSSxRef("animation-name", "-webkit-animation-name")}} +- {{CSSxRef("animation-play-state", "-webkit-animation-play-state")}} +- {{CSSxRef("animation-timing-function", "-webkit-animation-timing-function")}} +- {{CSSxRef("appearance", "-webkit-appearance")}}\* + +### B + +- {{CSSxRef("backface-visibility", "-webkit-backface-visibility")}} +- {{CSSxRef("background-clip", "-webkit-background-clip")}} +- {{CSSxRef("background-origin", "-webkit-background-origin")}} +- {{CSSxRef("background-size", "-webkit-background-size")}} +- {{CSSxRef("border-bottom-left-radius", "-webkit-border-bottom-left-radius")}} +- {{CSSxRef("border-bottom-right-radius", "-webkit-border-bottom-right-radius")}} +- {{CSSxRef("border-image", "-webkit-border-image")}} +- {{CSSxRef("border-radius", "-webkit-border-radius")}} +- {{CSSxRef("box-align", "-webkit-box-align")}}\*\*, \*\*\* +- {{CSSxRef("box-direction", "-webkit-box-direction")}}\*\*, \*\*\* +- {{CSSxRef("box-flex", "-webkit-box-flex")}}\*\*, \*\*\* +- {{CSSxRef("box-orient", "-webkit-box-orient")}}\*\*, \*\*\* +- {{CSSxRef("box-pack", "-webkit-box-pack")}}\*\*, \*\*\* +- {{CSSxRef("box-shadow", "-webkit-box-shadow")}} +- {{CSSxRef("box-sizing", "-webkit-box-sizing")}} +- {{CSSxRef("border-top-left-radius", "-webkit-border-top-left-radius")}} +- {{CSSxRef("border-top-right-radius", "-webkit-border-top-right-radius")}} + +### F + +- {{CSSxRef("filter", "-webkit-filter")}} +- {{CSSxRef("flex", "-webkit-flex")}} +- {{CSSxRef("flex-basis", "-webkit-flex-basis")}} +- {{CSSxRef("flex-direction", "-webkit-flex-direction")}} +- {{CSSxRef("flex-flow", "-webkit-flex-flow")}} +- {{CSSxRef("flex-grow", "-webkit-flex-grow")}} +- {{CSSxRef("flex-shrink", "-webkit-flex-shrink")}} +- {{CSSxRef("flex-wrap", "-webkit-flex-wrap")}} + +### J + +- {{CSSxRef("justify-content", "-webkit-justify-content")}} + +### M + +- {{CSSxRef("mask", "-webkit-mask")}} +- {{CSSxRef("mask-clip", "-webkit-mask-clip")}} +- {{CSSxRef("-webkit-mask-composite", "-webkit-mask-composite")}}\* +- {{CSSxRef("mask-image", "-webkit-mask-image")}} +- {{CSSxRef("mask-origin", "-webkit-mask-origin")}} +- {{CSSxRef("mask-position", "-webkit-mask-position")}} +- {{CSSxRef("-webkit-mask-position-x", "-webkit-mask-position-x")}}\*\* +- {{CSSxRef("-webkit-mask-position-y", "-webkit-mask-position-y")}}\*\* +- {{CSSxRef("mask-repeat", "-webkit-mask-repeat")}} +- {{CSSxRef("mask-size", "-webkit-mask-size")}} + +### O-P + +- {{CSSxRef("order", "-webkit-order")}} +- {{CSSxRef("perspective", "-webkit-perspective")}} +- {{CSSxRef("perspective-origin", "-webkit-perspective-origin")}} + +### T + +- {{CSSxRef("-webkit-text-fill-color", "-webkit-text-fill-color")}}\*\* +- {{CSSxRef("text-size-adjust", "-webkit-text-size-adjust")}} +- {{CSSxRef("-webkit-text-stroke", "-webkit-text-stroke")}}\*\* +- {{CSSxRef("-webkit-text-stroke-color", "-webkit-text-stroke-color")}}\*\* +- {{CSSxRef("-webkit-text-stroke-width", "-webkit-text-stroke-width")}}\*\* +- {{CSSxRef("transform", "-webkit-transform")}} +- {{CSSxRef("transform-origin", "-webkit-transform-origin")}} +- {{CSSxRef("transition", "-webkit-transition")}} +- {{CSSxRef("transition-delay", "-webkit-transition-delay")}} +- {{CSSxRef("transition-duration", "-webkit-transition-duration")}} +- {{CSSxRef("transition-property", "-webkit-transition-property")}} +- {{CSSxRef("transition-timing-function", "-webkit-transition-timing-function")}} + +### U + +- {{CSSxRef("user-select", "-webkit-user-select")}} + +\* Firefox では `-moz-` と `-webkit-` の接頭辞に対応していますが、 接頭辞のないものには対応していません。 Microsoft Edge と IE Mobile は、同様に相互運用性のためにこのプロパティを `-ms-` ではなく `-webkit-` の接頭辞付きで対応しています。 +\*\* これらの値は、標準ではなく標準化路線にもなっていませんが、対応しています。 +\*\*\* 代わりにフレックスボックスプロパティを使用してください。 + +## 非推奨の `-webkit-` プロパティ + +以下のプロパティはいったん -webkit- 接頭辞付きで対応していましたが、すでに `-webkit-` 接頭辞のありなしに関わらず、主要なブラウザーで対応されなくなりました。 + +- `-webkit-alt*` +- `-webkit-color-correction` +- `-webkit-flow-from` +- `-webkit-flow-into` +- `-webkit-grid-columns` ([`grid-column`](/ja/docs/Web/CSS/grid-column) を参照) +- `-webkit-grid-rows` ([`grid-row`](/ja/docs/Web/CSS/grid-row) を参照) +- `-webkit-hyphenate-charset` +- `-webkit-image-set` (`{{CSSxRef("image/image-set()", "image-set")}} を参照) +- `-webkit-mask-attachment` +- `-webkit-match-nearest-mail-blockquote-color` +- {{CSSxRef("-webkit-overflow-scrolling", "-webkit-overflow-scrolling")}} +- `-webkit-region-break-after` +- `-webkit-region-break-before` +- `-webkit-region-break-inside` +- `-webkit-region-fragment` +- `-webkit-shape-inside` +- [-webkit-touch-callout](/ja/docs/Web/CSS/-webkit-touch-callout) (`touch-action` を参照) +- `background-origin-x` (接頭辞なし) +- `background-origin-y` (接頭辞なし) + +<p>* Safari Technology Preview ではまだ対応していますが、リリース版のブラウザーでは一般に対応していません。</p> + +## 擬似クラス + +- {{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}} +- {{CSSxRef(":any()", ":-webkit-any()")}} +- {{CSSxRef(":any-link", ":-webkit-any-link")}}\* +- {{CSSxRef(":autofill",":-webkit-autofill")}} +- {{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}} +- {{CSSxRef(":drag",":-webkit-drag")}} +- {{CSSxRef(":full-page-media",":-webkit-full-page-media")}} +- {{CSSxRef(":full-screen", ":-webkit-full-screen")}}\* +- {{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}} +- {{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}} +- {{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}} + +\* 標準化されました。 + +> **Note:** セレクターのチェーンまたはグループ内に無効な擬似クラスがあった場合、セレクターのリスト全体が無効になります。 + +## 擬似要素 + +ウェブの互換性のため、 Blink, WebKit, Gecko のブラウザーは、 `::-webkit-` がついたすべての擬似要素を有効なものとして扱います。 + +- {{CSSxRef("::file-selector-button","::-webkit-file-upload-button")}}\* +- {{CSSxRef("::-webkit-inner-spin-button", "::-webkit-inner-spin-button")}} +- {{CSSxRef("::placeholder", "::-webkit-input-placeholder")}} +- {{CSSxRef("::-webkit-media-controls", "::-webkit-media-controls")}} +- {{CSSxRef("::-webkit-media-controls-current-time-display", "::-webkit-media-controls-current-time-display")}} +- {{CSSxRef("::-webkit-media-controls-enclosure", "::-webkit-media-controls-enclosure")}} +- {{CSSxRef("::-webkit-media-controls-fullscreen-button", "::-webkit-media-controls-fullscreen-button")}} +- {{CSSxRef("::-webkit-media-controls-mute-button", "::-webkit-media-controls-mute-button")}} +- {{CSSxRef("::-webkit-media-controls-overlay-enclosure", "::-webkit-media-controls-overlay-enclosure")}} +- {{CSSxRef("::-webkit-media-controls-panel", "::-webkit-media-controls-panel")}} +- {{CSSxRef("::-webkit-media-controls-play-button", "::-webkit-media-controls-play-button")}} +- {{CSSxRef("::-webkit-media-controls-timeline", "::-webkit-media-controls-timeline")}} +- {{CSSxRef("::-webkit-media-controls-time-remaining-display", "::-webkit-media-controls-time-remaining-display")}} +- {{CSSxRef("::-webkit-media-controls-toggle-closed-captions-button", "::-webkit-media-controls-toggle-closed-captions-button")}} +- {{CSSxRef("::-webkit-media-controls-volume-control-container", "::-webkit-media-controls-volume-control-container")}} +- {{CSSxRef("::-webkit-media-controls-volume-control-hover-background", "::-webkit-media-controls-volume-control-hover-background")}} +- {{CSSxRef("::-webkit-media-controls-volume-slider", "::-webkit-media-controls-volume-slider")}} +- {{CSSxRef("::-webkit-meter-bar", "::-webkit-meter-bar")}} +- {{CSSxRef("::-webkit-meter-even-less-good-value", "::-webkit-meter-even-less-good-value")}} +- {{CSSxRef("::-webkit-meter-inner-element", "::-webkit-meter-inner-element")}} +- {{CSSxRef("::-webkit-meter-optimum-value", "::-webkit-meter-optimum-value")}} +- {{CSSxRef("::-webkit-meter-suboptimum-value", "::-webkit-meter-suboptimum-value")}} +- {{CSSxRef("-webkit-media-text-track-container", "-webkit-media-text-track-container")}} +- {{CSSxRef("::-webkit-outer-spin-button", "::-webkit-outer-spin-button")}} +- {{CSSxRef("::-webkit-progress-bar", "::-webkit-progress-bar")}} +- {{CSSxRef("::-webkit-progress-inner-element", "::-webkit-progress-inner-element")}} +- {{CSSxRef("::-webkit-progress-value", "::-webkit-progress-value")}} +- {{CSSxRef("::-webkit-search-cancel-button", "::-webkit-search-cancel-button")}} +- {{CSSxRef("::-webkit-search-results-button", "::-webkit-search-results-button")}} +- {{CSSxRef("::-webkit-slider-runnable-track", "::-webkit-slider-runnable-track")}} +- {{CSSxRef("::-webkit-slider-thumb", "::-webkit-slider-thumb")}} + +\* 標準化されました。 + +> **Note:** 一般に、セレクターのチェーンまたはグループ内に無効な擬似要素または擬似クラスがあった場合、セレクターのリスト全体が無効になります。 (擬似クラスではない) 擬似要素に -webkit- という接頭辞が付いている場合、 Firefox 63 以降, Blink, WebKit, Gecko のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。</p> + +## メディア特性 + +- {{CSSxRef("@media/-webkit-animation", "-webkit-animation")}} +- {{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}} +- {{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}} +- {{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}} +- {{CSSxRef("@media/-webkit-transition", "-webkit-transition")}} + +## 関連情報 + +- [Styling Form Controls on the WebKit Trac](https://trac.webkit.org/wiki/Styling%20Form%20Controls) +- [Microsoft CSS 拡張](/ja/docs/Web/CSS/Microsoft_Extensions) +- [Mozilla CSS 拡張](/ja/docs/Web/CSS/Mozilla_Extensions) diff --git a/files/ja/web/css/white-space/index.html b/files/ja/web/css/white-space/index.html deleted file mode 100644 index f87e4ccb14..0000000000 --- a/files/ja/web/css/white-space/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: white-space -slug: Web/CSS/white-space -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - white-space -translation_of: Web/CSS/white-space ---- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>white-space</code></strong> プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<div class="note"> -<p><strong>メモ:</strong> <em>要素の内部で</em>折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -white-space: normal; -white-space: nowrap; -white-space: pre; -white-space: pre-wrap; -white-space: pre-line; -white-space: break-spaces; - -/* グローバル値 */ -white-space: inherit; -white-space: initial; -white-space: unset; -</pre> - -<p><code>white-space</code> プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。</dd> - <dt><code>nowrap</code></dt> - <dd><code>normal</code> と同じくホワイトスペースを詰めますが、行の折り返しは行いません。</dd> - <dt><code>pre</code></dt> - <dd>連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。</dd> - <dt><code>pre-wrap</code></dt> - <dd>連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。</dd> - <dt><code>pre-line</code></dt> - <dd>連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。</dd> - <dt><code>break-spaces</code></dt> - <dd>下記の点を除いて、動作は <code>pre-wrap</code> と同じです。 - <ul> - <li>そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。</li> - <li>残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。</li> - <li>そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。</li> - </ul> - </dd> -</dl> - -<p>次の表に、<code>white-space</code> 値の動作をまとめます。</p> - -<table class="standard-table"> - <thead> - <tr> - <th></th> - <th>改行</th> - <th>空白とタブ文字</th> - <th>テキストの折り返し</th> - <th>行末の空白</th> - </tr> - </thead> - <tbody> - <tr> - <th><code>normal</code></th> - <td>まとめる</td> - <td>まとめる</td> - <td>折り返す</td> - <td>除去</td> - </tr> - <tr> - <th><code>nowrap</code></th> - <td>まとめる</td> - <td>まとめる</td> - <td>折り返さない</td> - <td>除去</td> - </tr> - <tr> - <th><code>pre</code></th> - <td>そのまま</td> - <td>そのまま</td> - <td>折り返さない</td> - <td>そのまま</td> - </tr> - <tr> - <th><code>pre-wrap</code></th> - <td>そのまま</td> - <td>そのまま</td> - <td>折り返す</td> - <td>ぶら下げ</td> - </tr> - <tr> - <th><code>pre-line</code></th> - <td>そのまま</td> - <td>まとめる</td> - <td>折り返す</td> - <td>除去</td> - </tr> - <tr> - <th><code>break-spaces</code></th> - <td>そのまま</td> - <td>そのまま</td> - <td>折り返す</td> - <td>折り返す</td> - </tr> - </tbody> -</table> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> - -<pre class="brush: css">code { - white-space: pre; -}</pre> - -<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements"><pre> 要素内での改行</h3> - -<pre class="brush: css">pre { - word-wrap: break-word; /* IE 5.5-7 */ - white-space: pre-wrap; /* 現行ブラウザー */ -}</pre> - -<h2 id="See_it_in_action" name="See_it_in_action">操作して確認する</h2> - -<div class="hidden" id="See_it_in_action_LiveSample"> -<pre class="brush: html"><div id="css-code" class="box"> - p { white-space: - <select> - <option>normal</option> - <option>nowrap</option> - <option>pre</option> - <option>pre-wrap</option> - <option>pre-line</option> - <option>break-spaces</option> - </select> } -</div> -<div id="results" class="box"> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -</div></pre> - -<pre class="brush: css">.box { - width: 300px; - padding: 16px; - border-radius: 10px; -} - -#css-code { - background-color: rgb(220, 220, 220); - font-size: 16px; - font-family: monospace; -} - -#css-code select { - font-family: inherit; -} - -#results { - background-color: rgb(230, 230, 230); - overflow-x: scroll; - height: 400px; - white-space: normal; - font-size: 14px; -}</pre> - -<pre class="brush: js">var select = document.querySelector("#css-code select"); -var results = document.querySelector("#results p"); -select.addEventListener("change", function(e) { - results.setAttribute("style", "white-space: "+e.target.value); -})</pre> -</div> - -<h3 id="Source" name="Source">ソース</h3> - -<pre class="brush: html"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -</pre> - -<h3 id="CSS_Result" name="CSS_Result">CSS を加えた結果</h3> - -<p>{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Text", "#propdef-white-space", "white-space")}}</td> - <td>{{Spec2("CSS3 Text")}}</td> - <td>折り返しアルゴリズムの詳細を記述。</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{CSSInfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.white-space")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><em>内部での</em>折り返しを定義するプロパティ: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li> -</ul> diff --git a/files/ja/web/css/white-space/index.md b/files/ja/web/css/white-space/index.md new file mode 100644 index 0000000000..095ad06c5c --- /dev/null +++ b/files/ja/web/css/white-space/index.md @@ -0,0 +1,246 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Reference + - recipe:css-property + - white-space +browser-compat: css.properties.white-space +translation_of: Web/CSS/white-space +--- +{{CSSRef}} + +**`white-space`** は CSS のプロパティで、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。 + +{{EmbedInteractiveExample("pages/css/white-space.html")}} + +このプロパティは 2 つのことを指定します。 + +- ホワイトスペースを折り畳むかどうか、およびその方法。 +- 行を自動折り返しの場面で折り返すことができるかどうか。 + +> **Note:** *要素の内部で*折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。 + +## 構文 + +```css +/* キーワード値 */ +white-space: normal; +white-space: nowrap; +white-space: pre; +white-space: pre-wrap; +white-space: pre-line; +white-space: break-spaces; + +/* グローバル値 */ +white-space: inherit; +white-space: initial; +white-space: revert; +white-space: unset; +``` + +`white-space` プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。 + +### 値 + +- `normal` + - : 連続するホワイトスペースがまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。 +- `nowrap` + - : `normal` と同じくホワイトスペースを詰めますが、行の折り返しは行いません。 +- `pre` + - : 連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。 +- `pre-wrap` + - : 連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。 +- `pre-line` + - : 連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。 +- `break-spaces` + + - : 下記の点を除いて、動作は `pre-wrap` と同じです。 + + - そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。 + - 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。 + - そのような残された空白は空間を占有し、ぶら下がらず、ボックスの内在の寸法 (min-content および max-content の大きさ) に影響します。 + +次の表に、`white-space` 値の動作をまとめます。 + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>改行</th> + <th>空白とタブ文字</th> + <th>テキストの折り返し</th> + <th>行末の空白</th> + <th>行末のその他の空白区切り</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>まとめる</td> + <td>まとめる</td> + <td>折り返す</td> + <td>除去</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>まとめる</td> + <td>まとめる</td> + <td>折り返さない</td> + <td>除去</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>そのまま</td> + <td>そのまま</td> + <td>折り返さない</td> + <td>そのまま</td> + <td>折り返さない</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>そのまま</td> + <td>そのまま</td> + <td>折り返す</td> + <td>ぶら下げる</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>そのまま</td> + <td>まとめる</td> + <td>折り返す</td> + <td>除去</td> + <td>ぶら下げる</td> + </tr> + <tr> + <th><code>break-spaces</code></th> + <td>そのまま</td> + <td>そのまま</td> + <td>折り返す</td> + <td>折り返す</td> + <td>折り返す</td> + </tr> + </tbody> +</table> + +> **Note:** **空白**と**その他の空白区切り**には違いがあります。以下のように定義されています。 +> +> - 空白 +> - : 空白 (U+0020)、タブ (U+0009)、区切り文字 (改行など)。 +> - その他の空白区切り +> - : Unicode で定義されているその他の区切り文字で、空白として定義されているもの意外。 +> +> ホワイトスペースが*ぶら下げる*とある場合、内在サイズを計算するときにボックスの大きさに影響することがあります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### 基本的な例 + +```css +code { + white-space: pre; +} +``` + +### \<pre> 要素内での改行 + +```css +pre { + white-space: pre-wrap; +} +``` + +<h3 id="In_action">操作</h3> + +#### HTML + +```html hidden +<div id="css-code" class="box"> + p { white-space: + <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + <option>break-spaces</option> + </select> } +</div> +<div id="results" class="box"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div> +``` + +```css hidden +.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220, 220, 220); + font-size: 16px; + font-family: monospace; +} + +#css-code select { + font-family: inherit; +} + +#results { + background-color: rgb(230, 230, 230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +} +``` + +```js hidden +var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +}) +``` + +```html +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +``` + +#### 結果 + +{{EmbedLiveSample("In_action", "100%", 500)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- *内部での*折り返しを定義するプロパティ: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} diff --git a/files/ja/web/css/widows/index.html b/files/ja/web/css/widows/index.html deleted file mode 100644 index fca97dbb2e..0000000000 --- a/files/ja/web/css/widows/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: widows -slug: Web/CSS/widows -tags: - - CSS - - CSS プロパティ - - CSS 断片化 - - CSS 段組みレイアウト - - リファレンス -translation_of: Web/CSS/widows ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>widows</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/Paged_Media">ページ</a>、領域、<a href="/ja/docs/Web/CSS/CSS_Columns">段</a>の<em>先頭</em>に表示されるブロックコンテナーの最小行数を設定します。</p> - -<pre class="brush:css no-line-numbers">/* <integer> 値 */ -widows: 2; -widows: 3; - -/* グローバル値 */ -widows: inherit; -widows: initial; -widows: unset; -</pre> - -<div class="note"> -<p>組版において、 <em>widow</em> とは段落の最後の行がページの先頭に単独で現れることです。 (段落は前のページから続きます。)</p> -</div> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<integer>")}}</dt> - <dd>区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p>これは幾らかのテキストを含む最初の段落です。</p> - <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。</p> - <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[4]">div { - background-color: #8cffa0; - columns: 3; - widows: 2; -} - -p { - background-color: #8ca0ff; -} - -p:first-child { - margin-top: 0; -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 400, 160)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td> - <td>{{Spec2('CSS3 Fragmentation')}}</td> - <td><code>widows</code> をページ、領域、段など、断片の種類によらず適用するように拡張</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>段組みに関する <code>widows</code> の考慮の勧告</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2> - -<div> -<p>{{Compat("css.properties.widows")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("orphans")}}</li> - <li><a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a></li> -</ul> diff --git a/files/ja/web/css/widows/index.md b/files/ja/web/css/widows/index.md new file mode 100644 index 0000000000..234be14e05 --- /dev/null +++ b/files/ja/web/css/widows/index.md @@ -0,0 +1,96 @@ +--- +title: widows +slug: Web/CSS/widows +tags: + - CSS + - CSS Fragmentation + - CSS Multi-column Layout + - CSS プロパティ + - Reference + - recipe:css-property +browser-compat: css.properties.widows +translation_of: Web/CSS/widows +--- +{{CSSRef}} + +**`widows`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[ページ](/ja/docs/Web/CSS/Paged_Media)、領域、[段](/ja/docs/Web/CSS/CSS_Columns)の*先頭*に表示されるブロックコンテナーの最小行数を設定します。</p> + +```css +/* <integer> 値 */ +widows: 2; +widows: 3; + +/* グローバル値 */ +widows: inherit; +widows: initial; +widows: revert; +widows: unset; +``` + +組版において、ウィドウ (_widow_) とは (段落が前のページから続いている場合に) 段落の最後の行がページの先頭に単独で現れることです。 + +{{cssinfo}} + +## 構文 + +### 値 + +- {{cssxref("<integer>")}} + - : 区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +<h3 id="Controlling_column_widows">段の widow の制御</h3> + +#### HTML + +```html +<div> + <p>これは幾らかのテキストを含む最初の段落です。</p> + <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これはウィドウがどの様に動作するのかを示すために用います。</p> + <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p> +</div> +``` + +#### CSS + +```css +div { + background-color: #8cffa0; + columns: 3; + widows: 2; +} + +p { + background-color: #8ca0ff; +} + +p:first-child { + margin-top: 0; +} +``` + +#### 結果 + +{{EmbedLiveSample("Controlling_column_widows", 400, 160)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("orphans")}} +- [ページ付きメディア](/ja/docs/Web/CSS/Paged_Media) diff --git a/files/ja/web/css/word-break/index.html b/files/ja/web/css/word-break/index.html deleted file mode 100644 index a315d8dd4a..0000000000 --- a/files/ja/web/css/word-break/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: word-break -slug: Web/CSS/word-break -tags: - - CSS - - CSS テキスト - - CSS プロパティ - - Reference - - 日本語処理 -translation_of: Web/CSS/word-break ---- -<div>{{CSSRef}}</div> - -<p><strong><code>word-break</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -word-break: normal; -word-break: break-all; -word-break: keep-all; -word-break: break-word; /* 非推奨 */ - -/* グローバル値 */ -word-break: inherit; -word-break: initial; -word-break: unset; -</pre> - -<p><code>word-break</code> プロパティは、下記のリストの中から 1 つを選んで指定します。</p> - -<h3 class="brush:css" id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>既定の改行規則を使用します。</dd> - <dt><code>break-all</code></dt> - <dd>CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 - <div class="hidden">翻訳メモ:<br> - 英語版: 「Chinese/Japanese/Korean」 (3つ)<br> - 日本語: 「中国語、台湾語、日本語、韓国語」 (4つ)<br> - という翻訳が以前から続いているので、それに従うことにしました。</div> - </dd> - <dt><code>keep-all</code></dt> - <dd>CJK テキストの改行を許可しません。 CJK 以外のテキストについては <code>normal</code> と同じ挙動となります。</dd> - <dt><code>break-word</code> {{Deprecated_Inline}}</dt> - <dd>{{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 <code>word-break: normal</code> や <code>overflow-wrap: anywhere</code> と同じ効果になります。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code>word-break: break-word</code> および <code>overflow-wrap: break-word</code> ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 <code>word-break: break-all</code> はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。</p> -</div> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>1. <code>word-break: normal</code></p> -<p class="normal narrow">This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> - -<p>2. <code>word-break: break-all</code></p> -<p class="breakAll narrow">This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> - -<p>3. <code>word-break: keep-all</code></p> -<p class="keepAll narrow">This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> - -<p>4. <code>word-break: break-word</code></p> -<p class="breakWord narrow">This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">.narrow { - padding: 10px; - border: 1px solid; - width: 500px; - margin: 0 auto; - font-size: 20px; - line-height: 1.5; - letter-spacing: 1px; -} - -.normal { - word-break: normal; -} - -.breakAll { - word-break: break-all; -} - -.keepAll { - word-break: keep-all; -} - -.breakWord { - word-break: break-word; -} -</pre> - -<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.word-break")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("overflow-wrap")}}</li> -</ul> diff --git a/files/ja/web/css/word-break/index.md b/files/ja/web/css/word-break/index.md new file mode 100644 index 0000000000..2dd56cc203 --- /dev/null +++ b/files/ja/web/css/word-break/index.md @@ -0,0 +1,130 @@ +--- +title: word-break +slug: Web/CSS/word-break +tags: + - CSS + - CSS プロパティ + - Reference + - break-word + - recipe:css-property + - word-break + - 日本語処理 +browser-compat: css.properties.word-break +translation_of: Web/CSS/word-break +--- +{{CSSRef}} + +**`word-break`** は [CSS](/ja/docs/Web/CSS) のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。 + +{{EmbedInteractiveExample("pages/css/word-break.html")}} + +## 構文 + +```css +/* キーワード値 */ +word-break: normal; +word-break: break-all; +word-break: keep-all; +word-break: break-word; /* 非推奨 */ + +/* グローバル値 */ +word-break: inherit; +word-break: initial; +word-break: revert; +word-break: unset; +``` + +`word-break` プロパティは、下記のリストの中から 1 つを選んで指定します。 + +### 値 + +- `normal` + - : 既定の改行規則を使用します。 +- `break-all` + - : CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。 +- `keep-all` + - : CJK テキストの改行を許可しません。 CJK 以外のテキストについては `normal` と同じ挙動となります。 +- `break-word` {{Deprecated_Inline}} + - : {{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 `word-break: normal` や `overflow-wrap: anywhere` と同じ効果になります。 + +> **Note:** `word-break: break-word` および `overflow-wrap: break-word` ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 `word-break: break-all` はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>1. <code>word-break: normal</code></p> +<p class="normal narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>2. <code>word-break: break-all</code></p> +<p class="breakAll narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>3. <code>word-break: keep-all</code></p> +<p class="keepAll narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>4. <code>word-break: break-word</code></p> +<p class="breakWord narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> +``` + +### CSS + +```css +.narrow { + padding: 10px; + border: 1px solid; + width: 500px; + margin: 0 auto; + font-size: 20px; + line-height: 1.5; + letter-spacing: 1px; +} + +.normal { + word-break: normal; +} + +.breakAll { + word-break: break-all; +} + +.keepAll { + word-break: keep-all; +} + +.breakWord { + word-break: break-word; +} +``` + +{{EmbedLiveSample('Examples', '100%', 600)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("overflow-wrap")}} +- {{cssxref("hyphens")}} +- [テキストの分割と折り返しのガイド](/ja/docs/Web/CSS/CSS_Text/Wrapping_Text) diff --git a/files/ja/web/css/word-spacing/index.html b/files/ja/web/css/word-spacing/index.html deleted file mode 100644 index 974320c478..0000000000 --- a/files/ja/web/css/word-spacing/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: word-spacing -slug: Web/CSS/word-spacing -tags: - - CSS - - CSS Text - - CSS テキスト - - CSS プロパティ - - Reference -translation_of: Web/CSS/word-spacing ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>word-spacing</code></strong> プロパティは、タグや単語の間隔に関する挙動を指定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -word-spacing: normal; - -/* <length> 値 */ -word-spacing: 3px; -word-spacing: 0.3em; - -/* <percentage> 値 */ -word-spacing: 50%; -word-spacing: 200%; - -/* グローバル値 */ -word-spacing: inherit; -word-spacing: initial; -word-spacing: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>現在のフォントやブラウザ―で定義された普通の単語の間隔です。</dd> - <dt>{{cssxref("length")}}</dt> - <dd>フォントによって定義された単語の間隔に追加する間隔を定義します。</dd> - <dt>{{cssxref("percentage")}}</dt> - <dd>文字の advance width を基準とした追加する間隔の量をパーセントで指定します。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div id="mozdiv1">Here are many words...</div> -<div id="mozdiv2">...and many more!</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">#mozdiv1 { - word-spacing: 15px; -} - -#mozdiv2 { - word-spacing: 5em; -} </pre> - -<p>{{ EmbedLiveSample('Example') }}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p><code>word-spacing</code> で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。</p> - -<p>フォントファミリによって文字の幅が異なるため、読みやすい <code>word-spacing</code> は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{CSSInfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{CSSSyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td> - <td>{{Spec2('CSS3 Text')}}</td> - <td>以前の値を、<code><spacing-limit></code> 値で置き換え。この値は、以前と同じ値か、追加された<code><percentage></code> 値か、もしくは、最適値・最小値・最大値を表す 3 つまでの値を使って定義します</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.word-spacing")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("letter-spacing")}}</li> -</ul> diff --git a/files/ja/web/css/word-spacing/index.md b/files/ja/web/css/word-spacing/index.md new file mode 100644 index 0000000000..4c9d0ddafd --- /dev/null +++ b/files/ja/web/css/word-spacing/index.md @@ -0,0 +1,99 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - CSS プロパティ + - CSS テキスト + - Reference + - recipe:css-property +browser-compat: css.properties.word-spacing +translation_of: Web/CSS/word-spacing +--- +{{CSSRef}} + +**`word-spacing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、タグや単語の間隔に関する挙動を指定します。 + +{{EmbedInteractiveExample("pages/css/word-spacing.html")}} + +## 構文 + +```css +/* キーワード値 */ +word-spacing: normal; + +/* <length> 値 */ +word-spacing: 3px; +word-spacing: 0.3em; + +/* <percentage> 値 */ +word-spacing: 50%; +word-spacing: 200%; + +/* グローバル値 */ +word-spacing: inherit; +word-spacing: initial; +word-spacing: revert; +word-spacing: unset; +``` + +### 値 + +- `normal` + - : 現在のフォントやブラウザ―で定義された普通の単語の間隔です。 +- {{cssxref("length")}} + - : フォントによって定義された単語の間隔に追加する間隔を定義します。 +- {{cssxref("percentage")}} + - : 文字の advance width を基準とした追加する間隔の量をパーセント値で指定します。 + +<h2 id="Examples">例</h2> + +### HTML + +```html +<div id="mozdiv1">Here are many words...</div> +<div id="mozdiv2">...and many more!</div> +``` + +### CSS + +```css +#mozdiv1 { + word-spacing: 15px; +} + +#mozdiv2 { + word-spacing: 5em; +} +``` + +{{ EmbedLiveSample('Examples') }} + +## アクセシビリティの考慮 + +`word-spacing` で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。 + +フォントファミリーによって文字の幅が異なるため、読みやすい `word-spacing` は場面によって検討する必要があります。すべてのフォントファミリーで自動的に読みやすさを調整する単一の値はありません。 + +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("letter-spacing")}} diff --git a/files/ja/web/html/element/figcaption/index.html b/files/ja/web/html/element/figcaption/index.html index 3aa3682217..57c39c6f3f 100644 --- a/files/ja/web/html/element/figcaption/index.html +++ b/files/ja/web/html/element/figcaption/index.html @@ -82,12 +82,7 @@ translation_of: Web/HTML/Element/figcaption <h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<<<<<<< Updated upstream - <p>{{Compat}}</p> -======= -<p>{{Compat("html.elements.figcaption")}}</p> ->>>>>>> Stashed changes <h2 id="See_also">関連情報</h2> diff --git a/files/ja/web/html/element/head/index.html b/files/ja/web/html/element/head/index.html index 3596c470cf..03a3505295 100644 --- a/files/ja/web/html/element/head/index.html +++ b/files/ja/web/html/element/head/index.html @@ -109,15 +109,9 @@ translation_of: Web/HTML/Element/head </tbody> </table> -<<<<<<< Updated upstream <h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat}}</p> -======= -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("html.elements.head")}}</p> ->>>>>>> Stashed changes <h2 id="See_also">関連情報</h2> diff --git a/files/ja/web/html/element/link/index.html b/files/ja/web/html/element/link/index.html index 56c5de20a6..512c41be30 100644 --- a/files/ja/web/html/element/link/index.html +++ b/files/ja/web/html/element/link/index.html @@ -93,7 +93,7 @@ translation_of: Web/HTML/Element/link <p>fetch, XHR</p> <div class="blockIndicator note"> - <p>この値は <code><link></code> に crossorigin 属性をつけるために必要です。</p> + <p>この値では <code><link></code> に crossorigin 属性が必要です。</p> </div> </td> </tr> diff --git a/files/ja/web/html/link_types/index.html b/files/ja/web/html/link_types/index.html index ce52c3dfe8..428193fd4e 100644 --- a/files/ja/web/html/link_types/index.html +++ b/files/ja/web/html/link_types/index.html @@ -186,8 +186,7 @@ translation_of: Web/HTML/Link_types <p>リンクを新しい閲覧コンテキストで開き、リンク元の文書へアクセスできないようにすることをブラウザーに指示します。つまり、新たに開いたウィンドウで {{DOMxRef("Window.opener")}} プロパティを設定しません（<code>null</code> を返します）。<br> <br> これは信頼できないリンクを開く際、 {{DOMxRef("Window.opener")}} プロパティでリンク元の文書を変更できないようにするために特に役に立つリンク種別です（詳しくは <a href="https://mathiasbynens.github.io/rel-noopener/">About rel=noopener</a> を参照してください）。ただし、 <code>Referer</code> HTTP ヘッダーは（<code>noreferrer</code> を使用しない限り）提供します。</p> - - <p>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.</p> + <strong>注:</strong> <code>noopener</code> を使用した場合、ターゲット名に <code>_top</code>, <code>_self</code>, <code>_parent</code> 以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて <code>_blank</code> と同様に扱われます。 </td> <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> <td>{{HTMLElement("link")}}</td> diff --git a/files/ja/web/http/cors/cors_principle.png b/files/ja/web/http/cors/cors_principle.png Binary files differnew file mode 100644 index 0000000000..31e6382e11 --- /dev/null +++ b/files/ja/web/http/cors/cors_principle.png diff --git a/files/ja/web/http/cors/cred-req-updated.png b/files/ja/web/http/cors/cred-req-updated.png Binary files differnew file mode 100644 index 0000000000..87834b5356 --- /dev/null +++ b/files/ja/web/http/cors/cred-req-updated.png diff --git a/files/ja/web/http/cors/index.html b/files/ja/web/http/cors/index.html deleted file mode 100644 index 33d046aaed..0000000000 --- a/files/ja/web/http/cors/index.html +++ /dev/null @@ -1,502 +0,0 @@ ---- -title: オリジン間リソース共有 (CORS) -slug: Web/HTTP/CORS -tags: - - AJAX - - CORS - - Fetch - - Fetch API - - HTTP - - HTTP アクセス制御 - - Security - - XMLHttpRequest - - 'l10n:priority' - - オリジン間リソース共有 - - セキュリティ - - 同一オリジンポリシー -translation_of: Web/HTTP/CORS ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary"><ruby><strong>オリジン間リソース共有</strong><rp> (</rp><rt>Cross-Origin Resource Sharing</rt><rp>) </rp></ruby> ({{Glossary("CORS")}}) は、追加の {{Glossary("HTTP")}} ヘッダーを使用して、ある{{glossary("origin", "オリジン")}}で動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。</span>ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。</p> - -<p>オリジン間リクエストの一例: <code>https://domain-a.com</code> で提供されているウェブアプリケーションのフロントエンド JavaScript コードが {{domxref("XMLHttpRequest")}} を使用して <code>https://domain-b.com/data.json</code> へリクエストを行う場合。</p> - -<p>セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 <code>XMLHttpRequest</code>や <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> は<ruby><a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a><rp> (</rp><rt>same-origin policy</rt><rp>) </rp></ruby>に従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンの場合は正しい CORS ヘッダーを含んでいることが必要です。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 643px; width: 925px;"></p> - -<p>CORS の仕組みは、安全なオリジン間のリクエストとブラウザー・サーバー間のデータ転送を支援します。最近のブラウザーは CORS を <code>XMLHttpRequest</code> や <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> などの API で使用して、オリジン間 HTTP リクエストのリスクの緩和に役立てています。</p> - -<h2 id="Who_should_read_this_article" name="Who_should_read_this_article">この記事を読むべき人</h2> - -<p>誰もが読むべきです。</p> - -<p>もっと具体的に言えば、この記事は<strong>ウェブ管理者</strong>、<strong>サーバー開発者</strong>、<strong>フロントエンド開発者</strong>向けです。最近のブラウザーはヘッダーやポリシーの強制を含む、オリジン間共有のクライアント側コンポーネントを扱います。しかし CORS 標準は、サーバーが新たなリクエストヘッダーやレスポンスヘッダーを扱わなければならないことを示しています。サーバー開発者向けには、<a href="/ja/docs/Web/HTTP/Server-Side_Access_Control">サーバーの観点によるオリジン間共有 (PHP コードスニペット付き)</a> についての議論を合わせてお読みください。</p> - -<h2 id="What_requests_use_CORS" name="What_requests_use_CORS">CORS を使用したリクエストとは</h2> - -<p>この<a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">オリジン間共有仕様</a>は、以下のようなサイト間 HTTP リクエストを有効にすることができます。</p> - -<ul> - <li>前述のように {{domxref("XMLHttpRequest")}} または <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> を呼び出す。</li> - <li>ウェブフォント (CSS の <code>@font-face</code> で別ドメインのフォントを利用するため)。<a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">これによりサーバーは、許可したウェブサイトのみから読み込みや利用ができる TrueType フォントを提供できます</a>。</li> - <li><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL テクスチャ</a>。</li> - <li>{{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} を使用してキャンバスに描画される画像やビデオフレーム。</li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">画像から生成する CSS シェイプ</a>。</li> -</ul> - -<p>この記事では、オリジン間リソース共有の全般的な説明と併せて、 HTTP ヘッダーの要件についても説明します。</p> - -<h2 id="Functional_overview" name="Functional_overview">機能概要</h2> - -<p>オリジン間リソース共有の仕様は、ウェブブラウザーから情報を読み取ることを許可されているオリジンをサーバーが記述することができる、新たな <a href="/ja/docs/Web/HTTP/Headers">HTTP ヘッダー</a>を追加することで作用します。加えて仕様書では、サーバーの情報に副作用を引き起こすことがある HTTP のリクエストメソッド (特に {{HTTPMethod("GET")}} 以外の HTTP メソッドや、特定の <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>を伴う {{HTTPMethod("POST")}}) のために、ブラウザーが HTTP の {{HTTPMethod("OPTIONS")}} リクエストメソッドを用いて、あらかじめリクエストの「プリフライト」 (サーバーから対応するメソッドの一覧を収集すること) を行い、サーバーの「認可」のもとに実際のリクエストを送信することを指示しています。サーバーはリクエスト時に「資格情報」 (<a href="/ja/docs/Web/HTTP/Cookies">Cookie</a> や <a href="/ja/docs/Web/HTTP/Authentication">HTTP 認証</a> など) を送信するべきかをクライアントに伝えることもできます。</p> - -<p>CORS は様々なエラーで失敗することがありますが、セキュリティ上の理由から、エラーについて <em>JavaScript から知ることができない</em>よう定められています。コードからはエラーが発生したということしか分かりません。何が悪かったのかを具体的に知ることができる唯一の方法は、ブラウザーのコンソールで詳細を見ることです。</p> - -<p>以降の節ではシナリオの説明に加え、 HTTP ヘッダーの使い方の詳細も提供します。</p> - -<h2 id="Examples_of_access_control_scenarios" name="Examples_of_access_control_scenarios">アクセス制御シナリオの例</h2> - -<p>オリジン間リソース共有がどのように動作するかを説明する3つのシナリオを示します。これらの例はすべて {{domxref("XMLHttpRequest")}} を用いており、対応しているブラウザーにおいて、サイトをまたいでアクセスすることができます。</p> - -<p>サーバー側から見たオリジン間リソース共有の説明 (PHP のコードスニペットを含む) は <a class="internal" href="/ja/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a> の記事にあります。</p> - -<h3 id="Simple_requests" name="Simple_requests">単純リクエスト</h3> - -<p>リクエストによっては <a href="#Preflighted_requests">CORS プリフライト</a>を引き起こさないものがあります。これをこの記事では<em>「単純リクエスト」</em>と呼んでいますが、 (CORS を定義している) {{SpecName('Fetch')}} 仕様書ではこの用語を使用していません。 「単純リクエスト」は、<strong>以下のすべての条件を満たす</strong>ものです。</p> - -<ul> - <li>許可されているメソッドのうちの一つであること。 - <ul> - <li>{{HTTPMethod("GET")}}</li> - <li>{{HTTPMethod("HEAD")}}</li> - <li>{{HTTPMethod("POST")}}</li> - </ul> - </li> - <li>ユーザーエージェントによって自動的に設定されたヘッダー (たとえば {{HTTPHeader("Connection")}}、 {{HTTPHeader("User-Agent")}}、 または <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">Fetch 仕様書で「禁止ヘッダー名」として定義されているヘッダー</a>) を除いて、手動で設定できるヘッダーは、 <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">Fetch 仕様書で「CORS セーフリストリクエストヘッダー」として定義されている</a>以下のヘッダーだけです。 - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (但し、下記の要件を満たすもの)</li> - </ul> - </li> - <li>{{HTTPHeader("Content-Type")}} ヘッダーでは以下の値のみが許可されています。 - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li>リクエストに使用されるどの {{domxref("XMLHttpRequestUpload")}} にもイベントリスナーが登録されていないこと。これらは正しく {{domxref("XMLHttpRequest.upload")}} を使用してアクセスされます。</li> - <li>リクエストに {{domxref("ReadableStream")}} オブジェクトが使用されていないこと。</li> -</ul> - -<div class="note"><strong>注:</strong> これらはウェブコンテンツが発行可能になっているサイト間リクエストと同じ種類のものであり、サーバーが適切なヘッダーを送信しなければレスポンスデータは送信元へ送られません。従ってクロスサイトリクエストフォージェリ対策をしているサイトは、 HTTP アクセス制限について新たに心配することはありません。</div> - -<div class="note"> -<p><strong>注:</strong> WebKit Nightly および Safari Technology Preview は、 {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Content-Language")}} ヘッダーの値に追加の制限を掛けています。これらのヘッダーが「標準外」の値の場合、 WebKit/Safari はそのリクエストが「単純リクエスト」の条件に合うとは判断しません。 WebKit/Safari がこれらのヘッダーのどの値を「標準外」と判断するかについては、以下の WebKit のバグを除いて文書化されていません。</p> - -<ul> - <li><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></li> - <li><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></li> - <li><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></li> -</ul> - -<p>これは仕様の一部ではないので、他のブラウザーはこの追加の制限を実装していません。</p> -</div> - -<p>例えば、ドメイン <code class="plain">https://foo.example</code> にあるウェブコンテンツがドメイン <code class="plain">https://bar.other</code> にあるコンテンツを呼び出したいと仮定します。以下のようなコードが <code>foo.example</code> 内の JavaScript で使用されるかもしれません。</p> - -<pre class="brush: js notranslate" id="line1">const xhr = new XMLHttpRequest(); -const url = 'https://bar.other/resources/public-data/'; - -xhr.open('GET', url); -xhr.onreadystatechange = someHandler; -xhr.send(); -</pre> - -<p>これは、特権を扱うために CORS ヘッダーを使用して、クライアントとサーバーの間で簡単なデータ交換を行います。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/17214/simple-req-updated.png" style="height: 490px; width: 1023px;"></p> - -<p>この場合、ブラウザーがサーバーに何を送信し、サーバーが何を返すかを見てみましょう。</p> - -<pre class="brush: shell notranslate">GET /resources/public-data/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Connection: keep-alive -<strong>Origin: https://foo.example</strong> -</pre> - -<p>特筆すべきリクエストヘッダーは {{HTTPHeader("Origin")}} であり、呼び出しが <code class="plain">https://foo.example</code> から来たことを表します。</p> - -<pre class="notranslate">HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 00:23:53 GMT -Server: Apache/2 -<strong>Access-Control-Allow-Origin: *</strong> -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Transfer-Encoding: chunked -Content-Type: application/xml - -[…XML データ…]</pre> - -<p>レスポンスでは、サーバーが {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーを返信しています。 {{HTTPHeader("Origin")}} ヘッダーと {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーの使用は、最も単純なアクセス制御プロトコルを表しています。この場合、サーバーは <code>Access-Control-Allow-Origin: *</code> を返しており、これはそのリソースが<strong>すべての</strong>ドメインからアクセスできることを意味します。 <code class="plain">https://bar.other</code> にあるリソースの所有者が、リソースへの制限を <code class="plain">https://foo.example</code> からのリクエスト<em>のみ</em>に制限したいと考えていた場合は、以下のように送信します。</p> - -<pre class="notranslate"><code class="plain">Access-Control-Allow-Origin: https://foo.example</code></pre> - -<p><code class="plain">https://foo.example</code> 以外のドメインはすべて、サイト間の方法でリソースにアクセスすることがサイト間の方法でリソースにアクセスすることができなくなりました。リソースへのアクセスを許可するには、 <code>Access-Control-Allow-Origin</code> ヘッダーに、リクエストの <code>Origin</code> ヘッダーの中で送信された値を含めてください。</p> - -<h3 id="Preflighted_requests" name="Preflighted_requests">プリフライトリクエスト</h3> - -<p><a href="#Simple_requests">「単純リクエスト」 (前述)</a> とは異なり、「プリフライト」リクエストは始めに {{HTTPMethod("OPTIONS")}} メソッドによる HTTP リクエストを他のドメインにあるリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめます。サイト間リクエストがユーザーデータに影響を与える可能性があるような場合に、このようにプリフライトを行います。</p> - -<p>以下は、プリフライトが行われるリクエストの例です。</p> - -<pre class="brush: js notranslate" id="line1">const xhr = new XMLHttpRequest(); -xhr.open('POST', 'https://bar.other/resources/post-here/'); -xhr.setRequestHeader('X-PINGOTHER', 'pingpong'); -xhr.setRequestHeader('Content-Type', 'application/xml'); -xhr.onreadystatechange = handler; -xhr.send('<person><name>Arun</name></person>'); -</pre> - -<p>上記の例では、 <code>POST</code> で送信する XML の本体を作成しています。また、標準外の <code>X-PINGOTHER</code> HTTP リクエストヘッダーを設定しています。このようなヘッダーは HTTP/1.1 プロトコルに含まれていませんが、ウェブアプリケーションでは一般的に便利なものです。リクエストで <code>Content-Type</code> に <code>application/xml</code> を使用しており、かつカスタムヘッダーを設定しているため、このリクエストではプリフライトを行います。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/17268/preflight_correct.png" style="height: 1076px; width: 1024px;"></p> - -<div class="blockIndicator note"> -<p><strong>注</strong>: 後述するように、実際の <code>POST</code> リクエストには <code>Access-Control-Request-*</code> ヘッダーが含まれず、 <code>OPTIONS</code> リクエストのみで必要になります。</p> -</div> - -<p>クライアントとサーバーとの間のやりとりの全容を見てみましょう。最初のやり取りは<em>プリフライトリクエスト/レスポンス</em>です。</p> - -<pre class="brush: shell notranslate">OPTIONS /doc HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Connection: keep-alive -Origin: http://foo.example -Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type - - -HTTP/1.1 204 No Content -Date: Mon, 01 Dec 2008 01:15:39 GMT -Server: Apache/2 -Access-Control-Allow-Origin: https://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400 -Vary: Accept-Encoding, Origin -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -</pre> - -<p>プリフライトリクエストが完了したら、実際のリクエストを送ります。</p> - -<pre class="brush: shell notranslate">POST /doc HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Connection: keep-alive -X-PINGOTHER: pingpong -Content-Type: text/xml; charset=UTF-8 -Referer: https://foo.example/examples/preflightInvocation.html -Content-Length: 55 -Origin: https://foo.example -Pragma: no-cache -Cache-Control: no-cache - -<person><name>Arun</name></person> - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:40 GMT -Server: Apache/2 -Access-Control-Allow-Origin: https://foo.example -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 235 -Keep-Alive: timeout=2, max=99 -Connection: Keep-Alive -Content-Type: text/plain - -[Some XML payload] -</pre> - -<p>上記の1-10行目は {{HTTPMethod("OPTIONS")}} メソッドによるプリフライトを表します。ブラウザーは上記で使用された JavaScript コードで使用しているリクエストの引数に基づいて、プリフライトの送信が必要であることを判断します。これによりサーバーは実際のリクエストの引数によって送られるリクエストを受け入れ可能かをレスポンスできます。 OPTIONS はサーバーから付加的な情報を得るために用いる HTTP/1.1 のメソッドであり、また{{Glossary("safe","安全")}}なメソッド、つまりリソースを変更するためには使用できないメソッドです。 OPTIONS リクエストと合わせて、他にリクエストヘッダーを2つ送信していることに注意してください (それぞれ9行目と10行目です)。</p> - -<pre class="brush: none notranslate">Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type -</pre> - -<p>{{HTTPHeader("Access-Control-Request-Method")}} ヘッダーは、プリフライトリクエストの一部として、実際のリクエストが <code>POST</code> リクエストメソッドで送られることをサーバーに通知します。 {{HTTPHeader("Access-Control-Request-Headers")}} ヘッダーは、実際のリクエストにカスタムヘッダーである <code>X-PINGOTHER</code> および Content-Type が含まれることをサーバーに通知します。ここでサーバーは、この状況下でリクエストの受け入れを望むかを判断する機会があります。</p> - -<p>上記の13-22行目はサーバーが返すレスポンスであり、リクエストメソッド (<code>POST</code>) とリクエストヘッダー (<code>X-PINGOTHER</code>) を受け入れられることを示しています。特に、16-19行目を見てみましょう。</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400</pre> - -<p>サーバーは <code>Access-Control-Allow-Methods</code> を返しており、これは当該リソースへの問い合わせで <code>POST</code> および <code>GET</code> が実行可能なメソッドであることを伝えます。なお、このヘッダーはレスポンスヘッダーの {{HTTPHeader("Allow")}} と似ていますが、アクセス制御でのみ使用されることに注意してください。</p> - -<p>またサーバーは、 <code>Access-Control-Allow-Headers</code> を <code>X-PINGOTHER</code> の値で送信し、これが実際のリクエストで使用されるヘッダーであることを承認しています。 <code>Access-Control-Allow-Methods</code> と同様に、 <code>Access-Control-Allow-Headers</code> は受け入れ可能なヘッダーをカンマ区切りのリストで表します。</p> - -<p>最後に <code>Access-Control-Max-Age</code> は、プリフライトリクエストを再び送らなくてもいいように、プリフライトのレスポンスをキャッシュしてよい時間を秒数で与えます。この例では86400秒、つまり24時間です。なお、ブラウザーは個々に<a href="/ja/docs/Web/HTTP/Headers/Access-Control-Max-Age">内部の上限値</a>を持っており、 <code>Access-Control-Max-Age</code> が上回った場合に制限を掛けます。</p> - -<h4 id="Preflighted_requests_and_redirects" name="Preflighted_requests_and_redirects">プリフライトリクエストとリダイレクト</h4> - -<p>多くのブラウザーは現在、下記のようなプリフライトリクエストのリダイレクトに対応していません。プリフライトリクエストにリダイレクトが発生すると、多くのブラウザーは以下のようなエラーメッセージを報告します。</p> - -<blockquote> -<p>リクエストがプリフライトを必要とするオリジン間リクエストで許可されていない 'https://example.com/foo' にリダイレクトされました。</p> -</blockquote> - -<blockquote> -<p>リクエストにはプリフライトが必要で、オリジン間のリダイレクトは許可されていません</p> -</blockquote> - -<p>もともと CORS プロトコルはそのような振る舞いを要求していましたが、<a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">その後で必要がないと変更されました</a>。しかし、多くのブラウザーはまだ変更を実装しておらず、もともと要求されていた振る舞いに従っています。</p> - -<p>ブラウザーが仕様に追いつくまで、以下の一方もしくは両方を行うことでこの制限を回避することができます。</p> - -<ul> - <li>サーバー側の振る舞いを変更して、プリフライトが発生しないようにするか、リダイレクトが発生しないようにする</li> - <li>リクエストをプリフライトを起こさない<a href="#Simple_requests">単純リクエスト</a>などに変更する</li> -</ul> - -<p>これらの変更ができない場合は、次のような別な方法があります。</p> - -<ol> - <li><a href="#Simple_requests">単純リクエスト</a>を行い (Fetch API の {{domxref("Response.url")}} または {{domxref("XMLHttpRequest.responseURL")}} を使用して)、実際のプリフライトリクエストが転送される先を特定する。</li> - <li>最初のステップの <code>Response.url</code> または <code>XMLHttpRequest.responseURL</code> で得た URL を使用して、もう一つのリクエスト (「本当の」リクエスト) を行う。</li> -</ol> - -<p>ただし、リクエストに <code>Authorization</code> ヘッダーが存在するためにプリフライトを引き起こすリクエストの場合、上記の手順を使用して制限を回避することはできません。リクエストが行われているサーバーを制御できない限り、まったく回避することはできません。</p> - -<h3 id="Requests_with_credentials" name="Requests_with_credentials">資格情報を含むリクエスト</h3> - -<p>{{domxref("XMLHttpRequest")}} や <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> と CORS の両方によって明らかになる最も興味深い機能は、 <a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキー</a>と HTTP 資格情報によってわかる「資格情報を含む」リクエストを作成することができることです。既定では、サイト間の <code>XMLHttpRequest</code> または <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> の呼び出しにおいて、ブラウザーは資格情報を送信<strong>しません</strong>。 <code>XMLHttpRequest</code> オブジェクトまたは {{domxref("Request")}} のコンストラクターの呼び出し時に、特定のフラグを設定する必要があります。</p> - -<p>以下の例では <code class="plain">http://foo.example</code> から読み込まれた元のコンテンツが、 <code class="plain">http://bar.other</code> にあるリソースに対してクッキーを設定したシンプルな GET リクエストを行います。 foo.example のコンテンツは以下のような JavaScript を含んでいるかもしれません。</p> - -<pre class="brush: js notranslate" id="line1">const invocation = new XMLHttpRequest(); -const url = 'http://bar.other/resources/credentialed-content/'; - -function callOtherDomain() { - if (invocation) { - invocation.open('GET', url, true); - invocation.withCredentials = true; - invocation.onreadystatechange = handler; - invocation.send(); - } -}</pre> - -<p>7行目で、クッキー付きで呼び出しを行うために {{domxref("XMLHttpRequest")}} に設定する必要があるフラグ、 <code>withCredentials</code> という真偽値型の値を示しています。既定では、クッキーなしで呼び出しが行われます。これは単純な <code>GET</code> リクエストなのでプリフライトは行いませんが、ブラウザーは {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> ヘッダーを持たないレスポンスを<strong>拒否</strong>し、ウェブコンテンツを呼び出すレスポンスを作成<strong>しない</strong>でしょう。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/17213/cred-req-updated.png" style="height: 490px; width: 1023px;"></p> - -<p>以下はクライアントとサーバーとの間のやりとりの例です。</p> - -<pre class="brush: shell notranslate">GET /resources/credentialed-content/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Connection: keep-alive -Referer: http://foo.example/examples/credential.html -Origin: http://foo.example -Cookie: pageAccess=2 - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:34:52 GMT -Server: Apache/2 -Access-Control-Allow-Origin: https://foo.example -Access-Control-Allow-Credentials: true -Cache-Control: no-cache -Pragma: no-cache -Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 106 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain - - -[text/plain payload] -</pre> - -<p>10行目に <code class="plain">http://bar.other</code> 向けのクッキーが含まれていますが、bar.other が {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (17行目) をレスポンスに含めなければ、レスポンスは無視されウェブコンテンツで使用できません。</p> - -<h4 id="Credentialed_requests_and_wildcards" name="Credentialed_requests_and_wildcards">資格情報付きリクエストとワイルドカード</h4> - -<p>資格情報を含むリクエストに対するレスポンスの時、サーバーは <code>Access-Control-Allow-Origin</code> ヘッダーで "<code>*</code>" ワイルドカードではなくオリジンを指定<strong>しなければなりません</strong>。</p> - -<p>上記の例のリクエストヘッダーは <code>Cookie</code> ヘッダーを含んでいるため、 <code>Access-Control-Allow-Origin</code> ヘッダーが "*" であったらリクエストは失敗します。 <code>Access-Control-Allow-Origin</code> ヘッダーの値が "<code>*</code>" ワイルドカードではなく "<code class="plain">http://foo.example</code>" (実際のオリジン) なので、ウェブコンテンツの呼び出しに対して資格情報を意識したコンテンツが返ります。</p> - -<p>なお、上記の例の中にある <code>Set-Cookie</code> レスポンスヘッダーは、将来のクッキーの設定も行ないます。失敗した場合、 (使われている API によりますが) 例外が発生します。</p> - -<h4 id="Third-party_cookies" name="Third-party_cookies">サードパーティーのクッキー</h4> - -<p>CORS のレスポンスに設定されたクッキーは、サードパーティーのクッキーに関する通常のポリシーに従います。上記の例では、ページは <code>foo.example</code> から読み込まれていますが、20行目のクッキーは <code>bar.other</code> から送られているので、ユーザーがブラウザーでサードパーティーのクッキーをすべて拒否するよう設定していた場合は保存されません。</p> - -<h2 id="The_HTTP_response_headers" name="The_HTTP_response_headers">HTTP レスポンスヘッダー</h2> - -<p>ここではオリジン間リソース共有の仕様書で定義されている、アクセス制御のためにサーバーが返す HTTP レスポンスヘッダーを掲載します。前の章では、これらの実際の動作の概要を説明しました。</p> - -<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> - -<p>返却されるリソースには、以下のような構文で1つの {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーがつくことがあります。</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Origin: <origin> | * -</pre> - -<p><code>Access-Control-Allow-Origin</code> は、リソースへのアクセスを許可するオリジンをブラウザーに伝えるための単一のオリジン、または — 資格情報を<strong>含まない</strong>リクエストにおいては — どのオリジンにもリソースへのアクセスを許可することをブラウザーに伝えるワイルドカード "<code>*</code>" のどちらかを指定することができます。</p> - -<p>例えば、 <code>https://mozilla.org</code> のオリジンからのコードにリソースへのアクセスを許可するには、次のように指定します。</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Origin: https://mozilla.org -Vary: Origin</pre> - -<p>サーバーがワイルドカード "<code>*</code>" ではなく (ホワイトリストの一部としてリクエストするオリジンに基づいて動的に変更される可能性がある) 単一のオリジンを指定した場合は、サーバーは {{HTTPHeader("Vary")}} レスポンスヘッダーに <code>Origin</code> も含めて、サーバーのレスポンスが {{HTTPHeader("Origin")}} リクエストヘッダーの値によって変化することをクライアントに示してください。</p> - -<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Expose-Headers")}} ヘッダーは、ブラウザーがアクセスを許可されるサーバーのホワイトリストにあるヘッダーを示すことができます。</p> - -<pre class="brush: none notranslate">Access-Control-Expose-Headers: <header-name>[, <header-name>]* -</pre> - -<p>例えば、以下のようになります。</p> - -<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header -</pre> - -<p>これは、ブラウザーに対して <code>X-My-Custom-Header</code> および <code>X-Another-Custom-Header</code> ヘッダーを許可します。</p> - -<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> - -<p>このヘッダーはプリフライトリクエストの結果をキャッシュしてよい時間を示します。プリフライトリクエストの例は、前出の例をご覧ください。</p> - -<pre class="brush: none notranslate">Access-Control-Max-Age: <delta-seconds> -</pre> - -<p><code>delta-seconds</code> 引数は、結果をキャッシュしてよい時間を秒単位で示します。</p> - -<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} は <code>credentials</code> フラグが真であるときに、リクエストへのレスポンスを開示してよいか否かを示します。プリフライトリクエストのレスポンスの一部として用いられたときは、実際のリクエストで資格情報を使用してよいか否かを示します。単純な <code>GET</code> リクエストはプリフライトを行いませんので、リソースへのリクエストが資格情報付きで行われた場合にリソースと共にこのヘッダーを返さなければ、レスポンスはブラウザーによって無視され、ウェブコンテンツに返らないことに注意してください。</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true -</pre> - -<p><a class="internal" href="#Requests_with_credentials">資格情報付きのリクエスト</a>は前に説明したとおりです。</p> - -<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Methods")}} ヘッダーは、リソースへのアクセス時に許可するメソッドを指定します。これはプリフライトリクエストのレスポンスで用いられます。リクエストのプリフライトを行う条件については前述のとおりです。</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Methods: <method>[, <method>]* -</pre> - -<p>ブラウザーにこのヘッダーを送信する例を含む、プリフライトリクエストの例は <a class="internal" href="#Preflighted_requests">前述のとおりです</a>。</p> - -<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Headers")}} ヘッダーは、実際のリクエストでどの HTTP ヘッダーを使用できるかを示すために、<a class="internal" href="#Preflighted_requests">プリフライトリクエスト</a>のレスポンスで使用します。</p> - -<pre class="brush: none notranslate">Access-Control-Allow-Headers: <header-name>[, <header-name>]* -</pre> - -<h2 id="The_HTTP_request_headers" name="The_HTTP_request_headers">HTTP リクエストヘッダー</h2> - -<p>この節では、 HTTP リクエストを発行する際、オリジン間リソース共有機能を利用するためにクライアントが使用できるヘッダーの一覧を掲載します。なお、これらのヘッダーはサーバーの呼び出し時に設定されます。サイト間 {{domxref("XMLHttpRequest")}} の機能を使用する開発者は、オリジン間リソース共有のヘッダーをプログラムで設定する必要はありません。</p> - -<h3 id="Origin">Origin</h3> - -<p>{{HTTPHeader("Origin")}} ヘッダーはサイト間のアクセスリクエストやプリフライトリクエストのオリジンを示します。</p> - -<pre class="brush: none notranslate">Origin: <origin> -</pre> - -<p>origin は、リクエストを開始したサーバーを示す URI です。ここにパス情報は含めず、サーバー名だけにします。</p> - -<div class="note"><strong>注:</strong> <code>origin</code> の値は <code>null</code> または URI にすることができます。</div> - -<p>すべてのアクセス制御リクエストにおいて、 {{HTTPHeader("Origin")}} ヘッダーは<strong>常に</strong>送信されることに注意してください。</p> - -<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> - -<p>{{HTTPHeader("Access-Control-Request-Method")}} はプリフライトリクエストを発信する際に、実際のリクエストを行う際に使用する HTTP メソッドをサーバーに知らせるために使用します。</p> - -<pre class="brush: none notranslate">Access-Control-Request-Method: <method> -</pre> - -<p>使用例は<a class="internal" href="#Preflighted_requests">前出のとおりです</a>。</p> - -<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Request-Headers")}} ヘッダーは、プリフライトリクエストを発信する際に、実際のリクエストを行う際に使用する HTTP ヘッダーをサーバーに知らせるために使用します。</p> - -<pre class="brush: none notranslate">Access-Control-Request-Headers: <field-name>[, <field-name>]* -</pre> - -<p>使用例は <a class="internal" href="#Preflighted_requests">前出のとおりです</a>。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - <tr> - <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td><a href="https://www.w3.org/TR/cors/">W3C CORS</a> 仕様書を置き換える新しい定義です。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> - -<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> - -<p>Internet Explorer 8 および 9 は XDomainRequest オブジェクトで CORS を提供していますが、完全な実装は IE 10 で行っています。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/HTTP/CORS/Errors">CORS のエラー</a></li> - <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a href="https://httptoolkit.tech/will-it-cors">Will it CORS?</a> - an interactive CORS explainer & generator</li> - <li><a href="https://www.telerik.com/blogs/using-cors-with-all-modern-browsers">Using CORS with All (Modern) Browsers</a></li> - <li><a href="https://alfilatov.com/posts/run-chrome-without-cors/">How to run Chrome browser without CORS</a></li> - <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow のよくある問題を解決するための “how to” 情報</a> - <ul> - <li>CORS のプリフライトを防止する方法</li> - <li>CORS プロキシを使用して<em>「Access-Control-Allow-Origin ヘッダーの欠落」</em>を回避する方法</li> - <li><em>「Access-Control-Allow-Origin ヘッダーがワイルドカードを扱えない」</em>ことを修正する方法</li> - </ul> - </li> -</ul> diff --git a/files/ja/web/http/cors/index.md b/files/ja/web/http/cors/index.md new file mode 100644 index 0000000000..eed67059f9 --- /dev/null +++ b/files/ja/web/http/cors/index.md @@ -0,0 +1,503 @@ +--- +title: オリジン間リソース共有 (CORS) +slug: Web/HTTP/CORS +tags: + - AJAX + - CORS + - オリジン間リソース共有 + - Fetch + - Fetch API + - HTTP + - HTTP アクセス制御 + - 同一オリジンポリシー + - セキュリティ + - XMLHttpRequest + - l10n:priority +translation_of: Web/HTTP/CORS +--- +{{HTTPSidebar}} + +オリジン間リソース共有 (Cross-Origin Resource Sharing, {{Glossary("CORS")}}) は、追加の {{Glossary("HTTP")}} ヘッダーを使用して、ある{{glossary("origin", "オリジン")}}で動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。 + +オリジン間リクエストとは、例えば `https://domain-a.com` で提供されているウェブアプリケーションのフロントエンド JavaScript コードが {{domxref("XMLHttpRequest")}} を使用して `https://domain-b.com/data.json` へリクエストを行うような場合です。 + +セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 `XMLHttpRequest`や [Fetch API](/en-US/docs/Web/API/Fetch_API) は[同一オリジンポリシー](/en-US/docs/Web/Security/Same-origin_policy) (same-origin policy) に従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンからの場合は正しい CORS ヘッダーを含んでいることが必要です。 + + + +CORS の仕組みは、安全なオリジン間のリクエストとブラウザー・サーバー間のデータ転送を支援します。最近のブラウザーは CORS を `XMLHttpRequest` や [Fetch](/en-US/docs/Web/API/Fetch_API) などの API で使用して、オリジン間 HTTP リクエストのリスクの緩和に役立てています。 + +## この記事を読むべき人 + +誰もが読むべきです。 + +もっと具体的に言えば、この記事は**ウェブ管理者**、**サーバー開発者**、**フロントエンド開発者**向けです。最近のブラウザーはヘッダーやポリシーの強制を含む、オリジン間共有のクライアント側コンポーネントを扱います。しかし CORS 標準は、サーバーが新たなリクエストヘッダーやレスポンスヘッダーを扱わなければならないことを示しています。 + +## CORS を使用したリクエストとは + +この [cross-origin sharing standard](https://fetch.spec.whatwg.org/#http-cors-protocol) では、以下についてサイト間の HTTP リクエストができるようにしています。 + +- 前述のような {{domxref("XMLHttpRequest")}} または [Fetch API](/en-US/docs/Web/API/Fetch_API) の呼び出し。 +- ウェブフォント (CSS の `@font-face` で別ドメインのフォントを利用するため)。[これによりサーバーは、許可したウェブサイトのみから読み込みんで利用できる TrueType フォントを提供することができます。](https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements) +- [WebGL テクスチャ](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)。 +- [画像から生成した CSS シェイプ](/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images)。 + +この記事では、 HTTP ヘッダーの要件を含むオリジン間リソース共有の全般的な説明を行います。 + +## 機能概要 + +オリジン間リソース共有の仕様は、ウェブブラウザーから情報を読み取ることを許可されているオリジンをサーバーが記述することができる、新たな [HTTP ヘッダー](/en-US/docs/Web/HTTP/Headers)を追加することで作用します。加えて仕様書では、サーバーの情報に副作用を引き起こすことがある HTTP のリクエストメソッド (特に {{HTTPMethod("GET")}} 以外の HTTP メソッドや、特定の [MIME タイプ](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)を伴う {{HTTPMethod("POST")}}) のために、ブラウザーが HTTP の {{HTTPMethod("OPTIONS")}} リクエストメソッドを用いて、あらかじめリクエストの「プリフライト」 (サーバーから対応するメソッドの一覧を収集すること) を行い、サーバーの「認可」のもとに実際のリクエストを送信することを指示しています。サーバーはリクエスト時に「資格情報」 ([Cookie](/en-US/docs/Web/HTTP/Cookies) や [HTTP 認証](/en-US/docs/Web/HTTP/Authentication)など) を送信するべきかをクライアントに伝えることもできます。 + +CORS は様々なエラーで失敗することがありますが、セキュリティ上の理由から、エラーについて *JavaScript から知ることができない*よう定められています。コードからはエラーが発生したということしか分かりません。何が悪かったのかを具体的に知ることができる唯一の方法は、ブラウザーのコンソールで詳細を見ることです。 + +以降の節ではシナリオの説明に加え、 HTTP ヘッダーの使い方の詳細も提供します。 + +## アクセス制御シナリオの例 + +オリジン間リソース共有の動作の仕組みを説明する 3 つのシナリオを示します。これらの例はすべて {{domxref("XMLHttpRequest")}} を用いており、対応しているブラウザーにおいて、サイトをまたいでアクセスすることができます。 + +### 単純リクエスト + +リクエストによっては {{Glossary("Preflight_request","CORS プリフライト")}}を発生させません。これをこの記事では*単純リクエスト*と呼んでいますが、 (CORS を定義している) {{SpecName("Fetch")}} 仕様書ではこの用語を使用していません。*単純リクエスト*は、**以下のすべての条件を満たす**ものです。 + +- 許可されているメソッドのうちのいずれかであること。 + + - {{HTTPMethod("GET")}} + - {{HTTPMethod("HEAD")}} + - {{HTTPMethod("POST")}} + +- ユーザーエージェントによって自動的に設定されたヘッダー (たとえば {{HTTPHeader("Connection")}}、 {{HTTPHeader("User-Agent")}}、 または [Fetch 仕様書で*禁止ヘッダー名*として定義されているヘッダー](https://fetch.spec.whatwg.org/#forbidden-header-name))を除いて、手動で設定できるヘッダーは、 [Fetch 仕様書で CORS セーフリストリクエストヘッダーとして定義されている](https://fetch.spec.whatwg.org/#cors-safelisted-request-header)</a>以下のヘッダーだけです。 + + - {{HTTPHeader("Accept")}} + - {{HTTPHeader("Accept-Language")}} + - {{HTTPHeader("Content-Language")}} + - {{HTTPHeader("Content-Type")}} (但し、下記の要件を満たすもの) + +- {{HTTPHeader("Content-Type")}} ヘッダーでは以下の値のみが許可されています。 + + - `application/x-www-form-urlencoded` + - `multipart/form-data` + - `text/plain` + +- {{domxref("XMLHttpRequest")}} オブジェクトを使用してリクエストを行う場合は、 {{domxref("XMLHttpRequest.upload")}} プロパティから返されるオブジェクトにイベントリスナーが登録されていないこと。すなわち、 {{domxref("XMLHttpRequest")}} インスタンスを `xhr` とした場合、どのコードも `xhr.upload.addEventListener()` が呼び出してアップロードを監視するためのイベントリスナーを追加していないこと。 +- リクエストに {{domxref("ReadableStream")}} オブジェクトが使用されていないこと。 + +> **Note:** WebKit Nightly および Safari Technology Preview は、 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}}、{{HTTPHeader("Content-Language")}} ヘッダーの値に追加の制限を掛けています。これらのヘッダーが「標準外」の値の場合、 WebKit/Safari はそのリクエストが「単純リクエスト」の条件に合うとは判断しません。 WebKit/Safari がこれらのヘッダーのどの値を「標準外」と判断するかについては、以下の WebKit のバグを除いて文書化されていません。 +> +> - [Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language](https://bugs.webkit.org/show_bug.cgi?id=165178) +> - [Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS](https://bugs.webkit.org/show_bug.cgi?id=165566) +> - [Switch to a blacklist model for restricted Accept headers in simple CORS requests](https://bugs.webkit.org/show_bug.cgi?id=166363) +> +> これは仕様の一部ではないので、他のブラウザーはこの追加の制限を実装していません。 + +例えば、ドメイン `https://foo.example` にあるウェブコンテンツがドメイン `https://bar.other` にあるコンテンツを呼び出したいとします。以下のようなコードが `foo.example` 内の JavaScript で使用されるかもしれません。 + +```js +const xhr = new XMLHttpRequest(); +const url = 'https://bar.other/resources/public-data/'; + +xhr.open('GET', url); +xhr.onreadystatechange = someHandler; +xhr.send(); +``` + +これは、特権を扱うために CORS ヘッダーを使用して、クライアントとサーバーの間で簡単なデータ交換を行います。 + + + +この場合、ブラウザーがサーバーに何を送信し、サーバーが何を返すかを見てみましょう。 + +``` +GET /resources/public-data/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +Origin: https://foo.example +``` + +特筆すべきリクエストヘッダーは {{HTTPHeader("Origin")}} であり、呼び出しが `https://foo.example` から来たことを表します。 + +``` +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 00:23:53 GMT +Server: Apache/2 +Access-Control-Allow-Origin: * +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Transfer-Encoding: chunked +Content-Type: application/xml + +[…XML データ…] +``` + +レスポンスでは、サーバーが {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーを `Access-Control-Allow-Origin: *` と送り返しており、そのリソースが**すべての**ドメインからアクセスできることを示しています。 + +``` +Access-Control-Allow-Origin: * +``` + +{{HTTPHeader("Origin")}} ヘッダーと {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーのこのパターンは、アクセス制御プロトコルのもっとも簡単な使い方です。 `https://bar.other` にあるリソースの所有者が、リソースへの制限を `https://foo.example` からのリクエスト*のみ*に制限したい (すなわち、 `https://foo.examle` 以外のドメインがサイト間の作法でリソースにアクセスを許可しない) と考えていた場合は、以下のように送信します。 + + Access-Control-Allow-Origin: https://foo.example + +> **Note:** [資格情報を含むリクエスト](#資格情報を含むリクエスト)に応答する場合、サーバーは `Access-Control-Allow-Origin` ヘッダーにオリジンを値として指定する必要があり、"`*`" ワイルドカードを指定することはできません。 + +<h3 id="Preflighted_requests">プリフライトリクエスト</h3> + +[_単純リクエスト_](#単純リクエスト)とは異なり、「プリフライト」リクエストは始めに {{HTTPMethod("OPTIONS")}} メソッドによる HTTP リクエストを他のドメインにあるリソースに向けて送り、実際のリクエストを送信しても安全かどうかを確かめます。サイト間リクエストがユーザーデータに影響を与える可能性があるような場合に、このようにプリフライトを行います。 + +プリフライトが行われるリクエストの例です。 + +```js +const xhr = new XMLHttpRequest(); +xhr.open('POST', 'https://bar.other/resources/post-here/'); +xhr.setRequestHeader('X-PINGOTHER', 'pingpong'); +xhr.setRequestHeader('Content-Type', 'application/xml'); +xhr.onreadystatechange = handler; +xhr.send('<person><name>Arun</name></person>'); +``` + +上記の例では、 `POST` で送信する XML の本体を作成しています。また、標準外の `X-PINGOTHER` HTTP リクエストヘッダーを設定しています。このようなヘッダーは HTTP/1.1 プロトコルに含まれていませんが、ウェブアプリケーションでは一般的に便利なものです。リクエストで `Content-Type` に `application/xml` を使用しており、かつ独自のヘッダーを設定しているため、このリクエストではプリフライトを行います。 + + + +> **Note:** 後述するように、実際の `POST` リクエストでは `Access-Control-Request-*` ヘッダーを含みません。`OPTIONS` リクエストのみで必要になります。 + +クライアントとサーバーとの間のやりとりの全容を見てみましょう。最初のやり取りは*プリフライトリクエスト/レスポンス*です。 + +```plain +OPTIONS /doc HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +Origin: https://foo.example +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type + +HTTP/1.1 204 No Content +Date: Mon, 01 Dec 2008 01:15:39 GMT +Server: Apache/2 +Access-Control-Allow-Origin: https://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +Vary: Accept-Encoding, Origin +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +``` + +上記の 1 - 10 行目は {{HTTPMethod("OPTIONS")}} メソッドによるプリフライトリクエストを表します。ブラウザーは上記の JavaScript コードで使用していていたリクエストの引数に基づいて、プリフライトの送信が必要であることを判断します。これによりサーバーは実際のリクエストの引数によって送られるリクエストを受け入れ可能かを応答することができます。 OPTIONS は HTTP/1.1 のメソッドであり、サーバーから付加的な情報を得るために用いるもので、また{{Glossary("Safe/HTTP","安全")}}なメソッド、つまりリソースを変更するためには使用できないメソッドです。 OPTIONS リクエストと合わせて、他にリクエストヘッダーを 2 つ送信していることに注意してください (それぞれ 9 行目と 10 行目です)。 + +``` +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type +``` + +{{HTTPHeader("Access-Control-Request-Method")}} ヘッダーは、プリフライトリクエストの一部として、実際のリクエストが `POST` リクエストメソッドで送られることをサーバーに通知します。 {{HTTPHeader("Access-Control-Request-Headers")}} ヘッダーは、実際のリクエストにカスタムヘッダーである `X-PINGOTHER` および Content-Type が含まれることをサーバーに通知します。ここでサーバーは、この状況下でリクエストの受け入れを望むかを判断する機会が与えられます。 + +上記の 13 - 22 行目はサーバーが返すレスポンスであり、リクエストメソッド (`POST`) とリクエストヘッダー (`X-PINGOTHER`) が受け入れられることを示しています。特に、 16 - 19 行目を見てみましょう。 + +``` +Access-Control-Allow-Origin: https://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +``` + +サーバーは `Access-Control-Allow-Origin: https://foo.example` により、アクセスをリクエストしているオリジンのドメインだけに限定することを返答しています。また、 `Access-Control-Allow-Methods` を返しており、これは当該リソースへの問い合わせで `POST` および `GET` が実行可能なメソッドであることを伝えます。なお、このヘッダーはレスポンスヘッダーの {{HTTPHeader("Allow")}} と似ていますが、アクセス制御でのみ使用されることに注意してください。 + +またサーバーは、 `Access-Control-Allow-Headers` を "`X-PINGOTHER, Content-Type`" の値で送信し、実際のリクエストで使用されるヘッダーを承認しています。 `Access-Control-Allow-Methods` と同様に、 `Access-Control-Allow-Headers` は受け入れ可能なヘッダーをカンマ区切りのリストで表します。 + +最後に {{HTTPHeader("Access-Control-Max-Age")}} は、プリフライトリクエストを再び送らなくてもいいように、プリフライトのレスポンスをキャッシュしてよい時間を秒数で与えます。この例では 86400 秒、つまり 24 時間です。なお、ブラウザーはそれぞれ[内部的な上限値](/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age)を持っており、 `Access-Control-Max-Age` が上回った場合に制限を行います。 + +プリフライトリクエストが完了したら、実際のリクエストを送ります。 + +```plain +POST /doc HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +X-PINGOTHER: pingpong +Content-Type: text/xml; charset=UTF-8 +Referer: https://foo.example/examples/preflightInvocation.html +Content-Length: 55 +Origin: https://foo.example +Pragma: no-cache +Cache-Control: no-cache + +<person><name>Arun</name></person> + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2 +Access-Control-Allow-Origin: https://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some XML payload] +``` + +#### プリフライトリクエストとリダイレクト + +現在のところ、すべてのブラウザーが下記のようなプリフライトリクエストのリダイレクトに対応しているわけではありません。プリフライトリクエストにリダイレクトが発生すると、ブラウザーによっては以下のようなエラーメッセージを報告します。 + +> The request was redirected to 'https\://example.com/foo', which is disallowed for cross-origin requests that require preflight. +> Request requires preflight, which is disallowed to follow cross-origin redirects. + +もともと CORS プロトコルはそのような動作を要求していましたが、[その後で必要がないと変更されました](https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2)。しかし、多くのブラウザーはまだ変更を実装しておらず、もともと要求されていた動作に従っています。 + +ブラウザーが仕様に追いつくまで、以下の一方もしくは両方を行うことでこの制限を回避することができます。 + +- サーバー側の振る舞いを変更して、プリフライトが発生しないようにするか、リダイレクトが発生しないようにする +- リクエストをプリフライトを起こさない[単純リクエスト](#単純リクエスト)などに変更する + +これらの変更ができない場合は、次のような別な方法があります。 + +1. [単純リクエスト](#単純リクエスト)を行い (Fetch API の {{domxref("Response.url")}} または {{domxref("XMLHttpRequest.responseURL")}} を使用する)、実際のプリフライトリクエストが転送される先を特定する。 +2. 最初のステップの `Response.url` または `XMLHttpRequest.responseURL` で得た URL を使用して、もう一つのリクエスト (*本当の*リクエスト) を行う。 + +ただし、リクエストに `Authorization` ヘッダーが存在するためにプリフライトが発生するリクエストの場合、上記の手順を使用して制限を回避することはできません。リクエストが行われているサーバーを制御できない限り、まったく回避することはできません。 + +### 資格情報を含むリクエスト + +> **Note:** 資格情報を含むリクエストを異なるドメインに行う場合、サードパーティクッキーポリシーも適用されます。このポリシーは、この章で説明しているように、サーバーやクライアントでの設定とは無関係に常に実施されます。 + +{{domxref("XMLHttpRequest")}} や [Fetch](/en-US/docs/Web/API/Fetch_API) と CORS の両方によって明らかになる最も興味深い機能は、[HTTP クッキー](/en-US/docs/Web/HTTP/Cookies)と HTTP 資格情報によってわかる「資格情報を含む」リクエストを作成することができることです。既定では、サイト間の `XMLHttpRequest` または [Fetch](/en-US/docs/Web/API/Fetch_API) の呼び出しにおいて、ブラウザーは資格情報を送信**しません**。 `XMLHttpRequest` オブジェクトまたは {{domxref("Request")}} のコンストラクターの呼び出し時に、特定のフラグを設定する必要があります。 + +以下の例では `https://foo.example` から読み込まれた元のコンテンツが、 `https://bar.other` にあるリソースに対してクッキーを設定したシンプルな GET リクエストを行います。 foo.example のコンテンツは以下のような JavaScript を含んでいるかもしれません。 + +```js +const invocation = new XMLHttpRequest(); +const url = 'https://bar.other/resources/credentialed-content/'; + +function callOtherDomain() { + if (invocation) { + invocation.open('GET', url, true); + invocation.withCredentials = true; + invocation.onreadystatechange = handler; + invocation.send(); + } +} +``` + +7 行目で、クッキー付きで呼び出しを行うために {{domxref("XMLHttpRequest")}} に設定する必要があるフラグ、 `withCredentials` という論理型の値を示しています。既定では、クッキーなしで呼び出しが行われます。これは単純な `GET` リクエストなのでプリフライトは行いませんが、ブラウザーは {{HTTPHeader("Access-Control-Allow-Credentials")}}`: true` ヘッダーを持たないレスポンスを**拒否**し、ウェブコンテンツを呼び出すレスポンスを作成**しない**でしょう。 + + + +以下はクライアントとサーバーとの間のやりとりの例です。 + +```plain +GET /resources/credentialed-content/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +Referer: https://foo.example/examples/credential.html +Origin: https://foo.example +Cookie: pageAccess=2 + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:34:52 GMT +Server: Apache/2 +Access-Control-Allow-Origin: https://foo.example +Access-Control-Allow-Credentials: true +Cache-Control: no-cache +Pragma: no-cache +Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 106 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain + +[text/plain payload] +``` + +10 行目に `https://bar.other` 向けのクッキーが含まれていますが、bar.other が {{HTTPHeader("Access-Control-Allow-Credentials")}}`: true` (17 行目) をレスポンスに含めなければ、レスポンスは無視されウェブコンテンツで使用できません。 + +#### プリフライトリクエストと資格情報 + +CORS のプリフライトリクエストに資格情報を含めてはいけません。プリフライトリスクエストへの*レスポンス*には `Access-Control-Allow-Credentials: true` を指定して、実際のリクエストを資格情報付きで行うことができることを示す必要があります。 + +> **Note:** エンタープライズ認証サービスの中には、 {{SpecName("Fetch","#cors-protocol-and-credentials")}} 仕様書に反して、プリフライトリクエストで TLS クライアント証明書を送信することを要求するものがあります。 +> +> Firefox 87 では、`network.cors_preflight.allow_client_cert` を `true` に設定することで、この準拠していない動作を有効にすることができます。({{bug(1511151)}}). Chromium ベースのブラウザーでは現在、CORS プリフライトリクエストで TLS クライアント証明書を常に送信します ([Chrome bug 775438](https://bugs.chromium.org/p/chromium/issues/detail?id=775438))。 + +#### 資格情報付きリクエストとワイルドカード + +資格情報付きリクエストに返答する場合、 + +- サーバーは `Access-Control-Allow-Origin` ヘッダーで "`*`" ワイルドカードを指定**してはならず**、 `Access-Control-Allow-Origin: https://example.com` のように、明示的にオリジンを指定しなければなりません。 + +- サーバーは `Access-Control-Allow-Headers` ヘッダーで "`*`" ワイルドカードを指定**してはならず**、 `Access-Control-Allow-Headers: X-PINGOTHER, Content-Type` のように、明示的にヘッダー名を指定しなければなりません。 + +- サーバーは `Access-Control-Allow-Methods` ヘッダーで "`*`" ワイルドカードを指定**してはならず**、 `Access-Control-Allow-Methods: POST, GET` のように、明示的にメソッド名を指定しなければなりません。 + +リクエストが資格情報 (多くの場合は `Cookie` ヘッダー) を含んでおり、そのレスポンスが `Access-Control-Allow-Origin: *` ヘッダー (つまりワイルドカード) を含んでいる場合、ブラウザーはレスポンスへのアクセスをブロックし、開発ツールのコンソールに CORS エラーを報告します。 + +ただし、リクエストが (`Cookie` ヘッダーのような) 資格情報を含んでおり、そのレスポンスがワイルドカードではない実際のオリジンを含んでいる場合 (例えば `Access-Control-Allow-Origin: https://example.com` など)、ブラウザーは指定されたオリジンからのレスポンスへのアクセスを許可します。 + +また、レスポンス内の `Access-Control-Allow-Origin` レスポンスヘッダーの値が実際のオリジンではなく "`*`" ワイルドカードであった場合、クッキーは設定されません。 + +#### サードパーティーのクッキー + +CORS のレスポンスに設定されたクッキーは、サードパーティーのクッキーに関する通常のポリシーに従うことに注意してください。上記の例では、ページは `foo.example` から読み込まれていますが、 20 行目のクッキーは `bar.other` から送られているので、ユーザーがブラウザーでサードパーティーのクッキーをすべて拒否するよう設定していた場合は保存されません。 + +リクエスト中のクッキー (10 行目) は、通常のサードパーティクッキーポリシーでも抑制されることがあります。したがって、クッキーポリシーが強制されていると、この章で説明されている機能が無効になり、事実上、認証されたリクエストを行うことができなくなるかもしれません。 + +[SameSite](/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite) 属性に関するクッキーポリシーは適用されます。 + +## HTTP レスポンスヘッダー + +この節では、オリジン間リソース共有の仕様書で定義されている、アクセス制御のためにサーバーが返す HTTP レスポンスヘッダーを掲載します。前の章では、これらの実際の動作の概要を説明しました。 + +### Access-Control-Allow-Origin + +返却されるリソースには、以下のような構文で 1 つの {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーがつくことがあります。 + +``` +Access-Control-Allow-Origin: <origin> | * +``` + +`Access-Control-Allow-Origin` は、リソースへのアクセスを許可するオリジンをブラウザーに伝えるための単一のオリジン、または — 資格情報を**含まない**リクエストにおいては — どのオリジンにもリソースへのアクセスを許可することをブラウザーに伝えるワイルドカード "`*`" のどちらかを指定することができます。 + +例えば、 `https://mozilla.org` のオリジンからのコードにリソースへのアクセスを許可するには、次のように指定します。 + +``` +Access-Control-Allow-Origin: https://mozilla.org +Vary: Origin +``` + +サーバーがワイルドカード "`*`" ではなく (ホワイトリストの一部としてリクエストするオリジンに基づいて動的に変更される可能性がある) 単一のオリジンを指定した場合は、サーバーは `Origin` を {{HTTPHeader("Vary")}} レスポンスヘッダーに含めて、サーバーのレスポンスが {{HTTPHeader("Origin")}} リクエストヘッダーの値によって変化することもクライアントに示してください。 + +### Access-Control-Expose-Headers + +{{HTTPHeader("Access-Control-Expose-Headers")}} ヘッダーは、指定されたヘッダーをブラウザー内の JavaScript ({{domxref("XMLHttpRequest.getResponseHeader()","getResponseHeader()")}} など) からアクセスできる許可リストに加えます。 + +``` +Access-Control-Expose-Headers: <header-name>[, <header-name>]* +``` + +例えば、以下のようになります。 + +``` +Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +``` + +これは、ブラウザーに対して `X-My-Custom-Header` および `X-Another-Custom-Header` ヘッダーを許可します。 + +### Access-Control-Max-Age + +このヘッダーはプリフライトリクエストの結果をキャッシュしてよい時間を示します。プリフライトリクエストの例は、前出の例をご覧ください。 +``` +Access-Control-Max-Age: <delta-seconds> +``` + +`delta-seconds` 引数は、結果をキャッシュしてよい時間を秒単位で示します。 + +### Access-Control-Allow-Credentials + +{{HTTPHeader("Access-Control-Allow-Credentials")}} は `credentials` フラグが true である場合に、リクエストへのレスポンスを開示してよいか否かを示します。プリフライトリクエストのレスポンスの一部として用いられたときは、実際のリクエストで資格情報を使用してよいか否かを示します。単純な `GET` リクエストはプリフライトを行いませんので、リソースへのリクエストが資格情報付きで行われた場合にリソースと共にこのヘッダーを返さなければ、ブラウザーがそのレスポンスを無視し、ウェブのコンテンツが返されないことに注意してください。 + +``` +Access-Control-Allow-Credentials: true +``` + +[資格情報付きリクエスト](#資格情報を含むリクエスト)は前に説明したとおりです。 + +### Access-Control-Allow-Methods + +{{HTTPHeader("Access-Control-Allow-Methods")}} ヘッダーは、リソースへのアクセス時に許可するメソッドを指定します。これはプリフライトリクエストのレスポンスで用いられます。リクエストのプリフライトを行う条件については前述のとおりです。 + +``` +Access-Control-Allow-Methods: <method>[, <method>]* +``` + +ブラウザーにこのヘッダーを送信する例を含む、{{Glossary("preflight request", "プリフライトリクエスト")}}の例は前述のとおりです。 + +### Access-Control-Allow-Headers + +{{HTTPHeader("Access-Control-Allow-Headers")}} ヘッダーは{{Glossary("preflight request", "プリフライトリクエスト")}}へのレスポンスで使用され、実際のリクエストを行う際に使用される HTTP ヘッダーを示します。このヘッダーはブラウザーの {{HTTPHeader("Access-Control-Request-Headers")}} ヘッダーに対するサーバー側のレスポンスです。 + +``` +Access-Control-Allow-Headers: <header-name>[, <header-name>]* +``` + +## HTTP リクエストヘッダー + +この節では、 HTTP リクエストを発行する際、オリジン間リソース共有機能を利用するためにクライアントが使用できるヘッダーの一覧を掲載します。なお、これらのヘッダーはサーバーの呼び出し時に設定されます。サイト間 {{domxref("XMLHttpRequest")}} の機能を使用する開発者は、オリジン間リソース共有のリクエストヘッダーをプログラムで設定する必要はありません。 + +### Origin + +{{HTTPHeader("Origin")}} ヘッダーはサイト間のアクセスリクエストやプリフライトリクエストのオリジンを示します。 + +``` +Origin: <origin> +``` + +origin は、リクエストを開始したサーバーを示す URL です。ここにパス情報は含めず、サーバー名だけにします。 + +> **Note:** `origin` の値は `null` にすることができます。 + +なお、すべてのアクセス制御リクエストにおいて、 {{HTTPHeader("Origin")}} ヘッダーは**常に**送信されます。 + +### Access-Control-Request-Method + +{{HTTPHeader("Access-Control-Request-Method")}} はプリフライトリクエストを発信する際に、実際のリクエストを行う際に使用する HTTP メソッドをサーバーに知らせるために使用します。 + +``` +Access-Control-Request-Method: <method> +``` + +使用例は[前述のとおりです。](#preflighted_requests)。 + +<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> + +{{HTTPHeader("Access-Control-Request-Headers")}} ヘッダーは、プリフライトリクエストを発行する際に、実際のリクエストを行う際に ({{domxref("XMLHttpRequest.setRequestHeader()","setRequestHeader()")}} などによって) 使用する HTTP ヘッダーをサーバーに知らせるために使用します。このブラウザー側のヘッダーは、サーバー側のヘッダー {{HTTPHeader("Access-Control-Allow-Headers")}} によって回答されます。 + +``` +Access-Control-Request-Headers: <field-name>[, <field-name>]* +``` + +使用例は[前述のとおりです。](#preflighted_requests)。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- | +| {{SpecName('Fetch', '#cors-protocol', 'CORS')}} | {{Spec2('Fetch')}} | [W3C CORS](https://www.w3.org/TR/cors/) 仕様書に代わる新しい定義です。 | + +## ブラウザーの互換性 + +{{Compat("http.headers.Access-Control-Allow-Origin")}} + +## 関連情報 + +- [CORS のエラー](/en-US/docs/Web/HTTP/CORS/Errors) +- [Enable CORS: I want to add CORS support to my server](https://enable-cors.org/server.html) +- {{domxref("XMLHttpRequest")}} +- [Fetch API](/en-US/docs/Web/API/Fetch_API) +- [Will it CORS?](https://httptoolkit.tech/will-it-cors) - 対話型の CORS の説明および生成 +- [How to run Chrome browser without CORS](https://alfilatov.com/posts/run-chrome-without-cors/) +- [Using CORS with All (Modern) Browsers](https://www.telerik.com/blogs/using-cors-with-all-modern-browsers) +- [Stack Overflow のよくある問題を解決するための “how to” 情報](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141): + + - CORS のプリフライトを防止する方法 + - CORS プロキシーを使用して「Access-Control-Allow-Origin ヘッダーの欠落」を回避する方法 + - 「Access-Control-Allow-Origin ヘッダーがワイルドカードを扱えない」ことを修正する方法 diff --git a/files/ja/web/http/cors/preflight_correct.png b/files/ja/web/http/cors/preflight_correct.png Binary files differnew file mode 100644 index 0000000000..72f9a8bf89 --- /dev/null +++ b/files/ja/web/http/cors/preflight_correct.png diff --git a/files/ja/web/http/cors/simple-req-updated.png b/files/ja/web/http/cors/simple-req-updated.png Binary files differnew file mode 100644 index 0000000000..8c3f857e7c --- /dev/null +++ b/files/ja/web/http/cors/simple-req-updated.png diff --git a/files/ja/web/http/csp/errors/cspviolation/index.md b/files/ja/web/http/csp/errors/cspviolation/index.md new file mode 100644 index 0000000000..8a4dcf5581 --- /dev/null +++ b/files/ja/web/http/csp/errors/cspviolation/index.md @@ -0,0 +1,60 @@ +--- +title: >- + Content Security Policy: The page’s settings blocked the loading of a + resource: xyz +slug: Web/HTTP/CSP/Errors/CSPViolation +tags: + - CSP + - CSPViolation + - Content Security Policy + - HTTP + - HTTPS + - NeedsContent + - Reference + - Security + - Warning + - Web security + - message +translation_of: Web/HTTP/CSP/Errors/CSPViolation +--- +{{HTTPSidebar}} + +警告 "Content Security Policy: The page's settings blocked the loading of a resource: xyz" は、`xyz` で指定されたページの CSP 設定が、文書のコンテキストにリソースが読み込まれるのを妨げた場合に発生します。 + +## エラーメッセージ + +### Firefox + +`Content Security Policy: The pages settings blocked the loading of a resource: xyz` + +ここで、 + +- `xyz` + - : リソースをブロックした CSP ディレクティブの名前です。これはディレクティブの名前そのものか、ポリシーのディレクティブ文字列全体で表される可能性があります。 +- `uvw` + - : 問題を解決するのに役立つ可能性がある情報を提供する文字列であり、CSP 構成に行う可能性がある特定の変更を含むこともあります。 + +### Chrome + +- `Refused to apply inline style because it violates the following Content Security Policy Directive: "xyz". uvw.` +- `Refused to execute inline script because it violates the following Content Security Policy directive: "xyz". uvw.` +- `Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "xyz". uvw.` +- `Refused to execute inline event handler because it violates the following Content Security Policy directive: "xyz". uvw.` + +ここで、 + +- `xyz` + - : リソースをブロックした CSP ディレクティブの名前です。これはディレクティブの名前そのものか、ポリシーのディレクティブ文字列全体で表される可能性があります。 +- `uvw` + - : 問題を解決するのに役立つ可能性がある情報を提供する文字列であり、CSP 構成に行う可能性がある特定の変更を含むこともあります。 + +## エラーの原因 + +この警告メッセージは、特定の CSP ディレクティブが存在するためにリソースが読み込まれなかったことを意味します。 + +## 関連情報 + +- [CSP のエラーと警告](/ja/docs/Web/HTTP/CSP/Errors) +- [コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP) +- {{HTTPHeader("Content-Security-Policy")}} +- {{HTTPHeader("Content-Security-Policy-Report-Only")}} diff --git a/files/ja/web/http/csp/errors/index.md b/files/ja/web/http/csp/errors/index.md new file mode 100644 index 0000000000..4640bd143a --- /dev/null +++ b/files/ja/web/http/csp/errors/index.md @@ -0,0 +1,55 @@ +--- +title: CSP のエラーと警告 (Content Security Policy) +slug: Web/HTTP/CSP/Errors +tags: + - CSP + - Errors + - HTTP + - Landing + - Messages + - Warnings + - console + - log +--- +{{HTTPSidebar}}{{draft}} + +このページは CSP のエラーと警告に関する記事を参照する親となり、概要を示したり、可能であれば問題解決の一般的な助言をしたりします。 + +## エラー一覧 + +- [The page’s settings blocked the loading of a resource: %1$S](/ja/docs/Web/HTTP/CSP/Errors/CSPViolation) +- [The page’s settings blocked the loading of a resource at %2$S (“%1$S”).](/ja/docs/Web/HTTP/CSP/Errors/CSPViolationWithURI) +- [A violation occurred for a report-only CSP policy (“%1$S”). The behavior was allowed, and a CSP report was sent.](/ja/docs/Web/HTTP/CSP/Errors/CSPROViolation) +- [The page’s settings observed the loading of a resource at %2$S (“%1$S”). A CSP report is being sent.](/ja/docs/Web/HTTP/CSP/Errors/CSPROViolationWithURI) +- [Tried to send report to invalid URI: “%1$S”](/ja/docs/Web/HTTP/CSP/Errors/triedToSendReport) +- [couldn’t parse report URI: %1$S](/ja/docs/Web/HTTP/CSP/Errors/couldNotParseReportURI) +- [Couldn’t process unknown directive ‘%1$S’](/ja/docs/Web/HTTP/CSP/Errors/couldNotProcessUnknownDirective) +- [Ignoring unknown option %1$S](/ja/docs/Web/HTTP/CSP/Errors/ignoringUnknownOption) +- [Ignoring duplicate source %1$S](/ja/docs/Web/HTTP/CSP/Errors/ignoringDuplicateSrc) +- [Ignoring source ‘%1$S’ (Not supported when delivered via meta element).](/ja/docs/Web/HTTP/CSP/Errors/ignoringSrcFromMetaCSP) +- [Ignoring “%1$S” within script-src or style-src: nonce-source or hash-source specified](/ja/docs/Web/HTTP/CSP/Errors/ignoringSrcWithinScriptStyleSrc) +- [Ignoring “%1$S” within script-src: ‘strict-dynamic’ specified](/ja/docs/Web/HTTP/CSP/Errors/ignoringSrcForStrictDynamic) +- [Ignoring source “%1$S” (Only supported within script-src).](/ja/docs/Web/HTTP/CSP/Errors/ignoringStrictDynamic) +- [Keyword ‘strict-dynamic’ within “%1$S” with no valid nonce or hash might block all scripts from loading](/ja/docs/Web/HTTP/CSP/Errors/strictDynamicButNoHashOrNonce) +- [The report URI (%1$S) should be an HTTP or HTTPS URI.](/ja/docs/Web/HTTP/CSP/Errors/reportURInotHttpsOrHttp2) +- [This site (%1$S) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy.](/ja/docs/Web/HTTP/CSP/Errors/reportURInotInReportOnlyHeader) +- [Failed to parse unrecognized source %1$S](/ja/docs/Web/HTTP/CSP/Errors/failedToParseUnrecognizedSource) +- [An attempt to execute inline scripts has been blocked](/ja/docs/Web/HTTP/CSP/Errors/inlineScriptBlocked) +- [An attempt to apply inline style sheets has been blocked](/ja/docs/Web/HTTP/CSP/Errors/inlineStyleBlocked) +- [An attempt to call JavaScript from a string (by calling a function like eval) has been blocked](/ja/docs/Web/HTTP/CSP/Errors/scriptFromStringBlocked) +- [Upgrading insecure request ‘%1$S’ to use ‘%2$S’](/ja/docs/Web/HTTP/CSP/Errors/upgradeInsecureRequest) +- [Ignoring srcs for directive ‘%1$S’](/ja/docs/Web/HTTP/CSP/Errors/ignoreSrcForDirective) +- [Interpreting %1$S as a hostname, not a keyword. If you intended this to be a keyword, use ‘%2$S’ (wrapped in single quotes).](/ja/docs/Web/HTTP/CSP/Errors/hostNameMightBeKeyword) +- [Not supporting directive ‘%1$S’. Directive and values will be ignored.](/ja/docs/Web/HTTP/CSP/Errors/notSupportingDirective) +- [Blocking insecure request ‘%1$S’.](/ja/docs/Web/HTTP/CSP/Errors/blockAllMixedContent) +- [Ignoring ‘%1$S’ since it does not contain any parameters.](/ja/docs/Web/HTTP/CSP/Errors/ignoringDirectiveWithNoValues) +- [Ignoring sandbox directive when delivered in a report-only policy ‘%1$S’](/ja/docs/Web/HTTP/CSP/Errors/ignoringReportOnlyDirective) +- [Referrer Directive ‘%1$S’ has been deprecated. Please use the Referrer-Policy header instead.](/ja/docs/Web/HTTP/CSP/Errors/deprecatedReferrerDirective) +- [Ignoring ‘%1$S’ because of ‘%2$S’ directive.](/ja/docs/Web/HTTP/CSP/Errors/IgnoringSrcBecauseOfDirective) +- [Couldn’t parse invalid source %1$S](/ja/docs/Web/HTTP/CSP/Errors/couldntParseInvalidSource) +- [Couldn’t parse invalid host %1$S](/ja/docs/Web/HTTP/CSP/Errors/couldntParseInvalidHost) +- [Couldn’t parse scheme in %1$S](/ja/docs/Web/HTTP/CSP/Errors/couldntParseScheme) +- [Couldn’t parse port in %1$S](/ja/docs/Web/HTTP/CSP/Errors/couldntParsePort) +- [Duplicate %1$S directives detected. All but the first instance will be ignored.](/ja/docs/Web/HTTP/CSP/Errors/duplicateDirective) +- [Directive ‘%1$S’ has been deprecated. Please use directive ‘worker-src’ to control workers, or directive ‘frame-src’ to control frames respectively.](/ja/docs/Web/HTTP/CSP/Errors/deprecatedChildSrcDirective) +- [Couldn’t parse invalid sandbox flag ‘%1$S’](/ja/docs/Web/HTTP/CSP/Errors/couldntParseInvalidSandboxFlag) diff --git a/files/ja/web/http/headers/content-security-policy/index.html b/files/ja/web/http/headers/content-security-policy/index.html deleted file mode 100644 index cf181765d0..0000000000 --- a/files/ja/web/http/headers/content-security-policy/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Content-Security-Policy -slug: Web/HTTP/Headers/Content-Security-Policy -tags: - - CSP - - HTTP - - Reference - - Security - - header - - セキュリティ -translation_of: Web/HTTP/Headers/Content-Security-Policy ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP の <strong><code>Content-Security-Policy</code></strong> レスポンスヘッダーは、ウェブサイト管理者が、あるページにユーザーエージェントが読み込みを許可されたリソースを管理できるようにします。いくつかの例外を除いて、大半のポリシーにはサーバーオリジンとスクリプトエンドポイントの指定を含んでいます。これはクロスサイトスクリプティング攻撃 ({{Glossary("XSS")}}) を防ぐのに役立ちます。</p> - -<p>より詳細な情報は、 <a href="/ja/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> の入門記事を参照してください。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">ヘッダー種別</th> - <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> - <td>いいえ</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">Content-Security-Policy: <policy-directive>; <policy-directive> -</pre> - -<p>ここで、 <code><policy-directive></code> は次の要素で構成されます: <code><directive> <value></code> 内部の句読点なし。</p> - -<h2 id="Directives" name="Directives">ディレクティブ</h2> - -<h3 id="Fetch_directives" name="Fetch_directives">{{Glossary("Fetch directive", "フェッチディレクティブ")}}</h3> - -<p>フェッチディレクティブは、特定のリソース種別がロードされうる場所を制御します。</p> - -<h4 id="List_of_Content_Security_Policy_Fetch_directives" name="List_of_Content_Security_Policy_Fetch_directives">Content Security Policy フェッチディレクティブの一覧</h4> - -<dl> - <dt>{{CSP("child-src")}}</dt> - <dd><a href="/ja/docs/Web/API/Web_Workers_API">ウェブワーカー</a>と、 {{HTMLElement("frame")}} や {{HTMLElement("iframe")}} のような要素によってロードされる入れ子状の閲覧コンテキストに対する有効なソースを定義します。 - <div class="warning"> - <p>複合した閲覧コンテキストやワーカーを制御するには、 それぞれ {{CSP("frame-src")}} および {{CSP("worker-src")}} を <strong><code>child-src</code></strong> の代わりに使用してください。</p> - </div> - </dd> - <dt>{{CSP("connect-src")}}</dt> - <dd>script インターフェースによってロードされる URL を制限します。</dd> - <dt>{{CSP("default-src")}}</dt> - <dd>別の {{Glossary("Fetch directive", "Fetch ディレクティブ")}}に対する代替として提供します。</dd> - <dt>{{CSP("font-src")}}</dt> - <dd>{{cssxref("@font-face")}} によってロードされるフォントに対する有効なソースを指定します。</dd> - <dt>{{CSP("frame-src")}}</dt> - <dd>{{HTMLElement("frame")}} や {{HTMLElement("iframe")}} のような要素によってロードされる入れ子状のコンテンツの閲覧に対する有効なソースを指定します。</dd> - <dt>{{CSP("img-src")}}</dt> - <dd>画像や favicon に対する有効なソースを定義します。</dd> - <dt>{{CSP("manifest-src")}}</dt> - <dd>アプリケーションのマニフェストファイルに対する有効なソースを指定します。</dd> - <dt>{{CSP("media-src")}}</dt> - <dd>{{HTMLElement("audio")}}、{{HTMLElement("video")}} や {{HTMLElement("track")}} 要素によってロードするメディアに対する有効なソースを指定します。</dd> - <dt>{{CSP("object-src")}}</dt> - <dd>{{HTMLElement("object")}}、 {{HTMLElement("embed")}} や {{HTMLElement("applet")}} 要素に対する有効なソースを指定します。</dd> - <dd class="note"><code>object-src</code> で制御される要素は、おそらく古い HTML 要素に該当すると見なされ、新しい標準機能が利用できません (セキュリティ属性の <code>sandbox</code> や <code><iframe></code> の <code>allow</code> など)。従って、このフェッチディレクティブで制限を掛けることが<strong>推奨されます</strong> (例えば、可能であれば <code>object-src 'none'</code> を設定するなど)。</dd> - <dt>{{CSP("prefetch-src")}}{{experimental_inline}}</dt> - <dd>事前にフェッチされるか描画される有効なソースを指定します。</dd> - <dt>{{CSP("script-src")}}</dt> - <dd>JavaScript に対する有効なソースを指定します。</dd> - <dt>{{CSP("script-src-elem")}}{{experimental_inline}}</dt> - <dd>JavaScript の {{HTMLElement("script")}} 要素に対する有効なソースを指定します。</dd> - <dt>{{CSP("script-src-attr")}}{{experimental_inline}}</dt> - <dd>JavaScript のインラインイベントハンドラーに対する有効なソースを指定します。</dd> -</dl> - -<dl> - <dt>{{CSP("style-src")}}</dt> - <dd>スタイルシートに対する有効なソースを指定します。</dd> - <dt>{{CSP("style-src-elem")}}{{experimental_inline}}</dt> - <dd>スタイルシートの {{HTMLElement("style")}} および {{HTMLElement("link")}} 要素に <code>rel="stylesheet"</code> がついたもののに対する有効なソースを指定します。</dd> - <dt>{{CSP("style-src-attr")}}{{experimental_inline}}</dt> - <dd>個々の DOM 要素に適用されるインラインスタイルの有効なソースを指定します。</dd> - <dt>{{CSP("worker-src")}}{{experimental_inline}}</dt> - <dd>{{domxref("Worker")}}, {{domxref("SharedWorker")}}, {{domxref("ServiceWorker")}} スクリプトに対する有効なソースを指定します。</dd> -</dl> - -<h3 id="Document_directives" name="Document_directives">{{Glossary("Document directive", "文書ディレクティブ")}}</h3> - -<p>文書ディレクティブは、ポリシーが適用される文書もしくは <a href="/ja/docs/Web/API/Web_Workers_API">Worker</a> 環境のプロパティを管理します。</p> - -<h4 id="List_of_Content_Security_Policy_Document_directives" name="List_of_Content_Security_Policy_Document_directives">Content Security Policy 文書ディレクティブの一覧</h4> - -<dl> - <dt>{{CSP("base-uri")}}</dt> - <dd>文書の {{HTMLElement("base")}} 要素で使用される URL を制限します。</dd> - <dt>{{CSP("plugin-types")}}</dt> - <dd>ロードされるリソースのタイプを限定することで、文書に埋め込まれるプラグインの組を制限します。</dd> - <dt>{{CSP("sandbox")}}</dt> - <dd>{{HTMLElement("iframe")}} と {{htmlattrxref("sandbox", "iframe")}} 属性に類似した要求リソースに対してサンドボックスを有効にします。</dd> -</dl> - -<h3 id="Navigation_directives" name="Navigation_directives">{{Glossary("Navigation directive", "ナビゲーションディレクティブ")}}</h3> - -<p>ナビゲーションディレクティブは、例えばユーザーが移動する場所やフォームを送信する場所を管理します。</p> - -<h4 id="List_of_Content_Security_Policy_Navigation_directives" name="List_of_Content_Security_Policy_Navigation_directives">Content Security Policy ナビゲーションディレクティブの一覧</h4> - -<dl> - <dt>{{CSP("form-action")}}</dt> - <dd>指定のコンテキストからフォームの送信先として使用される URL を制限します。</dd> - <dt>{{CSP("frame-ancestors")}}</dt> - <dd>{{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, もしくは {{HTMLElement("applet")}} によってページに埋め込まれた有効な親を指定します。</dd> - <dt>{{CSP("navigate-to")}}{{experimental_inline}}</dt> - <dd>{{HTMLElement("form")}} ({{CSP("form-action")}} が指定されていない場合), {{HTMLElement("a")}}, {{DOMxRef("window.location")}}, {{DOMxRef("window.open")}}, など、あらゆる方法で文書からナビゲーションを行うことができる URL を制限します。</dd> -</dl> - -<h3 id="Reporting_directives" name="Reporting_directives">{{Glossary("Reporting directive", "報告ディレクティブ")}}</h3> - -<p>報告ディレクティブは CSP 違反の報告過程を制御します。 {{HTTPHeader("Content-Security-Policy-Report-Only")}} ヘッダーも参照してください。</p> - -<h4 id="List_of_Content_Security_Policy_Reporting_directives" name="List_of_Content_Security_Policy_Reporting_directives">Content Security Policy 報告ディレクティブの一覧</h4> - -<dl> - <dt>{{CSP("report-uri")}}{{deprecated_inline}}</dt> - <dd>ユーザーエージェントにコンテンツセキュリティポリシーの違反を報告するよう指示します。これらの違反の報告は、 {{Glossary("JSON")}} 文書を HTTP の <code>POST</code> リクエストで指定された URI に送信することで行われます。 - <div class="warning"> - <p>{{CSP("report-to")}} ディレクティブは非推奨の <code><strong>report-uri</strong></code> ディレクティブを置き換えることを意図していますが、 {{CSP("report-to")}} はまだ多くのブラウザーで対応されていません。そのため、ブラウザーで {{CSP("report-to")}} の対応が行われるまでは現在のブラウザーとの互換性のため、 <code><strong>report-uri</strong></code> および {{CSP("report-to")}} の両方を指定することができます。</p> - - <pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-uri https://endpoint.example.com; report-to groupname</pre> - - <p>{{CSP("report-to")}} に対応したブラウザーでは、 <code><strong>report-uri</strong></code> ディレクティブは無視されます。</p> - </div> - </dd> - <dt>{{CSP("report-to")}}{{experimental_inline}}</dt> - <dd><code>SecurityPolicyViolationEvent</code> を発生させます。</dd> -</dl> - -<h3 id="Other_directives" name="Other_directives">その他のディレクティブ</h3> - -<dl> - <dt>{{CSP("block-all-mixed-content")}}</dt> - <dd>ページが HTTPS を使用して読み込まれた際に、 HTTP を使用して資産を読み込むことを防止します。</dd> - <dt>{{CSP("referrer")}}{{deprecated_inline}}{{non-standard_inline}}</dt> - <dd>ページから離れる際の Referer ヘッダー内の情報を指定するために使用されていました。代わりに {{HTTPHeader("Referrer-Policy")}} ヘッダーを使用してください。</dd> - <dt>{{CSP("require-sri-for")}}{{experimental_inline}}</dt> - <dd>ページ上のスクリプトやスタイルに {{Glossary("SRI")}} の使用を要求します。</dd> - <dt>{{CSP("require-trusted-types-for")}}{{experimental_inline}}</dt> - <dd>DOM XSS インジェクションシンクで <a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a> を強制します。</dd> -</dl> - -<dl> - <dt>{{CSP("trusted-types")}}{{experimental_inline}}</dt> - <dd><a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a> ポリシーのホワイトリストを指定するために使用します (Trusted Types は、アプリケーションが DOM XSS インジェクションシンクをロックダウンして、文字列の代わりにスプーフィング不可能な型付きの値のみを受け入れるようにします)。</dd> -</dl> - -<dl> - <dt>{{CSP("upgrade-insecure-requests")}}</dt> - <dd>安全でない URL (HTTP で提供されているもの) をすべて安全な URL (HTTPS で提供されているもの) に置き換えたかのように扱うようにユーザエージェントに指示します。このディレクティブは、書き換えが必要な安全でない古い URL が大量にあるウェブサイトを対象としています。</dd> -</dl> - -<h2 id="CSP_in_workers" name="CSP_in_workers">Worker 内の CSP</h2> - -<p><a href="/ja/docs/Web/API/Worker">Worker</a> は、一般的に文書 (もしくは親 Worker) の Content Security Policy によって管理されません。Worker に対する Content Security Policy を指定するには、Worker スクリプト自身が要求したリクエストに対して <code>Content-Security-Policy</code> レスポンスヘッダーを設定して下さい。</p> - -<p>Worker スクリプトのオリジンがグローバルで一意の識別子の場合、(例えば、URL がデータやブロブのスキーマの場合)、例外に当たります。この場合、Worker は文書もしくは作成元の Worker の Content Security Policy を継承します。</p> - -<h2 id="Multiple_content_security_policies" name="Multiple_content_security_policies">複数の CSP</h2> - -<p>CSP では、<code>Content-Security-Policy</code> ヘッダー、{{HTTPHeader("Content-Security-Policy-Report-Only")}} ヘッダーや {{HTMLElement("meta")}} 要素を経由したものを含む、リソースに対して複数のポリシーを指定することができます。</p> - -<p>以下の例のように、 <code>Content-Security-Policy</code> ヘッダーを複数回使うことができます。ここでは {{CSP("connect-src")}} ディレクティブに特に注意してください。2つ目のポリシーでは接続を許可しているにもかかわらず、1つ目のポリシーには <code>connect-src 'none'</code> が含まれています。追加のポリシーを追加すると、保護されたリソースの機能が<em>さらに制限することができる</em>だけで、接続は許可されず、最も厳密なポリシーとして <code>connect-src 'none'</code> が強制されます。</p> - -<pre class="notranslate">Content-Security-Policy: default-src 'self' http://example.com; - connect-src 'none'; -Content-Security-Policy: connect-src http://example.com/; - script-src http://example.com/</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<p>例: 安全でない inline/eval を無効にし、https 経由でのリソース (画像、フォント、スクリプトなど) のロードを許します。</p> - -<pre class="notranslate">// ヘッダー -Content-Security-Policy: default-src https: - -// メタタグ -<meta http-equiv="Content-Security-Policy" content="default-src https:"> -</pre> - -<p>例: 修正のためにインラインコードを多用している既存のサイトで、https 経由でのみロードされるリソースを明確にし、プラグインを無効にします。</p> - -<pre class="notranslate">Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre> - -<p>例: 上記のポリシーを実装せず、代わりに、発生するであろう違反を報告します。</p> - -<pre class="notranslate">Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre> - -<p>その他の例は、 <a href="https://infosec.mozilla.org/guidelines/web_security#Examples_5">Mozilla Web Security Guidelines</a> を参照して下さい。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{specName("CSP 3.0")}}</td> - <td>{{Spec2("CSP 3.0")}}</td> - <td><code>manifest-src</code>, <code>navigate-to</code>, <code>report-to</code>, <code>strict-dynamic</code>, <code>worker-src</code> を追加。 <code>frame-src</code> の非推奨を解除。 <code>report-uri</code> を <code>report-to</code> の代わりに非推奨化。</td> - </tr> - <tr> - <td>{{specName("Mixed Content")}}</td> - <td>{{Spec2("Mixed Content")}}</td> - <td><code>block-all-mixed-content</code> を追加。</td> - </tr> - <tr> - <td>{{specName("Subresource Integrity")}}</td> - <td>{{Spec2("Subresource Integrity")}}</td> - <td><code>require-sri-for</code> を追加。</td> - </tr> - <tr> - <td>{{specName("Upgrade Insecure Requests")}}</td> - <td>{{Spec2("Upgrade Insecure Requests")}}</td> - <td><code>upgrade-insecure-requests</code> を追加。</td> - </tr> - <tr> - <td>{{specName("CSP 1.1")}}</td> - <td>{{Spec2("CSP 1.1")}}</td> - <td><code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, <code>report-uri</code> を追加。 <code>frame-src</code> を非推奨化。</td> - </tr> - <tr> - <td>{{specName("CSP 1.0")}}</td> - <td>{{Spec2("CSP 1.0")}}</td> - <td><code>connect-src</code>, <code>default-src</code>, <code>font-src</code>, <code>frame-src</code>, <code>img-src</code>, <code>media-src</code>, <code>object-src</code>, report-uri, <code>sandbox</code>, <code>script-src,</code>, <code>style-src</code> を定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("http.headers.csp.Content-Security-Policy")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li> - <li><a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシーを学ぶ</a></li> - <li><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">WebExtensions のコンテンツセキュリティ</a></li> - <li><a href="https://csp.withgoogle.com/docs/strict-csp.html">Adopting a strict policy</a></li> - <li><a href="https://github.com/google/csp-evaluator">CSP Evaluator</a> - コンテンツセキュリティポリシーを評価する</li> -</ul> diff --git a/files/ja/web/http/headers/content-security-policy/index.md b/files/ja/web/http/headers/content-security-policy/index.md new file mode 100644 index 0000000000..be83a4e712 --- /dev/null +++ b/files/ja/web/http/headers/content-security-policy/index.md @@ -0,0 +1,252 @@ +--- +title: Content-Security-Policy +slug: Web/HTTP/Headers/Content-Security-Policy +tags: + - CSP + - Content Security Policy + - HTTP + - Reference + - セキュリティ + - header +browser-compat: http.headers.csp.Content-Security-Policy +translation_of: Web/HTTP/Headers/Content-Security-Policy +--- +{{HTTPSidebar}} + +HTTP の **`Content-Security-Policy`** レスポンスヘッダーは、ウェブサイト管理者が、あるページにユーザーエージェントが読み込みを許可されたリソースを管理できるようにします。いくつかの例外を除いて、大半のポリシーにはサーバーオリジンとスクリプトエンドポイントの指定を含んでいます。これはクロスサイトスクリプティング攻撃 ({{Glossary("Cross-site_scripting", "クロスサイトスクリプティング")}}) を防ぐのに役立ちます。 + +より詳細な情報は、[Content Security Policy (CSP)](/ja/docs/Web/HTTP/CSP) の入門記事を参照してください。 + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +## 構文 + +``` +Content-Security-Policy: <policy-directive>; <policy-directive> +``` + +ここで、 `<policy-directive>` は `<directive> <value>` の形であり、内部に区切り文字はありません。 + +## ディレクティブ + +### フェッチディレクティブ + +フェッチディレクティブは、特定のリソース種別を読み込むことができる場所を制御します。 + +- {{CSP("child-src")}} + + - : [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)と、{{HTMLElement("frame")}} や {{HTMLElement("iframe")}} のような要素によって読み込まれる入れ子の閲覧コンテキストのための有効なソースを定義します。 + + > **警告:** 複合した閲覧コンテキストやワーカーを制御するには、 **`child-src`** の代わりに、それぞれ {{CSP("frame-src")}} および {{CSP("worker-src")}} を使用してください。 + +- {{CSP("connect-src")}} + - : スクリプトインターフェイスによって読み込まれる URL を制限します。 +- {{CSP("default-src")}} + - : 別の {{Glossary("Fetch directive", "Fetch ディレクティブ")}}に対する代替として提供します。 +- {{CSP("font-src")}} + - : {{cssxref("@font-face")}} によって読み込まれるフォントのための有効なソースを指定します。 +- {{CSP("frame-src")}} + - : {{HTMLElement("frame")}} や {{HTMLElement("iframe")}} のような要素によって読み込まれる入れ子のコンテンツの閲覧のための有効なソースを指定します。 +- {{CSP("img-src")}} + - : 画像やファビコンのための有効なソースを定義します。 +- {{CSP("manifest-src")}} + - : アプリケーションのマニフェストファイルのための有効なソースを指定します。 +- {{CSP("media-src")}} + - : {{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("track")}} 要素によって読み込むメディアのための有効なソースを指定します。 +- {{CSP("object-src")}} + + - : {{HTMLElement("object")}}、 {{HTMLElement("embed")}}、{{HTMLElement("applet")}} 要素のための有効なソースを指定します。 + + > **Note:** `object-src` で制御される要素は、おそらく古い HTML 要素に該当すると見なされ、標準化された新しい機能が利用できません (セキュリティ属性の `sandbox` や `<iframe>` の `allow` など)。従って、このフェッチディレクティブで制限を掛けることが**推奨されます** (例えば、可能であれば `object-src 'none'` を設定するなど)。 + +- {{CSP("prefetch-src")}}{{experimental_inline}} + - : 事前にフェッチされるか描画される有効なソースを指定します。 +- {{CSP("script-src")}} + - : JavaScript のための有効なソースを指定します。 +- {{CSP("script-src-elem")}}{{experimental_inline}} + - : JavaScript の {{HTMLElement("script")}} 要素のための有効なソースを指定します。 +- {{CSP("script-src-attr")}}{{experimental_inline}} + - : JavaScript のインラインイベントハンドラーのための有効なソースを指定します。 +- {{CSP("style-src")}} + - : スタイルシートのための有効なソースを指定します。 +- {{CSP("style-src-elem")}}{{experimental_inline}} + - : スタイルシートの {{HTMLElement("style")}} および {{HTMLElement("link")}} 要素に `rel="stylesheet"` がついたものののための有効なソースを指定します。 +- {{CSP("style-src-attr")}}{{experimental_inline}} + - : 個々の DOM 要素に適用されるインラインスタイルの有効なソースを指定します。 +- {{CSP("worker-src")}}{{experimental_inline}} + - : {{domxref("Worker")}}、{{domxref("SharedWorker")}}、{{domxref("ServiceWorker")}} スクリプトのための有効なソースを指定します。 + +### 文書ディレクティブ + +文書ディレクティブは、ポリシーが適用される文書または[ワーカー](/ja/docs/Web/API/Web_Workers_API)環境のプロパティを管理します。 + +- {{CSP("base-uri")}} + - : 文書の {{HTMLElement("base")}} 要素で使用される URL を制限します。 +- {{CSP("sandbox")}} + - : {{HTMLElement("iframe")}} と {{htmlattrxref("sandbox", "iframe")}} 属性に類似した要求リソースに対してサンドボックスを有効にします。 + +### ナビゲーションディレクティブ + +ナビゲーションディレクティブは、例えばユーザーが移動する場所やフォームを送信する場所を管理します。 + +- {{CSP("form-action")}} + - : 指定のコンテキストからフォームの送信先として使用される URL を制限します。 +- {{CSP("frame-ancestors")}} + - : {{HTMLElement("frame")}}、{{HTMLElement("iframe")}}、{{HTMLElement("object")}}、{{HTMLElement("embed")}}、{{HTMLElement("applet")}} によってページに埋め込まれた有効な親を指定します。 +- {{CSP("navigate-to")}}{{experimental_inline}} + - : {{HTMLElement("form")}} ({{CSP("form-action")}} が指定されていない場合)、{{HTMLElement("a")}}、{{DOMxRef("window.location")}}、{{DOMxRef("window.open")}} など、あらゆる方法で文書からナビゲーションを行うことができる URL を制限します。 + +### 報告ディレクティブ + +報告ディレクティブは CSP 違反の報告過程を制御します。 {{HTTPHeader("Content-Security-Policy-Report-Only")}} ヘッダーも参照してください。 + +- {{CSP("report-uri")}}{{deprecated_inline}} + + - : ユーザーエージェントにコンテンツセキュリティポリシーの違反を報告するよう指示します。これらの違反の報告は、 {{Glossary("JSON")}} 文書を HTTP の `POST` リクエストで指定された URI に送信することで行われます。 + + > **Warning:** {{CSP("report-to")}} ディレクティブは非推奨の **`report-uri`** ディレクティブを置き換えることを意図していますが、 {{CSP("report-to")}} はまだ多くのブラウザーが対応していません。そのため、ブラウザーで {{CSP("report-to")}} の対応が行われるまでは、現在のブラウザーとの互換性のため、 **`report-uri`** と {{CSP("report-to")}} の両方を指定することができます。 + > + > ```html + > Content-Security-Policy: ...; report-uri https://endpoint.example.com; report-to groupname + > ``` + > + > {{CSP("report-to")}} に対応しているブラウザーでは、 **`report-uri`** ディレクティブは無視されます。 + +- {{CSP("report-to")}}{{experimental_inline}} + - : `SecurityPolicyViolationEvent` を発生させます。 + +### その他のディレクティブ + +- {{CSP("require-sri-for")}}{{experimental_inline}} + - : ページ上のスクリプトやスタイルに {{Glossary("SRI")}} の使用を要求します。 +- {{CSP("require-trusted-types-for")}}{{experimental_inline}} + - : DOM XSS インジェクションシンクで [Trusted + Types](https://w3c.github.io/webappsec-trusted-types/dist/spec/) を強制します。 +- {{CSP("trusted-types")}}{{experimental_inline}} + - : [Trusted Types](https://w3c.github.io/webappsec-trusted-types/dist/spec/) ポリシーのホワイトリストを指定するために使用します (Trusted Types は、アプリケーションが DOM XSS インジェクションシンクをロックダウンして、文字列の代わりにスプーフィング不可能な型付きの値のみを受け入れるようにします)。 +- {{CSP("upgrade-insecure-requests")}} + - : 安全でない URL (HTTP で提供されているもの) をすべて安全な URL (HTTPS で提供されているもの) に置き換えたかのように扱うようにユーザエージェントに指示します。このディレクティブは、書き換えが必要な安全でない古い URL が大量にあるウェブサイトを対象としています。 + +### 非推奨のディレクティブ + +- {{CSP("block-all-mixed-content")}}{{deprecated_inline}} + - : ページが HTTPS を使用して読み込まれた際に、 HTTP を使用して資産を読み込むことを防止します。 +- {{CSP("plugin-types")}}{{deprecated_inline}} + - : 読み込まれるリソースの種類を限定することで、文書に埋め込まれるプラグインの組を制限します。 +- {{CSP("referrer")}}{{deprecated_inline}}{{non-standard_inline}} + - : ページから離れる際の [Referer](/ja/docs/Web/HTTP/Headers/Referer) (綴り注意) ヘッダー内の情報を指定するために使用されていました。代わりに {{HTTPHeader("Referrer-Policy")}} ヘッダーを使用してください。 + +## 値 + +### キーワード値 + +- `none` + - : すべてのリソースの読み込みを許可しません。 +- `self` + - : 現在のオリジンからのみリソースの読み込みを許可します。 +- `strict-dynamic` {{experimental_inline}} + - : TBD +- `report-sample` {{experimental_inline}} + - : TBD + +### unsafe キーワード値 + +- `unsafe-inline` + - : インラインリソースの使用を許可します。 +- `unsafe-eval` + - : {{jsxref("Global_Objects/eval", "eval")}} や {{domxref("Window.setImmediate", "setImmediate")}}{{non-standard_inline}}、`window.execScript` {{non-standard_inline}} のような動的コード評価の使用を許可します。 +- `unsafe-hashes` {{experimental_inline}} + - : TBD +- `unsafe-allow-redirects` {{experimental_inline}} + - : TBD + +### ホスト値 + +- Host + - : 指定されたホストからのリソースの読み込みのみを許可します。オプションでスキーム、ポート番号、パスを指定することができます。例: `example.com`, `*.example.com`, `https://*.example.com:12/path/to/file.js` +- Scheme: + - : 特定のスキームによるリソースの読み込みのみを許可します。常に "`:`" で終える必要があります。例: `https:`, `http:`, `data:` など + +### その他の値 + +- nonce-\* + - : スクリプトを許可するための暗号化された (一度しか使われない) ノンスです。サーバーは、ポリシーを送信するたびに、一意のノンス値を生成する必要があります。リソースのポリシーを迂回することは容易ではないため、推測されないノンスを提供することが重要です。これは [script の nonce 属性](/ja/docs/Web/HTML/Element/script#attr-nonce)と組み合わせて使用します。例: `nonce-DhcnhD3khTMePgXwdayK9BsMqXjhguVV` +- sha\*-\* + - : sha256、sha384、sha512 のいずれかです。その後にダッシュと sha\* の値が続きます。例: `sha256-jzgBGA4UWFFmpOBq0JpdsySukE1FrEN5bUpoK8Z29fY=` + +<h2 id="CSP_in_workers">ワーカー内の CSP</h2> + +[ワーカー](/ja/docs/Web/API/Worker)は、一般的に文書 (もしくは親ワーカー) のコンテンツセキュリティポリシーによって管理され*ません*。ワーカーに対してコンテンツセキュリティポリシーを指定するには、ワーカースクリプト自身が要求したリクエストに対して `Content-Security-Policy` レスポンスヘッダーを設定して下さい。 + +ワーカースクリプトのオリジンがグローバルで一意の識別子の場合 (例えば、URL がデータやブロブのスキーマの場合) は例外です。この場合、ワーカーは文書もしくは作成元のワーカーのコンテンツセキュリティポリシーを継承します。 + +## 複数の CSP + +CSP では、`Content-Security-Policy` ヘッダー、{{HTTPHeader("Content-Security-Policy-Report-Only")}} ヘッダーや {{HTMLElement("meta")}} 要素を経由したものを含む、リソースに対して複数のポリシーを指定することができます。 + +以下の例のように、 `Content-Security-Policy` ヘッダーを複数回使うことができます。ここでは {{CSP("connect-src")}} ディレクティブに特に注意してください。 2 つ目のポリシーでは接続を許可しているにもかかわらず、 1 つ目のポリシーには `connect-src 'none'` が含まれています。追加のポリシーを追加しても、保護されたリソースの機能が*さらに制限することができる*だけで、接続は許可されず、最も厳密なポリシーとして `connect-src 'none'` が強制されます。 + +``` +Content-Security-Policy: default-src 'self' http://example.com; + connect-src 'none'; +Content-Security-Policy: connect-src http://example.com/; + script-src http://example.com/ +``` + +## 例 + +例: 安全でないインラインの eval を無効にし、https 経由でのリソース (画像、フォント、スクリプトなど) 読み込みを許可します。 + +### HTTP ヘッダーの使用 + +``` +Content-Security-Policy: default-src https: +``` + +### HTML の meta 要素の使用 + +``` +<meta http-equiv="Content-Security-Policy" content="default-src https:"> +``` + +例: 修正のためにインラインコードを多用している既存のサイトで、https 経由でのみ読み込まれるリソースを明確にし、プラグインを無効にします。 + +``` +Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none' +``` + +例: 上記のポリシーを実装せず、代わりに、発生するであろう違反を報告します。 + +``` +Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/ +``` + +その他の例は、[Mozilla +Web Security Guidelines](https://infosec.mozilla.org/guidelines/web_security#Examples_5) を参照して下さい。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTTPHeader("Content-Security-Policy-Report-Only")}} +- [コンテンツセキュリティポリシーを学ぶ](/ja/docs/Web/HTTP/CSP) +- [WebExtension のコンテンツセキュリティ](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) +- [Adopting a strict policy](https://csp.withgoogle.com/docs/strict-csp.html) +- [CSP Evaluator](https://github.com/google/csp-evaluator) - コンテンツセキュリティポリシーを評価する diff --git a/files/ja/web/http/headers/set-cookie/index.html b/files/ja/web/http/headers/set-cookie/index.html deleted file mode 100644 index 9978bdf67e..0000000000 --- a/files/ja/web/http/headers/set-cookie/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Set-Cookie -slug: Web/HTTP/Headers/Set-Cookie -tags: - - Cookies - - HTTP - - Reference - - ヘッダー - - レスポンス - - レスポンスヘッダー -translation_of: Web/HTTP/Headers/Set-Cookie ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary"><strong><code>Set-Cookie</code></strong> は HTTP のレスポンスヘッダーで、サーバーからユーザーエージェントへクッキーを送信するために使用され、ユーザーエージェントはそれを後でサーバーに送り返すことができます。</span></p> - -<p>詳細については、<a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキーのガイド</a>を参照してください。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">ヘッダー種別</th> - <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> - <td>いいえ</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">Set-Cookie: <cookie-name>=<cookie-value> -Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> -Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> -Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> -Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value> -Set-Cookie: <cookie-name>=<cookie-value>; Secure -Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly - -Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict -Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax -Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None - -// 以下の例のように、複数のディレクティブも利用することができます。 -Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly -</pre> - -<h2 id="Directives" name="Directives">ディレクティブ</h2> - -<dl> - <dt><code><cookie-name>=<cookie-value></code></dt> - <dd>クッキーは名前と値の組で始まります。 - <ul> - <li><code><cookie-name></code> は任意の US-ASCII 文字の集合で、制御文字、空白、タブを除いたものです。 <code>( ) < > @ , ; : \ " / [ ] ? = { }</code> のような区切り文字も含めることができません。</li> - <li><code><cookie-value></code> は任意で二重引用符で囲むことができ、制御文字、{{glossary("Whitespace", "ホワイトスペース")}}、二重引用符、カンマ、セミコロン、バックスラッシュを除くすべての US-ASCII 文字が利用できます。 <strong>エンコーディング</strong>: 多くの実装ではクッキーの値に URL エンコーディングを施しますが、 RFC の仕様書では要求されていません。これは <cookie-value> に許可された文字についての要件を満足させるのに役立ちます。</li> - <li><strong><code>__Secure-</code> の接頭辞</strong>{{non-standard_inline}}: <code>__Secure-</code> (接頭辞にダッシュを含む) で始まるクッキー名は、 <code>secure</code> フラグを設定することが必要で、安全なページ (HTTPS) でなければなりません。</li> - <li><strong><code>__Host-</code> の接頭辞</strong>{{non-standard_inline}}: <code>__Host-</code> で始まるクッキー名は、 <code>secure</code> フラグを設定し、安全なページ (HTTPS) から読み込む必要があり、ドメインを指定することができず (従ってサブドメインにも送られません)、パスが <code>/</code> である必要があります。</li> - </ul> - </dd> - <dt><code>Expires=<date></code> {{optional_inline}}</dt> - <dd> - <p>クッキーの有効期限で、 HTTP の日時タイムスタンプです。詳細な書式は {{HTTPHeader("Date")}} を参照してください。</p> - - <p>指定されなかった場合は、クッキーは<strong>セッションクッキー</strong>の寿命になります。セッションはクライアントが終了したときに終了するので、セッションクッキーはその時点で削除されます。</p> - - <div class="blockIndicator warning"> - <p><strong>警告:</strong> 多くのウェブブラウザーはセッション復元と呼ばれる機能を持っており、これによってすべてのタブを保存し、次回ブラウザーを起動したときに復元することができます。ブラウザーを実際には閉じていないかのように、セッションクッキーも復元されます。</p> - </div> - - <p>有効期限が設定されていた場合、期限はサーバーではなく、クッキーが設定されているクライアントからの相対時刻で設定されます。</p> - </dd> - <dt><code>Max-Age=<number> </code>{{optional_inline}}</dt> - <dd>クッキーの期限までの秒数です。ゼロまたは負の数値の場合は、クッキーは直ちに期限切れになります。 <code>Expires</code> および <code>Max-Age</code> の両方が設定されていたら、 <code>Max-Age</code> が優先されます。</dd> - <dt><code>Domain=<domain-value></code> {{optional_inline}}</dt> - <dd>クッキーを送信する先のホストです。 - <ul> - <li>指定されなかった場合は、既定で現在の文書の URL におけるホスト名の部分になり、サブドメインを含みません。</li> - <li>初期の仕様書とは逆に、ドメイン名の前のドット (<code>.example.com</code>) は無視されます。</li> - <li>複数のホストやドメインの値を指定することは<em>できません</em>が、ドメイン<em>が</em>指定された場合、すべてのサブドメインが常に含まれます。</li> - </ul> - </dd> - <dt><code>Path=<path-value></code> {{optional_inline}}</dt> - <dd>リクエストの URL に含まれるべきパスです。含まれていないと、ブラウザーは <code>Cookie</code> ヘッダーを送信しません。</dd> - <dd>スラッシュ ("/") の文字はディレクトリ区切りとして解釈され、サブディレクトリも同様に一致します (例えば <code>Path=/docs</code> であれば、 <code>/docs</code>, <code>/docs/Web/</code>, <code>/docs/Web/HTTP</code> はすべて一致します)。</dd> - <dt id="Secure"><code>Secure</code> {{optional_inline}}</dt> - <dd>セキュアクッキーは、リクエストが SSL と HTTPS プロトコルを使用して行われた場合にのみサーバーに送信されます。ただし HTTP クッキーは、例えば情報が暗号化されないなど、安全ではない仕組みを継承しているので、機密な情報や敏感な情報を転送したり格納したりしないようにしてください。 - <p class="note"><strong>メモ:</strong> 安全ではないサイト (<code>http:</code>) は <code>Secure</code> ディレクティブを付けてクッキーを設定することができなくなりました (Chrome 52 以降および Firefox 52 以降の新機能).</p> - </dd> - <dt id="HttpOnly"><code>HttpOnly</code> {{optional_inline}}</dt> - <dd>JavaScript が {{domxref("Document.cookie")}} プロパティなどを介してこのクッキーにアクセスすることを禁止します。HttpOnly で作成されたクッキーは、JavaScript で開始されたリクエスト、例えば、 {{domxref("XMLHttpRequest.send()")}} や {{domxref("fetch()")}} と共に送信されます。これにより、クロスサイトスクリプティング ({{Glossary("XSS")}}) の攻撃を軽減します。</dd> - <dt><code>SameSite=<samesite-value></code> {{optional_inline}}</dt> - <dd> - <ul> - <li><code>Strict</code>: ブラウザは same-site のリクエスト（つまり、クッキーを設定したのと同じサイトから発信されたリクエスト）に対してのみクッキーを送信します。リクエストが現在のURLとは異なるURLから発生した場合、<code>SameSite=Strict</code> 属性を持つクッキーは送信されません。</li> - <li><code>Lax</code>: 画像やフレームをロードするための呼び出しなどのクロスサイトサブリクエストではクッキーが抑止されますが、ユーザーがリンクをクリックするなどして外部サイトからURLに移動すると送信されます。</li> - <li><code>None</code>: ブラウザはクロスサイトと same-site の両方のリクエストでクッキーを送信します。</li> - </ul> - - <p>クッキーがオリジン間リクエストで送信されないことを主張することで、クロスサイトリクエストフォージェリ攻撃 ({{Glossary("CSRF")}}) に対していくらか防御することができます。</p> - - <p class="note">ブラウザーは <a href="https://www.chromestatus.com/feature/5088147346030592">クッキーに <code>SameSite=Lax</code> の既定値</a>を持たせるよう移行しつつあります。オリジンをまたいでクッキーを送信する必要がある場合、 <code>None</code> ディレクティブを用いて SameSite の制約を外してください。 <code>None</code> ディレクティブは <a href="#Secure"><code>Secure</code></a> 属性を必要とします。</p> - </dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Session_cookie" name="Session_cookie">セッションクッキー</h3> - -<p><strong>セッションクッキー</strong>はクライアントが終了したときに削除されます。 <code>Expires</code> や <code>Max-Age</code> ディレクティブを指定しないとクッキーはセッションクッキーになります。</p> - -<pre class="notranslate">Set-Cookie: sessionId=38afes7a8</pre> - -<h3 id="Permanent_cookie" name="Permanent_cookie">永続的クッキー</h3> - -<p><strong>永続的クッキー</strong>は、クライアントが終了したときに期限切れにならず、特定の期限 (<code>Expires</code>) または特定の時間が過ぎた後 (<code>Max-Age</code>) に期限切れになります。</p> - -<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT -</pre> - -<pre class="notranslate">Set-Cookie: id=a3fWa; Max-Age=2592000</pre> - -<h3 id="Invalid_domains" name="Invalid_domains">不正なドメイン</h3> - -<p>オリジンのサーバーを含まないドメインに所属するクッキーは、<a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">ユーザーエージェントが拒否します</a>。</p> - -<p>次のクッキーは <code>originalcompany.com</code> でホストされたサーバーから設定しようとすると拒否されます。</p> - -<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk</pre> - -<p>提供するドメインのサブドメインへのクッキーは拒否されます。</p> - -<p>以下のクッキーは、 <code>example.com</code> にホスティングされたサーバーからセットされた場合は拒否されます。</p> - -<pre class="notranslate">Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com</pre> - -<h3 id="Cookie_prefixes" name="Cookie_prefixes">クッキーの接頭辞</h3> - -<p><code>__Secure-</code> または <code>__Host-</code> の接頭辞が付いたクッキー名は、安全な (HTTPS の) オリジンから <code>secure</code> ディレクティブを設定した場合のみ使用することができます。</p> - -<p>加えて、 <code>__Host-</code> の接頭辞が付いたクッキーは、 <code>/</code> (ホストの任意のパスという意味) を持つ必要があり、 <code>Domain</code> ディレクティブを持つことができません。</p> - -<div class="blockIndicator warning"> -<p>クッキーの接頭辞を実装していないクライアントでは、これらの保証を受けることができず、クッキーは常に受け入れられます。</p> -</div> - -<pre class="notranslate">// どちらも安全な (HTTPS の) オリジンから受け入れられます -Set-Cookie: __Secure-ID=123; Secure; Domain=example.com -Set-Cookie: __Host-ID=123; Secure; Path=/ - -// Secure ディレクティブが無いため、拒否されます -Set-Cookie: __Secure-id=1 - -// Path=/ ディレクティブが無いため、拒否されます -Set-Cookie: __Host-id=1; Secure - -// Domain を設定したため、拒否されます -Set-Cookie: __Host-id=1; Secure; Path=/; Domain=example.com -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">題名</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td> - <td>HTTP State Management Mechanism</td> - </tr> - <tr> - <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-02">draft-ietf-httpbis-rfc6265bis-02</a></td> - <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("http.headers.Set-Cookie")}}</p> - -<h2 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h2> - -<ul> - <li>Chrome 52 および Firefox 52 以降、セキュリティで保護されていないサイト (<code>http:</code>) では、 "secure" ディレクティブ付きでクッキーを設定することはできなくなりました。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキー</a></li> - <li>{{HTTPHeader("Cookie")}}</li> - <li>{{domxref("Document.cookie")}}</li> -</ul> diff --git a/files/ja/web/http/headers/set-cookie/index.md b/files/ja/web/http/headers/set-cookie/index.md new file mode 100644 index 0000000000..1c4b7e50d9 --- /dev/null +++ b/files/ja/web/http/headers/set-cookie/index.md @@ -0,0 +1,218 @@ +--- +title: Set-Cookie +slug: Web/HTTP/Headers/Set-Cookie +tags: + - Cookies + - HTTP + - リファレンス + - レスポンス + - ヘッダー + - samesite +browser-compat: http.headers.Set-Cookie +translation_of: Web/HTTP/Headers/Set-Cookie +--- +{{HTTPSidebar}} + +**`Set-Cookie`** は HTTP のレスポンスヘッダーで、サーバーからユーザーエージェントへクッキーを送信するために使用され、ユーザーエージェントはそれを後でサーバーに送り返すことができます。 + +> **Warning:** ブラウザーは、フロントエンドの JavaScript コードが `Set Cookie` ヘッダーにアクセスするのをブロックします。これは、 Fetch 仕様が `Set-Cookie` を[禁止レスポンスヘッダー名](https://fetch.spec.whatwg.org/#forbidden-response-header-name)として定義しているためで、フロントエンドコードに公開されるすべてのレスポンスから[フィルタリング](https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0)しなければなりません。 + +詳細については、<a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキーのガイド</a>を参照してください。 + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row"> + <a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name" + >禁止レスポンスヘッダー名</a> + </th> + <td>はい</td> + </tr> + </tbody> +</table> + +## 構文 + +``` +Set-Cookie: <cookie-name>=<cookie-value> +Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> +Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number> +Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> +Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value> +Set-Cookie: <cookie-name>=<cookie-value>; Secure +Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly + +Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict +Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax +Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure + +// 以下の例のように、複数のディレクティブも利用することができます。 +Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly +``` + +## 属性 + +- `<cookie-name>=<cookie-value>` + + - : クッキーは名前と値の組で始まります。 + + `<cookie-name>` は任意の US-ASCII 文字の集合で、制御文字、空白、タブを除いたものです。 `( ) < > @ , ; : \ " / [ ] ? = { }` のような区切り文字も含めることができません。 + + `<cookie-value>` は任意で二重引用符で囲むことができ、制御文字、{{glossary("Whitespace", "ホワイトスペース")}}、二重引用符、カンマ、セミコロン、バックスラッシュを除くすべての US-ASCII 文字が利用できます。 + + **エンコーディング**: 多くの実装ではクッキーの値に URL エンコーディングを施しますが、 RFC の仕様書では要求されていません。これは \<cookie-value> 値に許可された文字についての要件を満足させるのに役立ちます。 + + > **Note:** 一部の `<cookie-name>` は特殊な意味を持ちます。 + > + > **`__Secure-` の接頭辞**: `__Secure-` (接頭辞にダッシュを含む) で始まるクッキー名は、 `secure` フラグを設定することが必要で、安全なページ (HTTPS) でなければなりません。 + > + > **`__Host-` の接頭辞**: `__Host-` で始まるクッキー名は、 `secure` フラグを設定し、安全なページ (HTTPS) から読み込む必要があり、ドメインを指定することができず (従ってサブドメインにも送られません)、パスが `/` である必要があります。 + +- `Expires=<date>` {{optional_inline}} + + - : クッキーの有効期限で、 HTTP の日時タイムスタンプです。詳細な書式は {{HTTPHeader("Date")}} を参照してください。 + + 指定されなかった場合は、クッキーは**セッションクッキー**の寿命になります。セッションはクライアントが終了したときに終了するので、セッションクッキーはその時点で削除されます。 + + > **Warning:** 多くのウェブブラウザーはセッション復元と呼ばれる機能を持っており、これによってすべてのタブを保存し、次回ブラウザーを起動したときに復元することができます。ブラウザーを実際には閉じていないかのように、セッションクッキーも復元されます。 + + 有効期限が設定されていた場合、期限はサーバーではなく、クッキーが設定されているクライアントからの相対時刻で設定されます。 + +- `Max-Age=<number>` {{optional_inline}} + - : クッキーの期限までの秒数です。ゼロまたは負の数値の場合は、クッキーは直ちに期限切れになります。 `Expires` および `Max-Age` の両方が設定されていたら、 `Max-Age` が優先されます。 +- `Domain=<domain-value>` {{optional_inline}} + + - : クッキーを送信する先のホストです。 + + 指定されなかった場合は、既定で現在の文書の URL におけるホスト名の部分になり、サブドメインを含みません。 + + 初期の仕様書とは逆に、ドメイン名の前のドット (`.example.com`) は無視されます。 + + 複数のホストやドメインの値を指定することは*できません*が、ドメイン*が*指定された場合、すべてのサブドメインが常に含まれます。 + +- `Path=<path-value>` {{optional_inline}} + + - : リクエストの URL に含まれるべきパスです。含まれていないと、ブラウザーは `Cookie` ヘッダーを送信しません。 + + スラッシュ (`/`) の文字はディレクトリー区切りとして解釈され、サブディレクトリーも同様に一致します (例えば `Path=/docs` であれば、`/docs`、`/docs/Web/`、`/docs/Web/HTTP` はすべて一致します)。 + +- `Secure` {{optional_inline}} + + - : クッキーは、リクエストが SSL と HTTPS プロトコルを使用して行われた場合にのみサーバーに送信されます。ただし HTTP クッキーは、例えば情報が暗号化されないなど、安全ではない仕組みを継承しているので、機密な情報や敏感な情報を転送したり格納したりしないようにしてください。 + + > **Note:** Secure を設定すると、Cookie 内の機密情報 (セッションキー、ログイン情報など) へのアクセスがすべて防げると思わないでください。この属性を持つクッキーは、クライアントのハードディスクにアクセスしたり、 `HttpOnly` クッキー属性が設定されていない場合に JavaScript からアクセスしたりすることで、依然として読み取り/変更が可能です。 + > + > 安全でないサイト (`http:`) では、 `Secure` 属性のクッキーを設定できません (Chrome 52、Firefox 52 以降)。Firefox では、`Secure` 属性が localhost で設定されている場合、https: の要件は無視されます (Firefox 75以降)。 + +- `HttpOnly` {{optional_inline}} + - : JavaScript が {{domxref("Document.cookie")}} プロパティなどを介してこのクッキーにアクセスすることを禁止します。HttpOnly で作成されたクッキーは、JavaScript で開始されたリクエスト、例えば、 {{domxref("XMLHttpRequest.send()")}} や {{domxref("fetch()")}} と共に送信されます。これにより、クロスサイトスクリプティング ({{Glossary("Cross-site_scripting", "XSS")}}) 攻撃を軽減します。 +- `SameSite=<samesite-value>` {{optional_inline}} + + - : クッキーがオリジン間リクエストで送信されないことを主張することで、クロスサイトリクエストフォージェリ攻撃 ({{Glossary("CSRF")}}) に対していくらか防御することができます。 + + > **Note:** [SameSite クッキー](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite)に関する標準は、最近次のように改訂されました。 + > + > 1. `SameSite` が指定されなかった場合のクッキー送信の動作は `SameSite=Lax` になりました。以前は既定ではすべてのリクエストに対して送信されていました。 + > 2. `SameSite=None` が指定されたクッキーには `Secure` 属性も指定されるようになりました (すなわち、安全なコンテキストが必要になりました)。 + > + > 下記のオプションは新しい動作を含んでいます。特定のブラウザーの実装についての情報は、[ブラウザーの互換性](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite#browser_compatibility)一覧表 ("`SameSite`: Defaults to `Lax`" と "`SameSite`: Secure context required" の行) を参照してください。 + + インラインオプションは、`Strict`、`Lax`、`None` です。 + + `Strict` はブラウザーが同一サイトへのリクエスト時にのみクッキーを送信することを意味します。すなわち、同じサイトへ向けたリクエストにクッキーを設定します。リクエストが現在とは異なる URL からであった場合、 `SameSite=Strict` 属性が付いているクッキーは送信されません。 + + `Lax` は、画像やフレームの読み込みの呼び出しなどにおけるサイトをまたがるリクエストではクッキーが送信されませんが、ユーザーが外部のサイトから (リンクをたどる場合などで) このサイトに移動した場合は送信されます。 + これは `SameSite` 属性が指定されなかった場合の既定の動作です。 + + 最後に、 `None` は、オリジン間のリクエストでも同一オリジンのリクエストでもブラウザーがクッキーを送信することを意味します。 + `SameSite=None` の場合は、 `Secure` 属性が必ず設定されます。 + +## 例 + +### セッションクッキー + +**セッションクッキー**は、クライアントが終了したときに削除されます。 `Expires` や `Max-Age` ディレクティブを指定しないと、クッキーはセッションクッキーになります。 + +``` +Set-Cookie: sessionId=38afes7a8 +``` + +### 永続的クッキー + +**永続的クッキー**は、クライアントが終了したときに期限切れにならず、特定の期限 (`Expires`) または特定の時間が過ぎた後 (`Max-Age`) に期限切れになります。 + +``` +Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT +``` + +``` +Set-Cookie: id=a3fWa; Max-Age=2592000 +``` + +### 不正なドメイン + +オリジンのサーバーを含まないドメインに所属するクッキーは、[ユーザーエージェントが拒否します](https://datatracker.ietf.org/doc/html/rfc6265#section-4.1.2.3)。 + +次のクッキーを `originalcompany.com` でホスティングされたサーバーから設定しようとすると拒否されます。 + +``` +Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk +``` + +提供するドメインのサブドメインへのクッキーは拒否されます。 + +以下のクッキーを `example.com` でホスティングされたサーバーから設定しようとすると拒否されます。 + +``` +Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com +``` + +### クッキーの接頭辞 + +`__Secure-` または `__Host-` の接頭辞が付いたクッキー名は、安全な (HTTPS の) オリジンから `secure` ディレクティブを設定した場合のみ使用することができます。 + +加えて、 `__Host-` の接頭辞が付いたクッキーは、 `/` (ホストの任意のパスという意味) を持つ必要があり、 `Domain` ディレクティブを持つことができません。 + +> **Warning:** クッキーの接頭辞を実装していないクライアントでは、これらの保証を受けることができず、クッキーは常に受け入れられます。 + +``` +// どちらも安全な (HTTPS の) オリジンから受け入れられます +Set-Cookie: __Secure-ID=123; Secure; Domain=example.com +Set-Cookie: __Host-ID=123; Secure; Path=/ + +// Secure ディレクティブが無いため、拒否されます +Set-Cookie: __Secure-id=1 + +// Path=/ ディレクティブが無いため、拒否されます +Set-Cookie: __Host-id=1; Secure + +// Domain を設定したため、拒否されます +Set-Cookie: __Host-id=1; Secure; Path=/; Domain=example.com +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 互換性のメモ + +- Chrome 52 および Firefox 52 以降、セキュリティで保護されていないサイト (`http:`) では、 `Secure` ディレクティブ付きでクッキーを設定することはできなくなりました。 + +## 関連情報 + +- [HTTP クッキー](/ja/docs/Web/HTTP/Cookies) +- {{HTTPHeader("Cookie")}} +- {{domxref("Document.cookie")}} +- [SameSite cookies](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) diff --git a/files/ja/web/http/headers/www-authenticate/index.html b/files/ja/web/http/headers/www-authenticate/index.html deleted file mode 100644 index 4e03e60c59..0000000000 --- a/files/ja/web/http/headers/www-authenticate/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: WWW-Authenticate -slug: Web/HTTP/Headers/WWW-Authenticate -tags: - - HTTP - - HTTP ヘッダー - - ヘッダー - - リファレンス - - レスポンスヘッダー -translation_of: Web/HTTP/Headers/WWW-Authenticate ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP の <strong><code>WWW-Authenticate</code></strong> 応答ヘッダーは、リソースへのアクセス権を得るために使われる認証方法を定義します。</p> - -<p><code>WWW-Authenticate</code> ヘッダーは {{HTTPStatus("401")}} <code>Unauthorized</code> 応答と共に送られます。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">ヘッダー種別</th> - <td>{{Glossary("Response header", "応答ヘッダー")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> - <td>いいえ</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">WWW-Authenticate: <type> realm=<realm> -</pre> - -<h2 id="Directives" name="Directives">ディレクティブ</h2> - -<dl> - <dt><type></dt> - <dd><a href="/ja/docs/Web/HTTP/Authentication#Authentication_schemes">認証の種類</a>。一般的には <a href="/ja/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a> です。 IANA は <a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">認証方式の一覧</a>を管理しています。</dd> - <dt>realm=<realm></dt> - <dd>保護領域の説明です。 realm が指定されていない場合は、クライアントはよく書式化されたホスト名を代わりに表示します。</dd> - <dt>charset=<charset></dt> - <dd>ユーザー名とパスワードを送信するときのサーバーが推奨するエンコーディング方式をクライアントに伝えます。大文字小文字の区別なしの文字列 "UTF-8" だけが許可されています。これは realm 文字列のエンコーディングとは関係がありません。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>通常、 <code>WWW-Authenticate</code> ヘッダーを含むサーバーの応答は以下のようなものです。</p> - -<pre>WWW-Authenticate: Basic - -WWW-Authenticate: Basic realm="Access to the staging site", charset="UTF-8" -</pre> - -<p>Apache や nginx サーバーで HTTP Basic 認証を使用してサイトを保護する方法の例については、 <a href="/ja/docs/Web/HTTP/Authentication">HTTP 認証</a> を参照してください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">題名</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7235", "WWW-Authenticate", "4.1")}}</td> - <td>HTTP/1.1: Authentication</td> - </tr> - <tr> - <td>{{RFC("7617")}}</td> - <td>The 'Basic' HTTP Authentication Scheme</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("http.headers.WWW-Authenticate")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/HTTP/Authentication">HTTP 認証</a></li> - <li>{{HTTPHeader("Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authorization")}}</li> - <li>{{HTTPHeader("Proxy-Authenticate")}}</li> - <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li> -</ul> diff --git a/files/ja/web/http/headers/www-authenticate/index.md b/files/ja/web/http/headers/www-authenticate/index.md new file mode 100644 index 0000000000..547e518e26 --- /dev/null +++ b/files/ja/web/http/headers/www-authenticate/index.md @@ -0,0 +1,237 @@ +--- +title: WWW-Authenticate +slug: Web/HTTP/Headers/WWW-Authenticate +tags: + - HTTP + - HTTP ヘッダー + - Reference + - レスポンスヘッダー + - ヘッダー + - WWW-Authenticate + - 認証 +browser-compat: http.headers.WWW-Authenticate +translation_of: Web/HTTP/Headers/WWW-Authenticate +--- +{{HTTPSidebar}} + +HTTP の **`WWW-Authenticate`** レスポンスヘッダーは、リソースへのアクセス権を得るために使われる [HTTP 認証](/ja/docs/Web/HTTP/Authentication)メソッド (「チャレンジ」) を定義します。</p> + +> **Note:** このヘッダーは、[一般的な HTTP 認証の枠組み](/ja/docs/Web/HTTP/Authentication#the_general_http_authentication_framework)の一部であり、多くの[認証方式](/ja/docs/Web/HTTP/Authentication#authentication_schemes)で使用することができます。 +> それぞれの「チャレンジ」には、サーバーが対応している方式と、その方式型に定義されている追加引数が記載されています。 + +[HTTP 認証]((/ja/docs/Web/HTTP/Authentication))を使用するサーバーは、保護されたリソースへのリクエストに対して {{HTTPStatus("401")}} `Unauthorized` レスポンスを返します。このレスポンスには、1 つ以上の `WWW-Authenticate` ヘッダーと 1 つ以上の{{Glossary("challenge", "チャレンジ")}}が含まれていなければならず、リソースへのアクセスにどのような認証方式が使用できるか (およびそれぞれの方式が必要とする追加データ) を示します。 + +1 つの `WWW-Authenticate` ヘッダーには複数のチャレンジが許され、1 つのレスポンスには複数の `WWW-Authenticate` ヘッダーが許されます。 +サーバーは、他のレスポンスメッセージに `WWW-Authenticate` ヘッダーを含めることで、資格情報を提供することがレスポンスに影響を与える可能性があることを示すこともできます。 + +`WWW-Authenticate` ヘッダーを受け取った後、クライアントは通常、ユーザーに資格情報を求めるプロンプトを表示し、リソースを再リクエストします。この新しいリクエストは {{HTTPHeader("Authorization")}} ヘッダーを使用して、選択された「チャレンジ」の認証方法に応じて適切にエンコードされた資格情報をサーバーに提供します。クライアントは、対応しているチャレンジのうち、最も安全なものを選択することが期待されます (なお、「最も安全な」方法については議論の余地がある場合もあります)。 + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +## 構文 + +1 つ以上のチャレンジを指定する必要があります。 +複数のチャレンジを指定する場合は、カンマで区切って 1 つのヘッダーに入れたり、個々のヘッダーで指定したりすることができます。 +```http +// チャレンジを単一のヘッダーで指定 +WWW-Authenticate: challenge1, ..., challengeN + +// チャレンジを複数のヘッダーで指定 +WWW-Authenticate: challenge1 +... +WWW-Authenticate: challengeN +``` + +1 つのチャレンジは以下のような形式になっています。方式トークン (`<auth-scheme>`) が必須であることに注意してください。 +`realm`、`token68`、その他の引数の有無は、選択した方式の定義に依存します。 + +```http +// 可能なチャレンジの形式 (方式に依存) +WWW-Authenticate: <auth-scheme> +WWW-Authenticate: <auth-scheme> realm=<realm> +WWW-Authenticate: <auth-scheme> token68 +WWW-Authenticate: <auth-scheme> auth-param1=token1, ..., auth-paramN=auth-paramN-token +WWW-Authenticate: <auth-scheme> realm=<realm> token68 +WWW-Authenticate: <auth-scheme> realm=<realm> token68 auth-param1=auth-param1-token , ..., auth-paramN=auth-paramN-token +WWW-Authenticate: <auth-scheme> realm=<realm> auth-param1=auth-param1-token, ..., auth-paramN=auth-paramN-token +WWW-Authenticate: <auth-scheme> token68 auth-param1=auth-param1-token, ..., auth-paramN=auth-paramN-token +``` + +例えば、[Basic 認証](/ja/docs/Web/HTTP/Authentication#basic_authentication_scheme)では任意で `realm` および `charset` キーを指定することができますが、`token68` には対応していません。 + +```http +WWW-Authenticate: Basic +WWW-Authenticate: Basic realm=<realm> +WWW-Authenticate: Basic realm=<realm>, charset="UTF-8" +``` + + +## ディレクティブ + +- `<auth-scheme>` + - : [認証方式](/ja/docs/Web/HTTP/Authentication#authentication_schemes)です。有名なものとしては、 [`Basic`](/ja/docs/Web/HTTP/Authentication#basic_authentication_scheme)、`Digest`、`Negotiate`、`AWS4-HMAC-SHA256` などがあります (大文字小文字の区別なし)。 + + > **Note:** 詳しい情報やオプションについては、[HTTP 認証 > 認証方式](/ja/docs/Web/HTTP/Authentication#authentication_schemes)を参照してください。 +- **realm=**\<realm> {{optional_inline}} + - : 保護領域を説明する文字列です。 + realm によってサーバーが保護する領域を分割することができ (そのような分割を許可しているスキームが対応している場合)、どの特定のユーザー名/パスワードが必要であるかをユーザーに通知します。 + realm が指定されていない場合は、クライアントはよく書式化されたホスト名を代わりに表示します。 +- `<token68>` {{optional_inline}} + - : 方式によっては役立つ可能性のあるトークンです。このトークンでは、66 種類の予約されていない URI 文字に加えて、いくつかの文字を使用できます。 + 仕様書によれば、 base64、base64url、base32、base16 (16 進数) の各エンコード方式のいずれかを、パディングの有無にかかわらず、ホワイトスーペースを除いて保持することができます。 + +`<auth-scheme>` とキー `realm` 以外の認証引数は、それぞれの[認証方式](/ja/docs/Web/HTTP/Authentication#authentication_schemes)に固有のものです。 +通常、これらについては関連する仕様を確認する必要があります (一部のスキームのキーを以下に示します)。 + + +### Basic + +- **`<realm>`** {{optional_inline}} + - : 上記通りです。 +- **`charset="UTF-8"`** {{optional_inline}} + - : ユーザー名とパスワードを送信するときのサーバーが優先するエンコード方式をクライアントに伝えます。 + 文字列 "UTF-8" だけが許可されており、大文字小文字の区別はありません。 + これは realm 文字列のエンコード方式とは関係がありません。 + +### Digest + +- **`<realm>`** {{optional_inline}} + - : 使用するユーザー名/パスワードを示す文字列です。 + 少なくともホスト名を含める必要がありますが、アクセス権を持つユーザーやグループを示す場合もあります。 +- **`domain`** {{optional_inline}} + - : 引用符を付け、空白で区切った URL 接頭辞のリストで、この資格情報を使用するすべての場所を定義します。 + このキーが指定されていない場合、この資格情報はウェブルート以下のどこでも使用できます。 +- **`nonce`** + - : サーバーが指定する引用符の付いた文字列で、特定の資格情報が有効とみなされる期間を制御するためにサーバーが使用できます。 + これは、401 レスポンスが行われるたびに一意に生成されなければならず、さらに頻繁に再生成される可能性があります (たとえば、ダイジェストを 1 回だけ使用できるようにするなど)。 + 仕様書には、この値を生成するために利用可能なアルゴリズムに関する助言が含まれています。 + nonce の値は、クライアントには不透明です。 +- **`opaque`** + - : サーバーが指定する引用符の付いた文字列で、 {{HTTPHeader("Authorization")}} で変更されずに返されるべきものです。 + これはクライアントには不透明です。サーバーは Base64 または 16 進数のデータを含めることを推奨します。 +- **`stale`** {{optional_inline}} + - : 大文字小文字を区別しないフラグで、クライアントからの前回のリクエストが、使用された `nonce` が古すぎる (stale) ために拒否されたことを示します。 + これが `true` であれば、新しい `nonce` で暗号化された同じユーザー名/パスワードを使ってリクエストを再試行できます。 + それ以外の値の場合は、ユーザー名/パスワードが無効なので、ユーザーに再度リクエストする必要があります。 +- **`algorithm`** {{optional_inline}} + - : ダイジェストの生成に使用するアルゴリズムです。 + セッション以外での有効な値は `"MD5"` (指定されていない場合の既定値)、`"SHA-256"`、`"SHA-512"` です。 + セッションで有効な値は `"MD5-sess"`、`"SHA-256-sess"`、`"SHA-512-sess"` です。 +- **`qop`** + - : 引用符の付いた文字列で、サーバーが対応している保護の品質を示します。これは必ず指定しなければならず、認識できないオプションは無視されます。 + - `"auth"`: 認証 + - `"auth-int"`: 完全性保護付きの認証 +- **`charset="UTF-8"`** {{optional_inline}} + - : ユーザー名とパスワードを送信する際に、サーバーが優先するエンコード方式をクライアントに伝えます。 + 大文字小文字を区別しない文字列 "UTF-8" のみが許可されます。 +- **`userhash`** {{optional_inline}} + - : サーバーが `"true"` を指定することで、ユーザー名のハッシュ化に対応していることを示すことができます (既定値は `"false"` です)。 + + +## 例 + +### Basic 認証 + +通常、`WWW-Authenticate` ヘッダーを含むサーバーのレスポンスは以下のようなものです。 + +```http +WWW-Authenticate: Basic realm="Access to the staging site", charset="UTF-8" +``` + +このヘッダーを受け取ったユーザーエージェントは、まずユーザーにユーザー名とパスワードの入力を求め、それからリソースを再リクエストします。このとき、{{HTTPHeader("Authorization")}} ヘッダーに (エンコードされた) 認証情報を含めます。{{HTTPHeader("Authorization")}} ヘッダーは次のようになります。 + +```https +Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l +``` + +`"Basic"` 認証では、資格情報はまず、ユーザー名とパスワードをコロンで結合し (`aladdin:opensesame`)、その結果の文字列を [`base64`](/ja/docs/Glossary/Base64) でエンコードすることで構築します (`YWxhZGRpbjpvcGVuc2VzYW1l`)。 + +> **Note:** Apache や nginx サーバーで HTTP Basic 認証を使用してサイトを保護する方法の例については、 <a href="/ja/docs/Web/HTTP/Authentication">HTTP 認証</a> を参照してください。 + + +### SHA-256 と MD5 を使用した Digest 認証 + +> **Note:** この例は、{{RFC("7616")}} "HTTP Digest Access Authentication" から引用しています (この仕様書の他の例では、`SHA-512`、`charset`、`userhash` の使用方法を示しています)。 + +クライアントは、Digest 認証で保護された URI "http://www.example.org/dir/index.html" の文書にアクセスしようとしています。 +この文書のユーザー名は "Mufasa" で、パスワードは "Circle of Life" です (各単語の間にスペースがあることに注意してください)。 + +クライアントが初めて文書をリクエストしたとき、{{HTTPHeader("Authorization")}} ヘッダーフィールドは送信されません。 +ここでサーバーは、対応している各ダイジェストアルゴリズムのチャレンジを含む HTTP 401 メッセージでレスポンスします (`SHA256`、`MD5` の順)。 + +```http +HTTP/1.1 401 Unauthorized +WWW-Authenticate: Digest + realm="http-auth@example.org", + qop="auth, auth-int", + algorithm=SHA-256, + nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", + opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS" +WWW-Authenticate: Digest + realm="http-auth@example.org", + qop="auth, auth-int", + algorithm=MD5, + nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", + opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS" +``` + +クライアントはユーザー名とパスワードの入力をユーザーに促し、それから {{HTTPHeader("Authorization")}} ヘッダーフィールドに資格情報をエンコードして入れます。 +クライアントが MD5 ダイジェストを選択した場合、{{HTTPHeader("Authorization")}} ヘッダーフィールドは次のようになります。 + +```http +Authorization: Digest username="Mufasa", + realm="http-auth@example.org", + uri="/dir/index.html", + algorithm=MD5, + nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", + nc=00000001, + cnonce="f2/wE4q74E6zIJEtWaHKaf5wv/H5QzzpXusqGemxURZJ", + qop=auth, + response="8ca523f5e9506fed4657c9700eebdbec", + opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS" +``` + +クライアントが SHA-256 ダイジェストを選択した場合は、 {{HTTPHeader("Authorization")}} ヘッダーフィールドは次のようになります。 + +```http +Authorization: Digest username="Mufasa", + realm="http-auth@example.org", + uri="/dir/index.html", + algorithm=SHA-256, + nonce="7ypf/xlj9XXwfDPEoM4URrv/xwf94BcCAzFZH4GiTo0v", + nc=00000001, + cnonce="f2/wE4q74E6zIJEtWaHKaf5wv/H5QzzpXusqGemxURZJ", + qop=auth, + response="753927fa0e85d155564e2e272a28d1802ca10daf449 + 6794697cf8db5856cb6c1", + opaque="FQhe/qaU925kfnzjCev0ciny7QMkPqMAFRtzCUYo5tdS" +``` + + + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [HTTP 認証](/ja/docs/Web/HTTP/Authentication) +- {{HTTPHeader("Authorization")}} +- {{HTTPHeader("Proxy-Authorization")}} +- {{HTTPHeader("Proxy-Authenticate")}} +- {{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}} diff --git a/files/ja/web/javascript/guide/using_promises/index.md b/files/ja/web/javascript/guide/using_promises/index.md index 35b791ab66..8487f9acfa 100644 --- a/files/ja/web/javascript/guide/using_promises/index.md +++ b/files/ja/web/javascript/guide/using_promises/index.md @@ -112,7 +112,7 @@ doSomething() .catch(failureCallback); ``` -**重要:** コールバック関数から処理結果を返すのを忘れないでください。さもないと後続のコールバック関数からその処理結果を利用することができなくなります (アロー関数を使った `() => x` は `() => { return x; }` の短縮形です)。 +**重要:** コールバック関数から処理結果を返すのを忘れないでください。さもないと後続のコールバック関数からその処理結果を利用することができなくなります (アロー関数を使った `() => x` は `() => { return x; }` の短縮形です)。 ### catch の後の連鎖 diff --git a/files/ja/web/javascript/reference/classes/index.html b/files/ja/web/javascript/reference/classes/index.html deleted file mode 100644 index 2a2377bbdd..0000000000 --- a/files/ja/web/javascript/reference/classes/index.html +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: クラス -slug: Web/JavaScript/Reference/Classes -tags: - - Classes - - Constructors - - ECMAScript 2015 - - Guide - - Inheritance - - Intermediate - - JavaScript -translation_of: Web/JavaScript/Reference/Classes ---- -<div>{{JsSidebar("Classes")}}</div> - -<p>クラスはオブジェクトを作成するためのテンプレートです。それらは、そのデータを処理するためのコードでデータをカプセル化します。JS のクラスはプロトタイプに基づいて構築されていますが、ES5 のクラスライクなセマンティクスとは共有されない構文やセマンティクスも持っています。</p> - -<h2 id="Defining_classes" name="Defining_classes">クラスの定義</h2> - -<p>クラスは実際には「特別な{{jsxref("Functions", "関数", "", "true")}}」であり、{{jsxref("Operators/function", "関数式", "", "true")}}と{{jsxref("Statements/function", "関数宣言", "", "true")}}を定義することができるように、クラス構文にも{{jsxref("Operators/class", "クラス式", "", "true")}}と{{jsxref("Statements/class", "クラス宣言", "", "true")}}の 2 つの定義方法があります。</p> - -<h3 id="Class_declarations" name="Class_declarations">クラス宣言</h3> - -<p>クラスを定義するひとつの方法は、<strong>クラス宣言</strong>を使うことです。クラスを宣言するには、クラス名 (この例では "Rectangle") 付きで <code>class</code> キーワードを使います。</p> - -<pre class="brush: js notranslate">class Rectangle { - constructor(height, width) { - this.height = height; - this.width = width; - } -}</pre> - -<h4 id="Hoisting" name="Hoisting">ホイスティング(巻き上げ)</h4> - -<p><strong>関数宣言</strong>と<strong>クラス宣言</strong>の重要な違いは、関数宣言では {{Glossary("Hoisting", "Hoisting")}} されるのに対し、クラス宣言ではされないことです。クラスにアクセスする前に、そのクラスを宣言する必要があります。そうしないと、{{jsxref("ReferenceError")}} が投げられます：</p> - -<pre class="brush: js example-bad notranslate">const p = new Rectangle(); // ReferenceError - -class Rectangle {} -</pre> - -<h3 id="Class_expressions" name="Class_expressions">クラス式</h3> - -<p>クラスを定義する別の方法は<strong>クラス式</strong>です。クラス式は、名前付きでも名前なしでもできます。名前付きクラスの名前は、クラス内のローカルとして扱われます。(ただし (インスタンスのではなく) クラスの {{jsxref("Function.name", "name")}} プロパティによって取得可能)</p> - -<pre class="brush: js notranslate">// 名前なし -let Rectangle = class { - constructor(height, width) { - this.height = height; - this.width = width; - } -}; -console.log(Rectangle.name); -// 出力: "Rectangle" - -// 名前つき -let Rectangle = class Rectangle2 { - constructor(height, width) { - this.height = height; - this.width = width; - } -}; -console.log(Rectangle.name); -// 出力: "Rectangle2" -</pre> - -<div class="note"> -<p><strong>注:</strong> クラス<strong>式</strong>にも{{anch("Class declarations", "クラス宣言")}}で言及したのと同じホイスティング問題があります。</p> -</div> - -<h2 id="Class_body_and_method_definitions" name="Class_body_and_method_definitions">クラス本体とメソッド定義</h2> - -<p>中括弧 <code>{}</code> 内にクラス本体を記述します。クラス本体には、メソッドやコンストラクターといったクラスメンバを記述します。</p> - -<h3 id="Strict_mode" name="Strict_mode">Strict モード</h3> - -<p>クラス本体は <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a> で実行されます。つまり、ここで書かれたコードは、パフォーマンスを向上させるために、より厳密な構文に従います。そうでない場合はサイレントエラーが投げられます。なお、特定のキーワードは将来のバージョンの ECMAScript 用に予約されています。</p> - -<h3 id="Constructor" name="Constructor">コンストラクター</h3> - -<p>{{jsxref("Classes/constructor", "コンストラクター", "", "true")}}メソッドは、<code>class</code> で作成したオブジェクトを作成して初期化するための特別なメソッドです。"constructor" という名前の特別なメソッドは、クラスに 1 つしか定義できません。クラスに複数のコンストラクターメソッドが存在する場合、{{jsxref("SyntaxError")}} が投げられます。</p> - -<p>スーパークラスのコンストラクターは <code>super</code> というキーワードで呼び出せます。</p> - -<h3 id="Prototype_methods" name="Prototype_methods">プロトタイプメソッド</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッド定義</a>を参照してください。</p> - -<pre class="brush: js notranslate">class Rectangle { - constructor(height, width) { - this.height = height; - this.width = width; - } - // ゲッター - get area() { - return this.calcArea(); - } - // メソッド - calcArea() { - return this.height * this.width; - } -} - -const square = new Rectangle(10, 10); - -console.log(square.area); // 100</pre> - -<h3 id="Static_methods_and_properties" name="Static_methods_and_properties">静的メソッドとプロパティ</h3> - -<p>{{jsxref("Classes/static", "static", "", "true")}} キーワードは、クラスの静的メソッドまたはプロパティを定義します。静的メンバー（プロパティとメソッド）は、クラスを<a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">インスタンス化</a>せずに呼び出され、クラスインスタンスを介して呼び出すことは<strong>できません</strong>。静的メソッドは、アプリケーションのユーティリティ関数を作成するためによく使用されますが、静的プロパティは、キャッシュ、固定構成、またはインスタンス間で複製する必要のないその他のデータに役立ちます。</p> - -<pre class="brush: js notranslate">class Point { - constructor(x, y) { - this.x = x; - this.y = y; - } - - static displayName = "Point"; - static distance(a, b) { - const dx = a.x - b.x; - const dy = a.y - b.y; - - return Math.hypot(dx, dy); - } -} - -const p1 = new Point(5, 5); -const p2 = new Point(10, 10); -p1.displayName; // undefined -p1.distance; // undefined -p2.displayName; // undefined -p2.distance; // undefined - -console.log(Point.displayName); // "Point" -console.log(Point.distance(p1, p2)); // 7.0710678118654755 -</pre> - -<h3 id="Boxing_with_prototype_and_static_methods" name="Boxing_with_prototype_and_static_methods">プロトタイプと静的メソッドによるボクシング</h3> - -<p><code>this</code> に値が付けられずに静的メソッドまたはプロトタイプメソッドが呼ばれると、<code>this</code> の値はメソッド内で <code>undefined</code> になります。たとえ <code>"use strict"</code> ディレクティブがなくても同じふるまいになります。なぜなら、<code>class</code> 本体の中のコードは常に Strict モードで実行されるからです。</p> - -<pre class="brush: js notranslate">class Animal { - speak() { - return this; - } - static eat() { - return this; - } -} - -let obj = new Animal(); -obj.speak(); // Animal {} -let speak = obj.speak; -speak(); // undefined - -Animal.eat() // class Animal -let eat = Animal.eat; -eat(); // undefined</pre> - -<p>上のコードを従来の関数ベースの構文を使って書くと、非 Strict モードでは、最初の <code>this</code> の値をもとにして、メソッド呼び出しの中で自動ボクシングが行われます。最初の値が <code>undefined</code> の場合、<code>this</code> にはグローバルオブジェクトが入ります。</p> - -<p>Strict モードでは自動ボクシングは行われません。<code>this</code> の値はそのまま渡されます。</p> - -<pre class="brush: js notranslate">function Animal() { } - -Animal.prototype.speak = function() { - return this; -} - -Animal.eat = function() { - return this; -} - -let obj = new Animal(); -let speak = obj.speak; -speak(); // グローバルオブジェクト（非厳格モード） - -let eat = Animal.eat; -eat(); // グローバルオブジェクト（非厳格モード） -</pre> - -<h3 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h3> - -<p>インスタンスプロパティはクラスのメソッドの中で定義しなければなりません:</p> - -<pre class="brush: js notranslate">class Rectangle { - constructor(height, width) { - this.height = height; - this.width = width; - } -}</pre> - -<p>クラスに付随する静的なプロパティやプロトタイプのプロパティは、クラス本体の宣言の外で定義しなければなりません:</p> - -<pre class="brush: js notranslate">Rectangle.staticWidth = 20; -Rectangle.prototype.prototypeWidth = 25; -</pre> - -<h3 id="Field_declarations" name="Field_declarations">フィールド宣言</h3> - -<div class="warning"> -<p>パブリックフィールドとプライベートフィールドの宣言は JavaScript 標準委員会の <a href="https://tc39.github.io/beta/">TC39</a> で提案されている<a href="https://github.com/tc39/proposal-class-fields">実験的機能（ステージ 3）</a>です。ブラウザーでのサポートは限られていますが、この機能は <a href="https://babeljs.io/">Babel</a> のようなシステムでのビルドステップを通して使用できます。</p> -</div> - -<h4 id="Public_field_declarations" name="Public_field_declarations">パブリックフィールド宣言</h4> - -<p>JavaScript のフィールド宣言構文を使って、上記の例は次のように書くことができます。</p> - -<pre class="brush: js notranslate">class Rectangle { - height = 0; - width; - constructor(height, width) { - this.height = height; - this.width = width; - } -} -</pre> - -<p>フィールドを事前宣言することで、クラス定義はより自己文書化され、フィールドは常に存在するようになります。</p> - -<p>上記のように、フィールドはデフォルト値の有無にかかわらず宣言できます。</p> - -<p>詳しい情報は、{{jsxref("Classes/Public_class_fields", "パブリッククラスフィールド", "", "true")}}を参照してください。</p> - -<h4 id="Private_field_declarations" name="Private_field_declarations">プライベートフィールド宣言</h4> - -<p>プライベートフィールドを使うと、宣言は下記のように洗練できます。</p> - -<pre class="brush: js notranslate">class Rectangle { - #height = 0; - #width; - constructor(height, width) { - this.#height = height; - this.#width = width; - } -} -</pre> - -<p>プライベートフィールドの参照はクラス本体内でのみ可能となり、クラス外からの参照はエラーとなります。クラス外からは見えないものを定義することで、クラスのユーザーが(変更される可能性のある)内部状態に依存できないようにします。</p> - -<div class="note"> -<p>プライベートフィールドは、事前宣言のみ可能です。</p> -</div> - -<p>プライベートフィールドは通常のプロパティとは違い、<code>this</code> への追加によって後から作成することができません。</p> - -<p>詳しい情報は、{{jsxref("Classes/Private_class_fields", "プライベートクラスフィールド", "", "true")}}を参照してください。</p> - -<h2 id="Sub_classing_with_extends" name="Sub_classing_with_extends"><code>extends</code> によるサブクラス</h2> - -<p><code><a href="/ja/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> キーワードは、クラスを別クラスの子として作成するために、<em>クラス宣言</em>または<em>クラス式</em>の中で使います。</p> - -<pre class="brush: js notranslate">class Animal { - constructor(name) { - this.name = name; - } - - speak() { - console.log(`${this.name} makes a noise.`); - } -} - -class Dog extends Animal { - constructor(name) { - super(name); // スーパークラスのコンストラクターを呼び出し、name パラメータを渡す - } - - speak() { - console.log(`${this.name} barks.`); - } -} - -let d = new Dog('Mitzie'); -d.speak(); // Mitzie barks. -</pre> - -<p>サブクラスにコンストラクターが存在する場合は、"this" を使う前に super() を呼ぶ必要があります。</p> - -<p>従来の関数ベースの「クラス」も拡張できます:</p> - -<pre class="brush: js notranslate">function Animal (name) { - this.name = name; -} - -Animal.prototype.speak = function () { - console.log(`${this.name} makes a noise.`); -} - -class Dog extends Animal { - speak() { - console.log(`${this.name} barks.`); - } -} - -let d = new Dog('Mitzie'); -d.speak(); // Mitzie barks. - -// 同様なメソッドでは、子のメソッドが親のメソッドよりも優先されます。</pre> - -<p>クラスは通常の (生成不可能な) オブジェクトを拡張できないことに注意してください。通常のオブジェクトから継承したければ、代わりに {{jsxref("Object.setPrototypeOf()")}} を使います:</p> - -<pre class="brush: js notranslate">const Animal = { - speak() { - console.log(`${this.name} makes a noise.`); - } -}; - -class Dog { - constructor(name) { - this.name = name; - } -} - -// このコードが無いと、speak() を実行した時に TypeError になります。 -Object.setPrototypeOf(Dog.prototype, Animal); - -let d = new Dog('Mitzie'); -d.speak(); // Mitzie makes a noise. -</pre> - -<h2 id="Species" name="Species">Species</h2> - -<p>Array の派生クラスである <code>MyArray</code> の中で {{jsxref("Array")}} オブジェクトを返したいときもあるでしょう。species パターンは、デフォルトコンストラクタ－を上書きすることができます。</p> - -<p>例えば、デフォルトコンストラクターを返す {{jsxref("Array.map", "map()")}} のようなメソッドを使っているとき、<code>MyArray</code> ではなく <code>Array</code> オブジェクトを返したいでしょう。{{jsxref("Symbol.species")}} シンボルを使うと次のように実現できます。</p> - -<pre class="brush: js notranslate">class MyArray extends Array { - // species を親の Array コンストラクターで上書きする - static get [Symbol.species]() { return Array; } -} - -let a = new MyArray(1,2,3); -let mapped = a.map(x => x * x); - -console.log(mapped instanceof MyArray); // false -console.log(mapped instanceof Array); // true -</pre> - -<h2 id="Super_class_calls_with_super" name="Super_class_calls_with_super"><code>super</code> でスーパークラスを呼び出す</h2> - -<p><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/super">super</a></code> キーワードを使ってスーパークラスのメソッドを呼び出せます。これはプロトタイプベースの継承よりも優れています。</p> - -<pre class="brush: js notranslate">class Cat { - constructor(name) { - this.name = name; - } - - speak() { - console.log(`${this.name} makes a noise.`); - } -} - -class Lion extends Cat { - speak() { - super.speak(); - console.log(`${this.name} roars.`); - } -} - -let l = new Lion('Fuzzy'); -l.speak(); -// Fuzzy makes a noise. -// Fuzzy roars. -</pre> - -<h2 id="Mix-ins" name="Mix-ins">ミックスイン</h2> - -<p>抽象的なサブクラスや<em>ミックスイン</em>はクラスのためのテンプレートです。ECMAScript のクラスは 1 つだけスーパークラスを持つことができます。そのため、多重継承はできません。機能はスーパークラスから提供されます。</p> - -<p>ECMAScript では、スーパークラスをインプットとして、そしてスーパークラスを継承した派生クラスをアウトプットとする関数を mix-in で実装できます:</p> - -<pre class="brush: js notranslate">let calculatorMixin = Base => class extends Base { - calc() { } -}; - -let randomizerMixin = Base => class extends Base { - randomize() { } -}; -</pre> - -<p>ミックスインを使用したクラスを次のように記述することもできます:</p> - -<pre class="brush: js notranslate">class Foo { } -class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> - - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.classes")}}</p> - -<h2 id="Re-running_a_class_definition" name="Re-running_a_class_definition">クラス定義の再実行</h2> - -<p>クラスを再定義することはできません。再定義しようとすると <code>SyntaxError</code> が発生します。</p> - -<p>Firefox のウェブコンソール（<strong>メニュー</strong> > <strong>ウェブ開発</strong> > <strong>ウェブコンソール</strong>）などでコードを試しているときに、同じ名前のクラス定義を 2 回実行すると、<code>SyntaxError: redeclaration of let <em>ClassName</em></code> が発生します。（この問題については {{Bug(1428672)}} でさらに詳しく説明しています。）Chrome Developer Tools で同様の操作を行うと、<code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at <anonymous>:1:1</code> のようなメッセージが表示されます。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Functions", "関数", "", "true")}}</li> - <li>{{jsxref("Statements/class", "クラス宣言", "", "true")}}</li> - <li>{{jsxref("Operators/class", "クラス式", "", "true")}}</li> - <li>{{jsxref("Classes/Public_class_fields", "パブリッククラスフィールド", "", "true")}}</li> - <li>{{jsxref("Classes/Private_class_fields", "プライベートクラスフィールド -", "", "true")}}</li> - <li>{{jsxref("Operators/super", "super")}}</li> - <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">ブログ記事: "ES6 In Depth: Classes"</a></li> - <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/classes/index.md b/files/ja/web/javascript/reference/classes/index.md new file mode 100644 index 0000000000..fb0ef03b2b --- /dev/null +++ b/files/ja/web/javascript/reference/classes/index.md @@ -0,0 +1,440 @@ +--- +title: クラス +slug: Web/JavaScript/Reference/Classes +tags: + - クラス + - コンストラクター + - ECMAScript 2015 + - ガイド + - 継承 + - 中級者 + - JavaScript +browser-compat: javascript.classes +translation_of: Web/JavaScript/Reference/Classes +--- +{{JsSidebar("Classes")}} + +クラスはオブジェクトを作成するためのテンプレートです。それらは、そのデータを処理するためのコードでデータをカプセル化します。JS のクラスはプロトタイプに基づいて構築されていますが、ES5 のクラス風のセマンティクスとは共有されない構文やセマンティクスも持っています。 + +## クラスの定義 + +クラスは実際には「特別な{{jsxref("Functions", "関数", "", "true")}}」であり、{{jsxref("Operators/function", "関数式", "", "true")}}と{{jsxref("Statements/function", "関数宣言", "", "true")}}を定義することができるように、クラス構文にも{{jsxref("Operators/class", "クラス式", "", "true")}}と{{jsxref("Statements/class", "クラス宣言", "", "true")}}の 2 つの定義方法があります。 + +### クラス宣言 + +クラスを定義するひとつの方法は、**クラス宣言**を使うことです。クラスを宣言するには、クラス名 (この例では "Rectangle") 付きで `class` キーワードを使います。 + +```js +class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +} +``` + +#### 巻き上げ (ホイスティング) + +**関数宣言**と**クラス宣言**の重要な違いは、関数宣言では{{Glossary("Hoisting", "巻き上げ")}}されるのに対し、クラス宣言ではされないことです。クラスにアクセスする前に、そのクラスを宣言する必要があります。そうしないと、{{jsxref("ReferenceError")}} が発生します。 + +```js example-bad +const p = new Rectangle(); // ReferenceError + +class Rectangle {} +``` + +### クラス式 + +クラスを定義するもう一つの方法は**クラス式**です。クラス式は、名前付きでも名前なしでもできます。名前付きクラスの名前は、クラス内のローカルとして扱われます。ただし、 (インスタンスのではなく) クラスの {{jsxref("Function.name", "name")}} プロパティによってアクセスできます。 + +```js +// 無名 +let Rectangle = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// 出力: "Rectangle" + +// 名前つき +let Rectangle = class Rectangle2 { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// 出力: "Rectangle2" +``` + +> **Note:** クラス**式**にも{{anch("Class declarations", "クラス宣言")}}で言及したのと同様の巻き上げ問題があります。 + +## クラス本体とメソッド定義 + +中括弧 `{}` 内にクラス本体を記述します。クラス本体には、メソッドやコンストラクターといったクラスメンバーを記述します。 + +### Strict モード + +クラス本体は {{jsxref("Strict_mode", "Strict モード", "", "true")}}で実行されます。つまり、ここで書かれたコードは、パフォーマンスを向上させるために、より厳密な構文に従います。そうでない場合はサイレントエラーが投げられます。なお、特定のキーワードは将来のバージョンの ECMAScript 用に予約されています。 + +### コンストラクター + +{{jsxref("Classes/constructor", "コンストラクター", "", "true")}}メソッドは、`class` で作成したオブジェクトを作成して初期化するための特別なメソッドです。"constructor" という名前の特別なメソッドは、クラスに 1 つしか定義できません。クラスに複数のコンストラクターメソッドが存在する場合、{{jsxref("SyntaxError")}} が発生します。 + +スーパークラスのコンストラクターはキーワード `super` を使用して呼び出せます。 + +### プロトタイプメソッド + +[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)を参照してください。 + +```js +class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } + // ゲッター + get area() { + return this.calcArea(); + } + // メソッド + calcArea() { + return this.height * this.width; + } +} + +const square = new Rectangle(10, 10); + +console.log(square.area); // 100 +``` + +### ジェネレーターメソッド + +[イテレーターとジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)も参照してください。 + +```js +class Polygon { + constructor(...sides) { + this.sides = sides; + } + // Method + *getSides() { + for(const side of this.sides){ + yield side; + } + } +} + +const pentagon = new Polygon(1,2,3,4,5); + +console.log([...pentagon.getSides()]); // [1,2,3,4,5] +``` + +### 静的メソッドとプロパティ + +{{jsxref("Classes/static", "static", "", "true")}} キーワードは、クラスの静的メソッドまたはプロパティを定義します。静的メンバー (プロパティとメソッド) は、クラスを[インスタンス化](/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#constructors_and_object_instances)せずに呼び出され、クラスインスタンスを介して呼び出すことは**できません**。静的メソッドは、アプリケーションのユーティリティ関数を作成するためによく使用されますが、静的プロパティは、キャッシュ、固定構成、またはインスタンス間で複製する必要のないその他のデータに役立ちます。 + +```js +class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static displayName = "Point"; + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.hypot(dx, dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); +p1.displayName; // undefined +p1.distance; // undefined +p2.displayName; // undefined +p2.distance; // undefined + +console.log(Point.displayName); // "Point" +console.log(Point.distance(p1, p2)); // 7.0710678118654755 +``` + +### プロトタイプと静的メソッドに対する `this` の結び付け + +`this` に値が付けられずに静的メソッドまたはプロトタイプメソッドが呼ばれると、{{jsxref("Operators/this", "this")}} の値はメソッド内で `undefined` になります。たとえ {{jsxref("Strict_mode", "\"use strict\"")}} ディレクティブがなくても同じふるまいになります。なぜなら、`class` 本体の中のコードは常に Strict モードで実行されるからです。 + +```js +class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +obj.speak(); // Animal オブジェクト +let speak = obj.speak; +speak(); // undefined + +Animal.eat() // class Animal +let eat = Animal.eat; +eat(); // undefined +``` + +上のコードを従来の関数ベースの構文を使って書くと、非 Strict モードでは、最初の `this` の値をもとにして、メソッド呼び出しの中で自動的に結び付けられます。最初の値が `undefined` の場合、`this` にはグローバルオブジェクトが入ります。 Strict モードでは自動結び付けは行われません。`this` の値はそのまま渡されます。 + +```js +function Animal() { } + +Animal.prototype.speak = function() { + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // グローバルオブジェクト (Strict モードではない) + +let eat = Animal.eat; +eat(); // グローバルオブジェクト (Strict モードではない) +``` + +### インスタンスプロパティ + +インスタンスプロパティはクラスのメソッドの中で定義しなければなりません。 + +```js +class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +} +``` + +### フィールド宣言 + +#### パブリックフィールド宣言 + +JavaScript のフィールド宣言構文を使って、上記の例は次のように書くことができます。 + +```js +class Rectangle { + height = 0; + width; + constructor(height, width) { + this.height = height; + this.width = width; + } +} +``` + +フィールドを事前宣言することで、クラス定義はより自己文書化され、フィールドは常に存在するようになります。 + +上記のように、フィールドはデフォルト値の有無にかかわらず宣言できます。 + +詳しい情報は、{{jsxref("Classes/Public_class_fields", "パブリッククラスフィールド", "", "true")}}を参照してください。 + +#### プライベートフィールド宣言 + +プライベートフィールドを使うと、宣言は下記のように洗練できます。 + +```js +class Rectangle { + #height = 0; + #width; + constructor(height, width) { + this.#height = height; + this.#width = width; + } +} +``` + +プライベートフィールドの参照はクラス本体内でのみ可能となり、クラス外からの参照はエラーとなります。クラス外からは見えないものを定義することで、クラスのユーザーが (変更される可能性のある) 内部状態に依存できないようにします。 + +> **Note:** プライベートフィールドは、事前宣言のみ可能です。 + +プライベートフィールドは通常のプロパティとは違い、`this` への追加によって後から作成することができません。 + +詳しい情報は、{{jsxref("Classes/Private_class_fields", "プライベートクラスフィールド", "", "true")}}を参照してください。 + +## `extends` によるサブクラス化 + +{{jsxref("Classes/extends", "extends")}} キーワードは、クラスを別クラスの子として作成するために、*クラス宣言*または*クラス式*の中で使います。 + +```js +class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Dog extends Animal { + constructor(name) { + super(name); // スーパークラスのコンストラクターを呼び出し、name パラメータを渡す + } + + speak() { + console.log(`${this.name} barks.`); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +``` + +サブクラスにコンストラクターが存在する場合は、"this" を使う前に super() を呼ぶ必要があります。 + +従来の関数ベースの「クラス」も拡張できます。 + +```js +function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(`${this.name} makes a noise.`); +} + +class Dog extends Animal { + speak() { + console.log(`${this.name} barks.`); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. + +// 同様のメソッドは、子のメソッドが親のメソッドよりも優先されます。 +``` + +クラスは通常の (生成不可能な) オブジェクトを拡張できないことに注意してください。通常のオブジェクトから継承したければ、代わりに {{jsxref("Object.setPrototypeOf()")}} を使います。 + +```js +const Animal = { + speak() { + console.log(`${this.name} makes a noise.`); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } +} + +// このコードが無いと、speak() を実行した時に TypeError になります。 +Object.setPrototypeOf(Dog.prototype, Animal); + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie makes a noise. +``` + +## Species + +Array の派生クラスである `MyArray` の中で {{jsxref("Array")}} オブジェクトを返したいときもあるでしょう。species パターンは、デフォルトコンストラクターを上書きすることができます。 + +例えば、デフォルトコンストラクターを返す {{jsxref("Array.map", "map()")}} のようなメソッドを使っているとき、`MyArray` ではなく `Array` オブジェクトを返したいでしょう。{{jsxref("Symbol.species")}} シンボルを使うと次のように実現できます。 + +```js +class MyArray extends Array { + // species を親の Array コンストラクターで上書きする + static get [Symbol.species]() { return Array; } +} + +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +``` + +## `super` でスーパークラスを呼び出す + +{{jsxref("Operators/super", "super")}} キーワードを使ってスーパークラスのメソッドを呼び出せます。これはプロトタイプベースの継承よりも優れています。 + +```js +class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(`${this.name} roars.`); + } +} + +let l = new Lion('Fuzzy'); +l.speak(); +// Fuzzy makes a noise. +// Fuzzy roars. +``` + +## ミックスイン + +抽象的なサブクラスや*ミックスイン*はクラスのためのテンプレートです。ECMAScript のクラスは 1 つだけスーパークラスを持つことができます。そのため、多重継承はできません。機能はスーパークラスから提供されます。 + +ECMAScript では、スーパークラスをインプットとして、そしてスーパークラスを継承した派生クラスをアウトプットとする関数をミックスインで実装できます。 + +```js +let calculatorMixin = Base => class extends Base { + calc() { } +}; + +let randomizerMixin = Base => class extends Base { + randomize() { } +}; +``` + +ミックスインを使用したクラスを次のように記述することもできます。 + +```js +class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { } +``` + +## クラス定義の再実行 + +クラスを再定義することはできません。再定義しようとすると `SyntaxError` が発生します。 + +Firefox のウェブコンソール（**メニュー** > **ウェブ開発** > **ウェブコンソール**）などでコードを試しているときに、同じ名前のクラス定義を 2 回実行すると、`SyntaxError: redeclaration of let ClassName` が発生します。（この問題については {{Bug(1428672)}} でさらに詳しく説明しています。）Chrome 開発者ツールで同様の操作を行うと、`Uncaught SyntaxError: Identifier 'ClassName' has already been declared at <anonymous>:1:1` のようなメッセージが表示されます。 + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{jsxref("Functions", "関数", "", "true")}} +- {{jsxref("Statements/class", "クラス宣言", "", "true")}} +- {{jsxref("Operators/class", "クラス式", "", "true")}} +- {{jsxref("Classes/Public_class_fields", "パブリッククラスフィールド", "", "true")}} +- {{jsxref("Classes/Private_class_fields", "プライベートクラスフィールド +", "", "true")}} +- {{jsxref("Operators/super", "super")}} +- [ブログ記事: "ES6 In Depth: Classes"](https://hacks.mozilla.org/2015/07/es6-in-depth-classes/) +- [Fields and public/private class properties proposal (stage 3)](https://github.com/tc39/proposal-class-fields) diff --git a/files/ja/web/javascript/reference/classes/private_class_fields/index.html b/files/ja/web/javascript/reference/classes/private_class_fields/index.html deleted file mode 100644 index 6310aa5092..0000000000 --- a/files/ja/web/javascript/reference/classes/private_class_fields/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: プライベートクラスフィールド -slug: Web/JavaScript/Reference/Classes/Private_class_fields -tags: - - Classes - - JavaScript - - Language feature -translation_of: Web/JavaScript/Reference/Classes/Private_class_fields ---- -<div>{{JsSidebar("Classes")}}</div> - -<p>クラスのプロパティはデフォルトで公開されており、クラスの外で調べたり変更したりすることができます。しかし、ハッシュ <code>#</code> 接頭辞を使ってプライベートなクラスフィールドを定義できるようにする<a href="https://github.com/tc39/proposal-class-fields">実験的な提案</a>があります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">class ClassWithPrivateField { - #privateField -} - -class ClassWithPrivateMethod { - #privateMethod() { - return 'hello world' - } -} - -class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD -} -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Private_static_fields" name="Private_static_fields">プライベートスタティックフィールド</h3> - -<p>プライベートフィールドは、クラスのコンストラクタ上でクラス宣言の内部からアクセスできます。</p> - -<p>静的変数は静的メソッドからのみ呼び出せるという制限はまだあります。</p> - -<pre class="brush: js notranslate">class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD - - static publicStaticMethod() { - ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 - return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD - } -} - -console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> - -<p>プライベートスタティックフィールドは、クラスの評価時にクラスのコンストラクタに追加されます。</p> - -<p>プライベートスタティックフィールドには、プライベートスタティックフィールドを定義しているクラスのみが、そのフィールドにアクセスできるという出自制限があります。</p> - -<p>これは、<strong><code>this</code></strong> を使用しているときに予期しない動作をする可能性があります。</p> - -<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD - - static basePublicStaticMethod() { - this.#PRIVATE_STATIC_FIELD = 42 - return this.#PRIVATE_STATIC_FIELD - } -} - -class SubClass extends BaseClassWithPrivateStaticField { } - -let error = null - -try { - SubClass.basePublicStaticMethod() -} catch(e) { error = e} - -console.assert(error instanceof TypeError) -</pre> - -<h3 id="Private_instance_fields" name="Private_instance_fields">プライベートインスタンスフィールド</h3> - -<p>プライベートインスタンスフィールドは <strong># names</strong> (<em>ハッシュネーム</em>) で宣言され、これは <code>#</code> を先頭にした識別子です。この <code>#</code> は名前の一部で、宣言やアクセスにも使われます。</p> - -<p>このカプセル化は言語によって強制されています。範囲外から <code>#</code> の名前を参照するのは構文エラーです。</p> - -<pre class="brush: js notranslate">class ClassWithPrivateField { - #privateField - - constructor() { - this.#privateField = 42 - this.#randomField = 444 // Syntax error - } -} - -const instance = new ClassWithPrivateField() -instance.#privateField === 42 // Syntax error -</pre> - -<h3 id="Private_methods" name="Private_methods">プライベートメソッド</h3> - -<h4 id="Private_static_methods" name="Private_static_methods">プライベートスタティックメソッド</h4> - -<p>プライベートスタティックメソッドは、パブリックと同様に、クラスのインスタンスではなく、クラス自体から呼び出されます。プライベートスタティックフィールドと同様に、クラス宣言の内部からのみアクセス可能です。</p> - -<p>プライベートスタティックメソッドは、ジェネレーター関数、async、非同期ジェネレーター関数、などがあります</p> - -<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { - static #privateStaticMethod() { - return 42 - } - - static publicStaticMethod1() { - return ClassWithPrivateStaticMethod.#privateStaticMethod(); - } - - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } -} - -console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); -console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); -</pre> - -<p><strong><code>this</code></strong> を使用すると、予期しない動作が発生する可能性があります。次の例では、<code>Derived.publicStaticMethod2()</code> を呼び出そうとしたときに、<code>this</code> が <code>派生</code> クラス（<code>Base</code> クラスではない）を参照しており、上で述べたのと同じ "出自制限" を示します。</p> - -<pre class="brush: js notranslate">class Base { - static #privateStaticMethod() { - return 42; - } - static publicStaticMethod1() { - return Base.#privateStaticMethod(); - } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } -} - -class Derived extends Base {} - -console.log(Derived.publicStaticMethod1()); // 42 -console.log(Derived.publicStaticMethod2()); // TypeError -</pre> - -<h4 id="Private_instance_methods" name="Private_instance_methods">プライベートインスタンスメソッド</h4> - -<p>プライベートインスタンスメソッドは、プライベートインスタンスフィールドと同様にアクセスが制限されているクラスインスタンスで利用できるメソッドです。</p> - -<pre class="brush: js notranslate">class ClassWithPrivateMethod { - #privateMethod() { - return 'hello world' - } - - getPrivateMessage() { - return this.#privateMethod() - } -} - -const instance = new ClassWithPrivateMethod() -console.log(instance.getPrivateMessage()) -// expected output: "hello world"</pre> - -<p>プライベートインスタンスメソッドは、ジェネレーター関数、async、非同期ジェネレーター関数のいずれかになります。プライベートなゲッターやセッターも可能です。</p> - -<pre class="brush: js notranslate">class ClassWithPrivateAccessor { - #message - - get #decoratedMessage() { - return `✨${this.#message}✨` - } - set #decoratedMessage(msg) { - this.#message = msg - } - - constructor() { - this.#decoratedMessage = 'hello world' - console.log(this.#decoratedMessage) - } -} - -new ClassWithPrivateAccessor(); -// expected output: "✨hello world✨" -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.classes.private_class_fields")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields">パブリッククラスフィールド </a></li> - <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/classes/private_class_fields/index.md b/files/ja/web/javascript/reference/classes/private_class_fields/index.md new file mode 100644 index 0000000000..dfb19fd13f --- /dev/null +++ b/files/ja/web/javascript/reference/classes/private_class_fields/index.md @@ -0,0 +1,245 @@ +--- +title: プライベートクラス機能 +slug: Web/JavaScript/Reference/Classes/Private_class_fields +tags: + - Classes + - Private + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Classes/Private_class_fields +--- +{{JsSidebar("Classes")}} + +クラスのフィールドは既定で{{ jsxref('Classes/Public_class_fields','公開', '', 1) }}ですが、ハッシュ `#` 接頭辞を使ってプライベートクラスメンバーを生成することができます。これらのクラス機能のプライバシーのカプセル化は、JavaScript 自身によって行われます。 + +## 構文 + +```js +class ClassWithPrivateField { + #privateField; +} + +class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world'; + } +} + +class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD; +} + +class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 'hello world'; + } +} +``` + +## 例 + +### プライベートインスタンスフィールド + +プライベートインスタンスフィールドは **# 名** (*ハッシュ名*と読む) で宣言され、これは `#` の接頭辞が付いた識別子です。この `#` は名前の一部で、宣言やアクセスにも使われます。プライベートフィールドはクラスのコンストラクターー上でクラス定義自身の中から参照できます。フィールド名の宣言や、フィールドの値へのアクセスに使用されます。 + +スコープ外から `#` 名を参照すると構文エラーになります。また、呼び出される前に宣言されていないプライベートフィールドを参照したり、宣言されているフィールドを `delete` で削除しようとしても構文エラーになります。 + +```js example-bad +class ClassWithPrivateField { + #privateField; + + constructor() { + this.#privateField = 42; + delete this.#privateField; // Syntax error + this.#undeclaredField = 444; // Syntax error + } +} + +const instance = new ClassWithPrivateField() +instance.#privateField === 42; // Syntax error +``` + +> **Note:** [`in`](/ja/docs/Web/JavaScript/Reference/Operators/in) 演算子を使用すると、プライベートフィールド (またはプライベートメソッド) が欠けているかどうかをチェックできます。そのプライベートフィールドが存在すれば `true` を返し、そうでなければ `false` を返します。 + +パブリックフィールドのように、プライベートフィールドは基底クラスの構築辞典、またはサブクラス内で `super()` が呼び出される場面で追加されます。 + +```js +class ClassWithPrivateField { + #privateField; + + constructor() { + this.#privateField = 42; + } +} + +class SubClass extends ClassWithPrivateField { + #subPrivateField; + + constructor() { + super(); + this.#subPrivateField = 23; + } +} + +new SubClass(); +// SubClass {#privateField: 42, #subPrivateField: 23} +``` + +### プライベート静的フィールド + +プライベートフィールドは、クラスのコンストラクター上でクラス宣言の内部からアクセスできます。 +静的変数は静的メソッドからのみ呼び出せるという制限はまだあります。 + +```js +class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD; + + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42; + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD; + } +} + +console.log(ClassWithPrivateStaticField.publicStaticMethod() === 42); +// true +``` + +プライベート静的フィールドには制限があります。プライベート静的フィールドを定義したクラスのみが、そのフィールドにアクセスできます。**`this`** を使用すると、予期しない動作をする可能性があります。 +次の例では、`SubClass.basePublicStaticMethod()` を呼び出そうとしたときに、これが (`BaseClassWithPrivateStaticField` クラスではなく) `SubClass` クラスを参照してしまい、 `TypeError` が発生します。 + +```js +class BaseClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD; + + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42; + return this.#PRIVATE_STATIC_FIELD; + } +} + +class SubClass extends BaseClassWithPrivateStaticField { }; + +let error = null; + +try { + SubClass.basePublicStaticMethod() +} catch(e) { error = e}; + +console.log(error instanceof TypeError); +// true +console.log(error); +// TypeError: Cannot write private member #PRIVATE_STATIC_FIELD +// to an object whose class did not declare it +``` + +### プライベートメソッド + +#### プライベートインスタンスメソッド + +プライベートインスタンスメソッドは、プライベートインスタンスフィールドと同様にアクセスが制限されているクラスインスタンスで利用できるメソッドです。 + +```js +class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world'; + } + + getPrivateMessage() { + return this.#privateMethod(); + } +} + +const instance = new ClassWithPrivateMethod(); +console.log(instance.getPrivateMessage()); +// hello world +``` + +プライベートインスタンスメソッドは、ジェネレーター関数、非同期関数、非同期ジェネレーター関数のいずれかになります。プライベートなゲッターやセッターも可能です。 + +```js +class ClassWithPrivateAccessor { + #message; + + get #decoratedMessage() { + return `🎬${this.#message}🛑`; + } + set #decoratedMessage(msg) { + this.#message = msg; + } + + constructor() { + this.#decoratedMessage = 'hello world'; + console.log(this.#decoratedMessage); + } +} + +new ClassWithPrivateAccessor(); +// 🎬hello world🛑 +``` + +#### プライベート静的メソッド + +プライベート静的メソッドは、パブリックと同様に、クラスのインスタンスではなく、クラス自体から呼び出されます。プライベート静的フィールドと同様に、クラス宣言の内部からのみアクセス可能です。 + +```js +class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 42; + } + + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } + + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +console.log(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); +// true +console.log(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); +// true +``` + +プライベート静的メソッドは、ジェネレーター関数、非同期関数、非同期ジェネレーター関数、などがあります。 + +前述のプライベート静的フィールドの制限は、プライベート静的メソッドにも当てはまり、**`this`** を同様に使用すると予期しない動作が発生する可能性があります。次の例では、 `Derived.publicStaticMethod2()` を呼び出そうとすると、これは `Base` クラスではなく `Derived` クラスを参照するため、`TypeError` が発生します。 + +```js +class Base { + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +class Derived extends Base {} + +console.log(Derived.publicStaticMethod1()); +// 42 +console.log(Derived.publicStaticMethod2()); +// TypeError: Cannot read private member #privateStaticMethod +// from an object whose class did not declare it +``` + +## 仕様書 + +{{Specifications("javascript.classes")}} + +## ブラウザーの互換性 + +{{Compat("javascript.classes")}} + +## 関連情報 + +- [プライベートクラス機能での作業](/ja/docs/Web/JavaScript/Guide/Working_With_Private_Class_Features) +- [パブリッククラスフィールド](/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields) +- [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html) +- [Public and private class fields](https://v8.dev/features/class-fields) + v8.dev サイトの記事 diff --git a/files/ja/web/javascript/reference/classes/public_class_fields/index.html b/files/ja/web/javascript/reference/classes/public_class_fields/index.html deleted file mode 100644 index b4dcd87d5c..0000000000 --- a/files/ja/web/javascript/reference/classes/public_class_fields/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: パブリッククラスフィールド -slug: Web/JavaScript/Reference/Classes/Public_class_fields -tags: - - Classes - - JavaScript - - Language feature -translation_of: Web/JavaScript/Reference/Classes/Public_class_fields ---- -<div>{{JsSidebar("Classes")}}</div> - -<div class="note"> -<p><strong>このページは、実験的な機能について説明しています。</strong></p> - -<p>パブリックフィールド宣言とプライベートフィールド宣言の両方は、JavaScript の標準化委員会である <a href="https://tc39.github.io/beta/">TC39</a> で提案された<a href="https://github.com/tc39/proposal-class-fields">実験的な機能(ステージ 3)</a>です。</p> - -<p>ブラウザーのサポートは限られていますが、<a href="https://babeljs.io/">Babel</a> のようなシステムではビルドステップを経て機能を利用することができます。下記の<a href="#ブラウザーの互換性">互換性情報</a>を参照してください。</p> -</div> - -<p>パブリックスタティックフィールドとパブリックインスタンスフィールドは、書き込み可能、列挙可能、設定可能なプロパティです。そのため、プライベートとは異なり、プロトタイプの継承に参加します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">class ClassWithInstanceField { - instanceField = 'instance field' -} - -class ClassWithStaticField { - static staticField = 'static field' -} - -class ClassWithPublicInstanceMethod { - publicMethod() { - return 'hello world' - } -} -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Public_static_fields" name="Public_static_fields">パブリックスタティックフィールド</h3> - -<p>パブリックスタティックフィールドは、すべてのクラスインスタンスを作成するのではなく、クラスごとに一度だけフィールドが存在するようにしたい場合に役立ちます。これは、キャッシュや固定設定、その他インスタンス間で複製する必要のないデータなどに便利です。</p> - -<p>パブリックスタティックフィールドは、<code>static</code> キーワードを使用して宣言されます。これらは、クラスの評価時に{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してコンストラクタに追加され、その後はコンストラクタからアクセスします。</p> - -<pre class="brush: js notranslate">class ClassWithStaticField { - static staticField = 'static field' -} - -console.log(ClassWithStaticField.staticField) -// expected output: "static field" -</pre> - -<p>初期化子のないフィールドは <code>undefined</code> に初期化されます。</p> - -<pre class="brush: js notranslate">class ClassWithStaticField { - static staticField -} - -console.assert(ClassWithStaticField.hasOwnProperty('staticField')) -console.log(ClassWithStaticField.staticField) -// expected output: "undefined"</pre> - -<p>パブリックスタティックフィールドはサブクラスを再初期化しませんが、プロトタイプチェーンを介してアクセスすることができます。</p> - -<pre class="brush: js notranslate">class ClassWithStaticField { - static baseStaticField = 'base field' -} - -class SubClassWithStaticField extends ClassWithStaticField { - static subStaticField = 'sub class field' -} - -console.log(SubClassWithStaticField.subStaticField) -// expected output: "sub class field" - -console.log(SubClassWithStaticField.baseStaticField) -// expected output: "base field"</pre> - -<p>フィールドを初期化する場合、<code>this</code> はクラスのコンストラクタを参照します。また、名前で参照し、スーパークラスのコンストラクタが存在する場合は <code>super</code> を使用してスーパークラスのコンストラクタを取得することもできます (存在する場合)。</p> - -<pre class="brush: js notranslate">class ClassWithStaticField { - static baseStaticField = 'base static field' - static anotherBaseStaticField = this.baseStaticField - - static baseStaticMethod() { return 'base static method output' } -} - -class SubClassWithStaticField extends ClassWithStaticField { - static subStaticField = super.baseStaticMethod() -} - -console.log(ClassWithStaticField.anotherBaseStaticField) -// expected output: "base static field" - -console.log(SubClassWithStaticField.subStaticField) -// expected output: "base static method output" -</pre> - -<h3 id="Public_instance_fields" name="Public_instance_fields">パブリックインスタンスフィールド</h3> - -<p>パブリックインスタンスフィールドは、作成されたクラスのすべてのインスタンスに存在します。パブリックフィールドを宣言することで、フィールドが常に存在していることを確認でき、クラスの定義がより自己文書化されます。</p> - -<p>パブリック インスタンスフィールドは、ベースクラスの構築時（コンストラクタ本体が実行される前）、またはサブクラスの <code>super()</code> が返された直後のいずれかに {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} で追加されます。</p> - -<pre class="brush: js notranslate">class ClassWithInstanceField { - instanceField = 'instance field' -} - -const instance = new ClassWithInstanceField() -console.log(instance.instanceField) -// expected output: "instance field"</pre> - -<p>初期化子のないフィールドは <code>undefined</code> に初期化されます。</p> - -<pre class="brush: js notranslate">class ClassWithInstanceField { - instanceField -} - -const instance = new ClassWithInstanceField() -console.assert(instance.hasOwnProperty('instanceField')) -console.log(instance.instanceField) -// expected output: "undefined"</pre> - -<p>プロパティと同様に、フィールド名を計算することができます。</p> - -<pre class="brush: js notranslate">const PREFIX = 'prefix' - -class ClassWithComputedFieldName { - [`${PREFIX}Field`] = 'prefixed field' -} - -const instance = new ClassWithComputedFieldName() -console.log(instance.prefixField) -// expected output: "prefixed field"</pre> - -<p>フィールドを初期化する場合、<code>this</code> は構築中のクラスインスタンスを参照します。パブリックインスタンスメソッドと同じように、サブクラスにいる場合は <code>super</code> を使って superclass プロトタイプにアクセスできます。</p> - -<pre class="brush: js notranslate">class ClassWithInstanceField { - baseInstanceField = 'base field' - anotherBaseInstanceField = this.baseInstanceField - baseInstanceMethod() { return 'base method output' } -} - -class SubClassWithInstanceField extends ClassWithInstanceField { - subInstanceField = super.baseInstanceMethod() -} - -const base = new ClassWithInstanceField() -const sub = new SubClassWithInstanceField() - -console.log(base.anotherBaseInstanceField) -// expected output: "base field" - -console.log(sub.subInstanceField) -// expected output: "base method output"</pre> - -<h3 id="Public_methods" name="Public_methods">パブリックメソッド</h3> - -<h4 id="Public_static_methods" name="Public_static_methods">パブリックスタティックメソッド</h4> - -<p><code><strong>static</strong></code> キーワードは、クラスのスタティックメソッドを定義します。スタティックメソッドは、クラスのインスタンスでは呼び出されません。代わりに、クラス自体から呼び出されます。これらは、オブジェクトを作成したり、クローンを作成したりするユーティリティ関数であることが多いです。</p> - -<pre class="brush: js notranslate">class ClassWithStaticMethod { - static staticMethod() { - return 'static method has been called.'; - } -} - -console.log(ClassWithStaticMethod.staticMethod()); -// expected output: "static method has been called."</pre> - -<p>スタティックメソッドは、クラスの評価時に {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してクラスのコンストラクタに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。</p> - -<h4 id="Public_instance_methods" name="Public_instance_methods">パブリックインスタンスメソッド</h4> - -<p>パブリックインスタンスメソッドはその名の通り、クラスインスタンスで利用できるメソッドです。</p> - -<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod { - publicMethod() { - return 'hello world' - } -} - -const instance = new ClassWithPublicInstanceMethod() -console.log(instance.publicMethod()) -// expected output: "hello world"</pre> - -<p>パブリックインスタンスメソッドは、{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用して、クラスの評価時にクラスプロトタイプに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。</p> - -<p>ジェネレーター関数、async、非同期ジェネレーター関数を利用することができます。</p> - -<pre class="brush: js notranslate">class ClassWithFancyMethods { - *generatorMethod() { } - async asyncMethod() { } - async *asyncGeneratorMethod() { } -}</pre> - -<p>インスタンスメソッドの中では、<code>this</code> はインスタンス自体を指します。サブクラスでは、<code>super</code> を使用してスーパークラスのプロトタイプにアクセスし、スーパークラスからメソッドを呼び出すことができます。</p> - -<pre class="brush: js notranslate">class BaseClass { - msg = 'hello world' - basePublicMethod() { - return this.msg - } -} - -class SubClass extends BaseClass { - subPublicMethod() { - return super.basePublicMethod() - } -} - -const instance = new SubClass() -console.log(instance.subPublicMethod()) -// expected output: "hello world" -</pre> - -<p>ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。<a href="/ja/docs/Web/JavaScript/Reference/Functions/get">get</a> および <a href="/ja/docs/Web/JavaScript/Reference/Functions/set">set</a> 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。</p> - -<pre class="brush: js notranslate">class ClassWithGetSet { - #msg = 'hello world' - get msg() { - return this.#msg - } - set msg(x) { - this.#msg = `hello ${x}` - } -} - -const instance = new ClassWithGetSet() -console.log(instance.msg) -// expected output: "hello world" - -instance.msg = 'cake' -console.log(instance.msg) -// expected output: "hello cake" -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.classes.public_class_fields")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/classes/public_class_fields/index.md b/files/ja/web/javascript/reference/classes/public_class_fields/index.md new file mode 100644 index 0000000000..5ab726f8d9 --- /dev/null +++ b/files/ja/web/javascript/reference/classes/public_class_fields/index.md @@ -0,0 +1,269 @@ +--- +title: パブリッククラスフィールド +slug: Web/JavaScript/Reference/Classes/Public_class_fields +tags: + - Classes + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +--- +{{JsSidebar("Classes")}} + +パブリックフィールドは、静的なものもインスタンスのものも書き込み可能、列挙可能、構成可能です。そのため、プライベートなものとは異なり、プロトタイプの継承に参加します。 + +## 構文 + +```js +class ClassWithInstanceField { + instanceField = 'instance field' +} + +class ClassWithStaticField { + static staticField = 'static field' +} + +class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world' + } +} +``` + +## 例 + +### パブリック静的フィールド + +パブリック静的フィールドは、フィールドがすべてのクラスインスタンスではなく、クラスごとに一つだけ存在するようにしたい場合に役立ちます。これは、キャッシュや固定設定、その他のインスタンス間で複製する必要のないデータなどに便利です。 + +パブリック静的フィールドは、`static` キーワードを使用して宣言されます。これらは、クラスの評価時に{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してコンストラクターに追加され、その後はコンストラクターからアクセスします。 + +```js +class ClassWithStaticField { + static staticField = 'static field' +} + +console.log(ClassWithStaticField.staticField) +// 期待される結果: "static field" +``` + +初期化子のないフィールドは `undefined` に初期化されます。 + +```js +class ClassWithStaticField { + static staticField +} + +console.assert(ClassWithStaticField.hasOwnProperty('staticField')) +console.log(ClassWithStaticField.staticField) +// 期待される結果: "undefined" +``` + +パブリック静的フィールドはサブクラスでは再初期化されませんが、プロトタイプチェーンを介してアクセスすることができます。 + +```js +class ClassWithStaticField { + static baseStaticField = 'base field' +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = 'sub class field' +} + +console.log(SubClassWithStaticField.subStaticField) +// 期待される結果: "sub class field" + +console.log(SubClassWithStaticField.baseStaticField) +// 期待される結果: "base field" +``` + +フィールドを初期化するとき、`this` はそのクラスのコンストラクターを参照します。名前で参照することもできますし、`super` を使用するとスーパークラスのコンストラクターを (存在する場合は) 取得することもできます。 + +```js +class ClassWithStaticField { + static baseStaticField = 'base static field' + static anotherBaseStaticField = this.baseStaticField + + static baseStaticMethod() { return 'base static method output' } +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = super.baseStaticMethod() +} + +console.log(ClassWithStaticField.anotherBaseStaticField) +// 期待される結果: "base static field" + +console.log(SubClassWithStaticField.subStaticField) +// 期待される結果: "base static method output" +``` + +### パブリックインスタンスフィールド + +パブリックインスタンスフィールドは、作成されたクラスのすべてのインスタンスに存在します。パブリックフィールドを宣言することで、フィールドが常に存在していることを確認でき、クラス定義がより自己文書化されます。 + +パブリックインスタンスフィールドは、基底クラスの構築時 (コンストラクター本体が実行される前)、またはサブクラスの `super()` が返された直後のいずれかに {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} で追加されます。 + +```js +class ClassWithInstanceField { + instanceField = 'instance field' +} + +const instance = new ClassWithInstanceField() +console.log(instance.instanceField) +// 期待される結果: "instance field" +``` + +初期化子のないフィールドは `undefined` に初期化されます。 + +```js +class ClassWithInstanceField { + instanceField +} + +const instance = new ClassWithInstanceField() +console.assert(instance.hasOwnProperty('instanceField')) +console.log(instance.instanceField) +// 期待される結果: "undefined" +``` + +プロパティと同様に、フィールド名を計算することができます。 + +```js +const PREFIX = 'prefix' + +class ClassWithComputedFieldName { + [`${PREFIX}Field`] = 'prefixed field' +} + +const instance = new ClassWithComputedFieldName() +console.log(instance.prefixField) +// 期待される結果: "prefixed field" +``` + +フィールドを初期化する場合、`this` は構築中のクラスインスタンスを参照します。パブリックインスタンスメソッドと同じように、サブクラスにいる場合は `super` を使ってスーパークラスのプロトタイプにアクセスできます。 + +```js +class ClassWithInstanceField { + baseInstanceField = 'base field' + anotherBaseInstanceField = this.baseInstanceField + baseInstanceMethod() { return 'base method output' } +} + +class SubClassWithInstanceField extends ClassWithInstanceField { + subInstanceField = super.baseInstanceMethod() +} + +const base = new ClassWithInstanceField() +const sub = new SubClassWithInstanceField() + +console.log(base.anotherBaseInstanceField) +// 期待される結果: "base field" + +console.log(sub.subInstanceField) +// 期待される結果: "base method output" +``` + +### パブリックメソッド + +#### パブリック静的メソッド + +**`static`** キーワードで、クラスの静的メソッドを定義します。静的メソッドは、クラスのインスタンスでは呼び出されません。代わりに、クラス自体から呼び出されます。これらの多くは、オブジェクトを作成したり、クローンを作成したりするようなユーティリティ関数です。 + +```js +class ClassWithStaticMethod { + static staticMethod() { + return 'static method has been called.'; + } +} + +console.log(ClassWithStaticMethod.staticMethod()); +// 期待される結果: "static method has been called." +``` + +静的メソッドは、クラスの評価時に {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用してクラスのコンストラクターに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。 + +#### パブリックインスタンスメソッド + +パブリックインスタンスメソッドはその名の通り、クラスインスタンスで利用できるメソッドです。 + +```js +class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world' + } +} + +const instance = new ClassWithPublicInstanceMethod() +console.log(instance.publicMethod()) +// 期待される結果: "hello world" +``` + +パブリックインスタンスメソッドは、{{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} を使用して、クラスの評価時にクラスプロトタイプに追加されます。これらのメソッドは書き込み可能、列挙不可、設定可能です。 + +ジェネレーター関数、非同期関数、非同期ジェネレーター関数を利用することができます。 + +```js +class ClassWithFancyMethods { + *generatorMethod() { } + async asyncMethod() { } + async *asyncGeneratorMethod() { } +} +``` + +インスタンスメソッドの中では、`this` はインスタンス自体を指します。サブクラスでは、`super` を使用してスーパークラスのプロトタイプにアクセスし、そのスーパークラスからメソッドを呼び出すことができます。 + +```js +class BaseClass { + msg = 'hello world' + basePublicMethod() { + return this.msg + } +} + +class SubClass extends BaseClass { + subPublicMethod() { + return super.basePublicMethod() + } +} + +const instance = new SubClass() +console.log(instance.subPublicMethod()) +// 期待される結果: "hello world" +``` + +ゲッターとセッターは、クラスのプロパティにバインドする特別なメソッドで、そのプロパティがアクセスされたり設定されたりしたときに呼び出されます。[get](/ja/docs/Web/JavaScript/Reference/Functions/get) および [set](/ja/docs/Web/JavaScript/Reference/Functions/set) 構文を使用して、パブリックインスタンスのゲッターまたはセッターを宣言します。 + +```js +class ClassWithGetSet { + #msg = 'hello world' + get msg() { + return this.#msg + } + set msg(x) { + this.#msg = `hello ${x}` + } +} + +const instance = new ClassWithGetSet() +console.log(instance.msg) +// 期待される結果: "hello world" + +instance.msg = 'cake' +console.log(instance.msg) +// 期待される結果: "hello cake" +``` + +## 仕様書 + +{{Specifications("javascript.classes")}} + +## ブラウザーの互換性 + +{{Compat("javascript.classes")}} + +## 関連情報 + +- [The + Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html) +- [Public and private class fields](https://v8.dev/features/class-fields) + v8.dev site の記事 diff --git a/files/ja/web/javascript/reference/functions/arguments/callee/index.html b/files/ja/web/javascript/reference/functions/arguments/callee/index.html index 57ce3fcab0..ab85d00187 100644 --- a/files/ja/web/javascript/reference/functions/arguments/callee/index.html +++ b/files/ja/web/javascript/reference/functions/arguments/callee/index.html @@ -47,7 +47,7 @@ translation_of: Web/JavaScript/Reference/Functions/arguments/callee return !(n > 1) ? 1 : arguments.callee(n - 1) * n; });</pre> -<p>しかし、これは実際には本当に悪い解決法でした。これは (他の <code>arguments</code>、<code>callee</code>、<code>caller</code> の問題と組み合わさって)、一般的ば場合に、インライン化と末尾再帰が不可能になるからです (特定のケースではトレースなどを通じて実現できますが、最高のコードでも、不要な検査が入るために最適ではありません)。他の大きな問題として、再帰呼び出しにおいては <code>this</code> の値が別のものになるというものがあります。例を示します。</p> +<p>しかし、これは実際には本当に悪い解決法でした。これは (他の <code>arguments</code>、<code>callee</code>、<code>caller</code> の問題と組み合わさって)、一般的な場合に、インライン化と末尾再帰が不可能になるからです (特定のケースではトレースなどを通じて実現できますが、最高のコードでも、不要な検査が入るために最適ではありません)。他の大きな問題として、再帰呼び出しにおいては <code>this</code> の値が別のものになるというものがあります。例を示します。</p> <pre class="brush: js">var global = this; diff --git a/files/ja/web/javascript/reference/functions/get/index.html b/files/ja/web/javascript/reference/functions/get/index.html deleted file mode 100644 index d521b6b898..0000000000 --- a/files/ja/web/javascript/reference/functions/get/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: ゲッター -slug: Web/JavaScript/Reference/Functions/get -tags: - - ECMAScript 2015 - - ECMAScript 5 - - Functions - - JavaScript - - Language feature - - 言語機能 - - 関数 -translation_of: Web/JavaScript/Reference/Functions/get ---- -<div>{{jsSidebar("Functions")}}</div> - -<p><strong><code>get</code></strong> 構文は、オブジェクトのプロパティを関数に結びつけ、プロパティが参照された時に関数が呼び出されるようにします。</p> - -<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">{get <var>prop</var>() { ... } } -{get [<var>expression</var>]() { ... } }</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>prop</var></code></dt> - <dd>与えられた関数に結び付けられるプロパティの名前</dd> - <dt><code><var>expression</var></code></dt> - <dd>ECMAScript 6 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>時として、動的に計算した値を返すプロパティにアクセスを許可したほうが望ましい場合や、明示的なメソッドを呼び出すことなく内部変数に状態を反映させたい場合があります。 JavaScript では、<em>ゲッター</em>を使ってこれを行うことが可能です。</p> - -<p>プロパティに結び付けられたゲッターと、実際に値を持つプロパティを同時に持つことはできませんが、ゲッターとセッターを組み合わせて使用し、一種の擬似プロパティを作成することはできます。</p> - -<p><code>get</code> 構文を使用する際の注意事項:</p> - -<ul> - <li>数値または文字列による識別子を持つことができます。</li> - <li>パラメータの数は 0 でなければなりません (詳しくは <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> をご覧ください)。</li> - <li>1つのオブジェクトリテラル中に、同じプロパティに対する別の <code>get</code> またはデータの割り当てが現れてはいけません (<code>{ get x() { }, get x() { } }</code> や <code>{ x: ..., get x() { } }</code> は禁止されています)。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Defining_a_getter_on_new_objects_in_object_initializers" name="Defining_a_getter_on_new_objects_in_object_initializers">オブジェクト初期化時における新しいオブジェクトのゲッターの定義</h3> - -<p>以下の例では、オブジェクト <code>obj</code> の擬似プロパティとして、 <code>log</code> 内の最後の配列アイテムを返す <code>latest</code> プロパティを作成します。</p> - -<pre class="brush: js">const obj = { - log: ['example','test'], - get latest() { - if (this.log.length === 0) return undefined; - return this.log[this.log.length - 1]; - } -} -console.log(obj.latest); // "test" -</pre> - -<p><code>latest</code> に値を代入しようとしても、変更はされないことに注意して下さい。</p> - -<h3 id="Deleting_a_getter_using_the_delete_operator" name="Deleting_a_getter_using_the_delete_operator"><code>delete</code> 演算子によるゲッターの削除</h3> - -<p>ゲッターを削除したい場合は、 {{jsxref("Operators/delete", "delete")}} を使用します。</p> - -<pre class="brush: js">delete <var>obj</var>.latest; -</pre> - -<h3 id="既存のオブジェクトへの_defineProperty_を使用したゲッターの定義">既存のオブジェクトへの <code>defineProperty</code> を使用したゲッターの定義</h3> - -<p>任意のタイミングで既存のオブジェクトにゲッターを追加するには、 {{jsxref("Object.defineProperty()")}} を使用します。</p> - -<pre class="brush: js">const o = {a: 0}; - -Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } }); - -console.log(o.b) // getter を実行。a + 1 を算出する (結果は 1)</pre> - -<h3 id="Using_a_computed_property_name" name="Using_a_computed_property_name">算出されたプロパティ名の使用</h3> - -<pre class="brush: js">const expr = 'foo'; - -const obj = { - get [expr]() { return 'bar'; } -}; - -console.log(obj.foo); // "bar"</pre> - -<h3 id="Smart_self-overwriting_lazy_getters" name="Smart_self-overwriting_lazy_getters">スマート / 自己書き換え / 怠惰なゲッター</h3> - -<p>ゲッターはオブジェクトのプロパティを<em>定義</em>する手段を提供しますが、アクセスされるまでプロパティの値を<em>計算</em>しません。ゲッターは値を計算するコストを、値が必要になるまで先送りします。値が必要でなければ、そのコストを負担しません。</p> - -<p>プロパティの値の計算を先送りしたり後のアクセスのためにキャッシュするための付加的な最適化技術が、<strong>スマート (または<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96">メモ化</a>) ゲッター</strong>です。初めてゲッターにアクセスされたときに、値を計算してキャッシュします。以降のアクセスでは再計算せずに、キャッシュした値を返します。これは次のような状況で役に立ちます。</p> - -<ul> - <li>プロパティの値の計算コストが高い場合 (大量の RAM や CPU 時間を使用する、ワーカースレッドを生成する、リモートのファイルを読み込むなど)。</li> - <li>値がすぐに必要ではない場合。値を後で使用する、あるいはまったく使用しない場合がある状況。</li> - <li>何度もアクセスされる値で、値が変更されないため再計算の必要がない、あるいは再計算すべきではない場合。</li> -</ul> - -<div class="note"> -<p>値が変わると見込まれるプロパティで、怠惰なゲッターを使用してはいけません。このようなゲッターは値を再計算しないためです。</p> -</div> - -<p>以下の例では、オブジェクトが自身のプロパティとしてゲッターを持っています。プロパティを取得すると、プロパティはオブジェクトから削除された後に再追加されますが、このとき暗黙的にデータプロパティとして追加されます。最終的に、値が返されます。</p> - -<pre class="brush: js">get notifier() { - delete this.notifier; - return this.notifier = document.getElementById('bookmarked-notification-anchor'); -},</pre> - -<p>Firefox のコードでは、 <code>XPCOMUtils.jsm</code> コードモジュールもご覧ください。これは <code><a href="/ja/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> 関数を定義しています。</p> - -<h3 id="get_vs._defineProperty" name="get_vs._defineProperty"><code>get</code> と <code>defineProperty</code></h3> - -<p><code>get</code> キーワードと {{jsxref("Object.defineProperty()")}} の使用は似た結果になりますが、 {{jsxref("classes")}} 上で使用する場合は微妙な違いがあります。</p> - -<p><code>get</code> を使用した場合は、プロパティはインスタンスのプロトタイプに定義されるのに対し、 {{jsxref("Object.defineProperty()")}} を使用した場合は、プロパティは適用されたインスタンスに定義されます。</p> - -<pre class="brush: js">class Example { - get hello() { - return 'world'; - } -} - -const obj = new Example(); -console.log(obj.hello); -// "world" - -console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); -// undefined - -console.log( - Object.getOwnPropertyDescriptor( - Object.getPrototypeOf(obj), 'hello' - ) -); -// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.functions.get")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> - <li>{{jsxref("Operators/delete", "delete")}}</li> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> - <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">ゲッターとセッターの定義</a> (JavaScript ガイド)</li> -</ul> diff --git a/files/ja/web/javascript/reference/functions/get/index.md b/files/ja/web/javascript/reference/functions/get/index.md new file mode 100644 index 0000000000..d2453d83ab --- /dev/null +++ b/files/ja/web/javascript/reference/functions/get/index.md @@ -0,0 +1,190 @@ +--- +title: ゲッター +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript 2015 + - ECMAScript 5 + - 関数 + - JavaScript + - 言語機能 + - リファレンス +browser-compat: javascript.functions.get +translation_of: Web/JavaScript/Reference/Functions/get +--- +{{jsSidebar("Functions")}} + +**`get`** 構文は、オブジェクトのプロパティを関数に結びつけ、プロパティが参照された時に関数が呼び出されるようにします。 + +{{EmbedInteractiveExample("pages/js/functions-getter.html")}} + +## 構文 + +```js +{get prop() { ... } } +{get [expression]() { ... } } +``` + +### 引数 + +- `prop` + - : 与えられた関数に結び付けられるプロパティの名前 +- `expression` + - : ECMAScript 2015 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。 + +## 解説 + +時として、動的に計算した値を返すプロパティにアクセスを許可したほうが望ましい場合や、明示的なメソッドを呼び出すことなく内部変数に状態を反映させたい場合があります。 JavaScript では、*ゲッター*を使ってこれを行うことが可能です。 + +プロパティに結び付けられたゲッターと、実際に値を持つプロパティを同時に持つことはできませんが、ゲッターとセッターを組み合わせて使用し、一種の擬似プロパティを作成することはできます。 + +`get` 構文を使用する場合は、以下のことに注意してください。 + +- 数値または文字列による識別子を持つことができます。 +- 引数の数は 0 でなければなりません (詳しくは [Incompatible ES5 + change: literal getter and setter functions must now have exactly zero or one + arguments](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) をご覧ください)。 +- 1 つのオブジェクトリテラル中に、別の `get` が現れてはいけません。例えば次のようなことはできません。 + ```js example-bad + { + get x() { }, get x() { } + } + ``` +- データ項目と同じ名前のプロパティが出現してはいけません。例えば次のようなことはできません。 + ```js example-bad + { + x: ..., get x() { } + } + ``` + +## 例 + +### オブジェクト初期化子における新しいオブジェクトのゲッターの定義 + +以下の例では `latest` 擬似プロパティをオブジェクト `obj` 作成し、 `log` 内の最後の配列アイテムを返します。 + +```js +const obj = { + log: ['example','test'], + get latest() { + if (this.log.length === 0) return undefined; + return this.log[this.log.length - 1]; + } +} +console.log(obj.latest); // "test" +``` + +`latest` に値を代入しようとしても、変更はされないことに注意して下さい。 + +### `delete` 演算子によるゲッターの削除 + +ゲッターを削除したい場合は、 {{jsxref("Operators/delete", "delete")}} を使用してください。 + +```js +delete obj.latest; +``` + +### 既存のオブジェクトへの `defineProperty` を使用したゲッターの定義 + +既存のオブジェクトに任意のタイミングでゲッターを追加するには、 {{jsxref("Object.defineProperty()")}} を使用します。 + +```js +const o = {a: 0}; + +Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } }); + +console.log(o.b) // getter を実行。a + 1 を算出する (結果は 1) +``` + +### 算出されたプロパティ名の使用 + +```js +const expr = 'foo'; + +const obj = { + get [expr]() { return 'bar'; } +}; + +console.log(obj.foo); // "bar" +``` + +### 静的ゲッターの定義 + +```js +class MyConstants { + static get foo() { + return 'foo'; + } +} + +console.log(MyConstants.foo); // 'foo' +MyConstants.foo = 'bar'; +console.log(MyConstants.foo); // 'foo' です。静的ゲッターの値は変更できません +``` + +### スマート / 自己書き換え / 遅延ゲッター + +ゲッターはオブジェクトのプロパティを*定義*する手段を提供しますが、アクセスされるまでプロパティの値を*計算*しません。ゲッターは値を計算するコストを、値が必要になるまで先送りします。値が必要でなければ、そのコストを負担しません。 + +プロパティの値の計算を先送りしたり後のアクセスのためにキャッシュするための付加的な最適化技術が、**スマート (または「[メモ化](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96)」)ゲッター**です。初めてゲッターにアクセスされたときに、値を計算してキャッシュします。以降のアクセスでは再計算せずに、キャッシュした値を返します。これは次のような状況で役に立ちます。 + +- プロパティの値の計算コストが高い場合 (大量の RAM や CPU 時間を使用する、ワーカースレッドを生成する、リモートのファイルを読み込むなど)。 +- 値がすぐに必要ではない場合。値を後で使用する、あるいはまったく使用しない場合がある状況。 +- 何度もアクセスされる値で、値が変更されないため再計算の必要がない、あるいは再計算すべきではない場合。 + +> **Note:** 値が変わると見込まれるプロパティで、遅延ゲッターを使用してはいけません。ゲッターが遅延である場合、値を再計算しないためです。 +> +> なお、ゲッターの本質は「遅延」や「メモ化」ではありません。この動作を望む場合、この技術を実装する必要があります。 + +以下の例では、オブジェクトが自身のプロパティとしてゲッターを持っています。プロパティを取得すると、プロパティはオブジェクトから削除された後に再追加されますが、このとき暗黙的にデータプロパティとして追加されます。最終的に、値が返されます。 + +```js +get notifier() { + delete this.notifier; + return this.notifier = document.getElementById('bookmarked-notification-anchor'); +}, +``` + +### `get` と `defineProperty` + +`get` キーワードと {{jsxref("Object.defineProperty()")}} の使用は似た結果になりますが、 {{jsxref("classes")}} 上で使用する場合は微妙な違いがあります。 + +`get` を使用した場合は、プロパティはインスタンスのプロトタイプに定義されるのに対し、 {{jsxref("Object.defineProperty()")}} を使用した場合は、プロパティは適用されたインスタンスに定義されます。 + +```js +class Example { + get hello() { + return 'world'; + } +} + +const obj = new Example(); +console.log(obj.hello); +// "world" + +console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); +// undefined + +console.log( + Object.getOwnPropertyDescriptor( + Object.getPrototypeOf(obj), 'hello' + ) +); +// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [セッター](/ja/docs/Web/JavaScript/Reference/Functions/set) +- {{jsxref("Operators/delete", "delete")}} +- {{jsxref("Object.defineProperty()")}} +- {{jsxref("Object/__defineGetter__", "__defineGetter__")}} +- {{jsxref("Object/__defineSetter__", "__defineSetter__")}} +- [ゲッターとセッターの定義](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters) (JavaScript ガイド) diff --git a/files/ja/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.html b/files/ja/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.html deleted file mode 100644 index f98f2de7c4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: AggregateError() constructor -slug: Web/JavaScript/Reference/Global_Objects/AggregateError/AggregateError -tags: - - Constructor - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError/AggregateError ---- -<div>{{JSRef}}</div> - -<p><code><strong>AggregateError()</strong></code> コンストラクタは、単一のエラーにラップする必要があるいくつかのエラーに対してエラーを作成します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">new AggregateError(errors[, message])</pre> - -<h3 id="値">値</h3> - -<dl> - <dt><code>errors</code></dt> - <dd>エラーの反復可能であり、実際には {{JSxRef("Error")}} インスタンスではない場合があります。</dd> - <dt><code>message</code>{{Optional_Inline}}</dt> - <dd>集計エラーのオプションのヒューマンリーダブルの説明。</dd> -</dl> - -<h2 id="例">例</h2> - -<h3 id="AggregateError_の作成"><code>AggregateError</code> の作成</h3> - -<pre class="brush: js; notranslate">try { - throw new AggregateError([ - new Error("some error"), - ], 'Hello'); -} catch (e) { - console.log(e instanceof AggregateError); // true - console.log(e.message); // "Hello" - console.log(e.name); // "AggregateError" - console.log(e.errors); // [ Error: "some error" ] -}</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Promise.any', '#sec-aggregate-error-constructor', 'AggregateError()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.AggregateError.AggregateError")}}</p> -</div> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Promise.any")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md b/files/ja/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md new file mode 100644 index 0000000000..8fad63f0c8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/aggregateerror/aggregateerror/index.md @@ -0,0 +1,58 @@ +--- +title: AggregateError() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/AggregateError/AggregateError +tags: + - コンストラクター + - JavaScript + - リファレンス + - ポリフィル +browser-compat: javascript.builtins.AggregateError.AggregateError +translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError/AggregateError +--- +{{JSRef}} + +**`AggregateError()`** コンストラクターは、単一のエラーにラップする必要があるいくつかのエラーに対してエラーを作成します。 + +## 構文 + +```js +new AggregateError(errors) +new AggregateError(errors, message) +``` + +### 引数 + +- `errors` + - : エラーの反復可能オブジェクトであり、実際には {{JSxRef("Error")}} インスタンスではない場合があります。 +- `message`{{Optional_Inline}} + - : オプションで、統合エラーの人間可読な説明です。 + +## 例 + +### `AggregateError` の作成 + +```js +try { + throw new AggregateError([ + new Error("some error"), + ], 'Hello'); +} catch (e) { + console.log(e instanceof AggregateError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "AggregateError" + console.log(e.errors); // [ Error: "some error" ] +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `AggregateError` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-promise) で利用できます +- {{jsxref("Promise.any")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/includes/index.html b/files/ja/web/javascript/reference/global_objects/array/includes/index.html deleted file mode 100644 index b78bb5d20e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/includes/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Array.prototype.includes() -slug: Web/JavaScript/Reference/Global_Objects/Array/includes -tags: - - Array - - JavaScript - - Method - - Prototype - - Reference - - inArray - - in_array - - polyfill - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes ---- -<div>{{JSRef}}</div> - -<p><code><strong>includes()</strong></code> メソッドは、特定の要素が配列に含まれているかどうかを <code>true</code> または <code>false</code> で返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>arr</var>.includes(<var>valueToFind</var>[, <var>fromIndex</var>]) -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>valueToFind</var></code></dt> - <dd> - <p>検索する値です。</p> - - <div class="blockIndicator note"> - <p><strong>メモ:</strong> 文字列や文字を比較するとき、<code>includes()</code> は<em>大文字と小文字を区別します</em>。</p> - </div> - </dd> - <dt><code><var>fromIndex</var></code> {{optional_inline}}</dt> - <dd>この配列内で <code><var>valueToFind</var></code> を探し始める位置です。</dd> - <dd>検索される最初の文字は、<code><var>fromIndex</var></code> が正の値の場合は、<code><var>fromIndex</var></code> で見つかり、<code><var>fromIndex</var></code> が負の数の場合は (<code><var>fromIndex</var></code> の{{interwiki("wikipedia", "絶対値")}}だけ配列の末尾から文字数を戻った位置が検索開始地点となり)、<code><var>fromIndex</var></code> または <code><var>arr</var>.length + fromIndex</code> で見つかります。</dd> - <dd>既定値は 0 です。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>{{jsxref("Boolean")}} で、<code>true</code> は <code><var>valueToFind</var></code> の値が配列内 (または、<code><var>fromIndex</var></code> が指定された場合はそれで示された配列の部分) から見つかった場合です。</p> - -<p>ゼロの値はすべて、符号にかかわらず等しいとみなされます (つまり、<code>-0</code> は <code>0</code> と <code>+0</code> の両方に等しいとみなされます) が、<code>false</code> は <code>0</code> と同じとはみなされ<em>ません</em>。</p> - -<div class="note"> -<p><strong>注:</strong> 技術的に言えば、<code>includes()</code> は <code><a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> アルゴリズムを使用して、指定された要素が見つかったかどうかを確認しています。</p> -</div> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js notranslate">[1, 2, 3].includes(2) // true -[1, 2, 3].includes(4) // false -[1, 2, 3].includes(3, 3) // false -[1, 2, 3].includes(3, -1) // true -[1, 2, NaN].includes(NaN) // true -</pre> - -<h3 id="fromIndex_is_greater_than_or_equal_to_the_array_length" name="fromIndex_is_greater_than_or_equal_to_the_array_length"><code><var>fromIndex</var></code> が配列の長さと同じか大きい場合</h3> - -<p><code><var>fromIndex</var></code> が配列の長さと同じか大きい場合は配列を検索せずに <code>false</code> を返します。</p> - -<pre class="brush: js notranslate">let arr = ['a', 'b', 'c'] - -arr.includes('c', 3) // false -arr.includes('c', 100) // false -</pre> - -<h3 id="Computed_index_is_less_than_0" name="Computed_index_is_less_than_0">計算値のインデックスが 0 より小さい場合</h3> - -<p><code><var>fromIndex</var></code> が負の値である場合、計算値のインデックスは配列内で <code><var>valueToFind</var></code> の円策を開始する位置として使用するよう計算されます。計算値のインデックスが <code>-1 * <var>arr</var>.length</code> 以下の場合は、配列全体が検索されます。</p> - -<pre class="brush: js notranslate">// 配列の長さは 3 -// fromIndex は -100 -// 補正されたインデックスは 3 + (-100) = -97 - -let arr = ['a', 'b', 'c'] - -arr.includes('a', -100) // true -arr.includes('b', -100) // true -arr.includes('c', -100) // true -arr.includes('a', -2) // false -</pre> - -<h3 id="includes_used_as_a_generic_method" name="includes_used_as_a_generic_method">ジェネリックメソッドとして使用される includes()</h3> - -<p><code>includes()</code> メソッドは意図的にジェネリックになっています。<code>this</code> が Array オブジェクトであることは必須ではないので、他の種類のオブジェクト (例えば配列風オブジェクト) にも適用することができます。</p> - -<p>以下の例は、<code>includes()</code> メソッドが関数の <a href="/ja/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> オブジェクトに対して使用される様子を示しています。</p> - -<pre class="brush: js notranslate">(function() { - console.log(Array.prototype.includes.call(arguments, 'a')) // true - console.log(Array.prototype.includes.call(arguments, 'd')) // false -})('a','b','c') </pre> - -<div class="hidden"> -<p>参照記事にポリフィルを追加しないでください。詳細や議論については、<a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a> を参照して下さい。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Array.includes")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("TypedArray.prototype.includes()")}}</li> - <li>{{jsxref("String.prototype.includes()")}}</li> - <li>{{jsxref("Array.prototype.indexOf()")}}</li> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.findIndex()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/array/includes/index.md b/files/ja/web/javascript/reference/global_objects/array/includes/index.md new file mode 100644 index 0000000000..e96597dcd1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/includes/index.md @@ -0,0 +1,120 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - Array + - JavaScript + - メソッド + - プロトタイプ + - リファレンス + - inArray + - in_array + - ポリフィル +browser-compat: javascript.builtins.Array.includes +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +{{JSRef}} + +**`includes()`** メソッドは、特定の要素が配列に含まれているかどうかを `true` または `false` で返します。 + +{{EmbedInteractiveExample("pages/js/array-includes.html")}} + +## 構文 + +```js +includes(searchElement) +includes(searchElement, fromIndex) +``` + +### 引数 + +- `searchElement` + + - : 検索する値です。 + + > **Note:** 文字列や文字を比較する場合、`includes()` は*大文字と小文字を区別します*。 + +- `fromIndex` {{optional_inline}} + + - : `searchElement` の検索を始める配列内の位置です。 + + 検索される最初の要素は、`fromIndex` が正の値の場合は `fromIndex` の位置に、`fromIndex` が負の値の場合は `arr.length + fromIndex` の位置になります (検索を開始する配列の端からの要素数として fromIndex の{{interwiki("wikipedia", "絶対値")}}を使用します)。 + + 既定値は `0` です。 + +### 返値 + +論理型で、`searchElement` の値が配列内 (`fromIndex` が指定されていた場合は、配列のその位置以降の部分) にあった場合は `true` を返します。 + +ゼロの値は符号に関わらず、すべて等しいとみなされます (すなわち、`-0` は `0` とも `+0` 友等しいとみなされます) が、`false` は `0` と同じとはみなされ*ません*。 + +> **Note:** 技術的に言えば、`includes()` は [`sameValueZero`](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality) アルゴリズムを使用して、指定された要素が見つかったかどうかを確認しています。 + +## 例 + +```js +[1, 2, 3].includes(2) // true +[1, 2, 3].includes(4) // false +[1, 2, 3].includes(3, 3) // false +[1, 2, 3].includes(3, -1) // true +[1, 2, NaN].includes(NaN) // true +["1", "2", "3"].includes(3) // false +``` + +### `fromIndex` が配列の長さと同じか大きい場合 + +`fromIndex` が配列の長さと同じか大きい場合は、配列を検索せずに `false` を返します。 + +```js +let arr = ['a', 'b', 'c'] + +arr.includes('c', 3) // false +arr.includes('c', 100) // false +``` + +### 計算された位置が 0 より小さい場合 + +`fromIndex` が負の値である場合、`searchElement` の検索を開始するための配列内の位置として、計算により位置が算出されます。計算された位置が `0` 以下の場合は、配列全体が検索されます。 + +```js +// 配列の長さは 3 +// fromIndex は -100 +// 補正されたインデックスは 3 + (-100) = -97 + +let arr = ['a', 'b', 'c'] + +arr.includes('a', -100) // true +arr.includes('b', -100) // true +arr.includes('c', -100) // true +arr.includes('a', -2) // false +``` + +### ジェネリックメソッドとして使用される includes() + +`includes()` メソッドは意図的にジェネリックになっています。`this` が Array オブジェクトであることは必須ではないので、他の種類のオブジェクト (例えば配列風オブジェクト) にも適用することができます。 + +以下の例は、`includes()` メソッドが関数の [arguments](/ja/docs/Web/JavaScript/Reference/Functions/arguments) オブジェクトに対して使用される様子を示しています。 + +```js +(function() { + console.log(Array.prototype.includes.call(arguments, 'a')) // true + console.log(Array.prototype.includes.call(arguments, 'd')) // false +})('a','b','c') +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Array.prototype.includes` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-array) で利用できます +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("String.prototype.includes()")}} +- {{jsxref("Array.prototype.indexOf()")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.html b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.html deleted file mode 100644 index 4d1055ccab..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Array.prototype.reduceRight() -slug: Web/JavaScript/Reference/Global_Objects/Array/reduceRight -tags: - - Array - - ECMAScript 5 - - JavaScript - - Method - - Prototype - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight ---- -<div>{{JSRef}}</div> - -<p><code><strong>reduceRight()</strong></code> メソッドは、隣り合う 2 つの配列要素に対して (右から左へ) 関数を適用して、単一の値にします。</p> - -<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>arr</var>.reduceRight(<var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]])[, <var>initialValue</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>callback</var></code></dt> - <dd>4 つの引数を取って、配列内の各値に対し実行するコールバック関数 - <dl> - <dt><code><var>accumulator</var></code></dt> - <dd>現在処理されている配列要素の 1 つ前の要素。もしくは、指定されていれば <code><var>initialValue</var></code>。(下記参照)</dd> - <dt><code><var>currentValue</var></code></dt> - <dd>現在処理されている配列要素</dd> - <dt><code><var>index</var></code>{{optional_inline}}</dt> - <dd>現在処理されている配列要素のインデックス</dd> - <dt><code><var>array</var></code>{{optional_inline}}</dt> - <dd><code>reduceRight()</code> によって呼ばれる配列</dd> - </dl> - </dd> - <dt><code><var>initialValue</var></code> {{optional_inline}}</dt> - <dd><code><var>callback</var></code> の最初の呼び出しのときに、最初の実引数として用いるためのオブジェクト。initialValue が渡されなかった際は、配列の最後の要素が適用されます。また、空の配列に対して、初期値なしで呼び出すと <code>TypeError</code> になります。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>畳み込みによって得られた 1 つの値です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>reduceRight</code> は、配列に存在する各要素に対して、<code>callback</code> 関数を一度だけ実行します。配列における穴は対象からはずされ、初期値（あるいは、直前の <code>callback</code> 呼び出し）、現在の要素の値、現在のインデックス、繰り返しが行われる配列の 4 つの引数を受け取ります。</p> - -<p>reduceRight の <code><var>callback</var></code> の呼び出しは、以下のように見えるでしょう。</p> - -<pre class="brush: js notranslate">array.reduceRight(function(accumulator, currentValue, index, array) { - // ... -}); -</pre> - -<p>関数が初めて呼び出されたとき、<code><var>accumulator</var></code> と <code><var>currentValue</var></code> は、2 つの値のいずれかになります。<code>reduceRight</code> の呼び出しで <code><var>initialValue</var></code> が指定された場合、<code><var>accumulator</var></code> は <code><var>initialValue</var></code> と等しくなり、<code><var>currentValue</var></code> は配列の最後の値と等しくなります。<code><var>initialValue</var></code> が指定されなかった場合、<code><var>accumulator</var></code> は配列の最後の値に等しく、<code><var>currentValue</var></code> は最後から 2 番目の値に等しくなります。</p> - -<p>配列が空で、<code><var>initialValue</var></code> が指定されていない場合、{{jsxref("TypeError")}} が投げられます。配列に要素が 1 つしかなく（位置に関係なく）、<code><var>initialValue</var></code> が指定されていない場合、または <code><var>initialValue</var></code> が指定されているが配列が空の場合、<code><var>callback</var></code> を呼び出さずに単独の値が返されます。</p> - -<p>この関数を使用した場合について見てみましょう。</p> - -<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { - return accumulator + currentValue; -}); -</pre> - -<p>コールバックは 4 回呼び出され、各コールの引数と戻り値は以下のようになります。</p> - -<table> - <thead> - <tr> - <th scope="col"><code><var>callback</var></code></th> - <th scope="col"><code><var>accumulator</var></code></th> - <th scope="col"><code><var>currentValue</var></code></th> - <th scope="col"><code><var>index</var></code></th> - <th scope="col"><code><var>array</var></code></th> - <th scope="col">return value</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">初回の呼出し</th> - <td><code>4</code></td> - <td><code>3</code></td> - <td><code>3</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>7</code></td> - </tr> - <tr> - <th scope="row">2 回目の呼出し</th> - <td><code>7</code></td> - <td><code>2</code></td> - <td><code>2</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>9</code></td> - </tr> - <tr> - <th scope="row">3 回目の呼出し</th> - <td><code>9</code></td> - <td><code>1</code></td> - <td><code>1</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>10</code></td> - </tr> - <tr> - <th scope="row">4 回目の呼出し</th> - <td><code>10</code></td> - <td><code>0</code></td> - <td><code>0</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>10</code></td> - </tr> - </tbody> -</table> - -<p><code>reduceRight</code> の返値は、コールバック呼び出しの最後の返値である (<code>10</code>) になります。</p> - -<p><code>initialValue</code> を与えた場合、その結果は以下のようになります。</p> - -<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { - return accumulator + currentValue; -}, 10); -</pre> - -<table> - <thead> - <tr> - <th scope="col"><code><var>callback</var></code></th> - <th scope="col"><code><var>accumulator</var></code></th> - <th scope="col"><code><var>currentValue</var></code></th> - <th scope="col"><code><var>index</var></code></th> - <th scope="col"><code><var>array</var></code></th> - <th scope="col">return value</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">初回の呼出し</th> - <td><code>10</code></td> - <td><code>4</code></td> - <td><code>4</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>14</code></td> - </tr> - <tr> - <th scope="row">2 回目の呼出し</th> - <td><code>14</code></td> - <td><code>3</code></td> - <td><code>3</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>17</code></td> - </tr> - <tr> - <th scope="row">3 回目の呼出し</th> - <td><code>17</code></td> - <td><code>2</code></td> - <td><code>2</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>19</code></td> - </tr> - <tr> - <th scope="row">4 回目の呼出し</th> - <td><code>19</code></td> - <td><code>1</code></td> - <td><code>1</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>20</code></td> - </tr> - <tr> - <th scope="row">5 回目の呼出し</th> - <td><code>20</code></td> - <td><code>0</code></td> - <td><code>0</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>20</code></td> - </tr> - </tbody> -</table> - -<p>この場合の <code>reduceRight</code> の返値は <code>20</code> になります。</p> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p><code>reduceRight</code> は ECMA-262 の第5版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブにはサポートされていない実装でも <code>reduceRight</code> を使用できるようにします。</p> - -<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.22 -// Reference: http://es5.github.io/#x15.4.4.22 -if ('function' !== typeof Array.prototype.reduceRight) { - Array.prototype.reduceRight = function(callback /*, initialValue*/) { - 'use strict'; - if (null === this || 'undefined' === typeof this) { - throw new TypeError('Array.prototype.reduce called on null or undefined'); - } - if ('function' !== typeof callback) { - throw new TypeError(callback + ' is not a function'); - } - var t = Object(this), len = t.length >>> 0, k = len - 1, value; - if (arguments.length >= 2) { - value = arguments[1]; - } else { - while (k >= 0 && !(k in t)) { - k--; - } - if (k < 0) { - throw new TypeError('Reduce of empty array with no initial value'); - } - value = t[k--]; - } - for (; k >= 0; k--) { - if (k in t) { - value = callback(value, t[k], k, t); - } - } - return value; - }; -} -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Sum_up_all_values_within_an_array" name="Sum_up_all_values_within_an_array">配列内のすべての値を合計する</h3> - -<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { - return a + b; -}); -// sum is 6 -</pre> - -<h3 id="Flatten_an_array_of_arrays" name="Flatten_an_array_of_arrays">配列中の配列を平坦化する</h3> - -<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { - return a.concat(b); -}, []); -// flattened is [4, 5, 2, 3, 0, 1] - -</pre> - -<h3 id="Run_a_list_of_asynchronous_functions_with_callbacks_in_series_each_passing_their_results_to_the_next" name="Run_a_list_of_asynchronous_functions_with_callbacks_in_series_each_passing_their_results_to_the_next">一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す</h3> - -<pre class="brush: js notranslate">const waterfall = (...functions) => (callback, ...args) => - functions.reduceRight( - (composition, fn) => (...results) => fn(composition, ...results), - callback - )(...args); - -const randInt = max => Math.floor(Math.random() * max) - -const add5 = (callback, x) => { - setTimeout(callback, randInt(1000), x + 5); -}; -const mult3 = (callback, x) => { - setTimeout(callback, randInt(1000), x * 3); -}; -const sub2 = (callback, x) => { - setTimeout(callback, randInt(1000), x - 2); -}; -const split = (callback, x) => { - setTimeout(callback, randInt(1000), x, x); -}; -const add = (callback, x, y) => { - setTimeout(callback, randInt(1000), x + y); -}; -const div4 = (callback, x) => { - setTimeout(callback, randInt(1000), x / 4); -}; - -const computation = waterfall(add5, mult3, sub2, split, add, div4); -computation(console.log, 5) // -> 14 - -// same as: - -const computation2 = (input, callback) => { - const f6 = x=> div4(callback, x); - const f5 = (x, y) => add(f6, x, y); - const f4 = x => split(f5, x); - const f3 = x => sub2(f4, x); - const f2 = x => mult3(f3, x); - add5(f2, input); -}</pre> - -<h3 id="Difference_between_reduce_and_reduceRight" name="Difference_between_reduce_and_reduceRight"><code>reduce</code> と <code>reduceRight</code> の違い</h3> - -<pre class="brush: js notranslate">var a = ['1', '2', '3', '4', '5']; -var left = a.reduce(function(prev, cur) { return prev + cur; }); -var right = a.reduceRight(function(prev, cur) { return prev + cur; }); - -console.log(left); // "12345" -console.log(right); // "54321"</pre> - -<h3 id="Defining_Composible_Function" name="Defining_Composible_Function">関数合計の定義</h3> - -<p>関数合成のコンセプトはシンプルで、n個の関数を組み合わせたものです。これは右から左へと流れ、最後の関数の出力を使用して各関数を呼び出します。</p> - -<pre class="brush: js notranslate">/** - * Function Composition is way in which result of one function can - * be passed to another and so on. - * - * h(x) = f(g(x)) - * - * Function execution happens right to left - * - * https://en.wikipedia.org/wiki/Function_composition - */ - -const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) - -// Increment passed number -const inc = (n) => n + 1 - -// Doubles the passed value -const double = (n) => n * 2 - -// using composition function -console.log(compose(double, inc)(2)); // 6 - -// using composition function -console.log(compose(inc, double)(2)); // 5 -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Array.prototype.reduce()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md new file mode 100644 index 0000000000..04be78ad80 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md @@ -0,0 +1,369 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/reduceRight +tags: + - Array + - ECMAScript 5 + - JavaScript + - メソッド + - プロトタイプ + - ポリフィル +browser-compat: javascript.builtins.Array.reduceRight +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +{{JSRef}} + +**`reduceRight()`** メソッドは、アキュームレーターと配列のそれぞれの値に対して (右から左へ) 関数を適用して、単一の値にします。 + +{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}} + +左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。 + +## 構文 + +```js +// アロー関数 +reduceRight((accumulator, currentValue) => { ... } ) +reduceRight((accumulator, currentValue, index) => { ... } ) +reduceRight((accumulator, currentValue, index, array) => { ... } ) +reduceRight((accumulator, currentValue, index, array) => { ... }, initialValue) + +// コールバック関数 +reduceRight(callbackFn) +reduceRight(callbackFn, initialValue) + +// コールバック畳み込み関数 +reduceRight(function callbackFn(accumulator, currentValue) { ... }) +reduceRight(function callbackFn(accumulator, currentValue, index) { ... }) +reduceRight(function callbackFn(accumulator, currentValue, index, array){ ... }) +reduceRight(function callbackFn(accumulator, currentValue, index, array) { ... }, initialValue) +``` + +### 引数 + +- `callbackFn` + - : 配列内のそれぞれの値に対して実行するコールバック関数であり、 4 つの引数を取ります。 + - `accumulator` + - : コールバック関数の前回の呼び出しで返された値、もしくは、指定されていれば `initialValue` です。(下記参照) + - `currentValue` + - : 配列内で現在処理中の要素です。 + - `index`{{optional_inline}} + - : 配列内で現在処理中の要素の位置です。 + - `array`{{optional_inline}} + - : `reduceRight()` が呼び出された配列です。 + +- `initialValue` {{optional_inline}} + - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 reduce または reduceRight を空の配列に対して初期値なしで呼び出すと `TypeError` になります。 + +### 返値 + +畳み込みによって得られた値です。 + +## 解説 + +`reduceRight` は、配列内に存在するそれぞれの要素に対してコールバック関数を一度ずつ実行します。配列内の穴は対象外です。初期値 (あるいは直前のコールバックの呼び出し結果)、現在の要素の値、現在の位置、繰り返しが行われる配列の 4 つの引数を受け取ります。 + +reduceRight の `callbackFn` の呼び出しは、以下のように見えるでしょう。 + +```js +arr.reduceRight(function(accumulator, currentValue, index, array) { + // ... +}); +``` + +関数が初めて呼び出されたとき、`accumulator` と `currentValue` は、2 つの値のいずれかになります。 `initialValue` を指定して `reduceRight` を呼び出した場合、`accumulator` は `initialValue` と等しくなり、`currentValue` は配列の最後の値と等しくなります。`initialValue` が指定されなかった場合、`accumulator` は配列の最後の値に等しく、`currentValue` は最後から 2 番目の値に等しくなります。 + +配列が空で、`initialValue` が指定されなかった場合は、{{jsxref("TypeError")}} が発生します。配列に (位置に関わらず) 要素が 1 つしかなく、`initialValue` が指定されなかった場合、または `initialValue` が指定されたが配列が空だった場合は、`callbackFn` を呼び出されずに単独の値が返されます。 + +この関数を使用した場合について見てみましょう。 + +```js +[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}); +``` + +コールバックは 4 回呼び出され、ぞれぞれの呼び出しの引数と返値は次のようになります。 + +<table> + <thead> + <tr> + <th scope="col"> + <code><var>callback</var></code> + </th> + <th scope="col"> + <code><var>accumulator</var></code> + </th> + <th scope="col"> + <code><var>currentValue</var></code> + </th> + <th scope="col"> + <code><var>index</var></code> + </th> + <th scope="col"> + <code><var>array</var></code> + </th> + <th scope="col">返値</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼び出し</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼び出し</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼び出し</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼び出し</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +`reduceRight` の返値は、コールバック呼び出しの最後の返値である (`10`) になります。 + +`initialValue` を渡した場合、結果は次のようになります。 + +```js +[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { + return accumulator + currentValue; +}, 10); +``` + +<table> + <thead> + <tr> + <th scope="col"> + <code><var>callback</var></code> + </th> + <th scope="col"> + <code><var>accumulator</var></code> + </th> + <th scope="col"> + <code><var>currentValue</var></code> + </th> + <th scope="col"> + <code><var>index</var></code> + </th> + <th scope="col"> + <code><var>array</var></code> + </th> + <th scope="col">返値</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼び出し</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼び出し</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼び出し</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼び出し</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">5 回目の呼び出し</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +この場合の `reduceRight` の返値は `20` になります。 + +## ポリフィル + +`reduceRight` は ECMA-262 の第 5 版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブには対応していない実装でも `reduceRight` を使用できるようにします。 + +```js +// Production steps of ECMA-262, Edition 5, 15.4.4.22 +// Reference: https://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +``` + +## 例 + +### 配列内のすべての値を合計する + +```js +var sum = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// sum is 6 +``` + +### 配列中の配列を平坦化する + +```js +var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// flattened is [4, 5, 2, 3, 0, 1] +``` + +### 一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す + +```js +const waterfall = (...functions) => (callback, ...args) => + functions.reduceRight( + (composition, fn) => (...results) => fn(composition, ...results), + callback + )(...args); + +const randInt = max => Math.floor(Math.random() * max) + +const add5 = (callback, x) => { + setTimeout(callback, randInt(1000), x + 5); +}; +const mult3 = (callback, x) => { + setTimeout(callback, randInt(1000), x * 3); +}; +const sub2 = (callback, x) => { + setTimeout(callback, randInt(1000), x - 2); +}; +const split = (callback, x) => { + setTimeout(callback, randInt(1000), x, x); +}; +const add = (callback, x, y) => { + setTimeout(callback, randInt(1000), x + y); +}; +const div4 = (callback, x) => { + setTimeout(callback, randInt(1000), x / 4); +}; + +const computation = waterfall(add5, mult3, sub2, split, add, div4); +computation(console.log, 5) // -> 14 + +// same as: + +const computation2 = (input, callback) => { + const f6 = x=> div4(callback, x); + const f5 = (x, y) => add(f6, x, y); + const f4 = x => split(f5, x); + const f3 = x => sub2(f4, x); + const f2 = x => mult3(f3, x); + add5(f2, input); +} +``` + +### `reduce` と `reduceRight` の違い + +```js +var a = ['1', '2', '3', '4', '5']; +var left = a.reduce(function(prev, cur) { return prev + cur; }); +var right = a.reduceRight(function(prev, cur) { return prev + cur; }); + +console.log(left); // "12345" +console.log(right); // "54321" +``` + +### 合成可能な関数の定義 + +関数合成とは、各関数の出力を次の関数に渡し、最後の関数の出力を最終的な結果とする、関数を組み合わせるための仕組みです。この例では `reduceRight()` を使って、関数合成を実現しています。 + +Wikipedia の [Function composition](<https://en.wikipedia.org/wiki/Function_composition_(computer_science)>) も参照してください。 + +```js +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) + +// 渡された数値をインクリメントする +const inc = (n) => n + 1 + +// 渡された数値を 2 倍にする +const double = (n) => n * 2 + +// 合成関数を使用する +console.log(compose(double, inc)(2)); // 6 + +// 合成関数を使用する +console.log(compose(inc, double)(2)); // 5 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Array.prototype.reduceRight` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-array) で利用できます +- {{jsxref("Array.prototype.reduce()")}} diff --git a/files/ja/web/javascript/reference/global_objects/bigint/bigint/index.html b/files/ja/web/javascript/reference/global_objects/bigint/bigint/index.html deleted file mode 100644 index ff495fbe93..0000000000 --- a/files/ja/web/javascript/reference/global_objects/bigint/bigint/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: BigInt() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt -tags: - - BigInt - - Constructor - - JavaScript - - Reference - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt ---- -<div>{{JSRef}}</div> - -<p><strong><code>BigInt()</code></strong> コンストラクターは、 {{jsxref("BigInt")}} オブジェクトを生成するために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">BigInt(<var>value</var>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>value</var></code></dt> - <dd>作成しようとしているオブジェクトの数値。文字列または整数にすることができます。</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>メモ</strong>: <code>BigInt()</code> は {{JSxRef("Operators/new", "new")}} 演算子と共には使用されません。</p> -</div> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Creating_a_new_BigInt" name="Creating_a_new_BigInt">新しい BigInt の生成</h3> - -<pre class="brush: js">BigInt(123); -// 123n -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bigint-constructor', 'BigInt constructor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.BigInt.BigInt")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("BigInt")}} class</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/bigint/bigint/index.md b/files/ja/web/javascript/reference/global_objects/bigint/bigint/index.md new file mode 100644 index 0000000000..c59a748eca --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/bigint/bigint/index.md @@ -0,0 +1,48 @@ +--- +title: BigInt() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +tags: + - BigInt + - コンストラクター + - JavaScript + - リファレンス +browser-compat: javascript.builtins.BigInt.BigInt +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt +--- +{{JSRef}} + +**`BigInt()`** コンストラクターは **bigint** 型の値を返します。 + +## 構文 + +```js +BigInt(value); +``` + +### 引数 + +- `value` + - : 作成しようとしているオブジェクトの数値。文字列または整数にすることができます。 + +> **Note:** `BigInt()` は {{JSxRef("Operators/new", "new")}} 演算子と共には使用されません。 + +## 例 + +### 新しい BigInt の生成 + +```js +BigInt(123); +// 123n +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("BigInt")}} クラス diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/locale/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/locale/index.html deleted file mode 100644 index 62c1926fe4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/locale/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Intl.Locale() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/Locale -tags: - - Constructor - - Intl - - JavaScript - - Locale - - Reference - - コンストラクター - - ロケール -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/Locale ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale</code></strong> コンストラクターは、 Intl オブジェクトの標準組み込みプロパティで、 Unicode ロケール識別子を表します。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale.html")}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">new Intl.Locale(<var>tag</var> [, <var>options</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>tag</var></code></dt> - <dd>Unicode ロケール識別子の文字列です。</dd> - <dt><code><var>options</var></code></dt> - <dd>ロケールの構成を含むオブジェクトです。キーは Unicode ロケールタグで、値は有効な Unicode タグ値です。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-intl-locale-constructor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.Locale")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://github.com/zbraniecki/Intl.js/tree/intllocale">The Intl.Locale Polyfill</a></li> - <li><a href="https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers">Unicode locale identifiers spec</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/locale/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/locale/index.md new file mode 100644 index 0000000000..90151318c5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/locale/index.md @@ -0,0 +1,70 @@ +--- +title: Intl.Locale() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/Locale +tags: + - コンストラクター + - 国際化 + - Intl + - JavaScript + - ロケール + - Reference +browser-compat: javascript.builtins.Intl.Locale.Locale +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/Locale +--- +{{JSRef}} + +**`Intl.Locale`** コンストラクターは、 Intl オブジェクトの標準組み込みプロパティで、 Unicode ロケール識別子を表します。 + +{{EmbedInteractiveExample("pages/js/intl-locale.html")}} + + +## 構文 + +```js +new Intl.Locale(tag) +new Intl.Locale(tag, options) +``` + +### 引数 + +- `tag` + - : Unicode ロケール識別子の文字列です。 +- `options` + - : ロケールの構成を含むオブジェクトです。キーは Unicode ロケールタグで、値は有効な Unicode タグ値です。 + +## 例 + +### 基本的な使用 + +もっとも単純なものでは、{{jsxref("Intl/Locale/Locale", "Intl.Locale")}} コンストラクターはロケール識別子の文字列を引数に取ります。 + +```js +let us = new Intl.Locale('en-US'); +``` + +### Locale コンストラクターに options オブジェクトを渡して使用 + +コンストラクターには、オプションで構成オブジェクトの引数を取ることができ、そこに複数の拡張型を指定することができます。たとえば、設定オブジェクトの [`hourCycle`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle) プロパティに任意の時間周期を設定し、それをコンストラクターに渡します。 + +```js +let locale = new Intl.Locale("en-US", { hourCycle: "h12" }); +console.log(locale.hourCycle); // Prints "h12" +``` + +## ポリフィル + +[formatjs Intl.Locale +polyfill](https://formatjs.io/docs/polyfills/intl-locale) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Collator")}} +- [Unicode ロケール識別子の仕様書](https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers) diff --git a/files/ja/web/javascript/reference/global_objects/number/parseint/index.html b/files/ja/web/javascript/reference/global_objects/number/parseint/index.html deleted file mode 100644 index 151a7f37d1..0000000000 --- a/files/ja/web/javascript/reference/global_objects/number/parseint/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Number.parseInt() -slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Number - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt ---- -<div>{{JSRef}}</div> - -<p><strong><code>Number.parseInt()</code></strong> は、文字列の引数を解析し、指定された基数の整数値を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Number.parseInt(<var>string,</var>[ <var>radix</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<div> -<dl> - <dt><code><var>string</var></code></dt> - <dd>解析する値。この引数が文字列でない場合、抽象操作 <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code> を用いて文字列に変換されます。この引数では先頭の{{glossary("whitespace", "ホワイトスペース")}}は無視されます。</dd> - <dt><code><var>radix</var></code><var> {{optional_inline}}</var></dt> - <dd><code>2</code> から <code>36</code> までの整数で、 <code><var>string</var></code> の<em>基数</em> (数学的記数法の底) を表します。これは既定値が <code>10</code> では<strong><em>ない</em></strong>ので注意してください。</dd> -</dl> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定された <code><var>string</var></code> を解析した整数値です。</p> - -<p><code><var>radix</var></code> が <code>2</code> よりも小さいか <code>36</code> よりも大きい、または最初のホワイトスペース以外の文字が数値に変換できない場合は {{jsxref("NaN")}} が返されます。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドは、グローバルの {{jsxref("parseInt", "parseInt()")}} 関数と同じ機能です。</p> - -<pre class="brush: js">Number.parseInt === parseInt // true</pre> - -<p>また、これは ECMAScript 2015 の一部です (グローバルのモジュール化のため)。詳細や例は {{jsxref("parseInt", "parseInt()")}} を参照してください。</p> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<pre class="brush: js">if (Number.parseInt === undefined) { - Number.parseInt = window.parseInt -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Number.parseInt")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>所属する {{jsxref("Number")}} オブジェクト</li> - <li>グローバルの {{jsxref("parseInt", "parseInt()")}} メソッド</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/number/parseint/index.md b/files/ja/web/javascript/reference/global_objects/number/parseint/index.md new file mode 100644 index 0000000000..faad87b6e5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/number/parseint/index.md @@ -0,0 +1,74 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt +tags: + - ECMAScript 2015 + - JavaScript + - メソッド + - Number + - ポリフィル +browser-compat: javascript.builtins.Number.parseInt +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +{{JSRef}} + +**`Number.parseInt()`** は、文字列の引数を解釈し、指定された基数の整数値を返します。 + +{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}} + +## 構文 + +```js +Number.parseInt(string) +Number.parseInt(string, radix) +``` + +### 引数 + +- `string` + - : 解釈する値。この引数が文字列でない場合、抽象操作 [`ToString`](https://tc39.es/ecma262/#sec-tostring) を用いて文字列に変換されます。この引数では先頭の{{glossary("whitespace", "ホワイトスペース")}}は無視されます。 +- `radix` _{{optional_inline}}_ + + - : `2` から `36` までの整数で、 `string` の*基数* (数学的記数法の底) を表します。 + + `radix` が未定義または `0` であった場合、通常は `10` と見なされますが、数値が `0x` または `0X` のコードの組み合わせであった場合は `16` と見なされます。 + +### 返値 + +指定された `string` を解析した整数値です。 + +`radix` が `2` よりも小さいか `36` よりも大きい、または最初のホワイトスペース以外の文字が数値に変換できない場合は {{jsxref("NaN")}} が返されます。 + +## ポリフィル + +```js +if (Number.parseInt === undefined) { + Number.parseInt = window.parseInt +} +``` + +## 例 + +### Number.parseInt と parseInt + +このメソッドはグローバル関数の {{jsxref("parseInt", "parseInt()")}} と同じです。 + +```js +Number.parseInt === parseInt // true +``` + +また、 ECMAScript 2015 で定められているものです (グローバル値のモジュール化のため)。詳細や例は {{jsxref("parseInt", "parseInt()")}} を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Number.parseInt` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-number) で利用できます +- 所属先の {{jsxref("Number")}} オブジェクト +- グローバルメソッドの {{jsxref("parseInt", "parseInt()")}} diff --git a/files/ja/web/javascript/reference/global_objects/number/tolocalestring/index.html b/files/ja/web/javascript/reference/global_objects/number/tolocalestring/index.html deleted file mode 100644 index 12bf3f35c4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/number/tolocalestring/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Number.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString -tags: - - Internationalization - - JavaScript - - Method - - Number - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString ---- -<div>{{JSRef}}</div> - -<p><strong><code>toLocaleString()</code></strong> メソッドは、この数値を表す言語依存の文字列を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div> - - - -<p>新しい <code>locales</code> と <code>options</code> 引数で アプリケーションは フォーマット変換で使われる言語を指定でき、関数の振る舞いをカスタマイズできます。古い実装では、<code>locales</code> と <code>options</code> 引数は無視され、使われるロケールや返される文字列の形式は完全に実装依存です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><code><em>numObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<p>どのブラウザーが <code>locales</code> 引数と <code>options</code> 引数をサポートしているか確かめるために<a href="#Browser_compatibility">ブラウザー実装状況</a>セクションを調べてください。特徴検出のために<a href="#Checking_for_support_for_locales_and_options_arguments">例: locales 引数と options 引数をサポートしているか調べる</a>を調べてください。</p> - -<div class="note"> -<p><strong>注意:</strong> Firefox 29 で実装されている ECMAScript 国際化 API では、<code>locales</code> 引数が <code>Number.toLocaleString()</code> メソッドに追加されました。引数が {{jsxref("undefined")}} なら、このメソッドは OS によって指定されたローカライズされた数値を返します。Firefox の以前のバージョンでは、英語の数字が返されます。この変更はすぐに修正される可能性がある下位互換性に影響を与える回帰として報告されています。（{{bug(999003)}}）</p> -</div> - -<div>{{page('/ja/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat', 'Parameters')}}</div> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>渡された数値を表す、言語依存の文字列です。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_toLocaleString" name="Using_toLocaleString"><code>toLocaleString</code> を使う</h3> - -<p>ロケールを指定しない基本的な使用で、デフォルトロケールとデフォルトオプションのフォーマットされた文字列が返されます。</p> - -<pre class="brush: js">var number = 3500; - -console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale -</pre> - -<h3 id="Checking_for_support_for_locales_and_options_arguments" name="Checking_for_support_for_locales_and_options_arguments"><code>locales</code> 引数と <code>options</code> 引数をサポートしているか調べる</h3> - -<p><code>locales</code> 引数と <code>options</code> 引数はまだすべてのブラウザーでサポートされておりません。不正な言語タグが {{jsxref("Global_Objects/RangeError", "RangeError")}} 例外で拒否される要件を使うことで、実装がすでにサポートしているかどうかを調べられます。</p> - -<pre class="brush: js">function toLocaleStringSupportsLocales() { - var number = 0; - try { - number.toLocaleString('i'); - } catch (e) { - return e.name === 'RangeError'; - } - return false; -} -</pre> - -<p>ES5.1 以前の実装では、引数を使って <code>toLocaleString</code> を呼んだ場合に {{jsxref("RangeError")}} 例外を throw する必要はありませんでした。</p> - -<p>5.1 以前の ECMAScript をサポートしているものも含めたすべてのホストで動くチェックは、直接 <code>Number.prototype.toLocaleString</code> の地域オプションのサポートに必要な ECMA-402 で指定された機能をテストすることで行えます。</p> - -<pre class="brush: js">function toLocaleStringSupportsOptions() { - return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function'); -}</pre> - -<p>上記のコードは、グローバル <code>Intl</code> オブジェクトが <code>null</code> でないことと、<code>Intl</code> オブジェクトが <code>NumberFormat</code> プロパティを持ち、それが関数であることをテストします。</p> - -<h3 id="Using_locales" name="Using_locales"><code>locales</code> を使う</h3> - -<p>この例ではローカライズされた数値変換のバリエーションのいくつかを示します。アプリケーションのユーザーインターフェイスで使われる言語の形式を得るために、<code>locales</code> 引数を用いている言語（そしておそらくいくつかのフォールバック言語）を明示することを確かめてください。</p> - -<pre class="brush: js">var number = 123456.789; - -// German uses comma as decimal separator and period for thousands -console.log(number.toLocaleString('de-DE')); -// → 123.456,789 - -// Arabic in most Arabic speaking countries uses real Arabic digits -console.log(number.toLocaleString('ar-EG')); -// → ١٢٣٤٥٦٫٧٨٩ - -// India uses thousands/lakh/crore separators -console.log(number.toLocaleString('en-IN')); -// → 1,23,456.789 - -// the nu extension key requests a numbering system, e.g. Chinese decimal -console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec')); -// → 一二三,四五六.七八九 - -// when requesting a language that may not be supported, such as -// Balinese, include a fallback language, in this case Indonesian -console.log(number.toLocaleString(['ban', 'id'])); -// → 123.456,789 -</pre> - -<h3 id="Using_options" name="Using_options"><code>options</code> を使う</h3> - -<p><code>toLocaleString</code> によって得られる結果は <code>options</code> 引数を使用してカスタマイズできます。</p> - -<pre class="brush: js">var number = 123456.789; - -// request a currency format -console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); -// → 123.456,79 € - -// the Japanese yen doesn't use a minor unit -console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) -// → ￥123,457 - -// limit to three significant digits -console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); -// → 1,23,000 - -// Use the host default language with options for number formatting -var num = 30000.65; -console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})); -// → "30,000.65" where English is the default language, or -// → "30.000,65" where German is the default language, or -// → "30 000,65" where French is the default language -</pre> - -<h2 id="Performance" name="Performance">性能</h2> - -<p>多数の数値をフォーマットするとき、{{jsxref("NumberFormat")}} オブジェクトを生成して {{jsxref("NumberFormat.format")}} プロパティによって得られる関数を使用するほうが良いです。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>初期定義です。JavaScript 1.5 で実装されました。</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Number.prototype.toString()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/ja/web/javascript/reference/global_objects/number/tolocalestring/index.md new file mode 100644 index 0000000000..24c5b76b6d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/number/tolocalestring/index.md @@ -0,0 +1,148 @@ +--- +title: Number.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +tags: + - 国際化 + - JavaScript + - メソッド + - Number + - プロトタイプ +browser-compat: javascript.builtins.Number.toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +--- +{{JSRef}} + +**`toLocaleString()`** メソッドは、この数値を表す言語依存の文字列を返します。 + +{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}} + +## 構文 + +```js +toLocaleString() +toLocaleString(locales) +toLocaleString(locales, options) +``` + +### 引数 + +`locales` と `options` 引数で機能の動作をカスタマイズすることができ、アプリケーションが書式化の習慣を用いる言語を指定することができます。`locales` と `options` の引数を無視する実装では、使用されるロケールや返される文字列の形式は、完全に実装依存になります。 + +引数と使い方について詳しくは、[`Intl.NumberFormat()` +コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)を参照してください。 + +### 返値 + +指定された数値の言語依存の表現による文字列です。 + +## 性能 + +たくさんの数を整形する場合は、{{jsxref("Intl.NumberFormat")}} オブジェクトを生成して {{jsxref("Intl/NumberFormat/format", "format")}} プロパティで提供される関数を使用することをお勧めします。 + +## 例 + +### `toLocaleString` を使う + +ロケールを指定しない基本的な使用です。既定のロケールと既定のオプションの整形された文字列が返されます。 + +```js +var number = 3500; + +console.log(number.toLocaleString()); // アメリカ英語のロケールでは "3,500" を表示 +``` + +### `locales` 引数と `options` 引数に対応しているかどうかを調べる + +`locales` 引数と `options` 引数はまだすべてのブラウザーで対応しているわけではありません。不正な言語タグが {{jsxref("Global_Objects/RangeError", "RangeError")}} 例外で拒否されるという要件を利用することで、実装がすでに対応しているかどうかを調べられます。 + +```js +function toLocaleStringSupportsLocales() { + var number = 0; + try { + number.toLocaleString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +``` + +ES5.1 以前の実装では、引数を使って `toLocaleString` を呼んだ場合に {{jsxref("RangeError")}} 例外を throw する必要はありませんでした。 + +5.1 以前の ECMAScript をサポートしているものも含めたすべてのホストで動くチェックは、直接 `Number.prototype.toLocaleString` の地域オプションのサポートに必要な ECMA-402 で指定された機能をテストすることで行えます。 + +```js +function toLocaleStringSupportsOptions() { + return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function'); +} +``` + +上記のコードは、グローバル `Intl` オブジェクトが `null` でないことと、`Intl` オブジェクトが `NumberFormat` プロパティを持ち、それが関数であることをテストします。 + +### `locales` を使う + +この例ではローカライズされた数値変換のバリエーションのいくつかを示します。アプリケーションのユーザーインターフェイスで使われる言語の形式を得るために、`locales` 引数を用いている言語（そしておそらくいくつかのフォールバック言語）を明示することを確かめてください。 + +```js +var number = 123456.789; + +// ドイツ語では小数点にカンマを用い、千の桁区切りにピリオドを用いる +console.log(number.toLocaleString('de-DE')); +// → 123.456,789 + +// 多くのアラビア語圏の国のアラビア語では、東アラビア数字を用いる +console.log(number.toLocaleString('ar-EG')); +// → ١٢٣٤٥٦٫٧٨٩ + +// インド語では thousands/lakh/crore の区切りを用いる +console.log(number.toLocaleString('en-IN')); +// → 1,23,456.789 + +// nu 拡張キーでは、中国の数字などの計数法をリクエストする +console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec')); +// → 一二三,四五六.七八九 + +// バリ語など対応していない可能性のある言語をリクエストする場合は、 +// 予備の言語 (この場合はインドネシア語) を含める +console.log(number.toLocaleString(['ban', 'id'])); +// → 123.456,789 +``` + +### `options` を使う + +`toLocaleString` によって得られる結果は `options` 引数を使用してカスタマイズできます。 + +```js +var number = 123456.789; + +// 通貨形式をリクエスト +console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); +// → 123.456,79 € + +// 日本円には副単位がない +console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) +// → ￥123,457 + +// 有効桁数を 3 桁に制限 +console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); +// → 1,23,000 + +// 数値の書式化にホストの既定の言語とオプションを使用する +var num = 30000.65; +console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})); +// → "30,000.65" where English is the default language, or +// → "30.000,65" where German is the default language, or +// → "30 000,65" where French is the default language +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Number.prototype.toString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.html deleted file mode 100644 index f647d82bc6..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.html +++ /dev/null @@ -1,497 +0,0 @@ ---- -title: Object.defineProperty() -slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Method - - Object -translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty ---- -<div>{{JSRef}}</div> - -<p>静的メソッドの <code><strong>Object.defineProperty()</strong></code> は、あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメソッドは {{jsxref("Object")}} コンストラクターで直接呼び出すものであって、<code>Object</code> 型のインスタンスで呼ぶものではありません。</p> -</div> - -<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>obj</var></code></dt> - <dd>プロパティを定義したいオブジェクト。</dd> - <dt><code><var>prop</var></code></dt> - <dd>定義または変更するプロパティの名前または {{jsxref("Symbol")}}。</dd> - <dt><code><var>descriptor</var></code></dt> - <dd>定義または変更されるプロパティの記述子。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>渡されたオブジェクトをそのまま返します。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドで、あるオブジェクトのプロパティを明示的に追加または変更することができます。代入による通常のプロパティ追加では、プロパティ列挙 ({{jsxref("Statements/for...in", "for...in")}} ループや {{jsxref("Object.keys")}} メソッド) に現れ、値は変更可能で、また{{jsxref("Operators/delete", "削除", "", 1)}}も可能なプロパティが生成されます。このメソッドでは、これらの詳細事項を既定値から変えることが可能です。既定では、<code>Object.defineProperty()</code> を使って追加された値は不変になります。</p> - -<p>プロパティの記述子は、データ記述子とアクセサー記述子の二つに分かれます。<em><dfn>データ記述子</dfn></em>は値を持つプロパティで、その値は書き換え可能にも不可能にもできます。<em><dfn>アクセサー記述子</dfn></em>は、関数のゲッターとセッターの組で表されるプロパティです。記述子はこれら二種類のどちらかでなければならず、両方になることはできません。</p> - -<p>どちらの形でも記述子はオブジェクトで表現します。共通して以下のキーを持つことができます (既定値は Object.defineProperty() を使ってプロパティを定義する場合)。</p> - -<dl> - <dt><code>configurable</code></dt> - <dd><code>true</code> である場合のみ、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。<br> - <strong>既定値は <code>false</code> です。</strong></dd> - <dt><code>enumerable</code></dt> - <dd><code>true</code> である場合のみ、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。<br> - <strong>既定値は <code>false</code> です。</strong></dd> -</dl> - -<p>データ記述子の場合はオプションとして次のキーを持つことができます:</p> - -<dl> - <dt><code>value</code></dt> - <dd>プロパティに関連づけられた値です。有効な JavaScript の値 (number, object, function など) である必要があります。<br> - <strong>既定値は {{jsxref("undefined")}} です。</strong></dd> - <dt><code>writable</code></dt> - <dd><code>true</code> である場合のみ、プロパティに関連づけられた値は{{jsxref("Operators/Assignment_Operators", "代入演算子", "", 1)}}で変更することができます。<br> - <strong>既定値は <code>false</code> です。</strong></dd> -</dl> - -<p>アクセサー記述子の場合はオプションとして次のキーを持つことができます。</p> - -<dl> - <dt><code>get</code></dt> - <dd>プロパティのゲッターとなる関数で、ゲッターを設けない場合は {{jsxref("undefined")}} です。プロパティにアクセスするとこの関数が引数なしでコールされます。この関数内で <code>this</code> はアクセスしようとしたプロパティを持つオブジェクトになります(プロパティを定義するために作成した記述子オブジェクトではありません)。戻り値はこのプロパティの値として使われます。<br> - <strong>既定値は {{jsxref("undefined")}} です。</strong></dd> - <dt><code>set</code></dt> - <dd>プロパティのセッターとなる関数で、セッターがない場合は {{jsxref("undefined")}} です。プロパティに値が割り当てられたとき、その値を引数としてこの関数がコールされます。この関数内で <code>this</code> は割り当てようとしたプロパティを持つオブジェクトになります。<br> - <strong>既定値は {{jsxref("undefined")}} です。</strong></dd> -</dl> - -<p>記述子に <code>value</code>, <code>writable</code>, <code>get</code>, <code>set</code> のいずれのキーもない場合、データ記述子として扱われます。記述子に <code>value</code> または <code>writable</code> と、<code>get</code> または <code>set</code> のキーの両方がある場合は、例外が投げられます。</p> - -<p>これらのキーは必ずしも記述子が直接所有しているとは限らないことに留意してください。継承されたプロパティも同様です。これらの既定値が存在することを保証するには、先行して {{jsxref("Object.prototype")}} を freeze しておくか、すべてのオプションを明示的に指定するか、{{jsxref("Object.create", "Object.create(null)")}} で {{jsxref("null")}} に設定するかします。</p> - -<pre class="brush: js">// __proto__ を使うやり方 -var obj = {}; -var descriptor = Object.create(null); // 意図しないキーの継承を防止します。 -descriptor.value = 'static'; - -// 既定で継承不可、変更不可、書換不可のプロパティとなります。 -Object.defineProperty(obj, 'key', descriptor); - -// 明示的な指定 -Object.defineProperty(obj, 'key', { - enumerable: false, - configurable: false, - writable: false, - value: 'static' -}); - -// 同じオブジェクトを再利用 -function withValue(value) { - var d = withValue.d || ( - withValue.d = { - enumerable: false, - writable: false, - configurable: false, - value: value - } - ); - - // 値の代入で重複操作を防ぐ - if (d.value !== value) d.value = value; - - return d; -} -// このように使います。 -Object.defineProperty(obj, 'key', withValue('static')); - -// freeze が利用できるなら、オブジェクトのプロトタイプのプロパティ -// (value, get, set, enumerable, writable, configurable) を -// 追加・削除することを防ぐことができます。 -(Object.freeze || Object)(Object.prototype); -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<p><em>バイナリーフラグ</em>を使って <code>Object.defineProperty</code> を利用したい場合は <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">追加の例</a> を見てください。</p> - -<h3 id="Creating_a_property" name="Creating_a_property">プロパティの生成</h3> - -<p>オブジェクトに指定されたプロパティが存在しないとき、<code>Object.defineProperty()</code> は指定された形で新たなプロパティを生成します。記述子のキーは省略することができ、そのようなキーには既定値が適用されます。</p> - -<pre class="brush: js">var o = {}; // 新しいオブジェクトの生成 - -// データ記述子により、defineProperty を用いて -// オブジェクトプロパティを追加する例 -Object.defineProperty(o, 'a', { - value: 37, - writable: true, - enumerable: true, - configurable: true -}); -// o オブジェクトに 'a' プロパティが存在するようになり、その値は 37 となります - -// アクセサー記述子により、defineProperty を用いて -// オブジェクトプロパティを追加する例 -var bValue = 38; -Object.defineProperty(o, 'b', { - // メソッド名ショートハンドを利用しています(ES2015 の機能)。 - // 次のように書いているのと同じことです: - // get: function() { return bValue; }, - // set: function(newValue) { bValue = newValue; }, - get() { return bValue; }, - set(newValue) { bValue = newValue; }, - enumerable: true, - configurable: true -}); -o.b; // 38 -// o オブジェクトに 'b' プロパティが存在するようになり、 -// その値は 38 となります -// o.b は再定義されない限り、その値は常に bValue と同じです。 - -// (訳注:データとアクセサーを)両方を混在させることはできません: -Object.defineProperty(o, 'conflict', { - value: 0x9f91102, - get() { return 0xdeadbeef; } -}); -// TypeError が発生します。value はデータ記述子にのみ、 -// get はアクセサー記述子にのみ存在していなければなりません。 -</pre> - -<h3 id="Modifying_a_property" name="Modifying_a_property">プロパティの変更</h3> - -<p>プロパティが既に存在している場合、<code>Object.defineProperty()</code> は記述子の値および現在のオブジェクトの設定に基づいて、プロパティの変更を試みます。元の記述子で <code>configurable</code> 属性が <code>false</code> なら、そのプロパティは「変更不可」です。変更不可のプロパティは記述子の属性を変更することができません。データプロパティで <code>writable</code> なら、値を変更することができますし、<code>writable</code> 属性を <code>true</code> から <code>false</code> に変更することが出来ます。変更不可のプロパティはデータとアクセサーの種別を切り替えることはできません。</p> - -<p>変更不可なプロパティに変更を加えようとすると、新旧の値が同じでない限り {{jsxref("TypeError")}} が投げられます(可能な場合の <code>value</code> と <code>writable</code> の変更は除きます)。</p> - -<h4 id="Writable_attribute" name="Writable_attribute">Writable 属性</h4> - -<p><code>writable</code> プロパティ属性が <code>false</code> に設定されているとき、そのプロパティは書換不可になります。代入が出来なくなります。</p> - -<pre class="brush: js">var o = {}; // 新しいオブジェクトの生成 - -Object.defineProperty(o, 'a', { - value: 37, - writable: false -}); - -console.log(o.a); // 37 がログ出力されます -o.a = 25; // エラーは発生しません -// (strict モードでは発生します。同じ値を代入したとしても。) -console.log(o.a); // 37 がログ出力されます。代入文は動作しません。 - -// strict mode -(function() { - 'use strict'; - var o = {}; - Object.defineProperty(o, 'b', { - value: 2, - writable: false - }); - o.b = 3; // TypeError がスローされます: "b" is read-only - return o.b; // 上の行は動作せず 2 が返ります(訳注:正しくは「ここに制御は来ません」) -}()); -</pre> - -<p>例で見たように、書き込み不可のプロパティに書き込もうとしても変更されず、またエラーは発生しません。</p> - -<h4 id="Enumerable_attribute" name="Enumerable_attribute">Enumerable 属性</h4> - -<p><code>enumerable</code> プロパティ属性は、プロパティが {{jsxref("Statements/for...in", "for...in")}} ループや {{jsxref("Object.keys()")}} に現れるか否かを定義します。</p> - -<pre class="brush: js">var o = {}; -Object.defineProperty(o, 'a', { - value: 1, - enumerable: true -}); -Object.defineProperty(o, 'b', { - value: 2, - enumerable: false -}); -Object.defineProperty(o, 'c', { - value: 3 -}); // enumerable の既定値は false -o.d = 4; // このようにプロパティを生成するとき、 - // enumerable の既定値は true -Object.defineProperty(o, Symbol.for('e'), { - value: 5, - enumerable: true -}); -Object.defineProperty(o, Symbol.for('f'), { - value: 6, - enumerable: false -}); - -for (var i in o) { - console.log(i); -} -// 'a' と 'd' がログされます(順不同) - -Object.keys(o); // ['a', 'd'] - -o.propertyIsEnumerable('a'); // true -o.propertyIsEnumerable('b'); // false -o.propertyIsEnumerable('c'); // false -o.propertyIsEnumerable('d'); // true -o.propertyIsEnumerable(Symbol.for('e')); // true -o.propertyIsEnumerable(Symbol.for('f')); // false - -var p = { ...o } -p.a // 1 -p.b // undefined -p.c // undefined -p.d // 4 -p[Symbol.for('e')] // 5 -p[Symbol.for('f')] // undefined -</pre> - -<h4 id="Configurable_attribute" name="Configurable_attribute">Configurable 属性</h4> - -<p><code>configurable</code> 属性は、プロパティをオブジェクトから削除できるかとプロパティの属性 (<code>value</code> と <code>writable</code> 以外) を変更できるかを同時に制御します。</p> - -<pre class="brush: js">var o = {}; -Object.defineProperty(o, 'a', { - get() { return 1; }, - configurable: false -}); - -Object.defineProperty(o, 'a', { - configurable: true -}); // TypeError が発生 -Object.defineProperty(o, 'a', { - enumerable: true -}); // TypeError が発生 -Object.defineProperty(o, 'a', { - set() {} -}); // TypeError が発生 (set は未定義であった) -Object.defineProperty(o, 'a', { - get() { return 1; } -}); // TypeError が発生 (新たな get は全く同じであるにもかかわらず) -Object.defineProperty(o, 'a', { - value: 12 -}); // TypeError が発生 ('configurable' が false でも 'value' は変更できますが、ここでは 'get' アクセサーがあるため変更できません) - -console.log(o.a); // logs 1 -delete o.a; // 何も起きません -console.log(o.a); // logs 1 -</pre> - -<p><code>o.a</code> の <code>configurable</code> 属性が <code>true</code> である場合、エラーが発生することなく最終的にプロパティが削除されます。</p> - -<h3 id="Adding_properties_and_default_values" name="Adding_properties_and_default_values">プロパティおよび既定値の追加</h3> - -<p>属性の既定値がどう適用されるかを考えることは重要です。値の割り当てにドット表記を用いた場合と <code>Object.defineProperty()</code> を用いた場合とでは、以下の例で示したとおりに違いがあります。</p> - -<pre class="brush: js">var o = {}; - -o.a = 1; -// これは以下と同じです: -Object.defineProperty(o, 'a', { - value: 1, - writable: true, - configurable: true, - enumerable: true -}); - -// その一方で、 -Object.defineProperty(o, 'a', { value: 1 }); -// これは以下と同じです: -Object.defineProperty(o, 'a', { - value: 1, - writable: false, - configurable: false, - enumerable: false -}); -</pre> - -<h3 id="Custom_Setters_and_Getters" name="Custom_Setters_and_Getters">独自のゲッターおよびセッター</h3> - -<p>例として自律的に記録を行うオブジェクトを作成してみます。<code>temperature</code> プロパティに値が代入されると、配列 <code>archive</code> に要素が一つ追加されます。</p> - -<pre class="brush: js">function Archiver() { - var temperature = null; - var archive = []; - - Object.defineProperty(this, 'temperature', { - get() { - console.log('get!'); - return temperature; - }, - set(value) { - temperature = value; - archive.push({ val: temperature }); - } - }); - - this.getArchive = function() { return archive; }; -} - -var arc = new Archiver(); -arc.temperature; // 'get!' -arc.temperature = 11; -arc.temperature = 13; -arc.getArchive(); // [{ val: 11 }, { val: 13 }] -</pre> - -<p>次の例では、ゲッターが常に同じ値を返すようにしています。</p> - -<pre class="brush: js">var pattern = { - get() { - return 'I always return this string, ' + - 'whatever you have assigned'; - }, - set() { - this.myname = 'this is my name string'; - } -}; - -function TestDefineSetAndGet() { - Object.defineProperty(this, 'myproperty', pattern); -} - -var instance = new TestDefineSetAndGet(); -instance.myproperty = 'test'; -console.log(instance.myproperty); -// I always return this string, whatever you have assigned - -console.log(instance.myname); // this is my name string -</pre> - -<h3 id="Inheritance_of_properties" name="Inheritance_of_properties">プロパティの継承</h3> - -<p>アクセサープロパティを継承されると、その派生クラスでもプロパティがアクセスされたり書き換えられるときに <code>get</code> と <code>set</code> が呼ばれます。これらのメソッドが値を保持するために変数を使っていると、すべてのオブジェクトがその値を共有することになります。</p> - -<pre class="brush: js">function myclass() { -} - -var value; -Object.defineProperty(myclass.prototype, "x", { - get() { - return value; - }, - set(x) { - value = x; - } -}); - -var a = new myclass(); -var b = new myclass(); -a.x = 1; -console.log(b.x); // 1 -</pre> - -<p>この問題を回避する方法は値を別のプロパティで保持することです。<code>get</code> と <code>set</code> メソッド内で <code>this</code> はアクセス／書き換えされようとしているプロパティを納めるオブジェクトを指しています。</p> - -<pre class="brush: js">function myclass() { -} - -Object.defineProperty(myclass.prototype, "x", { - get() { - return this.stored_x; - }, - set(x) { - this.stored_x = x; - } -}); - -var a = new myclass(); -var b = new myclass(); -a.x = 1; -console.log(b.x); // undefined -</pre> - -<p>アクセサープロパティとは違い、データプロパティは常にオブジェクト自身に格納されるのであって、prototype に格納されるわけではありません。しかし、書き込み不可能なデータプロパティを継承している場合、継承先オブジェクトでも書き換えは阻止されます。</p> - -<pre class="brush: js">function myclass() { -} - -myclass.prototype.x = 1; -Object.defineProperty(myclass.prototype, "y", { - writable: false, - value: 1 -}); - -var a = new myclass(); -a.x = 2; -console.log(a.x); // 2 -console.log(myclass.prototype.x); // 1 -a.y = 2; // 無視されます。strict モードではエラースローされます。 -console.log(a.y); // 1 -console.log(myclass.prototype.y); // 1 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p> - -<h2 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h2> - -<h3 id="Redefining_the_length_property_of_an_Array_object" name="Redefining_the_length_property_of_an_Array_object"><code>Array</code> オブジェクトの <code>length</code> プロパティの再定義</h3> - -<p>配列の {{jsxref("Array.length", "length")}} プロパティを再定義することは、通常の再定義の制限に照らせば可能です。({{jsxref("Array.length", "length")}} プロパティは初期状態で構成不可、列挙不可、書き込み可能です。つまり、変更されていない配列では、{{jsxref("Array.length", "length")}} プロパティの値を変更したり書き込み不可にしたりすることが可能です。列挙可否や構成可否、また書き込み不可に変更した後は値や書き込み可否も、変更することはできません。) しかし、すべてのブラウザーがこの再定義を許可しているとは限りません。</p> - -<p>Firefox 4 から 22 までの間では、配列の {{jsxref("Array.length", "length")}} プロパティを再定義しようとすると、無条件に (許可の有無にかかわらず) {{jsxref("TypeError")}} が発生します。</p> - -<p><code>Object.defineProperty()</code> を実装している Chrome のバージョンでは、状況によっては配列の現在の {{jsxref("Array.length", "length")}} プロパティとは異なる length の値を無視することがあります。状況によっては書き込み可否が暗黙に動作しない (そして例外を発生させない) こともあります。また、関連して、{{jsxref("Array.prototype.push")}} のような配列を変更する一部のメソッドが、書き込み不可であることを尊重しないことがあります。</p> - -<p><code>Object.defineProperty()</code> を実装する Safari のバージョンでは配列の現在の {{jsxref("Array.length", "length")}} プロパティと異なる値の length を無視し、また書き込み許可を変更する試みはエラーなしに実行されますが、実際はプロパティの書き込み許可が変更されません。</p> - -<p>Internet Explorer 9 以降と Firefox 23 以降のみが、完全かつ正確に配列の {{jsxref("Array.length", "length")}} プロパティの再定義を実装しているようです。現時点では、配列の {{jsxref("Array.length", "length")}} プロパティの再定義はどのブラウザーでも動作する、あるいは特定のルールに則って動作するとは考えないようにしてください。そして、もしこれが実行<em>できた</em>としても、<a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">これを行う本当に良い理由はありません</a>。</p> - -<h3 id="Internet_Explorer_8_specific_notes" name="Internet_Explorer_8_specific_notes">Internet Explorer 8 の特記事項</h3> - -<p>Internet Explorer 8 は <code>Object.defineProperty()</code> メソッドを <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">DOM オブジェクトでのみ使用できる</a>ものとして実装しました。以下 2 点に注意が必要です:</p> - -<ul> - <li>ネイティブオブジェクトに対して <code>Object.defineProperty()</code> を用いようとするとエラーが発生します。</li> - <li>プロパティの属性には特定の値を設定しなければなりません。<code>configurable</code>, <code>enumerable</code>, <code>writable</code> の各属性に対して、データ記述子ではすべて <code>true</code> に、アクセサー記述子では <code>configurable</code> に <code>true</code>、<code>enumerable</code> に <code>false</code> にです。(?)ほかの値(?)を与えようとすると、エラーが発生します。</li> - <li>プロパティの再設定には、始めにプロパティの削除が必要です。プロパティが削除されていない場合、再設定を試みる前の状態のままになります。</li> -</ul> - -<h3 id="Chrome_37_and_below_specific_notes" name="Chrome_37_and_below_specific_notes">Chrome 37 以下の特記事項</h3> - -<p>Chrome 37 以下には、<code>writable: false</code> 指定を行なった "prototype" プロパティを関数に定義する場合に、想定通りに動かない <a href="https://bugs.chromium.org/p/v8/issues/detail?id=3448">バグ</a> があります。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li> - <li>{{jsxref("Object.defineProperties()")}}</li> - <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> - <li>{{jsxref("Object.prototype.watch()")}}</li> - <li>{{jsxref("Object.prototype.unwatch()")}}</li> - <li>{{jsxref("Operators/get", "get")}}</li> - <li>{{jsxref("Operators/set", "set")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">追加の <code>Object.defineProperty</code> の例</a></li> - <li>{{jsxref("Reflect.defineProperty()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.md new file mode 100644 index 0000000000..b44e778fa7 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/defineproperty/index.md @@ -0,0 +1,451 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - メソッド + - Object +browser-compat: javascript.builtins.Object.defineProperty +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +{{JSRef}} + +静的メソッドの **`Object.defineProperty()`** は、あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。 + +{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}} + +## 構文 + +```js +Object.defineProperty(obj, prop, descriptor) +``` + +### 引数 + +- `obj` + - : プロパティを定義するオブジェクトです。 +- `prop` + - : 定義または変更するプロパティの名前または {{jsxref("Symbol")}} です。 +- `descriptor` + - : 定義または変更するプロパティの記述子です。 + +### 返値 + +この関数に渡されたオブジェクトをそのまま返します。 + +## 解説 + +このメソッドで、あるオブジェクトのプロパティを明示的に追加または変更することができます。代入による通常のプロパティ追加では、プロパティ列挙 ({{jsxref("Statements/for...in", "for...in")}} ループや {{jsxref("Object.keys")}} メソッド) に現れ、値は変更可能で、また{{jsxref("Operators/delete", "削除", "", 1)}}も可能なプロパティが生成されます。このメソッドでは、これらの詳細事項を既定値から変えることが可能です。既定では、'Object.defineProperty()` を使って追加された値は不変になります。 + +プロパティの記述子は、データ記述子とアクセサー記述子の二つに分かれます。**データ記述子**は値を持つプロパティで、その値は書き換え可能にも不可能にもできます。**アクセサー記述子**は、関数のゲッターとセッターの組で表されるプロパティです。記述子はこれら二種類のどちらかでなければならず、両方になることはできません。 + +どちらの形でも記述子はオブジェクトで表現します。共通して以下のオプションのキーを持つことができます (注: ここでいう**既定値**とは、`Object.defineProperty()` を使ってプロパティを定義する場合です)。 + +- `configurable` + - : `true` である場合のみ、この種の記述子を変更することや、対応するオブジェクトからプロパティを削除することができます。 + **既定値は `false` です。** +- `enumerable` + - : `true` である場合のみ、このプロパティは対応するオブジェクトでのプロパティ列挙に現れます。 + **既定値は `false` です。** + +**データ記述子**は以下のオプションキーも持ちます。 + +- `value` + - : プロパティに関連づけられた値です。有効な JavaScript の値 (number, object, function など) である必要があります。<br> + **既定値は {{jsxref("undefined")}} です。** +- `writable` + - : true` である場合のみ、プロパティに関連づけられた値は{{jsxref("Operators#assignment_operators", "代入演算子", "", 1)}}で変更することができます。<br> + **既定値は false` です。** + +**アクセサー記述子**の場合はオプションとして次のキーも持つことができます。 + +- `get` + - : プロパティのゲッターとなる関数で、ゲッターを設けない場合は {{jsxref("undefined")}} です。プロパティにアクセスするとこの関数が引数なしでコールされます。この関数内で `this` はアクセスしようとしたプロパティを持つオブジェクトになります (プロパティを定義するために作成した記述子オブジェクトではありません)。返値はこのプロパティの値として使われます。 + **既定値は {{jsxref("undefined")}} です。** +- `set` + - : プロパティのセッターとなる関数で、セッターがない場合は {{jsxref("undefined")}} です。プロパティに値が割り当てられたとき、その値を引数としてこの関数がコールされます。この関数内で `this` は割り当てようとしたプロパティを持つオブジェクトになります。 + **既定値は {{jsxref("undefined")}} です。** + +記述子に `value`, `writable`, `get`, `set` のいずれのキーもない場合、データ記述子として扱われます。記述子に `value` または `writable` と、`get` または `set` のキーの両方がある場合は、例外が発生します。 + +これらのキーは必ずしも記述子が直接所有しているとは限らないことに留意してください。継承されたプロパティも同様です。これらの既定値が存在することを保証するには、先行して {{jsxref("Object")}} を凍結しておくか、すべてのオプションを明示的に指定するか、{{jsxref("Object.create", "Object.create(null)")}} で {{jsxref("null")}} に設定するかします。 + +```js +// __proto__ を使うやり方 +var obj = {}; +var descriptor = Object.create(null); // 意図しないキーの継承を防止します。 +descriptor.value = 'static'; + +// 既定で継承不可、変更不可、書換不可のプロパティとなります。 +Object.defineProperty(obj, 'key', descriptor); + +// 明示的な指定 +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// 同じオブジェクトを再利用 +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: value + } + ); + + // 値の代入で重複操作を防ぐ + if (d.value !== value) d.value = value; + + return d; +} +// このように使います。 +Object.defineProperty(obj, 'key', withValue('static')); + +// freeze が利用できるなら、オブジェクトのプロトタイプのプロパティ +// (value, get, set, enumerable, writable, configurable) を +// 追加・削除することを防ぐことができます。 +(Object.freeze || Object)(Object.prototype); +``` + +## 例 + +### プロパティの作成 + +オブジェクトに指定されたプロパティが存在しないとき、`Object.defineProperty()` は指定された形で新たなプロパティを生成します。記述子のキーは省略することができ、そのようなキーには既定値が適用されます。 + +```js +var o = {}; // 新しいオブジェクトの生成 + +// データ記述子により、defineProperty を用いて +// オブジェクトプロパティを追加する例 +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// o オブジェクトに 'a' プロパティが存在するようになり、その値は 37 となります + +// アクセサー記述子により、defineProperty を用いて +// オブジェクトプロパティを追加する例 +var bValue = 38; +Object.defineProperty(o, 'b', { + // メソッド名ショートハンドを利用しています(ES2015 の機能)。 + // 次のように書いているのと同じことです: + // get: function() { return bValue; }, + // set: function(newValue) { bValue = newValue; }, + get() { return bValue; }, + set(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// o オブジェクトに 'b' プロパティが存在するようになり、 +// その値は 38 となります +// o.b は再定義されない限り、その値は常に bValue と同じです。 + +// (訳注:データとアクセサーを)両方を混在させることはできません: +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get() { return 0xdeadbeef; } +}); +// TypeError が発生します。value はデータ記述子にのみ、 +// get はアクセサー記述子にのみ存在していなければなりません。 +``` + +### プロパティの変更 + +プロパティが既に存在している場合、`Object.defineProperty()` は記述子の値および現在のオブジェクトの設定に基づいて、プロパティの変更を試みます。元の記述子で `configurable` 属性が `false` なら、そのプロパティは「変更不可」です。変更不可のプロパティは記述子の属性を変更することができません。データプロパティで `writable` なら、値を変更することができますし、`writable` 属性を `true` から `false` に変更することができます。変更不可のプロパティはデータとアクセサーの種別を切り替えることはできません。 + +変更不可なプロパティに変更を加えようとすると、新旧の値が同じでない限り {{jsxref("TypeError")}} が発生します (可能な場合の `value` と `writable` の変更は除きます)。 + +#### writable 属性 + +`writable` プロパティ属性が `false` に設定されているとき、そのプロパティは「書き込み不可」になります。代入ができなくなります。 + +```js +var o = {}; // 新しいオブジェクトの生成 + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // 37 がログ出力されます +o.a = 25; // エラーは発生しません +// (strict モードでは発生します。同じ値を代入したとしても。) +console.log(o.a); // 37 がログ出力されます。代入文は動作しません。 + +// strict mode +(function() { + 'use strict'; + var o = {}; + Object.defineProperty(o, 'b', { + value: 2, + writable: false + }); + o.b = 3; // TypeError がスローされます: "b" is read-only + return o.b; // 上の行は動作せず 2 が返ります(訳注:正しくは「ここに制御は来ません」) +}()); +``` + +例で見たように、書き込み不可のプロパティに書き込もうとしても変更されず、またエラーは発生しません。 + +#### enumerable 属性 + +`enumerable` プロパティ属性は、そのプロパティが {{jsxref("Object.assign()")}} や [スプレッド](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)演算子で採り上げられるかどうかを定義します。{{jsxref("Global_Objects/Symbol", "Symbol")}} 以外のプロパティでは、 {{jsxref("Statements/for...in", "for...in")}} ループや {{jsxref("Object.keys()")}} に現れるかどうかも定義します。 + +```js +var o = {}; +Object.defineProperty(o, 'a', { + value: 1, + enumerable: true +}); +Object.defineProperty(o, 'b', { + value: 2, + enumerable: false +}); +Object.defineProperty(o, 'c', { + value: 3 +}); // enumerable の既定値は false +o.d = 4; // このようにプロパティを生成するとき、 + // enumerable の既定値は true +Object.defineProperty(o, Symbol.for('e'), { + value: 5, + enumerable: true +}); +Object.defineProperty(o, Symbol.for('f'), { + value: 6, + enumerable: false +}); + +for (var i in o) { + console.log(i); +} +// 'a' と 'd' がログされます(順不同) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +o.propertyIsEnumerable('d'); // true +o.propertyIsEnumerable(Symbol.for('e')); // true +o.propertyIsEnumerable(Symbol.for('f')); // false + +var p = { ...o } +p.a // 1 +p.b // undefined +p.c // undefined +p.d // 4 +p[Symbol.for('e')] // 5 +p[Symbol.for('f')] // undefined +``` + +#### configurable 属性 + +`configurable` 属性は、プロパティをオブジェクトから削除できるかとプロパティの属性 (`value` と `writable` 以外) を変更できるかを同時に制御します。 + +```js +var o = {}; +Object.defineProperty(o, 'a', { + get() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { + configurable: true +}); // TypeError が発生 +Object.defineProperty(o, 'a', { + enumerable: true +}); // TypeError が発生 +Object.defineProperty(o, 'a', { + set() {} +}); // TypeError が発生 (set は未定義であった) +Object.defineProperty(o, 'a', { + get() { return 1; } +}); // TypeError が発生 (新たな get は全く同じであるにもかかわらず) +Object.defineProperty(o, 'a', { + value: 12 +}); // TypeError が発生 ('configurable' が false でも 'value' は変更できますが、ここでは 'get' アクセサーがあるため変更できません) + +console.log(o.a); // logs 1 +delete o.a; // 何も起きません +console.log(o.a); // logs 1 +``` + +`o.a` の `configurable` 属性が `true` である場合、エラーが発生することなく最終的にプロパティが削除されます。 + +### プロパティおよび既定値の追加 + +属性の既定値がどう適用されるかを考えることは重要です。値の割り当てにドット表記を用いた場合と `Object.defineProperty()` を用いた場合とでは、以下の例で示したとおりに違いがあります。 + +```js +var o = {}; + +o.a = 1; +// これは以下と同じです。 +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + +// その一方で、 +Object.defineProperty(o, 'a', { value: 1 }); +// これは以下と同じです。 +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +``` + +### 独自のゲッターおよびセッター + +例として自律的に記録を行うオブジェクトを作成してみます。`temperature` プロパティに値が代入されると、配列 `archive` に要素が一つ追加されます。 + +```js +function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get() { + console.log('get!'); + return temperature; + }, + set(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +``` + +次の例では、ゲッターが常に同じ値を返すようにしています。 + +```js +var pattern = { + get() { + return 'I always return this string, ' + + 'whatever you have assigned'; + }, + set() { + this.myname = 'this is my name string'; + } +}; + +function TestDefineSetAndGet() { + Object.defineProperty(this, 'myproperty', pattern); +} + +var instance = new TestDefineSetAndGet(); +instance.myproperty = 'test'; +console.log(instance.myproperty); +// I always return this string, whatever you have assigned + +console.log(instance.myname); // this is my name string +``` + +### プロパティの継承 + +アクセサープロパティを継承されると、その派生クラスでもプロパティがアクセスされたり書き換えられるときに `get` と `set` が呼ばれます。これらのメソッドが値を保持するために変数を使っていると、すべてのオブジェクトがその値を共有することになります。 + +```js +function myclass() { +} + +var value; +Object.defineProperty(myclass.prototype, "x", { + get() { + return value; + }, + set(x) { + value = x; + } +}); + +var a = new myclass(); +var b = new myclass(); +a.x = 1; +console.log(b.x); // 1 +``` + +この問題を回避する方法は値を別のプロパティで保持することです。`get` と `set` メソッド内で `this` はアクセス／変更されようとしているプロパティを納めるオブジェクトを指しています。 + +```js +function myclass() { +} + +Object.defineProperty(myclass.prototype, "x", { + get() { + return this.stored_x; + }, + set(x) { + this.stored_x = x; + } +}); + +var a = new myclass(); +var b = new myclass(); +a.x = 1; +console.log(b.x); // undefined +``` + +アクセサープロパティとは違い、データプロパティは常にオブジェクト自身に格納されるのであって、prototype に格納されるわけではありません。しかし、書き込み不可能なデータプロパティを継承している場合、継承先オブジェクトでも書き換えは阻止されます。 + +```js +function myclass() { +} + +myclass.prototype.x = 1; +Object.defineProperty(myclass.prototype, "y", { + writable: false, + value: 1 +}); + +var a = new myclass(); +a.x = 2; +console.log(a.x); // 2 +console.log(myclass.prototype.x); // 1 +a.y = 2; // 無視されます。strict モードではエラーが発生します +console.log(a.y); // 1 +console.log(myclass.prototype.y); // 1 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [プロパティの列挙可能性と所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- {{jsxref("Object.defineProperties()")}} +- {{jsxref("Object.propertyIsEnumerable()")}} +- {{jsxref("Object.getOwnPropertyDescriptor()")}} +- {{jsxref("Functions/get", "get")}} +- {{jsxref("Functions/set", "set")}} +- {{jsxref("Object.create()")}} +- {{jsxref("Reflect.defineProperty()")}} diff --git a/files/ja/web/javascript/reference/global_objects/object/entries/index.html b/files/ja/web/javascript/reference/global_objects/object/entries/index.html deleted file mode 100644 index 9b1787ea03..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/entries/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Object.entries() -slug: Web/JavaScript/Reference/Global_Objects/Object/entries -tags: - - JavaScript - - Method - - Object - - Reference - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries ---- -<div>{{JSRef}}</div> - -<p><code><strong>Object.entries()</strong></code> メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 <code>[<var>key</var>, <var>value</var>]</code> からなる配列を返します。配列要素の順序は {{jsxref("Statements/for...in", "for...in")}} ループによる順序と同じです (両者の主な違いは、<code>for...in</code> ループではプロトタイプチェーン内のプロパティも列挙されることです)。</p> - -<p><code><strong>Object.entries()</strong></code> で返される配列の順序は、オブジェクトがどのように定義されたかに依存しません。特定の順序にする必要があるのであれば、<code>Object.entries(obj).sort((a, b) => a[0] - b[0]);</code> のようにして、まず配列を整列する必要があります。</p> - -<div>{{EmbedInteractiveExample("pages/js/object-entries.html", "taller")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">Object.entries(<var>obj</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>obj</var></code></dt> - <dd>返されることになる文字列をキーとした列挙可能な所有プロパティの組 <code>[<var>key</var>, <var>value</var>]</code> を持つオブジェクト。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 <code>[<var>key</var>, <var>value</var>]</code> の配列。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Object.entries()</code> は、<code>object</code> に直接存在する文字列をキーとした列挙可能プロパティの組 <code>[<var>key</var>, <var>value</var>]</code> が配列要素に対応した配列を返します。プロパティの順序はオブジェクト内のプロパティに対してループさせた時の順序と同じになります。</p> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>ネイティブで <code>Object.entries</code> に対応していない古い環境に互換性を持たせる場合は、以下のいずれかを使用することができます。</p> - -<ul> - <li><code>Object.entries</code> の試験的実装である <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> (IE に対応する必要がない場合)</li> - <li><a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> リポジトリにあるポリフィル</li> - <li>または、単純に、下記の配布可能なポリフィルを使うこともできます。</li> -</ul> - -<pre class="brush: js notranslate">if (!Object.entries) { - Object.entries = function( obj ){ - var ownProps = Object.keys( obj ), - i = ownProps.length, - resArray = new Array(i); // preallocate the Array - while (i--) - resArray[i] = [ownProps[i], obj[ownProps[i]]]; - - return resArray; - }; -} -</pre> - -<p>上記のポリフィルのコードスニペットで、IE<9 の対応が必要な場合、Object.keys の polyfill ({{jsxref("Object.keys")}} ページにあるようなもの) も必要となります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; -console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] - -// 配列様オブジェクト -const obj = { 0: 'a', 1: 'b', 2: 'c' }; -console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] - -// ランダムなキー順序を持つ配列様オブジェクト -const anObj = { 100: 'a', 2: 'b', 7: 'c' }; -console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] - -// 列挙可能でないプロパティ getFoo がある -const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); -myObj.foo = 'bar'; -console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] - -// オブジェクトでない引数はオブジェクトへと型強制されます -console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] - -// returns an empty array for any primitive type, since primitives have no own properties -console.log(Object.entries(100)); // [ ] - -// iterate through key-value gracefully -const obj = { a: 5, b: 7, c: 9 }; -for (const [key, value] of Object.entries(obj)) { - console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" -} - -// Or, using array extras -Object.entries(obj).forEach(([key, value]) => { -console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" -}); -</pre> - -<h3 id="Converting_an_Object_to_a_Map" name="Converting_an_Object_to_a_Map"><code>Object</code> から <code>Map</code> への変換</h3> - -<p>{{jsxref("Map", "new Map()")}} コンストラクターは <code>entries</code> による反復処理に対応しています。<code>Object.entries</code> を使うと、{{jsxref("Object")}} から {{jsxref("Map")}} へと簡単に変換できます。:</p> - -<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; -const map = new Map(Object.entries(obj)); -console.log(map); // Map { foo: "bar", baz: 42 } -</pre> - -<h3 id="Iterating_through_an_Object" name="Iterating_through_an_Object"><code>Object</code> をループする</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Array Destructuring</a> を使って、objects を簡単にループできます。</p> - -<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 }; -Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Object.entries")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.values()")}}</li> - <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.fromEntries()")}}</li> - <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/entries/index.md b/files/ja/web/javascript/reference/global_objects/object/entries/index.md new file mode 100644 index 0000000000..2528a8313b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/entries/index.md @@ -0,0 +1,140 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +tags: + - JavaScript + - メソッド + - Object + - リファレンス + - ポリフィル +browser-compat: javascript.builtins.Object.entries +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +{{JSRef}} + +**`Object.entries()`** メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 `[key, value]` からなる配列を返します。これは {{jsxref("Statements/for...in", "for...in")}} ループでの反復処理と同様ですが、違いは `for...in` ループではプロトタイプチェーン内のプロパティも列挙されることです。 + +**`Object.entries()`** で返される配列の順序は、{{jsxref("Statements/for...in", "for...in")}} ループによる順序と同じです。異なる順序にする必要があるのであれば、`Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));` のようにして、まず配列を整列する必要があります。 + +{{EmbedInteractiveExample("pages/js/object-entries.html")}} + +## 構文 + +```js +Object.entries(obj) +``` + +### 引数 + +- `obj` + - : 返されることになる文字列をキーとした列挙可能な所有プロパティの組 `[key, value]` を持つオブジェクト。 + +### 返値 + +引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 `[key, value]` の配列。 + +## 解説 + +`Object.entries()` は、`object` に直接存在する文字列をキーとした列挙可能プロパティの組 `[key, value]` が配列要素に対応した配列を返します。プロパティの順序はオブジェクト内のプロパティに対してループさせた時の順序と同じになります。 + +## ポリフィル + +ネイティブで `Object.entries` に対応していない古い環境に互換性を持たせる場合は、以下のいずれかを使用することができます。 + +- `Object.entries` の試験的実装である [tc39/proposal-object-values-entries](https://github.com/tc39/proposal-object-values-entries) (IE に対応する必要がない場合) +- [es-shims/Object.entries](https://github.com/es-shims/Object.entries) リポジトリーにあるポリフィル +- または、単純に、下記の配布可能なポリフィルを使うこともできます。 + +```js +if (!Object.entries) { + Object.entries = function( obj ){ + var ownProps = Object.keys( obj ), + i = ownProps.length, + resArray = new Array(i); // preallocate the Array + while (i--) + resArray[i] = [ownProps[i], obj[ownProps[i]]]; + + return resArray; + }; +} +``` + +上記のポリフィルのコードスニペットで、IE 9 以前の対応が必要な場合、`Object.keys()` のポリフィル ({{jsxref("Object.keys")}} ページにあるようなもの) も必要となります。 + +## 例 + +```js +const obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// 配列風オブジェクト +const obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// ランダムなキー順序を持つ配列風オブジェクト +const anObj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// 列挙可能でないプロパティ getFoo がある +const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); +myObj.foo = 'bar'; +console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] + +// オブジェクトでない引数はオブジェクトへと型強制されます +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// プリミティブにはプロパティがないため、文字列を除くすべてのプリミティブ型に対して空の配列を返します (上記の例を参照) +console.log(Object.entries(100)); // [ ] + +// 行儀のよいキーと値の反復処理 +const obj = { a: 5, b: 7, c: 9 }; +for (const [key, value] of Object.entries(obj)) { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +} + +// または配列の展開の使用 +Object.entries(obj).forEach(([key, value]) => { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +}); +``` + +### `Object` から `Map` への変換 + +{{jsxref("Map", "new Map()")}} コンストラクターは `entries` による反復処理に対応しています。`Object.entries` を使うと、{{jsxref("Object")}} から {{jsxref("Map")}} へと簡単に変換できます。 + +```js +const obj = { foo: 'bar', baz: 42 }; +const map = new Map(Object.entries(obj)); +console.log(map); // Map(2) {"foo" => "bar", "baz" => 42} +``` + +### `Object` の反復処理 + +[配列の分割](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#array_destructuring)を使って、オブジェクトを簡単に反復処理することができます。 + +```js +const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Object.entries` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-object) で利用できます +- [プロパティの列挙可能性と所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.values()")}} +- {{jsxref("Object.prototype.propertyIsEnumerable()")}} +- {{jsxref("Object.create()")}} +- {{jsxref("Object.fromEntries()")}} +- {{jsxref("Object.getOwnPropertyNames()")}} +- {{jsxref("Map.prototype.entries()")}} +- {{jsxref("Map.prototype.keys()")}} +- {{jsxref("Map.prototype.values()")}} diff --git a/files/ja/web/javascript/reference/global_objects/promise/index.md b/files/ja/web/javascript/reference/global_objects/promise/index.md index 821495840f..7ae6beb868 100644 --- a/files/ja/web/javascript/reference/global_objects/promise/index.md +++ b/files/ja/web/javascript/reference/global_objects/promise/index.md @@ -112,7 +112,7 @@ const promiseA = new Promise( (resolutionFunc,rejectionFunc) => { resolutionFunc(777); }); // この時点で、 "promiseA" はすでに解決されています。 -promiseA.then( (val) => console.log("asynchronous logging has val:",val) ); +promiseA.then( (val) => console.log("asynchronous logging has val:",val) ); console.log("immediate logging"); // 以下の順序で出力が行われます。 diff --git a/files/ja/web/javascript/reference/global_objects/reflect/index.html b/files/ja/web/javascript/reference/global_objects/reflect/index.html deleted file mode 100644 index 57ef6e13c7..0000000000 --- a/files/ja/web/javascript/reference/global_objects/reflect/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Reflect -slug: Web/JavaScript/Reference/Global_Objects/Reflect -tags: - - ECMAScript 2015 - - JavaScript - - Overview - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong>Reflect</strong> は、介入可能な JavaScript 操作に対するメソッドを提供する組込みオブジェクトです。メソッドは<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">プロキシハンドラー</a>のメソッドと同じです。 <code>Reflect</code> は関数オブジェクトではありませんので、構築することはできません。</span></p> - -<h2 id="Description" name="Description">解説</h2> - -<p>他のグローバルオブジェクトとは異なり、 <code>Reflect</code> はコンストラクターではありません。 <a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 演算子</a>で使用したり、 <code>Reflect</code> オブジェクトを関数として呼び出すことはできません。 <code>Reflect</code> のすべてのプロパティとメソッドは ({{jsxref("Math")}} オブジェクトと同様に) 静的です。</p> - -<p><code>Reflect</code> オブジェクトは<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">プロキシハンドラーメソッド</a>と同じ名前をもつ、下記の関数を提供します。</p> - -<p>これらのメソッドの一部は {{jsxref("Object")}} の対応するメソッドとも同じですが、これらの間には<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods">いくらか微妙な違い</a>があります。</p> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{jsxref("Reflect.apply()", "Reflect.apply(<var>target</var>, <var>thisArgument</var>, <var>argumentsList</var>)")}}</dt> - <dd><code><var>target</var></code> 関数を、引数 <code><var>argumentsList</var></code> で指定された引数で呼び出します。 {{jsxref("Function.prototype.apply()")}} も参照してください。</dd> - <dt>{{jsxref("Reflect.construct()", "Reflect.construct(<var>target</var>, <var>argumentsList</var>[, <var>newTarget</var>])")}}</dt> - <dd>関数としての <a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 演算子</a>です。 <code>new <var>target</var>(...<var>argumentsList</var>)</code> を呼び出すのと等価です。別なプロトタイプを指定するためにオプションを指定することもできます。</dd> - <dt>{{jsxref("Reflect.defineProperty()", "Reflect.defineProperty(<var>target</var>, <var>propertyKey</var>, <var>attributes</var>)")}}</dt> - <dd>{{jsxref("Object.defineProperty()")}} と同様です。返値は {{jsxref("Boolean")}} で、プロパティが定義できた場合は <code>true</code> を返します。</dd> - <dt>{{jsxref("Reflect.deleteProperty()", "Reflect.deleteProperty(<var>target</var>, <var>propertyKey</var>)")}}</dt> - <dd>関数としての <a href="/ja/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 演算子</a>です。 <code>delete <var>target</var>[<var>propertyKey</var>]</code> を呼び出すのと等価です。</dd> - <dt>{{jsxref("Reflect.get()", "Reflect.get(<var>target</var>, <var>propertyKey</var>[, <var>receiver</var>])")}}</dt> - <dd>このプロパティの値を返します。オブジェクトからのプロパティの取得 (<code>target[propertyKey]</code>) を関数にしたようなものです。</dd> - <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()", "Reflect.getOwnPropertyDescriptor(<var>target</var>, <var>propertyKey</var>)")}}</dt> - <dd>{{jsxref("Object.getOwnPropertyDescriptor()")}} に似ています。指定したプロパティが存在する場合にプロパティディスクリプターを返し、存在しない場合は {{jsxref("undefined")}} を返します。</dd> - <dt>{{jsxref("Reflect.getPrototypeOf()", "Reflect.getPrototypeOf(<var>target</var>)")}}</dt> - <dd>{{jsxref("Object.getPrototypeOf()")}} と同じです。</dd> - <dt>{{jsxref("Reflect.has()", "Reflect.has(<var>target, propertyKey</var>)")}}</dt> - <dd>{{jsxref("Boolean")}} で対象がそのプロパティを持っているかどうかを返します。固有の場合も継承の場合も含みます。 <a href="/ja/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 演算子</a>を関数にしたものです。</dd> - <dt>{{jsxref("Reflect.isExtensible()", "Reflect.isExtensible(<var>target</var>)")}}</dt> - <dd>{{jsxref("Object.isExtensible()")}} と同じです。 {{jsxref("Boolean")}} を返し、 <code>true</code> ならば対象が拡張可能です。</dd> - <dt>{{jsxref("Reflect.ownKeys()", "Reflect.ownKeys(<var>target</var>)")}}</dt> - <dd>独自の (継承されているものではない) プロパティのキーをもつ文字列の配列を返します。</dd> - <dt>{{jsxref("Reflect.preventExtensions()", "Reflect.preventExtensions(<var>target</var>)")}}</dt> - <dd>{{jsxref("Object.preventExtensions()")}} に似ています。 {{jsxref("Boolean")}} を返し、 <code>true</code> は更新に成功した場合です。</dd> - <dt>{{jsxref("Reflect.set()", "Reflect.set(<var>target</var>, <var>propertyKey</var>, <var>value</var>[, <var>receiver</var>])")}}</dt> - <dd>値をプロパティに割り当てる関数です。更新に成功したら <code>true</code> となる {{jsxref("Boolean")}} を返します。</dd> - <dt>{{jsxref("Reflect.setPrototypeOf()", "Reflect.setPrototypeOf(<var>target</var>, <var>prototype</var>)")}}</dt> - <dd>オブジェクトのプロトタイプを設定する関数です。 {{jsxref("Boolean")}} を返し、 <code>true</code> ならば成功です。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Reflect")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Proxy")}} グローバルオブジェクト</li> - <li>{{jsxref("Proxy.handler", "handler")}} オブジェクト</li> -</ul> - -<div id="gtx-trans" style="position: absolute; left: 22px; top: 1930px;"> -<div class="gtx-trans-icon"></div> -</div> diff --git a/files/ja/web/javascript/reference/global_objects/reflect/index.md b/files/ja/web/javascript/reference/global_objects/reflect/index.md new file mode 100644 index 0000000000..d00a90d436 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/reflect/index.md @@ -0,0 +1,99 @@ +--- +title: Reflect +slug: Web/JavaScript/Reference/Global_Objects/Reflect +tags: + - ECMAScript 2015 + - JavaScript + - 名前空間 + - 概要 + - Reflect +browser-compat: javascript.builtins.Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect +--- +{{JSRef}} + +**`Reflect`** は、JavaScript 操作を受け付けるためのメソッドを提供する組み込みオブジェクトです。メソッドは[プロキシーハンドラー](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy)のメソッドと同じです。`Reflect` は関数オブジェクトではありませんので、構築することはできません。 + +## 解説 + +他の多くのグローバルオブジェクトとは異なり、`Reflect` はコンストラクターではありません。[`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)で使用したり、 `Reflect` オブジェクトを関数として呼び出したりすることはできません。 `Reflect` のすべてのプロパティとメソッドは ({{jsxref("Math")}} オブジェクトと同様に) 静的です。 + +`Reflect` オブジェクトは[プロキシーハンドラーのメソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy)と同じ名前をもつ、下記の関数を提供します。 + +これらのメソッドの一部は {{jsxref("Object")}} の対応するメソッドとも同じですが、これらの間には[いくらか微妙な違い](/ja/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods)があります。 + +## 静的メソッド + +- {{jsxref("Reflect.apply()", "Reflect.apply(<var>target</var>, <var>thisArgument</var>, <var>argumentsList</var>)")}} + - : `target` 関数を、引数 `argumentsList` で指定された引数で呼び出します。 {{jsxref("Function.prototype.apply()")}} も参照してください。 +- {{jsxref("Reflect.construct()", "Reflect.construct(<var>target</var>, <var>argumentsList</var>[, <var>newTarget</var>])")}} + - : 関数としての [`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)です。 `new target(...argumentsList)` を呼び出すのと等価です。別なプロトタイプを指定するためにオプションを指定することもできます。 +- {{jsxref("Reflect.defineProperty()", "Reflect.defineProperty(<var>target</var>, <var>propertyKey</var>, <var>attributes</var>)")}} + - : {{jsxref("Object.defineProperty()")}} と同様です。返値は論理値で、プロパティが定義できた場合は `true` を返します。 +- {{jsxref("Reflect.deleteProperty()", "Reflect.deleteProperty(<var>target</var>, <var>propertyKey</var>)")}} + - : 関数としての [`delete` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/delete)です。 `delete target[propertyKey]` を呼び出すのと等価です。 +- {{jsxref("Reflect.get()", "Reflect.get(<var>target</var>, <var>propertyKey</var>[, <var>receiver</var>])")}} + - : このプロパティの値を返します。オブジェクトからのプロパティの取得 (`target[propertyKey]`) を関数にしたようなものです。 +- {{jsxref("Reflect.getOwnPropertyDescriptor()", "Reflect.getOwnPropertyDescriptor(<var>target</var>, <var>propertyKey</var>)")}} + - : {{jsxref("Object.getOwnPropertyDescriptor()")}} に似ています。指定したプロパティが存在する場合にプロパティ記述子を返し、存在しない場合は {{jsxref("undefined")}} を返します。 +- {{jsxref("Reflect.getPrototypeOf()", "Reflect.getPrototypeOf(<var>target</var>)")}} + - : {{jsxref("Object.getPrototypeOf()")}} と同じです。 +- {{jsxref("Reflect.has()", "Reflect.has(<var>target, propertyKey</var>)")}} + - : 論理値で、対象がそのプロパティを持っているかどうかを返します。固有の場合も継承の場合も含みます。 [`in` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/in)を関数にしたものです。 +- {{jsxref("Reflect.isExtensible()", "Reflect.isExtensible(<var>target</var>)")}} + - : {{jsxref("Object.isExtensible()")}} と同じです。論理値を返し、 `true` ならば対象が拡張可能です。 +- {{jsxref("Reflect.ownKeys()", "Reflect.ownKeys(<var>target</var>)")}} + - : 独自の (継承されているものではない) プロパティのキーをもつ文字列の配列を返します。 +- {{jsxref("Reflect.preventExtensions()", "Reflect.preventExtensions(<var>target</var>)")}} + - : {{jsxref("Object.preventExtensions()")}} に似ています。論理値を返し、 `true` は更新に成功した場合です。 +- {{jsxref("Reflect.set()", "Reflect.set(<var>target</var>, <var>propertyKey</var>, <var>value</var>[, <var>receiver</var>])")}} + - : 値をプロパティに割り当てる関数です。更新に成功したら `true` となる論理値を返します。 +- {{jsxref("Reflect.setPrototypeOf()", "Reflect.setPrototypeOf(<var>target</var>, <var>prototype</var>)")}} + - : オブジェクトのプロトタイプを設定する関数です。論理値を返し、 `true` ならば成功です。 + +## 例 + +### オブジェクトが特定のプロパティを持っているかどうかを検出 + +```js +const duck = { + name: 'Maurice', + color: 'white', + greeting: function() { + console.log(`Quaaaack! My name is ${this.name}`); + } +} + +Reflect.has(duck, 'color'); +// true +Reflect.has(duck, 'haircut'); +// false +``` + +### オブジェクトが所有するキーの返却 + +```js +Reflect.ownKeys(duck); +// [ "name", "color", "greeting" ] +``` + +### オブジェクトへの新しいプロパティの追加 + +```js +Reflect.set(duck, 'eyes', 'black'); +// 成功した場合は "true" を返します。 +// "duck" には "eyes: 'black'" プロパティが設定されました。 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Proxy")}} グローバルオブジェクト +- {{jsxref("Proxy/Proxy", "handler")}} オブジェクト diff --git a/files/ja/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/ja/web/javascript/reference/global_objects/string/fromcodepoint/index.html deleted file mode 100644 index 002ef04424..0000000000 --- a/files/ja/web/javascript/reference/global_objects/string/fromcodepoint/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: String.fromCodePoint() -slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint ---- -<div>{{JSRef}}</div> - -<p><strong><code>String.fromCodePoint()</code></strong> 静的メソッドは指定されたコードポイントのシーケンスを使って生成された文字列を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}</div> - - - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>num1, ..., num<em>N</em></code></dt> - <dd>コードポイントのシーケンスです。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">戻り値</h3> - -<p>指定されたコードポイントのシーケンスを使って生成された文字列です。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>無効な Unicode コードポイントを与えられた場合、{{jsxref("Errors/Not_a_codepoint", "RangeError")}} （例: "RangeError: NaN is not a valid code point" ）がスローされます。</li> -</ul> - -<h2 id="Description" name="Description">説明</h2> - -<p>このメソッドは {{jsxref("String")}} オブジェクトではなく文字列を返します。</p> - -<p><code>fromCodePoint()</code> メソッドは {{jsxref("String")}} の静的なメソッドなので、自ら生成した {{jsxref("String")}} オブジェクトのメソッドとしてではなく、常に <code>String.fromCodePoint()</code> として使用してください。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_fromCharCode" name="Using_fromCharCode"><code>fromCodePoint()</code> を使う</h3> - -<pre class="brush: js">String.fromCodePoint(42); // "*" -String.fromCodePoint(65, 90); // "AZ" -String.fromCodePoint(0x404); // "\u0404" -String.fromCodePoint(0x2F804); // "\uD87E\uDC04" -String.fromCodePoint(194564); // "\uD87E\uDC04" -String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" - -String.fromCodePoint('_'); // RangeError -String.fromCodePoint(Infinity); // RangeError -String.fromCodePoint(-1); // RangeError -String.fromCodePoint(3.14); // RangeError -String.fromCodePoint(3e-2); // RangeError -String.fromCodePoint(NaN); // RangeError -</pre> - -<pre class="brush: js">// String.fromCharCode() alone cannot get the character at such a high code point -// The following, on the other hand, can return a 4-byte character as well as the -// usual 2-byte ones (i.e., it can return a single character which actually has -// a string length of 2 instead of 1!) -console.log(String.fromCodePoint(0x2F804)); // or 194564 in decimal -</pre> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p><code>String.fromCodePoint</code> メソッドは ECMAScript 2015 で追加されました。まだすべての Web ブラウザーや環境でサポートされていないかもしれません。互換性のために次のコードを使用してください。</p> - -<pre class="brush: js">if (!String.fromCodePoint) (function(stringFromCharCode) { - var fromCodePoint = function(_) { - var codeUnits = [], codeLen = 0, result = ""; - for (var index=0, len = arguments.length; index !== len; ++index) { - var codePoint = +arguments[index]; - // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` - // The surrounding `!(...)` is required to correctly handle `NaN` cases - // The (codePoint>>>0) === codePoint clause handles decimals and negatives - if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) - throw RangeError("Invalid code point: " + codePoint); - if (codePoint <= 0xFFFF) { // BMP code point - codeLen = codeUnits.push(codePoint); - } else { // Astral code point; split in surrogate halves - // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae - codePoint -= 0x10000; - codeLen = codeUnits.push( - (codePoint >> 10) + 0xD800, // highSurrogate - (codePoint % 0x400) + 0xDC00 // lowSurrogate - ); - } - if (codeLen >= 0x3fff) { - result += stringFromCharCode.apply(null, codeUnits); - codeUnits.length = 0; - } - } - return result + stringFromCharCode.apply(null, codeUnits); - }; - try { // IE 8 only supports `Object.defineProperty` on DOM elements - Object.defineProperty(String, "fromCodePoint", { - "value": fromCodePoint, "configurable": true, "writable": true - }); - } catch(e) { - String.fromCodePoint = fromCodePoint; - } -}(String.fromCharCode)); -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>初期定義</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("String.fromCharCode()")}}</li> - <li>{{jsxref("String.prototype.charAt()")}}</li> - <li>{{jsxref("String.prototype.codePointAt()")}}</li> - <li>{{jsxref("String.prototype.charCodeAt()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/string/fromcodepoint/index.md b/files/ja/web/javascript/reference/global_objects/string/fromcodepoint/index.md new file mode 100644 index 0000000000..326d23ee33 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/string/fromcodepoint/index.md @@ -0,0 +1,149 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - メソッド + - リファレンス + - String + - UTF-32 + - Unicode + - ポリフィル +browser-compat: javascript.builtins.String.fromCodePoint +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +{{JSRef}} + +**`String.fromCodePoint()`** 静的メソッドは指定されたコードポイントのシーケンスを使って生成された文字列を返します。 + +{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html","shorter")}} + +## 構文 + +```js +String.fromCodePoint(num1) +String.fromCodePoint(num1, num2) +String.fromCodePoint(num1, num2, ..., numN) +``` + +### 引数 + +- `num1, ..., numN` + - : コードポイントの並びです。 + +### 返値 + +指定されたコードポイントの並びを使って生成された文字列です。 + +### 例外 + +- 無効な Unicode コードポイントが与えられた場合、{{jsxref("Errors/Not_a_codepoint", "RangeError")}} (例えば "RangeError: NaN is not a valid code point") が発生します。 + +## 解説 + +このメソッドは ({{jsxref("String")}} オブジェクトでは*なく*) 文字列を返します。 + +`fromCodePoint()` メソッドは {{jsxref("String")}} の静的なメソッドなので、自ら生成した {{jsxref("String")}} オブジェクトのメソッドとしてではなく、常に `String.fromCodePoint()` として使用してください。 + +## ポリフィル + +`String.fromCodePoint` メソッドは ECMAScript 2015 で追加されました。まだすべてのウェブブラウザーや環境で対応していないかもしれません。 + +ポリフィルとして以下のコードを使用してください。 + +```js +if (!String.fromCodePoint) (function(stringFromCharCode) { + var fromCodePoint = function(_) { + var codeUnits = [], codeLen = 0, result = ""; + for (var index=0, len = arguments.length; index !== len; ++index) { + var codePoint = +arguments[index]; + // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity` + // The surrounding `!(...)` is required to correctly handle `NaN` cases + // The (codePoint>>>0) === codePoint clause handles decimals and negatives + if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint)) + throw RangeError("Invalid code point: " + codePoint); + if (codePoint <= 0xFFFF) { // BMP code point + codeLen = codeUnits.push(codePoint); + } else { // Astral code point; split in surrogate halves + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + codePoint -= 0x10000; + codeLen = codeUnits.push( + (codePoint >> 10) + 0xD800, // highSurrogate + (codePoint % 0x400) + 0xDC00 // lowSurrogate + ); + } + if (codeLen >= 0x3fff) { + result += stringFromCharCode.apply(null, codeUnits); + codeUnits.length = 0; + } + } + return result + stringFromCharCode.apply(null, codeUnits); + }; + try { // IE 8 only supports `Object.defineProperty` on DOM elements + Object.defineProperty(String, "fromCodePoint", { + "value": fromCodePoint, "configurable": true, "writable": true + }); + } catch(e) { + String.fromCodePoint = fromCodePoint; + } +}(String.fromCharCode)); +``` + +## 例 + +## `fromCodePoint()` の使用 + +有効な入力: + +```js +String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" +``` + +無効な入力: + +```js +String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError +``` + +### `fromCharCode()` との比較 + +{{jsxref("String.fromCharCode()")}} では補助文字 (すなわち `0x010000` – `0x10FFFF`) のコードポイントを指定することで返すことができません。 +補助文字を返すためには、 UTF-16 のサロゲートペアでが必要です。 + +```js +String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with +String.fromCharCode(55356, 57091); // Stars" == "\uD83C\uDF03" +``` + +一方、 `String.fromCodePoint()` はコードポイント (UTF-32 のコードユニットに相当) を指定することで、 4 バイトの補助文字や、一般的な 2 バイトの BMP 文字を返すことができます。 + +```js +String.fromCodePoint(0x1F303); // または 10 進数で 127747 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `String.fromCodePoint` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp) で利用できます +- {{jsxref("String.fromCharCode()")}} +- {{jsxref("String.prototype.charAt()")}} +- {{jsxref("String.prototype.codePointAt()")}} +- {{jsxref("String.prototype.charCodeAt()")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/includes/index.html b/files/ja/web/javascript/reference/global_objects/string/includes/index.html deleted file mode 100644 index 04fd76a1cd..0000000000 --- a/files/ja/web/javascript/reference/global_objects/string/includes/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: String.prototype.includes() -slug: Web/JavaScript/Reference/Global_Objects/String/includes -tags: - - JavaScript - - Method - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/includes ---- -<div>{{JSRef}}</div> - -<p><strong><code>includes()</code></strong> メソッドは、1 つの文字列を別の文字列の中に見出すことができるかどうかを判断し、必要に応じて <code>true</code> か <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>searchString</var></code></dt> - <dd><code><var>str</var></code> 内で検索される文字列。</dd> - <dt><code><var>position</var></code> {{optional_inline}}</dt> - <dd>文字列内で <code>searchString</code> を検索し始める位置。既定値は 0 です。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>文字列が検索値を含む場合、<strong><code>true</code></strong>。含まなければ、<strong><code>false</code></strong>。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドによってある文字列内に別の文字列を含んでいるかどうか判断できます。</p> - -<h3 id="Case-sensitivity" name="Case-sensitivity">大文字・小文字の区別</h3> - -<p><code>includes()</code> メソッドは大文字と小文字が区別します。例えば、次のコードでは <code>false</code> を返します:</p> - -<pre class="brush: js">'Blue Whale'.includes('blue') // returns false -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_includes" name="Using_includes"><code>includes()</code>を使う</h3> - -<pre class="brush: js">const str = 'To be, or not to be, that is the question.' - -console.log(str.includes('To be')) // true -console.log(str.includes('question')) // true -console.log(str.includes('nonexistent')) // false -console.log(str.includes('To be', 1)) // false -console.log(str.includes('TO BE')) // false -console.log(str.includes('')) // true -</pre> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>このメソッドは ECMAScript 2015 で追加されました。まだ、すべての JavaScript の実装で利用できるとは限りません。</p> - -<p>しかしながら、このメソッドを簡単にエミュレートできます。</p> - -<pre class="brush: js">if (!String.prototype.includes) { - String.prototype.includes = function(search, start) { - 'use strict'; - - if (search instanceof RegExp) { - throw TypeError('first argument must not be a RegExp'); - } - if (start === undefined) { start = 0; } - return this.indexOf(search, start) !== -1; - }; -} -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.String.includes")}}</p> - -<h2 id="String.prototype.contains">String.prototype.contains</h2> - -<p>Firefox 18–39 では、このメソッドの名称は <code>contains()</code> でした。以下の理由により、 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1102219">bug 1102219</a> で <code>includes()</code> に名称が変更されました。</p> - -<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">報告</a>されたところによると、 MooTools 1.2 を使用したいくつかのウェブサイトが Firefox 17 で壊れました。この版の MooTools は、 <code>String.prototype.contains()</code> が存在するかどうか調べ、存在しない場合は MooTools が独自の関数を追加するようになっています。</p> - -<p>この関数が Firefox 17 で導入されたことで、このチェックの動作が変わり、 MooTools の <code>String.prototype.contains()</code> の実装に基づくコードが壊れることになりました。結果的に、 Firefox 17 では実装が<a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">無効化</a>され、 <code>String.prototype.contains()</code> が利用できるようになったのは一つ後のバージョンである Firefox 18 で、 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">MooTools への働きかけ</a>によって <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">MooTools バージョン 1.2.6 がリリース</a>されてからでした。</p> - -<p>MooTools 1.3 では <code>String.prototype.contains()</code> を強制的に自分自身のものに強制したため、これに依存するウェブサイトは壊れません。しかし、このメソッドに対する <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 のシグニチャ</a> と ECMAScript 2015 のシグニチャでは (第 2 引数に) 違いがあることに注意して下さい。後に、 <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5 以降で ES2015 仕様に一致させるためにシグニチャを変更しました。</a></p> - -<p>Firefox 48 で、<code>String.prototype.contains()</code> は削除されました。 <code>String.prototype.includes()</code> だけを使用してください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Array.prototype.includes()")}}</li> - <li>{{jsxref("TypedArray.prototype.includes()")}}</li> - <li>{{jsxref("String.prototype.indexOf()")}}</li> - <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> - <li>{{jsxref("String.prototype.startsWith()")}}</li> - <li>{{jsxref("String.prototype.endsWith()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/string/includes/index.md b/files/ja/web/javascript/reference/global_objects/string/includes/index.md new file mode 100644 index 0000000000..42fc7f77f6 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/string/includes/index.md @@ -0,0 +1,101 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/String/includes +tags: + - JavaScript + - Method + - Prototype + - Reference + - String + - Polyfill +browser-compat: javascript.builtins.String.includes +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +{{JSRef}} + +**`includes()`** メソッドは、1 つの文字列を別の文字列の中に見出すことができるかどうかを判断し、必要に応じて `true` か `false` を返します。 + +{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}} + +## 構文 + +```js +includes(searchString) +includes(searchString, position) +``` + +## 引数 + +- `searchString` + - : `str` 内で検索される文字列。 +- `position` {{optional_inline}} + - : 文字列内で `searchString` を検索し始める位置です。 (既定値は 0 です。) + +### 返値 + +文字列が検索値を含んでいれば、**`true`**。含んでいれば、**`false`**。 + +## 解説 + +このメソッドで、ある文字列が別な文字列の中に含まれているかどうかを判断することができます。 + +### 大文字・小文字の区別 + +`includes()` メソッドは大文字と小文字が区別します。例えば、次のコードでは `false` を返します。 + +```js +'Blue Whale'.includes('blue') // false を返す +``` + +## ポリフィル + +このメソッドは ECMAScript 2015 で追加されました。まだ、すべての JavaScript の実装で利用できるとは限りません。 + +しかしながら、このメソッドを簡単に代替できます。 + +```js +if (!String.prototype.includes) { + String.prototype.includes = function(search, start) { + 'use strict'; + + if (search instanceof RegExp) { + throw TypeError('first argument must not be a RegExp'); + } + if (start === undefined) { start = 0; } + return this.indexOf(search, start) !== -1; + }; +} +``` + +## 例 + +### `includes()` の使用 + +```js +const str = 'To be, or not to be, that is the question.' + +console.log(str.includes('To be')) // true +console.log(str.includes('question')) // true +console.log(str.includes('nonexistent')) // false +console.log(str.includes('To be', 1)) // false +console.log(str.includes('TO BE')) // false +console.log(str.includes('')) // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `String.prototype.includes` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp) で利用できます +- {{jsxref("Array.prototype.includes()")}} +- {{jsxref("TypedArray.prototype.includes()")}} +- {{jsxref("String.prototype.indexOf()")}} +- {{jsxref("String.prototype.lastIndexOf()")}} +- {{jsxref("String.prototype.startsWith()")}} +- {{jsxref("String.prototype.endsWith()")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html deleted file mode 100644 index e88234381b..0000000000 --- a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: String.prototype.localeCompare() -slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare -tags: - - Internationalization - - JavaScript - - Method - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare ---- -<div>{{JSRef("Global_Objects", "String")}}</div> - -<p><strong><code>localeCompare()</code></strong> メソッドは参照文字列がソート順で引数で与えられた文字列と大なり、小なり、等しいとなるかどうかを示す数値を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}</div> - - - -<p>新しい<code>locales</code> と <code>options</code> 引数によってアプリケーションはソート順で使われる言語を指定し関数の振る舞いをカスタマイズできます。古い実装では、<code>locales</code>引数と<code>options</code>引数は無視されます。使用されるローケルとソート順は完全に実装依存しています。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>compareString</var></code></dt> - <dd> - <p><code><var>referenceStr</var></code> と比較される文字列。</p> - </dd> - <dt><code><var>locales</var></code> 、 <code><var>options</var></code></dt> - <dd> - <p>これらの引数は関数の振る舞いをカスタマイズし、使用されるべきフォーマット規約の言語をアプリケーションに決めさせます。引数 <code><var>locales</var></code> 、 <code><var>options</var></code> を無視する実装においては、使用されるロケールと返却される文字列の書式は完全に実装依存となります。</p> - - <p>これらのパラメーターの詳細及び使用方法については <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator"><code>Intl.Collator()</code> コンストラクター</a> を見てください。</p> - </dd> -</dl> - -<div>{{page('/docs/Web/JavaScript/Reference/Global_Objects/Collator', 'Parameters')}}</div> - -<div> -<h3 id="戻り値">戻り値</h3> - -<p><code><var>referenceStr</var></code> が <code><var>compareString</var></code> より前に出現する場合は負数、 <code><var>referenceStr</var></code> が <code><var>compareString</var></code> より後に出現する場合は正数、等しい場合は 0 。</p> -</div> - -<h2 id="Description" name="Description">説明</h2> - -<p><code><var>referenceStr</var></code> が <code><var>compareString</var></code> より辞書順で先に来るか、後に来るか、あるいは等しいかを示す整数を返します。</p> - -<ul> - <li><code><var>referenceStr</var></code> が <code><var>compareString</var></code> より先に出現する場合は負数</li> - <li><code><var>referenceStr</var></code> が <code><var>compareString</var></code> より後に出現する場合は正数</li> - <li>等しい場合は <code>0</code></li> -</ul> - -<div class="blockIndicator warning"> -<p><strong>戻り値が厳密に -1 や 1 であると考えないように</strong></p> - -<p>負数と正数が結果としてどんな数値になるかはブラウザー間（及びブラウザーのバージョン間）で異なります。これは W3C の仕様が負の値か正の値かとだけ指定しているためです。ブラウザーによっては<code>-2</code> や <code>2</code> を、あるいはまた別の負の値、正の値を返却するかもしれません。</p> -</div> - -<h2 id="パフォーマンス">パフォーマンス</h2> - -<p>巨大な配列のソートなど大量の文字列を比較する場合は {{jsxref("Global_Objects/Collator", "Intl.Collator")}} オブジェクトを作成し、 {{jsxref("Collator.prototype.compare", "compare")}} プロパティで提供される関数を利用すると良いでしょう。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Example_Using_localeCompare" name="Example:_Using_localeCompare"><code>localeCompare()</code>を使う</h3> - -<pre class="brush: js notranslate">// 文字 "a" は "c" は負数になります -'a'.localeCompare('c'); // -2 や -1 （あるいはまた別の負数） - -// 単語 "check" はアルファベット順に "against" より後ろなので正数になります -'check'.localeCompare('against'); // 2 や -1 （あるいはまた別の正数） - -// "a" と"a" は等しいので自然数 0 になります -'a'.localeCompare('a'); // 0 -</pre> - -<h3 id="配列のソート">配列のソート</h3> - -<p><code>localeCompare()</code> は case-insensitive な配列のソートを行います。</p> - -<pre class="notranslate">let items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu']; -items.sort( (a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true})); -// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé'] -</pre> - -<h3 id="Example_Checking_for_support_for_locales_and_options_arguments" name="Example:_Checking_for_support_for_locales_and_options_arguments">拡張された引数をブラウザーがサポートしているか調べる</h3> - -<p>引数 <code><var>locales</var></code> と <code><var>options</var></code> はすべてのプラウザでまだサポートされていません。</p> - -<p>実装がこれらをサポートしているか調べるため引数 <code>"i"</code> （不正な言語タグが除外される要件）を利用し、例外 {{jsxref("RangeError")}} を調べます。</p> - -<pre class="brush: js notranslate">function localeCompareSupportsLocales() { - try { - 'a'.localeCompare('b', 'i'); - } catch (e) { - return e.name === 'RangeError'; - } - return false; -} -</pre> - -<h3 id="Example_Using_locales" name="Example:_Using_locales"><code>locales</code>を使う</h3> - -<p><code>localeCompare()</code>によって得られる結果は言語間で違います。アプリケーションのユーザインターフェイスで使用される言語のソート順を得るために、 <code>locales</code>引数を使用してその言語(そしておそらくいくつかのフォールバック言語)を指定していることを確かめて下さい。:</p> - -<pre class="brush: js notranslate">console.log('ä'.localeCompare('z', 'de')); // 負数: ドイツ語で ä は a に分類される -console.log('ä'.localeCompare('z', 'sv')); // 正数: スウェーデン語では ä は z の後になる -</pre> - -<h3 id="Example_Using_options" name="Example:_Using_options"><code>options</code>を使う</h3> - -<p><code>localeCompare()</code>によって得られる結果は<code>options</code>引数を使用することによってカスタマイズできます。:</p> - -<pre class="brush: js notranslate">// ドイツ語では ä の base letter は a -console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0 - -// スウェーデン語では ä と a は異なる base letters -console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // a positive value -</pre> - -<h3 id="数字のソート">数字のソート</h3> - -<pre class="brush: js notranslate">// デフォルトでは "2" > "10" -console.log(<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">"2".localeCompare("10")</span></span></span>); // 1 - -// オプションを使った数字 -console.log(<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">"2".localeCompare("10", undefined, {numeric: true})</span></span></span>); // -1 - -// ロケールタグを使った数字 -console.log(<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">"2".localeCompare("10", "en-u-kn-true")</span></span></span>); // -1 -</pre> - -<h2 id="仕様">仕様</h2> - -<table> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sup-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<div> -<p>{{Compat("javascript.builtins.String.localeCompare")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md new file mode 100644 index 0000000000..60b166b4b5 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/string/localecompare/index.md @@ -0,0 +1,146 @@ +--- +title: String.prototype.localeCompare() +slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare +tags: + - Internationalization + - JavaScript + - Method + - Prototype + - Reference + - String +browser-compat: javascript.builtins.String.localeCompare +translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare +--- +{{JSRef}} + +**`localeCompare()`** メソッドは、参照先の文字列が整列順で与えられた文字列より前に来るか、後に来るか、同じであるかを示す数値を返します。 + +{{EmbedInteractiveExample("pages/js/string-localecompare.html")}} + +新しい `locales` と `options` 引数を使用すると、アプリケーションが整列順で使用される言語を指定し、関数の動作をカスタマイズすることができます。古い実装では、`locales` および `options` 引数は無視され、使用されるロケールと整列順は完全に実装依存になります。 + +## 構文 + +```js +referenceStr.localeCompare(compareString) +referenceStr.localeCompare(compareString, locales) +referenceStr.localeCompare(compareString, locales, options) +``` + +### 引数 + +- `compareString` + - : この文字列と比較される文字列です。 +- `locales` および `options` + + - : これらの引数は関数の動作をカスタマイズし、アプリケーションが使用すべき書式化の習慣を持つ言語を決めることができます。 `locales` および `options` 引数を無視する実装においては、使用されるロケールと返却される文字列の書式は完全に実装依存となります。 + + これらの引数の詳細および使用方法については [`Intl.Collator()` コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator)を参照してください。 + +### 返値 + +`referenceStr` が `compareString` より前に出現するものである場合は**負**の数です。 `referenceStr` が `compareString` より後に出現するものである場合は**正**の数です。等しい場合は `0` です。 + +## 解説 + +`referenceStr` が `compareString` より前に来るか、後に来るか、あるいは等しいかを示す整数を返します。 + +- `referenceStr` が `compareString` より前に出現するものである場合は負の数 +- `referenceStr` が `compareString` より後に出現するものである場合は正の数 +- 等しい場合は `0` + +> **Warning:** 返値が正確な `-1` または `1` であると思わないでください。 +> +> 結果の負の整数と正の整数は、ブラウザー間 (およびブラウザーのバージョン間) で異なります。これは W3C の仕様が負の値か正の値かとだけ指定しているためです。ブラウザーによっては `-2` や `2` を、あるいは他の負の値、正の値を返却するかもしれません。 + +## 性能 + +巨大な配列のソートなど大量の文字列を比較する場合は {{jsxref("Global_Objects/Collator", "Intl.Collator")}} オブジェクトを作成し、 {{jsxref("Collator.prototype.compare", "compare")}} プロパティで提供される関数を使うことをお勧めします。 + +## 例 + +### `localeCompare()` の使用 + +```js +// 文字 "a" は "c" は負の数になります +'a'.localeCompare('c'); // -2 や -1 （あるいはまた別の負の数） + +// 単語 "check" はアルファベット順に "against" より後ろなので正の数になります +'check'.localeCompare('against'); // 2 や -1 （あるいはまた別の正の数） + +// "a" と"a" は等しいので自然数 0 になります +'a'.localeCompare('a'); // 0 +``` + +### 配列の並べ替え + +`localeCompare()` で、大文字小文字の違いを無視した配列の並べ替えができます。 + +```js +let items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu']; +items.sort( (a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true})); +// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé'] +``` + +### 拡張引数をブラウザーが対応しているか調べる + +`locales` と `options` の引数は、まだすべてのブラウザーで対応しているわけではありません。 + +実装がこれらに対応しているか調べるには、引数 `"i"` (不正な言語タグが除外される要件) を使用して、例外 {{jsxref("RangeError")}} を調べてください。 + +```js +function localeCompareSupportsLocales() { + try { + 'foo'.localeCompare('bar', 'i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +``` + +### `locales` の使用 + +`localeCompare()` によって得られる結果は言語間で異なります。アプリケーションのユーザーインターフェイスで使用される言語の整列順を得るには、 `locales` 引数を使用してその言語 (そしてできればいくつかの代替言語) を指定していることを確かめて下さい。 + +```js +console.log('ä'.localeCompare('z', 'de')); // 負の数: ドイツ語で ä は a に分類される +console.log('ä'.localeCompare('z', 'sv')); // 正の数: スウェーデン語では ä は z の後になる +``` + +### `options` の使用 + +`localeCompare()` によって得られる結果は、 `options` 引数を使用することによってカスタマイズできます。: + +```js +// ドイツ語では ä の base letter は a +console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0 + +// スウェーデン語では ä と a は base letter が異なる +console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // 正の値 +``` + +### 数値の並べ替え + +```js +// 既定では "2" > "10" +console.log("2".localeCompare("10")); // 1 + +// options を使用した数値 +console.log("2".localeCompare("10", undefined, {numeric: true})); // -1 + +// ロケールタグを使用した数値 +console.log("2".localeCompare("10", "en-u-kn-true")); // -1 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Global_Objects/Collator", "Intl.Collator")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/match/index.html b/files/ja/web/javascript/reference/global_objects/string/match/index.html deleted file mode 100644 index 6f98608356..0000000000 --- a/files/ja/web/javascript/reference/global_objects/string/match/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: String.prototype.match() -slug: Web/JavaScript/Reference/Global_Objects/String/match -tags: - - JavaScript - - Method - - Prototype - - Reference - - Regular Expressions - - String - - メソッド - - 正規表現 -translation_of: Web/JavaScript/Reference/Global_Objects/String/match ---- -<div>{{JSRef}}</div> - -<p><strong><code>match()</code></strong> メソッドは、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>に対する<em>文字列</em>のマッチングの結果を受け取ります。</p> - -<div>{{EmbedInteractiveExample("pages/js/string-match.html", "shorter")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>regexp</var></code></dt> - <dd>正規表現オブジェクトです。</dd> - <dd><code><var>regexp</var></code> が <code>RegExp</code> ではないオブジェクトであった場合、 {{jsxref("RegExp")}} への暗黙的な変換が <code>new RegExp(<var>regexp</var>)</code> を使用して行われます。</dd> - <dd>一切引数を与えずに <code>match()</code> メソッドを使った場合、空の文字列 1 つを持つ {{jsxref("Array")}}、 <code>[""]</code> が得られます。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>グローバル (<code>g</code>) フラグの有無によって内容が変わる {{jsxref("Array")}} を返します。一致するものが見つからなかった場合は {{jsxref("null")}} を返します。</p> - -<ul> - <li><code>g</code> フラグがあった場合は、正規表現全体に一致したすべての結果を返しますが、キャプチャグループは返しません。</li> - <li><code>g</code> フラグがなかった場合、最初に完全に一致したものと、それに関するキャプチャグループを返します。この場合、返される要素には下記の追加のプロパティが存在します。</li> -</ul> - -<h4 id="Additional_properties" name="Additional_properties">追加のプロパティ</h4> - -<p>上記の説明にある通り、結果は追加のプロパティを含むことがあります。</p> - -<dl> - <dt><code>groups</code></dt> - <dd>名前付きキャプチャグループのオブジェクトで、キーは名前、値はキャプチャグループ、または名前付きキャプチャグループが定義されていない場合は {{jsxref("undefined")}} です。詳細は<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">グループと範囲</a>を見てください。</dd> - <dt><code>index</code></dt> - <dd>結果が見つかった検索のインデックスです。</dd> - <dt><code>input</code></dt> - <dd>検索された文字列のコピーです。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>正規表現が <code>g</code> フラグを含んでいない場合、 <code>str.match()</code> は {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} と同じ結果を返します。</p> - -<h3 id="Other_methods" name="Other_methods">その他のメソッド</h3> - -<ul> - <li>ある文字列が正規表現 {{jsxref("RegExp")}} に一致するかどうかを知る必要がある場合は、 {{jsxref("RegExp.prototype.test()", "RegExp.test()")}} を使用してください。</li> - <li>一番最初に一致したものだけが欲しい場合、代わりに {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} を使ったほうが良いかもしれません。</li> - <li>キャプチャグループを取得する場合でグローバルフラグが設定されていた場合は、 {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} を使用してください。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_match" name="Using_match">match() の使用</h3> - -<p>以下の例において、 <code>match()</code> は '<code>Chapter</code>' とそれに続く 1 桁以上の数字、それに続く 0 回以上の小数点と数字を見つけるために使われています。</p> - -<p>正規表現が <code>i</code> フラグを含んでいるので、大文字と小文字の違いは無視されます。</p> - -<pre class="brush: js">let str = 'For more information, see Chapter 3.4.5.1'; -let re = /see (chapter \d+(\.\d)*)/i; -let found = str.match(re); - -console.log(found); - -// logs [ 'see Chapter 3.4.5.1', -// 'Chapter 3.4.5.1', -// '.1', -// index: 22, -// input: 'For more information, see Chapter 3.4.5.1' ] - -// 'see Chapter 3.4.5.1' is the whole match. -// 'Chapter 3.4.5.1' was captured by '(chapter \d+(\.\d)*)'. -// '.1' was the last value captured by '(\.\d)'. -// The 'index' property (22) is the zero-based index of the whole match. -// The 'input' property is the original string that was parsed.</pre> - -<h3 id="Using_global_and_ignore_case_flags_with_match" name="Using_global_and_ignore_case_flags_with_match">match() での g と i フラグの使用</h3> - -<p>以下の例は、 g と i フラグを <code>match()</code> で使用した実例です。 <code>A</code> から <code>E</code> までと、 <code>a</code> から <code>e</code> までのすべての文字が返され、それぞれが配列の個々の要素に入ります。</p> - -<pre class="brush: js">let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; -let regexp = /[A-E]/gi; -let matches_array = str.match(regexp); - -console.log(matches_array); -// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e'] -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> {{jsxref("String.prototype.matchAll()")}} と<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_Searching_With_Flags">フラグを用いた高度な検索</a>も参照してください。</p> -</div> - -<h3 id="Using_named_capturing_groups" name="Using_named_capturing_groups">名前付きキャプチャグループの使用</h3> - -<p>名前付きキャプチャグループに対応しているブラウザーでは、次のコードは "<code>fox</code>" または "<code>cat</code>" を "<code>animal</code>" という名前のグループに入れます。</p> - -<pre class="brush: js">let paragraph = 'The quick brown fox jumps over the lazy dog. It barked.'; - -let capturingRegex = /(?<animal>fox|cat) jumps over/; -found = paragraph.match(capturingRegex); -console.log(found.groups); // {animal: "fox"} -</pre> - -<h3 id="Using_match_with_no_parameter" name="Using_match()_with_no_parameter">引数なしの match() の使用</h3> - -<pre class="brush: js">let str = "Nothing will come of nothing."; - -str.match(); // returns [""]</pre> - -<h3 id="A_non-RegExp_object_as_the_parameter" name="A_non-RegExp_object_as_the_parameter">RegExp ではないオブジェクトを引数にする</h3> - -<p>引数 <code><var>regexp</var></code> が文字列または数値である場合、暗黙に <code>new RegExp(<var>regexp</var>)</code> を使用して {{jsxref("RegExp")}} に変換されます。</p> - -<p>正の符号がついた正の数であった場合、 <code>RegExp()</code> は正の符号を無視します。</p> - -<pre class="brush: js">let str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.", - str2 = "My grandfather is 65 years old and My grandmother is 63 years old.", - str3 = "The contract was declared null and void."; -str1.match("number"); // "number" is a string. returns ["number"] -str1.match(NaN); // the type of NaN is the number. returns ["NaN"] -str1.match(Infinity); // the type of Infinity is the number. returns ["Infinity"] -str1.match(+Infinity); // returns ["Infinity"] -str1.match(-Infinity); // returns ["-Infinity"] -str2.match(65); // returns ["65"] -str2.match(+65); // A number with a positive sign. returns ["65"] -str3.match(null); // returns ["null"]</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<h3 id="Basic_support_for_match" name="Basic_support_for_match"><code>match()</code> の基本対応</h3> - -<p>{{Compat("javascript.builtins.String.match")}}</p> - -<h3 id="Support_for_named_capture_groups" name="Support_for_named_capture_groups">名前付きキャプチャグループの対応</h3> - -<p>{{Compat("javascript.builtins.RegExp.named_capture_groups")}}</p> - -<h2 id="Firefox-specific_notes" name="Firefox-specific_notes">Firefox 特有のメモ</h2> - -<ul> - <li>標準外の第二引数 <code>flags</code> が Firefox のみで <code><var>str</var>.match(<var>regexp, flags</var>)</code> のように使用できました。 Firefox 49 以降では削除されています。</li> - <li>Firefox 27 において、このメソッドは ECMAScript 仕様書に合うように調整されました。 <code>match()</code> がグローバルの正規表現で呼び出された場合、 {{jsxref("RegExp.lastIndex")}} プロパティは (もしあれば) <code>0</code> にリセットされるようになりました (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501739">bug 501739</a>)。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("String.prototype.matchAll()")}}</li> - <li>{{jsxref("RegExp")}}</li> - <li>{{jsxref("RegExp.prototype.exec()")}}</li> - <li>{{jsxref("RegExp.prototype.test()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/string/match/index.md b/files/ja/web/javascript/reference/global_objects/string/match/index.md new file mode 100644 index 0000000000..969a27462a --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/string/match/index.md @@ -0,0 +1,161 @@ +--- +title: String.prototype.match() +slug: Web/JavaScript/Reference/Global_Objects/String/match +tags: + - JavaScript + - メソッド + - プロトタイプ + - リファレンス + - 正規表現 + - String +browser-compat: javascript.builtins.String.match +translation_of: Web/JavaScript/Reference/Global_Objects/String/match +--- +{{JSRef}} + +**`match()`** メソッドは、[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)に対する*文字列*の照合結果を受け取ります。 + +{{EmbedInteractiveExample("pages/js/string-match.html", "shorter")}} + +## 構文 + +```js +match(regexp) +``` + +### 引数 + +- `regexp` + + - : 正規表現オブジェクトです。 + + `regexp` が `RegExp` ではないオブジェクトであった場合、暗黙的に {{jsxref("RegExp")}} への変換が `new RegExp(regexp)` を使用して行われます。 + + 一切引数を与えずに `match()` メソッドを使った場合、空の文字列 1 つを持つ {{jsxref("Array")}}、 `[""]` が得られます。 + +### 返値 + +{{jsxref("Array")}} を返します。これはグローバル (`g`) フラグの有無によって内容が変わります。一致するものが見つからなかった場合は {{jsxref("null")}} を返します。 + +- `g` フラグがあった場合は、正規表現全体に一致したすべての結果を返しますが、キャプチャグループは返しません。 +- `g` フラグがなかった場合、最初に完全に一致したものと、それに関するキャプチャグループを返します。この場合、返される要素には下記の追加のプロパティが存在します。 + +#### 追加のプロパティ + +上記の説明にある通り、結果は追加のプロパティを含むことがあります。 + +- `groups` + - : 名前付きキャプチャグループのオブジェクトで、キーは名前、値はキャプチャグループ、または名前付きキャプチャグループが定義されていない場合は {{jsxref("undefined")}} です。詳細は[グループと範囲](/ja/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges)を参照してください。 +- `index` + - : 結果が見つかった検索のインデックスです。 +- `input` + - : 検索された文字列のコピーです。 + +## 解説 + +正規表現に `g` フラグが付いていない場合、 `str.match()` は {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} と同じ結果を返します。 + +### その他のメソッド + +- ある文字列が正規表現 {{jsxref("RegExp")}} に一致するかどうかを知る必要がある場合は、 {{jsxref("RegExp.prototype.test()", "RegExp.test()")}} を使用してください。 +- 一番最初に一致したものだけが欲しい場合、代わりに {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} を使ったほうが良いかもしれません。 +- キャプチャグループを取得する場合でグローバルフラグが設定されていた場合は、 {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} を使用してください。 + +## 例 + +### match() の使用 + +以下の例において、 `match()` は '`Chapter`' とそれに続く 1 桁以上の数字、それに続く 0 回以上の小数点と数字を見つけるために使われています。 + +正規表現が `i` フラグを含んでいるので、大文字と小文字の違いは無視されます。 + +```js +const str = 'For more information, see Chapter 3.4.5.1'; +const re = /see (chapter \d+(\.\d)*)/i; +const found = str.match(re); + +console.log(found); + +// logs [ 'see Chapter 3.4.5.1', +// 'Chapter 3.4.5.1', +// '.1', +// index: 22, +// input: 'For more information, see Chapter 3.4.5.1' ] + +// 'see Chapter 3.4.5.1' は一致するもの全体です。 +// 'Chapter 3.4.5.1' は '(chapter \d+(\.\d)*)' でキャプチャされたものです。 +// '.1' は '(\.\d)' でキャプチャされた最後の値です。 +// 'index' プロパティ (22) はゼロから始まる一致した位置です。 +// 'input' プロパティは解釈された元の文字列です。 +``` + +### match() での g と i フラグの使用 + +以下の例は、 g と i フラグを `match()` で使用した実例です。 `A` から `E` までと、 `a` から `e` までのすべての文字が返され、それぞれが配列の個々の要素に入ります。 + +```js +const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; +const regexp = /[A-E]/gi; +const matches_array = str.match(regexp); + +console.log(matches_array); +// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e'] +``` + +> **Note:** {{jsxref("String.prototype.matchAll()")}} と[フラグを用いた高度な検索](/ja/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags)も参照してください。 + + +### 名前付きキャプチャグループの使用 + +名前付きキャプチャグループに対応しているブラウザーでは、次のコードは "`fox`" または "`cat`" を "`animal`" という名前のグループに入れます。 + +```js +const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.'; + +const capturingRegex = /(?<animal>fox|cat) jumps over/; +const found = paragraph.match(capturingRegex); +console.log(found.groups); // {animal: "fox"} +``` + +### 引数なしの match() の使用 + +```js +const str = "Nothing will come of nothing."; + +str.match(); // returns [""] +``` + +### RegExp ではないオブジェクトを引数にする + +引数 `regexp` が文字列または数値である場合、暗黙に `new RegExp(regexp)` を使用して {{jsxref("RegExp")}} に変換されます。 + +正の符号がついた正の数であった場合、 `RegExp()` は正の符号を無視します。 + +```js +const str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.", + str2 = "My grandfather is 65 years old and My grandmother is 63 years old.", + str3 = "The contract was declared null and void."; +str1.match("number"); // "number" は文字列です。 ["number"] を返します。 +str1.match(NaN); // NaN の型は数値です。 ["NaN"] を返します。 +str1.match(Infinity); // Infinity の方は数値です。 ["Infinity"] を返します。 +str1.match(+Infinity); // ["Infinity"] を返します +str1.match(-Infinity); // ["-Infinity"] を返します +str2.match(65); // ["65"] を返します +str2.match(+65); // 正の符号が付いた数値です。 ["65"] を返します +str3.match(null); // ["null"] を返します。 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("String.prototype.matchAll()")}} +- {{jsxref("RegExp")}} +- {{jsxref("RegExp.prototype.exec()")}} +- {{jsxref("RegExp.prototype.test()")}} diff --git a/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md b/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md new file mode 100644 index 0000000000..b8fb3820d8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/weakref/deref/index.md @@ -0,0 +1,62 @@ +--- +title: WeakRef.prototype.deref() +slug: Web/JavaScript/Reference/Global_Objects/WeakRef/deref +tags: + - JavaScript + - メソッド + - プロトタイプ + - Reference + - WeakRef +browser-compat: javascript.builtins.WeakRef.deref +translation_of: Web/JavaScript/Reference/Global_Objects/WeakRef/deref +--- +{{JSRef}} + +`deref` メソッドは {{jsxref("WeakRef")}} インスタンスのターゲットオブジェクトを返します。そのオブジェクトが既にガベージコレクションされている場合は `undefined` を返します。 + +## 構文 + +```js +deref() +``` + +### 返値 + +WeakRef のターゲットオブジェクトです。そのオブジェクトが既にガベージコレクションされている場合は `undefined` です。 + +## 注意事項 + +重要な注意事項については {{jsxref("WeakRef")}} ページの [WeakRef の注意事項](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#notes_on_weakrefs)の節を参照してください。 + +## 例 + +### deref の使用 + +完全な例については {{jsxref("WeakRef")}} ページ内の[例](/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakRef#examples)の節を参照してください。 + +```js +const tick = () => { + // 弱参照から要素を取得する (まだ存在していれば) + const element = this.ref.deref(); + if (element) { + element.textContent = ++this.count; + } else { + // 要素が既に存在しない場合 + console.log("この要素は消滅しました"); + this.stop(); + this.ref = null; + } +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("WeakRef")}} diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.html deleted file mode 100644 index 68ac6cb80a..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: WebAssembly.Instance() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance -tags: - - Constructor - - JavaScript - - Reference - - WebAssembly - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance ---- -<div>{{JSRef}}</div> - -<p> <strong><code>WebAssembly.Instance()</code></strong> コンストラクターは、新しい <code>Instance</code> オブジェクトを生成し、これはステートフルで実行可能な {{jsxref("WebAssembly.Module")}} のインスタンスです。</p> - -<p> <code>WebAssembly.Instance()</code> コンストラクター関数は同期的に {{jsxref("WebAssembly.Module")}} オブジェクトをインスタンス化することができます。しかし、主な <code>Instance</code> の取得方法は非同期の {{jsxref("WebAssembly.instantiateStreaming()")}} 関数を使用する方法です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<div class="warning"> -<p><strong>重要</strong>: 巨大なモジュールのインスタンス化は高コストになる可能性があります。開発者が同期的な <code>Instance()</code> コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。他のすべての場合で非同期の {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドの使用が推奨されます。</p> -</div> - -<pre class="syntaxbox">new WebAssembly.Instance(<em>module</em>, <em>importObject</em>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>module</em></dt> - <dd>インスタンス化する {{jsxref("WebAssembly.Module")}} オブジェクト。</dd> - <dt><em>importObject</em> {{optional_inline}}</dt> - <dd>関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなどの新しく生成される <code>Instance</code> にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、 {{jsxref("WebAssembly.LinkError")}} が発生します。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#dom-instance-instance', 'Instance')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Instance.Instance")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md new file mode 100644 index 0000000000..0b8326c9d3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md @@ -0,0 +1,82 @@ +--- +title: WebAssembly.Instance() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance +tags: + - コンストラクター + - JavaScript + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Instance.Instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance +--- +{{JSRef}} + +**`WebAssembly.Instance()`** コンストラクターは、新しい `Instance` オブジェクトを生成します。これはステートフルで実行可能な {{jsxref("WebAssembly.Module")}} のインスタンスです。 + +## 構文 + +> **Warning:** 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用してください。 + +```js +new WebAssembly.Instance(module, importObject) +``` + +### 引数 + +- _module_ + - : インスタンス化する {{jsxref("WebAssembly.Module")}} オブジェクト。 +- _importObject_ {{optional_inline}} + - : 新しく生成される `Instance` にインポートされる値を持つオブジェクトで、例えば関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなどです。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、 {{jsxref("WebAssembly.LinkError")}} が発生します。 + +## 例 + +### WebAssembly モジュールの同期的なインスタンス化 + +次のように `WebAssembly.Instance()` コンストラクター関数を呼び出して、渡した {{jsxref("WebAssembly.Module")}} オブジェクトを同期的にインスタンス化することができます。 + +```js +const importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => { + let mod = new WebAssembly.Module(bytes); + let instance = new WebAssembly.Instance(mod, importObject); + instance.exports.exported_func(); +}) +``` + +ただし、`Instance` を取得する方法としては、次のように、非同期の {{jsxref("WebAssembly.instantiateStreaming()")}} 関数を使用することをお勧めします。 + +```js +const importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/operators/addition/index.html b/files/ja/web/javascript/reference/operators/addition/index.html deleted file mode 100644 index dc258fc3c1..0000000000 --- a/files/ja/web/javascript/reference/operators/addition/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 加算 (+) -slug: Web/JavaScript/Reference/Operators/Addition -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>加算演算子 (<code>+</code>) は、数値オペランドまたは文字列連結の合計を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="数値加算">数値加算</h3> - -<pre class="brush: js notranslate">// 数値 + 数値 -> 加算 -1 + 2 // 3 - -// ブール値 + 数値 -> 加算 -true + 1 // 2 - -// ブール値 + ブール値 -> 加算 -false + false // 0 -</pre> - -<h3 id="文字列連結">文字列連結</h3> - -<pre class="brush: js notranslate">// 文字列 + 文字列 -> 連結 -'foo' + 'bar' // "foobar" - -// 数値 + 文字列 -> 連結 -5 + 'foo' // "5foo" - -// 文字列 + ブール値 -> 連結 -'foo' + false // "foofalse"</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.addition")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/addition/index.md b/files/ja/web/javascript/reference/operators/addition/index.md new file mode 100644 index 0000000000..0bb3edc900 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/addition/index.md @@ -0,0 +1,70 @@ +--- +title: 加算 (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.addition +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +{{jsSidebar("Operators")}} + +加算演算子 (`+`) は、数値オペランドの合計または文字列の連結を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-addition.html")}} + +## 構文 + +```js +x + y +``` + +## 例 + +### 数値の加算 + +```js +// 数値 + 数値 -> 加算 +1 + 2 // 3 + +// 論理値 + 数値 -> 加算 +true + 1 // 2 + +// 論理値 + 論理値 -> 加算 +false + false // 0 +``` + +### 文字列の連結 + +```js +// 文字列 + 文字列 -> 連結 +'foo' + 'bar' // "foobar" + +// 数値 + 文字列 -> 連結 +5 + 'foo' // "5foo" + +// 文字列 + 論理値 -> 連結 +'foo' + false // "foofalse" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/addition_assignment/index.html b/files/ja/web/javascript/reference/operators/addition_assignment/index.html deleted file mode 100644 index ca9497a6da..0000000000 --- a/files/ja/web/javascript/reference/operators/addition_assignment/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 加算代入 (+=) -slug: Web/JavaScript/Reference/Operators/Addition_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>加算代入演算子 (<code>+=</code>) は、右辺のオペランドの値を変数に加算し、結果を変数に代入します。 2つのオペランドの型は、加算代入演算子の動作を決定します。加算もしくは連結が可能です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x += y -<strong>Meaning:</strong> x = x + y</pre> - -<h2 id="例">例</h2> - -<h3 id="加算代入の使用">加算代入の使用</h3> - -<pre class="brush: js notranslate">// 以下の変数を想定 -// foo = 'foo' -// bar = 5 -// baz = true - -// 数値 + 数値 -> 加算 -bar += 2 // 7 - -// ブール値 + 数値 -> 加算 -baz += 1 // 2 - -// ブール値 + ブール値 -> 加算 -baz += false // 1 - -// 数値 + 文字列 -> 連結 -bar += 'foo' // "5foo" - -// 文字列 + ブール値 -> 連結 -foo += false // "foofalse" - -// 文字列 + 文字列 -> 連結 -foo += 'bar' // "foobar"</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.addition_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/addition_assignment/index.md b/files/ja/web/javascript/reference/operators/addition_assignment/index.md new file mode 100644 index 0000000000..fabea99ceb --- /dev/null +++ b/files/ja/web/javascript/reference/operators/addition_assignment/index.md @@ -0,0 +1,65 @@ +--- +title: 加算代入 (+=) +slug: Web/JavaScript/Reference/Operators/Addition_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.addition_assignment +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +{{jsSidebar("Operators")}} + +加算代入演算子 (`+=`) は、右オペランドの値を変数に加算し、結果を変数に代入します。2 つのオペランドの型が加算代入演算子の動作を決定します。加算もしくは連結が可能です。 + +{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}} + +## 構文 + +```js +x += y // x = x + y +``` + +## 例 + +### 加算代入の使用 + +```js +// 以下の変数を想定 +// foo = 'foo' +// bar = 5 +// baz = true + +// 数値 + 数値 -> 加算 +bar += 2 // 7 + +// 論理値 + 数値 -> 加算 +baz += 1 // 2 + +// 論理値 + 論理値 -> 加算 +baz += false // 1 + +// 数値 + 文字列 -> 連結 +bar += 'foo' // "5foo" + +// 文字列 + 論理値 -> 連結 +foo += false // "foofalse" + +// 文字列 + 文字列 -> 連結 +foo += 'bar' // "foobar" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) diff --git a/files/ja/web/javascript/reference/operators/assignment/index.html b/files/ja/web/javascript/reference/operators/assignment/index.html deleted file mode 100644 index c6b8cf4ceb..0000000000 --- a/files/ja/web/javascript/reference/operators/assignment/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 代入 (=) -slug: Web/JavaScript/Reference/Operators/Assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>代入（単純代入）演算子 (<code>=</code>) は、変数に値を代入するために使用されます。割り当て操作は、割り当てられた値を評価します。 単一の値を複数の変数に割り当てるため、代入演算子の連鎖が可能です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x = y -</pre> - -<h2 id="例">例</h2> - -<h3 id="代入と連鎖">代入と連鎖</h3> - -<pre class="brush: js notranslate">// 以下の変数を想定 -// x = 5 -// y = 10 -// z = 25 - -x = y // x は 10 -x = y = z // x, y そして z は全て 25</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/assignment/index.md b/files/ja/web/javascript/reference/operators/assignment/index.md new file mode 100644 index 0000000000..417d784eed --- /dev/null +++ b/files/ja/web/javascript/reference/operators/assignment/index.md @@ -0,0 +1,49 @@ +--- +title: 代入 (=) +slug: Web/JavaScript/Reference/Operators/Assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.assignment +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +{{jsSidebar("Operators")}} + +単純代入演算子 (`=`) は、変数に値を代入するために使用されます。割り当て操作は、割り当てられた値として評価されます。代入演算子を使用して、単一の値を複数の変数に割り当てることができます。 + +{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}} + +## 構文 + +```js +x = y +``` + +## 例 + +### 代入と連鎖 + +```ja +// 以下の変数を想定 +// x = 5 +// y = 10 +// z = 25 + +x = y // x は 10 +x = y = z // x, y そして z はすべて 25 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_and/index.html b/files/ja/web/javascript/reference/operators/bitwise_and/index.html deleted file mode 100644 index 3d9615a528..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_and/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ビット論理積 (&) -slug: Web/JavaScript/Reference/Operators/Bitwise_AND -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理積演算子 (<code>&</code>) は、両方のオペランドの対応するビットのいずれもが <code>1</code> である位置のビットで <code>1</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> & <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。</p> - -<p>AND 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a AND b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate">. 9 (10進数) = 00000000000000000000000000001001 (2進数) - 14 (10進数) = 00000000000000000000000000001110 (2進数) - -------------------------------- -14 | 9 (10進数) = 00000000000000000000000000001000 (2進数) = 8 (10進数) -</pre> - -<p>任意の <code><var>x</var></code> と <code>0</code> のビット論理積は <code>0</code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_AND" name="Using_bitwise_AND">ビット論理積の使用</h3> - -<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -5 & 2; // 0</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_and")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">ビット論理積代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_and/index.md b/files/ja/web/javascript/reference/operators/bitwise_and/index.md new file mode 100644 index 0000000000..dc691cf4e6 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_and/index.md @@ -0,0 +1,77 @@ +--- +title: ビット論理積 (&) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_and +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND +--- +{{jsSidebar("Operators")}} + +ビット論理積演算子 (`&`) は、両方のオペランドの対応するビットのいずれもが `1` である位置のビットで `1` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}} + +## 構文 + +```js +a & b +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。 + +この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。 + +AND 演算の真理値表は次のようになります。 + +| a | b | a AND b | +| --- | --- | ------- | +| 0 | 0 | 0 | +| 0 | 1 | 0 | +| 1 | 0 | 0 | +| 1 | 1 | 1 | + +```js +. 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + 14 (10 進数) = 00000000000000000000000000001110 (2 進数) + -------------------------------- +14 & 9 (10 進数) = 00000000000000000000000000001000 (2 進数) = 8 (10 進数) +``` + +任意の `x` と `0` のビット論理積は `0` になります。 + +## 例 + +### ビット論理積の使用 + +```js +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +5 & 2; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [ビット論理積代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html deleted file mode 100644 index 9c30120ab7..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: ビット論理積代入 (&=) -slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference - - 代入演算子 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理積代入演算子 (<code>&=</code>) は、両方のオペランドのバイナリ表現を使用し、それらに対してビット単位の AND 演算を実行して、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x &= y -<strong>Meaning:</strong> x = x & y -</pre> - -<h2 id="例">例</h2> - -<h3 id="ビット論理積代入の使用">ビット論理積代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -a &= 2; // 0</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.bitwise_and_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">ビット論理積演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.md b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.md new file mode 100644 index 0000000000..7e89f99142 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.md @@ -0,0 +1,47 @@ +--- +title: ビット論理積代入 (&=) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_and_assignment +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +--- +{{jsSidebar("Operators")}} + +ビット論理積代入演算子 (`&=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の AND 演算を実行して、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}} + +## 構文 + +```js +x &= y // x = x & y +``` + +## 例 + +### ビット論理積代入の使用 + +```js +let a = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +a &= 2; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [ビット論理積演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND) diff --git a/files/ja/web/javascript/reference/operators/bitwise_not/index.html b/files/ja/web/javascript/reference/operators/bitwise_not/index.html deleted file mode 100644 index ddd2d99c4d..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_not/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: ビット否定 (~) -slug: Web/JavaScript/Reference/Operators/Bitwise_NOT -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット否定演算子 (<code>~</code>) は、オペランドの各ビットを反転します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>~a</var></code> -</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位に構築されます。</p> - -<p><code>NOT</code> 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">NOT a</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate"> 9 (10進数) = 00000000000000000000000000001001 (2進数) - -------------------------------- -~9 (10進数) = 11111111111111111111111111110110 (2進数) = -10 (10進数) -</pre> - -<p>ある数 <code>x</code> のビット否定 は <code>-(x + 1)</code> になります。例えば、<code>~-5</code> は <code>4</code> になります。</p> - -<p>数値に32ビット表現を使用するため <code>~-1</code> および <code>~4294967295</code> (2<sup>32</sup>-1) はいずれも <code>0</code> になることに注意してください。</p> - -<h2 id="例">例</h2> - -<h3 id="ビット否定の使用">ビット否定の使用</h3> - -<pre class="brush: js notranslate">~0; // -1 -~-1; // 0 -~1; // -2 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-unary-operators', 'Unary NOT expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.bitwise_not")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_not/index.md b/files/ja/web/javascript/reference/operators/bitwise_not/index.md new file mode 100644 index 0000000000..3ff4b8e44c --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_not/index.md @@ -0,0 +1,75 @@ +--- +title: ビット否定 (~) +slug: Web/JavaScript/Reference/Operators/Bitwise_NOT +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_not +translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT +--- +{{jsSidebar("Operators")}} + +ビット否定演算子 (`~`) は、オペランドの各ビットを反転します。他のビット演算子と同様、オペランドを 32 ビット符号付き整数に変換します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}} + +## 構文 + +```js +~a +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +オペランドの各ビットが反転されて結果になります。 + +`NOT` 演算の真理値表は次のようになります。 + +| a | NOT a | +| --- | ----- | +| 0 | 1 | +| 1 | 0 | + +```js + 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + -------------------------------- +~9 (10 進数) = 11111111111111111111111111110110 (2 進数) = -10 (10 進数) +``` + +32 ビット符号付き整数のオペランドは、[2 の補数](https://ja.wikipedia.org/wiki/2%E3%81%AE%E8%A3%9C%E6%95%B0)によって反転されます。すなわち、最上位ビットが負の数であることを表します。 + +ある数 `x` のビット否定 は `-(x + 1)` になります。例えば、`~-5` は `4` になります。 + +数値に 32 ビット表現を使用するため `~-1` および `~4294967295` (2^32 - 1) はいずれも `0` になることに注意してください。 + +## 例 + +### ビット否定の使用 + +```js +~0; // -1 +~-1; // 0 +~1; // -2 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) diff --git a/files/ja/web/javascript/reference/operators/bitwise_or/index.html b/files/ja/web/javascript/reference/operators/bitwise_or/index.html deleted file mode 100644 index d19e7be3bf..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_or/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ビット論理和 (|) -slug: Web/JavaScript/Reference/Operators/Bitwise_OR -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理和演算子 (<code>|</code>) は、両方のオペランドの対応するビットのどちらか一方が <code>1</code> である位置のビットで <code>1</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> | <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。</p> - -<p>OR 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a OR b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate">. 9 (10進数) = 00000000000000000000000000001001 (2進数) - 14 (10進数) = 00000000000000000000000000001110 (2進数) - -------------------------------- -14 | 9 (10進数) = 00000000000000000000000000001111 (2進数) = 15 (10進数) -</pre> - -<p>ある数 <code><var>x</var></code> と <code>0</code> のビット論理和は <code><var>x</var></code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_OR" name="Using_bitwise_OR">ビット論理和の使用</h3> - -<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) -// 14 (00000000000000000000000000001110) - -14 | 9; -// 15 (00000000000000000000000000001111)</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-BitwiseORExpression', 'Bitwise OR expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_or")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_or/index.md b/files/ja/web/javascript/reference/operators/bitwise_or/index.md new file mode 100644 index 0000000000..95167c0c42 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_or/index.md @@ -0,0 +1,79 @@ +--- +title: ビット論理和 (|) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_or +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR +--- +{{jsSidebar("Operators")}} + +ビット論理和演算子 (`|`) は、両方のオペランドの対応するビットのどちらか一方が `1` である位置のビットで `1` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}} + +## 構文 + +```js +a | b +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。 + +この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。 + +OR 演算の真理値表は次のようになります。 + +| a | b | a OR b | +| --- | --- | ------ | +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 1 | + +```js +. 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + 14 (10 進数) = 00000000000000000000000000001110 (2 進数) + -------------------------------- +14 | 9 (10 進数) = 00000000000000000000000000001111 (2 進数) = 15 (10 進数) +``` + +ある数 `x` と `0` のビット論理和は `x` になります。 + +## 例 + +### ビット論理和の使用 + +```js +// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 | 9; +// 15 (00000000000000000000000000001111) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [ビット論理和代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.html deleted file mode 100644 index b9f63ca320..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: ビット論理和代入 (|=) -slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment -tags: - - Assignment operator - - Deprecated - - JavaScript - - Language feature - - Operator - - Reference - - 代入演算子 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理和代入演算子 (<code>|=</code>) は、両方のオペランドの二進表現を使用し、これらにビット単位の OR 演算を行って、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><strong>演算子:</strong> x |= y -<strong>意味:</strong> x = x | y</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_OR_assignment" name="Using_bitwise_OR_assignment">ビット論理和代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; -a |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_or_assignment")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">ビット論理和演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">論理和代入 (<code>||=</code>)</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.md b/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.md new file mode 100644 index 0000000000..38d941745e --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.md @@ -0,0 +1,50 @@ +--- +title: ビット論理和代入 (|=) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_or_assignment +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +--- +{{jsSidebar("Operators")}} + +ビット論理和代入演算子 (`|=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の OR 演算を実行して、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}} + +## 構文 + +```js +x |= y // x = x | y +``` + +## 例 + +### ビット論理和代入の使用 + +```js +let a = 5; +a |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [ビット論理和演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) +- [論理 OR 代入 (`||=`)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor/index.html b/files/ja/web/javascript/reference/operators/bitwise_xor/index.html deleted file mode 100644 index 684a987458..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_xor/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ビット排他的論理和 (^) -slug: Web/JavaScript/Reference/Operators/Bitwise_XOR -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット排他的論理和演算子 (<code>^</code>) は、両方のオペランドの対応するビットの一方だけが <code>1</code> である位置のビットで <code>1</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> ^ <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位に構築されます。</p> - -<p>XOR 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a XOR b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate">. 9 (10進数) = 00000000000000000000000000001001 (2進数) - 14 (10進数) = 00000000000000000000000000001110 (2進数) - -------------------------------- -14 ^ 9 (10進数) = 00000000000000000000000000000111 (2進数) = 7 (10進数) -</pre> - -<p>ある数 <code><var>x</var></code> と <code>0</code> のビット排他的論理和は <code><var>x</var></code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_XOR" name="Using_bitwise_XOR">ビット排他的論理和の使用</h3> - -<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) -// 14 (00000000000000000000000000001110) - -14 ^ 9; -// 7 (00000000000000000000000000000111)</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-BitwiseXORExpression', 'Bitwise XOR expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_xor")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">ビット排他的論理和代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor/index.md b/files/ja/web/javascript/reference/operators/bitwise_xor/index.md new file mode 100644 index 0000000000..904bffe61d --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_xor/index.md @@ -0,0 +1,79 @@ +--- +title: ビット排他的論理和 (^) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_xor +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR +--- +{{jsSidebar("Operators")}} + +ビット排他的論理和演算子 (`^`) は、両方のオペランドの対応するビットの一方だけが `1` である位置のビットで `1` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}} + +## 構文 + +```js +a ^ b +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。 + +この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。 + +XOR 演算の真理値表は次のようになります。 + +| a | b | a XOR b | +| --- | --- | ------- | +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 0 | + +```js + 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + 14 (10 進数) = 00000000000000000000000000001110 (2 進数) + -------------------------------- +14 ^ 9 (10 進数) = 00000000000000000000000000000111 (2 進数) = 7 (10 進数) +``` + +ある数 `x` と `0` のビット排他的論理和は `x` になります。 + +## 例 + +### ビット排他的論理和の使用 + +```js +// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 ^ 9; +// 7 (00000000000000000000000000000111) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [ビット排他的論理和代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html deleted file mode 100644 index 90a6420cc5..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: ビット排他的論理和代入 (^=) -slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット排他的論理和代入演算子 (<code>^=</code>) は、両方のオペランドのバイナリ表現を使用し、それらに対してビット単位の XOR 演算を実行し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x ^= y -<strong>Meaning:</strong> x = x ^ y</pre> - -<h2 id="例">例</h2> - -<h3 id="ビット排他的論理和代入の使用">ビット排他的論理和代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; // 00000000000000000000000000000101 -a ^= 3; // 00000000000000000000000000000011 - -console.log(a); // 00000000000000000000000000000110 -// 6 - -let b = 5; // 00000000000000000000000000000101 -b ^= 0; // 00000000000000000000000000000000 - -console.log(b); // 00000000000000000000000000000101 -// 5 - - - -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.bitwise_xor_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.md b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.md new file mode 100644 index 0000000000..e738a330aa --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.md @@ -0,0 +1,53 @@ +--- +title: ビット排他的論理和代入 (^=) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +--- +{{jsSidebar("Operators")}} + +ビット排他的論理和代入演算子 (`^=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の XOR 演算を実行し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}} + +## 構文 + +```js +x ^= y // x = x ^ y +``` + +## 例 + +### ビット排他的論理和代入の使用 + +```js +let a = 5; // 00000000000000000000000000000101 +a ^= 3; // 00000000000000000000000000000011 + +console.log(a); // 00000000000000000000000000000110 +// 6 + +let b = 5; // 00000000000000000000000000000101 +b ^= 0; // 00000000000000000000000000000000 + +console.log(b); // 00000000000000000000000000000101 +// 5 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [ビット排他的論理和演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR) diff --git a/files/ja/web/javascript/reference/operators/decrement/index.html b/files/ja/web/javascript/reference/operators/decrement/index.html deleted file mode 100644 index f5e63fd791..0000000000 --- a/files/ja/web/javascript/reference/operators/decrement/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: デクリメント (--) -slug: Web/JavaScript/Reference/Operators/Decrement -tags: - - Decrement - - JavaScript - - Language feature - - Operator -translation_of: Web/JavaScript/Reference/Operators/Decrement ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>デクリメント演算子 (<code>--</code>) は、オペランドをデクリメント (1を減算) して値を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> -</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドに後置で演算子を付けると (例えば <code><var>x</var>--</code>)、デクリメント演算子はデクリメントしますが、デクリメント前の値を返します。</p> - -<p>オペランドに前置で演算子を付けると (例えば <code>--<var>x</var></code>)、デクリメント演算子はデクリメントし、デクリメント後の値を返します。</p> - -<h2 id="例">例</h2> - -<h3 id="後置デクリメント">後置デクリメント</h3> - -<pre class="brush: js notranslate">let x = 3; -y = x--; - -// y = 3 -// x = 2 -</pre> - -<h3 id="前置デクリメント">前置デクリメント</h3> - -<pre class="brush: js notranslate">let a = 2; -b = --a; - -// a = 1 -// b = 1 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.decrement")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/decrement/index.md b/files/ja/web/javascript/reference/operators/decrement/index.md new file mode 100644 index 0000000000..3f7348ea6d --- /dev/null +++ b/files/ja/web/javascript/reference/operators/decrement/index.md @@ -0,0 +1,71 @@ +--- +title: デクリメント (--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - デクリメント + - JavaScript + - 言語機能 + - 演算子 +browser-compat: javascript.operators.decrement +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +{{jsSidebar("Operators")}} + +デクリメント演算子 (`--`) は、オペランドをデクリメント (1 を減算) して値を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}} + +## 構文 + +```js +x-- +--x +``` + +## 解説 + +オペランドに後置で演算子を付けると (例えば `x--`)、デクリメント演算子はデクリメントしますが、デクリメント前の値を返します。 + +オペランドに前置で演算子を付けると (例えば `--x`)、デクリメント演算子はデクリメントし、デクリメント後の値を返します。 + +## 例 + +### 後置デクリメント + +```js +let x = 3; +y = x--; + +// y = 3 +// x = 2 +``` + +### 前置デクリメント + +```js +let a = 2; +b = --a; + +// a = 1 +// b = 1 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/delete/index.html b/files/ja/web/javascript/reference/operators/delete/index.html deleted file mode 100644 index 1095dd3d1c..0000000000 --- a/files/ja/web/javascript/reference/operators/delete/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: delete -slug: Web/JavaScript/Reference/Operators/delete -tags: - - JavaScript - - Memory Management - - Object - - Operator - - Property - - Reference - - Release - - Unary - - delete -translation_of: Web/JavaScript/Reference/Operators/delete ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><span class="seoSummary">JavaScript の <strong><code>delete</code> 演算子</strong>は、オブジェクトからプロパティを削除します。同じプロパティへの参照がそれ以上保持されない場合は、自動的に解放されます。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">delete <em>expression</em> </pre> - -<p><em>expression</em> には、プロパティへの参照になる式を置きます。例えば:</p> - -<pre class="syntaxbox notranslate">delete <em>object.property</em> -delete <em>object</em>['<em>property</em>']</pre> - -<h3 id="引数">引数</h3> - -<dl> - <dt><code>object</code></dt> - <dd>オブジェクト名、またはオブジェクトとして評価される式</dd> - <dt><code>property</code></dt> - <dd>削除するプロパティです。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>非 strict モードでは、プロパティが編集不可の場合、false が返ります。その他の場合すべてで <code>true</code> が返ります。</p> - -<h3 id="例外">例外</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict モード</a> では、プロパティが編集不可の場合、{{jsxref("Global_objects/SyntaxError")}} をスローします。</p> - -<h2 id="説明">説明</h2> - -<p>一般的に信じられていることとは異なり、<code>delete</code> 演算子は、直接的にメモリを開放することは<strong>ありません</strong>。メモリの管理は参照が切れることで間接的に行われます。詳細は <a href="/ja/docs/Web/JavaScript/Memory_Management">memory management</a> をご覧ください。</p> - -<p><code><strong>delete</strong></code> 演算子は指定したプロパティをオブジェクトから取り除きます。削除に成功すると <code>true</code> を返し、そうでなければ <code>false</code> を返します。しかし、次のシナリオを考慮することが重要です:</p> - -<ul> - <li>削除しようとしたプロパティが存在しない場合、<code>delete</code> は何の効果もなく、<code>true</code> を返します。</li> - <li>同様の名前のプロパティがオブジェクトのプロトタイプチェーンに存在する場合、削除後はプロトタイプチェーンのプロパティをオブジェクトが使うようになります (つまり、<code>delete</code> 自身のプロパティにのみ効果があります)。</li> - <li>グローバルスコープや関数スコープから {{jsxref("Statements/var","var")}} で宣言されたプロパティは削除できません。 - <ul> - <li>そのため、<code>delete</code> はグローバルスコープ内の関数を削除できません (関数定義の一部であるか関数式の一部であるかにかかわらず)。</li> - <li>(グローバルスコープを除く) オブジェクトの一部である関数は <code>delete</code> で削除できます。</li> - </ul> - </li> - <li>{{jsxref("Statements/let","let")}} や {{jsxref("Statements/const","const")}} で宣言された任意のプロパティはそれらが宣言されたスコープから削除できません。</li> - <li>編集不可能なプロパティは削除できません。これには {{jsxref("Math")}} や {{jsxref("Array")}}、{{jsxref("Object")}} のようなビルトインオブジェクトのプロパティや {{jsxref("Object.defineProperty()")}} のようなメソッドで編集不可として生成されたプロパティが含まれます。</li> -</ul> - -<p>次のスニペットがシンプルな例です:</p> - -<pre class="brush: js notranslate">var Employee = { - age: 28, - name: 'abc', - designation: 'developer' -} - -console.log(delete Employee.name); // returns true -console.log(delete Employee.age); // returns true - -// When trying to delete a property that does -// not exist, true is returned -console.log(delete Employee.salary); // returns true -</pre> - -<h3 id="編集不可のプロパティ"><strong>編集不可のプロパティ</strong></h3> - -<p>プロパティが編集不可に設定されているとき、<code>delete</code> は何の効果もなく、<code>false</code> を返します。strict モードでは、これは <code>SyntaxError</code> を生成します。</p> - -<pre class="brush: js notranslate">var Employee = {}; -Object.defineProperty(Employee, 'name', {configurable: false}); - -console.log(delete Employee.name); // returns false -</pre> - -<p>{{jsxref("Statements/var","var")}} や {{jsxref("Statements/let","let")}}、{{jsxref("Statements/const","const")}} は、<code>delete</code> 演算子で削除できない編集不可のプロパティを生成します:</p> - -<pre class="brush: js notranslate">var nameOther = 'XYZ'; - -// We can access this global property using: -Object.getOwnPropertyDescriptor(window, 'nameOther'); - -// output: Object {value: "XYZ", -// writable: true, -// enumerable: true, -// <strong>configurable: false</strong>} - -// Since "nameOther" is added using with the -// var keyword, it is marked as "non-configurable" - -delete nameOther; // return false</pre> - -<p>strict モードでは、例外が発生します。</p> - -<h3 id="Strict_vs._非_strict_モード"><strong>Strict vs. 非 strict モード</strong></h3> - -<p>strict モードのとき、変数や関数の引数、関数名への参照に直接 <code>delete</code> が使われた場合、{{jsxref("SyntaxError")}} をスローします。</p> - -<p><code>var</code> で宣言された変数は編集不可に設定されます。次の例では、<code>salary</code> は編集不可で削除できません。非 strict モードでは、<code>delete</code> 演算子は <code>false</code> を返します。</p> - -<pre class="brush: js notranslate">function Employee() { - delete salary; - var salary; -} - -Employee(); -</pre> - -<p>strict モードで同じコードがどのように振る舞うか見てみましょう。<code>false</code> を返す代わりに、ステートメントは <code>SyntaxError</code> を発生させます。</p> - -<pre class="brush: js notranslate">"use strict"; - -function Employee() { - delete salary; // SyntaxError - var salary; -} - -// Similarly, any direct access to a function -// with delete will raise a SyntaxError - -function DemoFunction() { - //some code -} - -delete DemoFunction; // SyntaxError -</pre> - -<h2 id="例">例</h2> - -<pre class="brush: js notranslate">// creates the property adminName on the global scope -adminName = 'xyz'; - -// creates the property empCount on the global scope -// Since we are using var, this is marked as non-configurable. The same is true of let and const. -var empCount = 43; - -EmployeeDetails = { - name: 'xyz', - age: 5, - designation: 'Developer' -}; - -// adminName is a property of the global scope. -// It can be deleted since it is created without var. -// Therefore, it is configurable. -delete adminName; // returns true - -// On the contrary, empCount is not configurable, -// since var was used. -delete empCount; // returns false - -// delete can be used to remove properties from objects -delete EmployeeDetails.name; // returns true - -<strong>// </strong>Even when the property does not exists, it returns "true" -delete EmployeeDetails.salary; // returns true - -// delete does not affect built-in static properties -delete Math.PI; // returns false - -// EmployeeDetails is a property of the global scope. -// Since it defined without "var", it is marked configurable -delete EmployeeDetails; // returns true - -function f() { - var z = 44; - - // delete doesn't affect local variable names - delete z; // returns false -} -</pre> - -<h3 id="delete_とプロトタイプチェーン"><code>delete</code> とプロトタイプチェーン</h3> - -<p>次の例では、 <span id="result_box" lang="ja"><span>プロトタイプチェーンで同じ名前のプロパティを使用できる間に、オブジェクトの独自のプロパティを削除します</span></span> :</p> - -<pre class="brush: js notranslate">function Foo() { - this.bar = 10; -} - -Foo.prototype.bar = 42; - -var foo = new Foo(); - -// Returns true, since the own property -// has been deleted on the foo object -delete foo.bar; - -// foo.bar is still available, since it -// is available in the prototype chain. -console.log(foo.bar); - -// We delete the property on the prototype -delete Foo.prototype.bar; - -// logs "undefined" since the property -// is no longer inherited -console.log(foo.bar); </pre> - -<h3 id="配列の要素の削除"><strong>配列の要素の削除</strong></h3> - -<p>配列の要素を削除したとき、配列の長さは影響を受けません。これは配列の最後の要素を削除しても保持されます。</p> - -<p><code>delete</code> 演算子が配列の要素を削除すると、要素はもはや配列からなくなります。 次の例では、<code>trees[3]</code> が <code>delete</code> で削除されます。</p> - -<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -delete trees[3]; -if (3 in trees) { - // this does not get executed -}</pre> - -<p>配列の要素を存在させたいが値が未定義の場合、<code>delete</code> 演算子の代わりに <code>undefined</code> 値を用います。次の例では、<code>trees[3]</code> は undefined が割り当てられていますが、配列の要素はまだ存在しています:</p> - -<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -trees[3] = undefined; -if (3 in trees) { - // this gets executed -}</pre> - -<p>代わりに、配列の内容を変更して配列要素を削除する場合は、<code>{{jsxref("Array.splice", "splice")}}</code> メソッドを使用します。次の例では、{{jsxref("Array.splice", "splice")}} を使用して配列から <code>trees[3]</code> が削除されます:</p> - -<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -trees.splice(3,1); -console.log(trees); // ["redwood", "bay", "cedar", "maple"] -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>初期定義。JavaScript 1.2 で実装。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.delete")}}</p> - -<h2 id="クロスブラウザーの問題点">クロスブラウザーの問題点</h2> - -<p>ECMAScript はオブジェクトのイテレーション順を実装系依存であるとしているにもかかわらず、すべての主要なブラウザーはイテレーション順を、(少なくともプロトタイプ上にないプロパティについて) 最初に追加されたプロパティを最初に持ち出す方式に基づいてサポートしているように見受けられます。ところが Internet Explorer ではプロパティに対して <code>delete</code> を用いたときに、他のブラウザーが単純なオブジェクトを整列された連想配列のように用いることを妨げる、ややこしい動作になる場合があります。Internet Explorer では、プロパティの<em>値</em>が実際 undefined に設定されているとき、後から同じ名前で再びプロパティを追加すると、そのプロパティは<em>元の</em>場所でイテレートされるようになるでしょう。削除済みのプロパティを再度追加した場合に期待するであろう、イテレーション順の最後ではありません。</p> - -<p>クロスブラウザー環境で整列された連想配列をしたい場合は、可能であれば {{jsxref("Map")}} を使用してください。または、2 つに分けた配列 (片方はキー、もう片方は値) やプロパティをひとつ持つオブジェクトの配列などで構造をシミュレートしてください。</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li> - <li>{{jsxref("Reflect.deleteProperty()")}}</li> - <li>{{jsxref("Map.prototype.delete()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/delete/index.md b/files/ja/web/javascript/reference/operators/delete/index.md new file mode 100644 index 0000000000..278ed43228 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/delete/index.md @@ -0,0 +1,274 @@ +--- +title: delete 演算子 +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - 言語機能 + - メモリーー管理 + - Object + - Operator + - リファレンス + - 解放 + - Unary + - delete +browser-compat: javascript.operators.delete +translation_of: Web/JavaScript/Reference/Operators/delete +--- +{{jsSidebar("Operators")}} + +JavaScript の **`delete` 演算子**は、オブジェクトからプロパティを削除します。同じプロパティへの参照がそれ以上保持されていない場合は、自動的に解放されます。 + +{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}} + +## 構文 + +```js +delete expression +``` + +`expression` は下記のように、[プロパティ](/ja/docs/Glossary/property/JavaScript)への参照として評価されるべきものです。 + +```js +delete object.property +delete object['property'] +``` + +### 引数 + +- `object` + - : オブジェクト名、またはオブジェクトとして評価される式です。 +- `property` + - : 削除するプロパティです。 + +### 返値 + +プロパティが{{jsxref("Object.hasOwnProperty", "自分自身の", "", 1)}}{{jsxref("Errors/Cant_delete", + "構成不可", "", 1)}}のプロパティであった場合、 strict モードでなければ `false` を返します。それ以外の場合は `true` を返します。 + +### 例外 + +[strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)では、プロパティが編集不可の場合、{{jsxref("TypeError")}} が発生します。 + +## 解説 + +一般的に信じられていることとは異なり (おそらく [C++ における delete](https://docs.microsoft.com/en-us/cpp/cpp/delete-operator-cpp?view=vs-2019) のような他のプログラミング言語の影響ですが)、`delete` 演算子は、直接的にメモリーを解放することは**ありません**。メモリーの管理は参照が切れることで間接的に行われます。詳細は[メモリー管理](/ja/docs/Web/JavaScript/Memory_Management)を参照してください。 + +**`delete`** 演算子は指定したプロパティをオブジェクトから取り除きます。削除に成功すると `true` を返し、そうでなければ `false` を返します。 + +ただし、次のようなシナリオを考慮することが重要です。 + +- 削除しようとしたプロパティが存在しない場合、`delete` は何もせずに `true` を返します。 +- そのオブジェクトのプロトタイプチェーンに同名のプロパティが存在する場合、削除後はプロトタイプチェーンのプロパティをオブジェクトが使うようになります (つまり、`delete` は自身のプロパティにのみ効果があります)。 +- グローバルスコープや関数スコープから {{jsxref("Statements/var","var")}} で宣言されたプロパティは削除できません。 + + - そのため、`delete` はグローバルスコープ内の関数を削除できません (関数定義の一部であるか関数式の一部であるかにかかわらず)。 + - (グローバルスコープを除く) オブジェクトの一部である関数は `delete` で削除できます。 + +- {{jsxref("Statements/let","let")}} や {{jsxref("Statements/const","const")}} で宣言された任意のプロパティはそれらが宣言されたスコープから削除できません。 +- 編集不可能なプロパティは削除できません。これには {{jsxref("Math")}} や {{jsxref("Array")}}、{{jsxref("Object")}} のような組み込みオブジェクトのプロパティや {{jsxref("Object.defineProperty()")}} のようなメソッドで編集不可として生成されたプロパティが含まれます。 + +次のスニペットがシンプルな例です。 + +```js +var Employee = { + age: 28, + name: 'abc', + designation: 'developer' +} + +console.log(delete Employee.name); // true を返す +console.log(delete Employee.age); // true を返す + +// When trying to delete a property that does +// not exist, true is returned +console.log(delete Employee.salary); // true を返す +``` + +### 編集不可のプロパティ + +プロパティが編集不可に設定されているとき、`delete` は何もせずに `false` を返します。strict モードでは、これは `TypeError` を生成します。 + +```js +var Employee = {}; +Object.defineProperty(Employee, 'name', {configurable: false}); + +console.log(delete Employee.name); // false を返す +``` + +{{jsxref("Statements/var","var")}} や {{jsxref("Statements/let","let")}}、{{jsxref("Statements/const","const")}} は、`delete` 演算子で削除できない編集不可のプロパティを生成します: + +```js +var nameOther = 'XYZ'; + +// We can access this global property using: +Object.getOwnPropertyDescriptor(window, 'nameOther'); + +// output: Object {value: "XYZ", +// writable: true, +// enumerable: true, +// configurable: false} + +// Since "nameOther" is added using with the +// var keyword, it is marked as "non-configurable" + +delete nameOther; // return false +``` + +strict モードでは、例外が発生します。 + +### strict モードとそれ以外の違い + +strict モードのとき、`delete` が変数や関数の引数、関数名への直接参照に使われた場合、{{jsxref("SyntaxError")}} が発生します。したがって、 strict モードでエラーが発生することを防ぐためには、 `delete` 演算子を `delete object.property` または `delete object['property']` の形で使用する必要があります。 + +```js +Object.defineProperty(globalThis, 'variable1', { value: 10, configurable: true, }); +Object.defineProperty(globalThis, 'variable2', { value: 10, configurable: false, }); + +// strict モードでは SyntaxError +console.log(delete variable1); // true + +// strict モードでは SyntaxError +console.log(delete variable2); // false +``` + +```js +function func(param) { + // strict モードでは SyntaxError + console.log(delete param); // false +} + +// strict モードでは SyntaxError +console.log(delete func); // false +``` + +### ブラウザーの互換性の注意 + +ECMAScript はオブジェクトに対して反復処理を行った時の順序を実装系依存であるとしているにもかかわらず、主要なブラウザーはいずれも、(少なくともプロトタイプ上にないプロパティについては) 最初に追加されたプロパティを最初に処理する順序に対応しているようです。しかし Internet Explorer では、プロパティに対して `delete` を用いたときにややこしい結果になることがあり、これが他のブラウザーが単純なオブジェクトを整列された連想配列のように用いることの障害になります。Internet Explorer では、プロパティの*値*を `undefined` に設定しようとしたとき、後から同じ名前で再びプロパティを追加すると、そのプロパティは*元の*場所で処理されるようになります。削除済みのプロパティを再度追加した場合に予想されるような、最後の場所ではありません。 + +複数のブラウザーで同じ連想配列を使用したい場合は、可能であれば {{jsxref("Map")}} を使用してください。または、2 つに分けた配列 (片方はキー、もう片方は値) やプロパティを一つだけ持ったオブジェクトの配列を構築するなどの方法でこの構造をシミュレーションしてください。 + +## 例 + +```js +// adminName プロパティをグローバルスコープに生成 +adminName = 'xyz'; + +// empCount プロパティをグローバルスコープに生成 +// var を使用しているため、これは構成不可となります。 let や const でも同じことになります。 +var empCount = 43; + +EmployeeDetails = { + name: 'xyz', + age: 5, + designation: 'Developer' +}; + +// adminName はグローバルスコープのプロパティです。 +// var を使用せずに生成されたため、構成可能になっているので +// 削除することができます。 +delete adminName; // true を返す + +// 対照的に、 empCount は var が使用されたので +// 構成可能ではありません。 +delete empCount; // false を返す + +// delete を使用してオブジェクトからプロパティを削除することができます。 +delete EmployeeDetails.name; // true を返す + +// プロパティが存在しない場合であっても、 delete は "true" を返します。 +delete EmployeeDetails.salary; // true を返す + +// delete は組み込み静的プロパティには効果がありません。 +delete Math.PI; // false を返す + +// EmployeeDetails はグローバルスコープのプロパティです。 +// "var" を使用せずに定義されたため、構成可能となっています。 +delete EmployeeDetails; // true を返す + +function f() { + var z = 44; + + // delete はローカル変数名には効果がありません。 + delete z; // false を返す +} +``` + +### `delete` とプロトタイプチェーン + +次の例では、プロトタイプチェーン上に同じ名前を持つプロパティがある場合に、オブジェクトの自身のプロパティを削除しています。 + +```js +function Foo() { + this.bar = 10; +} + +Foo.prototype.bar = 42; + +var foo = new Foo(); + +// foo.bar は自身のプロパティに関連付けられて +// います。 +console.log(foo.bar); // 10 + +// foo オブジェクトにある自身のプロパティを +// 削除します。 +delete foo.bar; // true を返す + +// foo.bar がプロトタイプチェーン上でまだ +// 利用できます。 +console.log(foo.bar); // 42 + +// プロトタイプ上のプロパティを削除します。 +delete Foo.prototype.bar; // true を返す + +// "bar" プロパティは Foo 上で削除されたので +// 継承されなくなりました。 +console.log(foo.bar); // undefined +``` + +### 配列の要素の削除 + +配列の要素を削除したとき、配列の `length` は影響を受けません。これは配列の最後の要素を削除しても保持されます。 + +`delete` 演算子が配列の要素を削除すると、要素は配列からなくなります。 次の例では、`trees[3]` が `delete` で削除されます。 + +```js +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +delete trees[3]; +if (3 in trees) { + // これは実行されない +} +``` + +ある配列の要素を存在したまま未定義の値としたい場合は、`delete` 演算子の代わりに `undefined` 値を使用してください。次の例では、`trees[3]` に `undefined` を割り当てていますが、配列のその要素は存在したままです。 + +```js +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees[3] = undefined; +if (3 in trees) { + // これは実行される +} +``` + +代わりに、配列の内容を変更して配列要素を削除したい場合は、`{{jsxref("Array.splice()", "splice()")}}` メソッドを使用してください。次の例では、{{jsxref("Array.splice()", "splice()")}} を使用して配列から `trees[3]` を削除しています。 + +```js +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees.splice(3,1); +console.log(trees); // ["redwood", "bay", "cedar", "maple"] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [In depth analysis on + delete](http://perfectionkills.com/understanding-delete/) +- {{jsxref("Reflect.deleteProperty()")}} +- {{jsxref("Map.prototype.delete()")}} diff --git a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html deleted file mode 100644 index 13aade654e..0000000000 --- a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: 分割代入 -slug: Web/JavaScript/Reference/Operators/Destructuring_assignment -tags: - - Destructuring - - Destructuring_assignment - - ECMAScript 2015 - - ES6 - - JavaScript - - Language feature - - Nested object and array destructuring - - Operator - - 分割代入 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>分割代入</strong> (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:js notranslate">let a, b, rest; -[a, b] = [10, 20]; -console.log(a); // 10 -console.log(b); // 20 - -[a, b, ...rest] = [10, 20, 30, 40, 50]; -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // [30, 40, 50] - -({ a, b } = { a: 10, b: 20 }); -console.log(a); // 10 -console.log(b); // 20 - - -// Stage 4(finished) proposal -({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // {c: 30, d: 40} -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オブジェクトリテラルと配列リテラルは、いくつかのデータを<em>アドホック</em>にまとめる簡単な方法を提供します。</p> - -<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5];</pre> - -<p>分割代入は似たような構文を使用しますが、代入の左辺が元の変数からどの値を受け取るかを定義します。</p> - -<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5]; -const [y, z] = x; -console.log(y); // 1 -console.log(z); // 2 -</pre> - -<p>この機能は、Perl や Python などの言語に存在する機能に似ています。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Array_destructuring" name="Array_destructuring">配列の分割代入</h3> - -<h4 id="Basic_variable_assignment" name="Basic_variable_assignment">簡単な例</h4> - -<pre class="brush: js notranslate">const foo = ['one', 'two', 'three']; - -const [red, yellow, green] = foo; -console.log(red); // "one" -console.log(yellow); // "two" -console.log(green); // "three" -</pre> - -<h4 id="Assignment_separate_from_declaration" name="Assignment_separate_from_declaration">宣言後の割り当て</h4> - -<p>変数は宣言とは別に、分割代入によって値を代入することができます。</p> - -<pre class="brush:js notranslate">let a, b; - -[a, b] = [1, 2]; -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h4 id="Default_values" name="Default_values">既定値</h4> - -<p>配列から取り出した値が <code>undefined</code> だった場合に使用される既定値を指定できます。</p> - -<pre class="brush: js notranslate">let a, b; - -[a=5, b=7] = [1]; -console.log(a); // 1 -console.log(b); // 7 -</pre> - -<h4 id="Swapping_variables" name="Swapping_variables">変数の入れ替え</h4> - -<p>分割代入を使用して、複数の変数の値を入れ替えることができます。</p> - -<p>分割代入を使用せずに 2 つの値を交換するには、一時変数 (または、一部の低水準言語においては <a href="https://ja.wikipedia.org/wiki/XOR%E4%BA%A4%E6%8F%9B%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0">XOR 交換アルゴリズム</a>) が必要です。</p> - -<pre class="brush:js notranslate">let a = 1; -let b = 3; - -[a, b] = [b, a]; -console.log(a); // 3 -console.log(b); // 1 - -const arr = [1,2,3]; -[arr[2], arr[1]] = [arr[1], arr[2]]; -console.log(arr); // [1,3,2] - -</pre> - -<h4 id="Parsing_an_array_returned_from_a_function" name="Parsing_an_array_returned_from_a_function">関数から返された配列の解析</h4> - -<p>関数は配列を返すことができます。分割代入によって、返された配列の使用をより簡潔に記述できます。</p> - -<p>この例では、<code>f()</code> は出力として値 <code>[1, 2]</code> を返しており、分割代入により 1行で解析できます。</p> - -<pre class="brush:js notranslate">function f() { - return [1, 2]; -} - -let a, b; -[a, b] = f(); -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h4 id="Ignoring_some_returned_values" name="Ignoring_some_returned_values">返値の無視</h4> - -<p>関心のない返値は無視することができます。</p> - -<pre class="brush:js notranslate">function f() { - return [1, 2, 3]; -} - -const [a, , b] = f(); -console.log(a); // 1 -console.log(b); // 3 - -const [c] = f(); -console.log(c); // 1 -</pre> - -<p>このようにすべての返値を無視することもできます。</p> - -<pre class="brush:js notranslate">[,,] = f(); -</pre> - -<h4 id="Assigning_the_rest_of_an_array_to_a_variable" name="Assigning_the_rest_of_an_array_to_a_variable">配列の残余部分への変数の代入</h4> - -<p>配列を分割するときに残余パターンを使用して、配列の残りの部分を取り出して変数に代入できます。</p> - -<pre class="brush: js notranslate">const [a, ...b] = [1, 2, 3]; -console.log(a); // 1 -console.log(b); // [2, 3]</pre> - -<p>左辺側で残余要素とともに末尾のカンマが使用されていると、{{jsxref("SyntaxError")}} が発生しますので注意してください。</p> - -<pre class="brush: js example-bad notranslate">const [a, ...b,] = [1, 2, 3]; - -// SyntaxError: rest 要素の末尾にカンマがあってはなりません -// 常に最後の要素として rest 演算子を使用してください。 -</pre> - -<h4 id="Unpacking_values_from_a_regular_expression_match" name="Unpacking_values_from_a_regular_expression_match">正規表現の一致からの値取得</h4> - -<p>正規表現オブジェクトの <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> メソッドは一致するものを見つけ、最初に一致した文字列全体の一部と、正規表現内の各括弧で囲まれたグループに一致した文字列の部分を含む配列を返します。分割代入によって、簡単にこの配列の一部分を取り出せます。また必要でない場合は、完全一致を無視できます。</p> - -<pre class="brush:js notranslate">function parseProtocol(url) { - const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); - if (!parsedURL) { - return false; - } - console.log(parsedURL); - // ["https://developer.mozilla.org/ja/Web/JavaScript", - "https", "developer.mozilla.org", "en-US/Web/JavaScript"] - - const [, protocol, fullhost, fullpath] = parsedURL; - return protocol; -} - -console.log(parseProtocol('https://developer.mozilla.org/ja/Web/JavaScript')); -// "https" -</pre> - -<h3 id="Object_destructuring" name="Object_destructuring">オブジェクトの分割代入</h3> - -<h4 id="Basic_assignment" name="Basic_assignment">簡単な例</h4> - -<pre class="brush: js notranslate">const user = { - id: 42, - is_verified: true -}; - -const {id, is_verified} = user; - -console.log(id); // 42 -console.log(is_verified); // true -</pre> - -<h4 id="Assignment_without_declaration" name="Assignment_without_declaration">宣言のない代入</h4> - -<p>分割代入は代入文で宣言することなく行うことができます。</p> - -<pre class="brush:js notranslate">let a, b; - -({a, b} = {a: 1, b: 2});</pre> - -<div class="note"> -<p><strong>メモ</strong>: 代入文の周りの <code>( ... )</code> は宣言のないオブジェクトリテラル分割代入を使用するときに必要な構文です。</p> - -<p><code>{a, b} = {a: 1, b: 2}</code> は有効なスタンドアロンの構文ではありません。というのも、左辺の <code>{a, b}</code> はブロックでありオブジェクトリテラルではないと考えられるからです。</p> - -<p>ですが、<code>({a, b} = {a: 1, b: 2})</code> 形式は有効です。<code>var {a, b} = {a: 1, b: 2}</code> と考えられるためです。</p> - -<p><code>( ... )</code> の式の前にセミコロンが必要です。そうしなければ、前の行の関数を実行に使用される可能性があります。</p> -</div> - -<h4 id="Assigning_to_new_variable_names" name="Assigning_to_new_variable_names">異なる名前を持つ変数への代入</h4> - -<p>オブジェクトから変数を取り出して、オブジェクトのプロパティとは異なる名前の変数に代入することができます。</p> - -<pre class="brush: js notranslate">const o = {p: 42, q: true}; -const {p: foo, q: bar} = o; - -console.log(foo); // 42 -console.log(bar); // true</pre> - -<p>ここで、例えば、<code>const {p: foo} = o</code> はオブジェクト <code>o</code> から <code>p</code> という名前のプロパティを取り、<code>foo</code> という名前のローカル変数へ代入します。</p> - -<h4 id="Default_values_2" name="Default_values_2">既定値</h4> - -<p>オブジェクトから取り出した値が <code>undefined</code> であるときの既定値を、変数に割り当てることができます。</p> - -<pre class="brush: js notranslate">var {a = 10, b = 5} = {a: 3}; - -console.log(a); // 3 -console.log(b); // 5</pre> - -<h4 id="Assigning_to_new_variables_names_and_providing_default_values" name="Assigning_to_new_variables_names_and_providing_default_values">新しい変数名の割り当てとデフォルト値の提供</h4> - -<p>両方ともプロパティにすることができます</p> - -<ul> - <li>オブジェクトから取り出して異なる名前の変数に代入します。</li> - <li>取り出した値が <code>undefined</code> である場合に備えて、デフォルト値を割り当てます。</li> -</ul> - -<pre class="brush: js notranslate">const {a: aa = 10, b: bb = 5} = {a: 3}; - -console.log(aa); // 3 -console.log(bb); // 5 -</pre> - -<h4 id="Unpacking_fields_from_objects_passed_as_function_parameter" name="Unpacking_fields_from_objects_passed_as_function_parameter">引数に指定されたオブジェクトの属性への参照</h4> - -<pre class="brush:js notranslate">const user = { - id: 42, - displayName: 'jdoe', - fullName: { - firstName: 'John', - lastName: 'Doe' - } -}; - -function userId({id}) { - return id; -} - -function whois({displayName, fullName: {firstName: name}}) { - return `${displayName} is ${name}`; -} - -console.log(userId(user)); // 42 -console.log(whois(user)); // "jdoe is John"</pre> - -<p>上記では <code>id</code>, <code>displayName</code>, <code>firstName</code> をオブジェクトから取得し、出力します。</p> - -<h4 id="Setting_a_function_parameters_default_value" name="Setting_a_function_parameters_default_value">関数の引数に対する既定値の設定</h4> - -<pre class="brush: js notranslate">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { - console.log(size, coords, radius); - // グラフの描画 -} - -drawChart({ - coords: {x: 18, y: 30}, - radius: 30 -});</pre> - -<div class="note"> -<p>上記の <strong><code>drawChart</code></strong> の関数シグネチャの中で、<code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code> として、分割代入の左辺に、右辺側で空のオブジェクトリテラルを代入しています。右辺の代入がない関数を記入することもできます。しかし、右辺の代入を取り除いた場合、関数は実行されたときに少なくともひとつの引数が提供されることを期待しますが、この形式では何も引数を指定せずに単純に <code><strong>drawChart()</strong></code> を呼び出すことができます。この設計は引数を指定せずに関数を呼び出せるようにしたい場合に役に立ちますし、もう一方の形式は、オブジェクトを確実に関数に渡したい場合に役に立ちます。</p> -</div> - -<h4 id="Nested_object_and_array_destructuring" name="Nested_object_and_array_destructuring">入れ子になったオブジェクトと配列の分割代入</h4> - -<pre class="brush:js notranslate">const metadata = { - title: 'Scratchpad', - translations: [ - { - locale: 'de', - localization_tags: [], - last_edit: '2014-04-14T08:43:37', - url: '/de/docs/Tools/Scratchpad', - title: 'JavaScript-Umgebung' - } - ], - url: '/en-US/docs/Tools/Scratchpad' -}; - -let { - title: englishTitle, // rename - translations: [ - { - title: localeTitle, // rename - }, - ], -} = metadata; - -console.log(englishTitle); // "Scratchpad" -console.log(localeTitle); // "JavaScript-Umgebung"</pre> - -<h4 id="For_of_iteration_and_destructuring" name="For_of_iteration_and_destructuring">イテレーターでの分割代入の利用</h4> - -<pre class="brush: js notranslate">const people = [ - { - name: 'Mike Smith', - family: { - mother: 'Jane Smith', - father: 'Harry Smith', - sister: 'Samantha Smith' - }, - age: 35 - }, - { - name: 'Tom Jones', - family: { - mother: 'Norah Jones', - father: 'Richard Jones', - brother: 'Howard Jones' - }, - age: 25 - } -]; - -for (const {name: n, family: {father: f}} of people) { - console.log('Name: ' + n + ', Father: ' + f); -} - -// "Name: Mike Smith, Father: Harry Smith" -// "Name: Tom Jones, Father: Richard Jones" -</pre> - -<h4 id="Computed_object_property_names_and_destructuring" name="Computed_object_property_names_and_destructuring">計算されたオブジェクトのプロパティの名前と分割代入</h4> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">オブジェクトリテラル</a>のような計算されたプロパティの名前も分割代入で使用できます。</p> - -<pre class="brush: js notranslate">let key = 'z'; -let {[key]: foo} = {z: 'bar'}; - -console.log(foo); // "bar" -</pre> - -<h4 id="Rest_in_Object_Destructuring" name="Rest_in_Object_Destructuring">オブジェクトの分割代入の残り</h4> - -<p><a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> 提案 (ステージ 4) は、分割代入に <a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> 構文を追加しています。残余プロパティは、分割パターンによってすでに取り出されていない、残りの列挙可能なプロパティのキーを収集します。</p> - -<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} -a; // 10 -b; // 20 -rest; // { c: 30, d: 40 }</pre> - -<h4 id="Invalid_JavaScript_identifier_as_a_property_name" name="Invalid_JavaScript_identifier_as_a_property_name">無効な JavaScript 識別子をプロパティ名として使用する</h4> - -<p>JavaScript で有効な代替識別子を与えることにより、JavaScript で有効ではない{{glossary("Identifier", "識別子")}}であるプロパティ名を分割代入で使用できます。</p> - -<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true }; -const { 'fizz-buzz': fizzBuzz } = foo; - -console.log(fizzBuzz); // "true" -</pre> - -<h4 id="Combined_Array_and_Object_Destructuring" name="Combined_Array_and_Object_Destructuring">配列とオブジェクトの分割代入の組み合わせ</h4> - -<p>配列とオブジェクトの分割代入は組み合わせることができます。配列 <code>props</code> の 3 番目の要素にあるオブジェクトの <code>name</code> プロパティが欲しい場合、次の操作ができます。</p> - -<pre class="brush: js notranslate">const props = [ - { id: 1, name: 'Fizz'}, - { id: 2, name: 'Buzz'}, - { id: 3, name: 'FizzBuzz'} -]; - -const [,, { name }] = props; - -console.log(name); // "FizzBuzz" -</pre> - -<h4 id="The_prototype_chain_is_looked_up_when_the_object_is_deconstructed" name="The_prototype_chain_is_looked_up_when_the_object_is_deconstructed">オブジェクトが分割されるときにはプロトタイプチェーンが参照される</h4> - -<p>オブジェクトが分割されるときで、自分自身のプロパティがアクセスされない場合は、プロトタイプチェーンを辿って参照が続けられます。</p> - -<pre class="brush: js notranslate">let obj = {self: '123'}; -obj.__proto__.prot = '456'; -const {self, prot} = obj; -// self "123" -// prot "456"（プロトタイプチェーンへのアクセス）</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.operators.destructuring")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a></li> - <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md new file mode 100644 index 0000000000..913c4c21bc --- /dev/null +++ b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md @@ -0,0 +1,474 @@ +--- +title: 分割代入 +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +tags: + - Destructuring + - 分割代入 + - ECMAScript 2015 + - ES6 + - JavaScript + - 言語機能 + - 階層オブジェクトと配列の分割代入 + - 演算子 +browser-compat: javascript.operators.destructuring +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +{{jsSidebar("Operators")}} + +**分割代入** (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 + +{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}} + +## 構文 + +```js +let a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({ a, b } = { a: 10, b: 20 }); +console.log(a); // 10 +console.log(b); // 20 + +// Stage 4(finished) proposal +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // {c: 30, d: 40} +``` + +## 解説 + +オブジェクトリテラルと配列リテラルは、いくつかのデータを*アドホック*にまとめる簡単な方法を提供します。 + +```js +const x = [1, 2, 3, 4, 5]; +``` + +分割代入は似たような構文を使用しますが、代入の左辺が元の変数からどの値を受け取るかを定義します。 + +```js +const x = [1, 2, 3, 4, 5]; +const [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +``` + +同様に、配列を代入の左辺で分割することができます。 + +```js +const [firstElement, secondElement] = list; +// これは以下のものと同様です +// const firstElement = list[0]; +// const secondElement = list[1]; +``` + +この機能は、Perl や Python などの言語に存在する機能に似ています。 + +## 例 + +### 配列の分割代入 + +#### 簡単な例 + +```js +const foo = ['one', 'two', 'three']; + +const [red, yellow, green] = foo; +console.log(red); // "one" +console.log(yellow); // "two" +console.log(green); // "three" +``` + +#### 宣言後の割り当て + +変数は宣言とは別に、分割代入によって値を代入することができます。 + +```js +let a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +``` + +代入の右辺に指定された長さ _N_ の配列からの配列分割では、代入の左辺に指定された変数の数が _N_ より大きい場合、最初の _N_ 個の変数にのみ値が割り当てられます。残りの変数の値は undefined となります。 + +```js +const foo = ['one', 'two']; + +const [red, yellow, green, blue] = foo; +console.log(red); // "one" +console.log(yellow); // "two" +console.log(green); // undefined +console.log(blue); //undefined +``` + +#### 既定値 + +配列から取り出した値が `undefined` だった場合に使用される既定値を指定できます。 + +```js +let a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +``` + +#### 変数の入れ替え + +分割代入を使用して、複数の変数の値を入れ替えることができます。 + +分割代入を使用せずに 2 つの値を交換するには、一時変数 (または、一部の低水準言語においては [XOR 交換アルゴリズム](https://ja.wikipedia.org/wiki/XOR%E4%BA%A4%E6%8F%9B%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)) が必要です。 + +```js +let a = 1; +let b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 + +const arr = [1,2,3]; +[arr[2], arr[1]] = [arr[1], arr[2]]; +console.log(arr); // [1,3,2] +``` + +#### 関数から返された配列の解析 + +関数は配列を返すことができます。分割代入によって、返された配列の使用をより簡潔に記述できます。 + +この例では、`f()` は出力として値 `[1, 2]` を返しており、分割代入により 1 行で解析できます。 + +```js +function f() { + return [1, 2]; +} + +let a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +``` + +#### 返値の無視 + +関心のない返値は無視することができます。 + +```js +function f() { + return [1, 2, 3]; +} + +const [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 + +const [c] = f(); +console.log(c); // 1 +``` + +このようにすべての返値を無視することもできます。 + +```js +[,,] = f(); +``` + +#### 配列の残余部分への変数の代入 + +配列を分割するときに残余パターンを使用して、配列の残りの部分を取り出して変数に代入できます。 + +```js +const [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3] +``` + +左辺側で残余要素とともに末尾のカンマが使用されていると、{{jsxref("SyntaxError")}} が発生しますので注意してください。 + +```js example-bad +const [a, ...b,] = [1, 2, 3]; + +// SyntaxError: rest 要素の末尾にカンマがあってはなりません +// 常に最後の要素として rest 演算子を使用してください。 +``` + +#### 正規表現の一致からの値取得 + +正規表現オブジェクトの [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) メソッドは一致するものを見つけ、最初に一致した文字列全体の一部と、正規表現内の各括弧で囲まれたグループに一致した文字列の部分を含む配列を返します。分割代入によって、簡単にこの配列の一部分を取り出せます。また必要でない場合は、完全一致を無視できます。 + +```js +function parseProtocol(url) { + const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); + // ["https://developer.mozilla.org/en-US/docs/Web/JavaScript", + // "https", "developer.mozilla.org", "en-US/docs/Web/JavaScript"] + + const [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/docs/Web/JavaScript')); +// "https" +``` + +### オブジェクトの分割代入 + +#### 基本的な例 + +```js +const user = { + id: 42, + isVerified: true +}; + +const {id, isVerified} = user; + +console.log(id); // 42 +console.log(isVerified); // true +``` + +#### 宣言のない代入 + +分割代入は代入文で宣言することなく行うことができます。 + +```js +let a, b; + +({a, b} = {a: 1, b: 2}); +``` + +> **Note:** 代入文の周りの `( ... )` は宣言のないオブジェクトリテラル分割代入を使用するときに必要な構文です。 +> +> `{a, b} = {a: 1, b: 2}` は有効なスタンドアロンの構文ではありません。というのも、左辺の `{a, b}` はブロックでありオブジェクトリテラルではないと考えられるからです。 +> +> ですが、`({a, b} = {a: 1, b: 2})` 形式は有効です。`const {a, b} = {a: 1, b: 2}` と考えられるためです。 +> +> `( ... )` の式の前にセミコロンが必要です。そうしなければ、前の行の関数を実行に使用される可能性があります。 + +#### 新しい変数名への代入 + +オブジェクトから変数を取り出して、オブジェクトのプロパティとは異なる名前の変数に代入することができます。 + +```js +const o = {p: 42, q: true}; +const {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true +``` + +ここで、例えば、`const {p: foo} = o` はオブジェクト `o` から `p` という名前のプロパティを取り、`foo` という名前のローカル変数へ代入します。 + +#### 既定値 + +オブジェクトから取り出した値が `undefined` であるときの既定値を、変数に割り当てることができます。 + +```js +const {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5 +``` + +#### 新しい変数名の割り当てと既定値の提供 + +両方ともプロパティにすることができます。 + +- オブジェクトから取り出して異なる名前の変数に代入します。 +- 取り出した値が `undefined` である場合に備えて、既定値を割り当てます。 + +```js +const {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5 +``` + +#### 引数に指定されたオブジェクトの属性への参照 + +```js +const user = { + id: 42, + displayName: 'jdoe', + fullName: { + firstName: 'John', + lastName: 'Doe' + } +}; + +function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}) { + return `${displayName} is ${name}`; +} + +console.log(userId(user)); // 42 +console.log(whois(user)); // "jdoe is John" +``` + +上記では `id`、`displayName`、`firstName` をオブジェクトから取得し、出力します。 + +#### 関数の引数に対する既定値の設定 + +```js +function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { + console.log(size, coords, radius); + // グラフの描画 +} + +drawChart({ + coords: {x: 18, y: 30}, + radius: 30 +}); +``` + +> **Note:** 上記の **`drawChart`** の関数シグネチャの中で、`{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}` として、分割代入の左辺に、右辺側で空のオブジェクトリテラルを代入しています。右辺の代入がない関数を記入することもできます。しかし、右辺の代入を取り除いた場合、関数は実行されたときに少なくともひとつの引数が提供されることを期待しますが、この形式では何も引数を指定せずに単純に **`drawChart()`** を呼び出すことができます。この設計は引数を指定せずに関数を呼び出せるようにしたい場合に役に立ちますし、もう一方の形式は、オブジェクトを確実に関数に渡したい場合に役に立ちます。 + +### 入れ子になったオブジェクトと配列の分割代入 + +```js +const metadata = { + title: 'Scratchpad', + translations: [ + { + locale: 'de', + localization_tags: [], + last_edit: '2014-04-14T08:43:37', + url: '/de/docs/Tools/Scratchpad', + title: 'JavaScript-Umgebung' + } + ], + url: '/ja/docs/Tools/Scratchpad' +}; + +let { + title: englishTitle, // rename + translations: [ + { + title: localeTitle, // rename + }, + ], +} = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung" +``` + +#### イテレーターでの分割代入の利用 + +```js +const people = [ + { + name: 'Mike Smith', + family: { + mother: 'Jane Smith', + father: 'Harry Smith', + sister: 'Samantha Smith' + }, + age: 35 + }, + { + name: 'Tom Jones', + family: { + mother: 'Norah Jones', + father: 'Richard Jones', + brother: 'Howard Jones' + }, + age: 25 + } +]; + +for (const {name: n, family: {father: f}} of people) { + console.log('Name: ' + n + ', Father: ' + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones" +``` + +#### 計算されたオブジェクトのプロパティの名前と分割代入 + +[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names)のような計算されたプロパティの名前も分割代入で使用できます。 + +```js +let key = 'z'; +let {[key]: foo} = {z: 'bar'}; + +console.log(foo); // "bar" +``` + +#### オブジェクトの分割代入の残り + +[Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) の提案 (ステージ 4) は、分割代入に [rest](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters) 構文を追加しています。残余プロパティは、分割パターンによってすでに取り出されていない、残りの列挙可能なプロパティのキーを収集します。 + +```js +let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 } +``` + +#### 無効な JavaScript 識別子をプロパティ名として使用する + +JavaScript で有効な代替識別子を与えることにより、JavaScript で有効ではない{{glossary("Identifier", "識別子")}}であるプロパティ名を分割代入で使用できます。 + +```js +const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true" +``` + +#### 配列とオブジェクトの分割代入の組み合わせ + +配列とオブジェクトの分割代入は組み合わせることができます。配列 `props` の 3 番目の要素にあるオブジェクトの `name` プロパティが欲しい場合、次の操作ができます。 + +```js +const props = [ + { id: 1, name: 'Fizz'}, + { id: 2, name: 'Buzz'}, + { id: 3, name: 'FizzBuzz'} +]; + +const [,, { name }] = props; + +console.log(name); // "FizzBuzz" +``` + +#### オブジェクトが分割されるときにはプロトタイプチェーンが参照される + +オブジェクトが分割されるときで、自分自身のプロパティがアクセスされない場合は、プロトタイプチェーンを辿って参照が続けられます。 + +```js +let obj = {self: '123'}; +obj.__proto__.prot = '456'; +const {self, prot} = obj; +// self "123" +// prot "456" (プロトタイプチェーンへのアクセス) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#assignment_operators) +- ["ES6 in Depth: Destructuring" on hacks.mozilla.org](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/) diff --git a/files/ja/web/javascript/reference/operators/division/index.html b/files/ja/web/javascript/reference/operators/division/index.html deleted file mode 100644 index 3db6a5715d..0000000000 --- a/files/ja/web/javascript/reference/operators/division/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 除算 (/) -slug: Web/JavaScript/Reference/Operators/Division -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Division ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>除算演算子 (<code>/</code>) は、左のオペランドを被除数とし右のオペランドを除数としたオペランド同士の商を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> / <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="基本の除算">基本の除算</h3> - -<pre class="brush: js notranslate">1 / 2 // 0.5 - -Math.floor(3 / 2) // 1 - -1.0 / 2.0 // 0.5 -</pre> - -<h3 id="ゼロ除算">ゼロ除算</h3> - -<pre class="brush: js notranslate">2.0 / 0 // Infinity - -2.0 / 0.0 // Infinity, because 0.0 === 0 - -2.0 / -0.0 // -Infinity</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.division")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/division/index.md b/files/ja/web/javascript/reference/operators/division/index.md new file mode 100644 index 0000000000..d244af46b1 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/division/index.md @@ -0,0 +1,64 @@ +--- +title: 除算 (/) +slug: Web/JavaScript/Reference/Operators/Division +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.division +translation_of: Web/JavaScript/Reference/Operators/Division +--- +{{jsSidebar("Operators")}} + +除算演算子 (`/`) は、左のオペランドを被除数とし、右のオペランドを除数としたオペランド同士の除算結果を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-division.html")}} + +## 構文 + +```js +x / y +``` + +## 例 + +### 基本的な除算 + +```js +1 / 2 // 0.5 + +Math.floor(3 / 2) // 1 + +1.0 / 2.0 // 0.5 +``` + +### ゼロ除算 + +```js +2.0 / 0 // Infinity + +2.0 / 0.0 // Infinity。 0.0 === 0 であるため + +2.0 / -0.0 // -Infinity +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/division_assignment/index.html b/files/ja/web/javascript/reference/operators/division_assignment/index.html deleted file mode 100644 index 3e4ea274cf..0000000000 --- a/files/ja/web/javascript/reference/operators/division_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 除算代入 (/=) -slug: Web/JavaScript/Reference/Operators/Division_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference - - 代入演算子 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Division_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>除算代入演算子 (<code>/=</code>) は変数を右オペランドの値で除算し、結果をその変数に代入するものです。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリーに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><strong>演算子:</strong> x /= y -<strong>意味:</strong> x = x / y</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_division_assignment" name="Using_division_assignment">除算代入の使用</h3> - -<pre class="brush: js notranslate">// 以下の変数があると想定する -// bar = 5 - -bar /= 2 // 2.5 -bar /= 'foo' // NaN -bar /= 0 // Infinity</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.division_assignment")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">JavaScript ガイドの代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/division_assignment/index.md b/files/ja/web/javascript/reference/operators/division_assignment/index.md new file mode 100644 index 0000000000..2ff001bc38 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/division_assignment/index.md @@ -0,0 +1,50 @@ +--- +title: 除算代入 (/=) +slug: Web/JavaScript/Reference/Operators/Division_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.division_assignment +translation_of: Web/JavaScript/Reference/Operators/Division_assignment +--- +{{jsSidebar("Operators")}} + +除算代入演算子 (`/=`) は変数を右オペランドの値で除算し、結果をその変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}} + +<h2 id="Syntax" name="Syntax">構文</h2> + +```js +x /= y // x = x / y +``` + +<h2 id="Examples" name="Examples">例</h2> + +### 除算代入の使用 + +```js +// 以下の変数があり、すべての演算がこの順に実行されると想定する +// bar = 5 + +bar /= 2 // 2.5 +bar /= 2 // 1.25 +bar /= 0 // Infinity +bar /= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) diff --git a/files/ja/web/javascript/reference/operators/equality/index.html b/files/ja/web/javascript/reference/operators/equality/index.html deleted file mode 100644 index 25a1e23347..0000000000 --- a/files/ja/web/javascript/reference/operators/equality/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: 等価 (==) -slug: Web/JavaScript/Reference/Operators/Equality -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>等価演算子 (<code>==</code>) は、二つのオペランドが等しいことを検査し、論理値で結果を返します <a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a>演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>等価演算子 (<code>==</code> および <code>!=</code>) は、<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">抽象等価比較アルゴリズム</a>を使用して二つのオペランドを比較します。これは、およそ次のようにまとめることができます。</p> - -<ul> - <li>両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り <code>true</code> を返します。</li> - <li>一方のオペランドが <code>null</code> で、もう一方が <code>undefined</code> であった場合は <code>true</code> を返します。</li> - <li>オペランドの型が異なる場合は、比較前に同じ型に変換を試みます。 - <ul> - <li>数値と文字列を比較する場合、文字列を数値に変換しようとします。</li> - <li>一方のオペランドが <code>Boolean</code> である場合、その Boolean のオペランドが <code>true</code> である場合は 1 に、 <code>false</code> である場合は +0 に変換します。</li> - <li>オペランドのうちの1つがオブジェクトで、もう一方が数値または文字列である場合は、そのオブジェクトの <code>valueOf()</code> および <code>toString()</code> メソッドを使用してプリミティブに変換しようとします。</li> - </ul> - </li> - <li>オペランドが同じ型である場合は、次のよう比較します。 - <ul> - <li><code>String</code>: 両方のオペランドが同じ文字を同じ順序で持っている場合のみ、 <code>true</code> を返します。</li> - <li><code>Number</code>: 数値型は同じ値の数値である場合のみ、 <code>true</code> を返します。 <code>+0</code> と <code>-0</code> は同じ値と見なされます。一方のオペランドが <code>NaN</code> である場合は <code>false</code> を返します。</li> - <li><code>Boolean</code>: 両方のオペランドが共に <code>true</code> であるか、共に <code>false</code> である場合のみ <code>true</code> になります。</li> - </ul> - </li> -</ul> - -<p>この演算子と<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a> (<code>===</code>) 演算子の最も顕著な違いは、厳密等価演算子が型変換を試みない点です。厳密等価演算は、オペランドの型が異なる場合は常に異なるものと見なします。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparison_with_no_type_conversion" name="Comparison_with_no_type_conversion">型変換がない場合の比較</h3> - -<pre class="brush: js notranslate">1 == 1; // true -"hello" == "hello"; // true</pre> - -<h3 id="Comparison_with_type_conversion" name="Comparison_with_type_conversion">型変換がある場合の比較</h3> - -<pre class="brush: js notranslate">"1" == 1; // true -1 == "1"; // true -0 == false; // true -0 == null; // false -0 == undefined; // false -null == undefined; // true - -const number1 = new Number(3); -const number2 = new Number(3); -number1 == 3; // true -number1 == number2; // false</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = {"key": "value"} -const object2 = {"key": "value"}; - -object1 == object2 // false -object2 == object2 // true</pre> - -<h3 id="Comparing_strings_and_String_objects" name="Comparing_strings_and_String_objects">文字列と String オブジェクトの比較</h3> - -<p><code>new String()</code> を使用して構築された文字列はオブジェクトであることに注意してください。文字列リテラルとの比較を行うと、 <code>String</code> オブジェクトは文字列リテラルに変換され、その中身が比較されます。ただし、両方のオペランドが <code>String</code> オブジェクトであった場合は、オブジェクトとして比較され、同じオブジェクトを参照している場合だけ比較に成功します。</p> - -<pre class="brush: js notranslate">const string1 = "hello"; -const string2 = String("hello"); -const string3 = new String("hello"); -const string4 = new String("hello"); - -console.log(string1 == string2); // true -console.log(string1 == string3); // true -console.log(string2 == string3); // true -console.log(string3 == string4); // false -console.log(string4 == string4); // true</pre> - -<h3 id="Comparing_Dates_and_strings" name="Comparing_Dates_and_strings">Date と文字列の比較</h3> - -<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00'); -const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" -console.log(d == s); //true</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.strict_inequality")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/equality/index.md b/files/ja/web/javascript/reference/operators/equality/index.md new file mode 100644 index 0000000000..e68bb25863 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/equality/index.md @@ -0,0 +1,118 @@ +--- +title: 等価 (==) +slug: Web/JavaScript/Reference/Operators/Equality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.equality +translation_of: Web/JavaScript/Reference/Operators/Equality +--- +{{jsSidebar("Operators")}} + +等価演算子 (`==`) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-equality.html")}} + +## 構文 + +```js +x == y +``` + +## 解説 + +等価演算子 (`==` および `!=`) は、[抽象等価比較アルゴリズム](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3)を使用して 2 つのオペランドを比較します。これは、およそ次のようにまとめることができます。 + +- 両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り `true` を返します。 +- 一方のオペランドが `null` で、もう一方が `undefined` であった場合は `true` を返します。 +- オペランドの型が異なる場合は、比較前に同じ型に変換を試みます。 + + - 数値と文字列を比較する場合、文字列を数値に変換しようとします。 + - 一方のオペランドが論理値である場合、その論理値のオペランドが `true` である場合は 1 に、 `false` である場合は +0 に変換します。 + - オペランドのうちの一方がオブジェクトで、もう一方が数値または文字列である場合は、そのオブジェクトの `valueOf()` および `toString()` メソッドを使用してプリミティブに変換を試みます。 + +- オペランドが同じ型である場合は、次のよう比較します。 + + - 文字列型: 両方のオペランドが同じ文字を同じ順序で持っている場合のみ、 `true` を返します。 + - 数値型: 両方のオペランドが同じ値を持っている場合のみ、 `true` を返します。 `+0` と `-0` は同じ値と見なされます。一方のオペランドが `NaN` である場合は `false` を返します。 + - 論理型: 両方のオペランドが共に `true` であるか、共に `false` である場合のみ `true` になります。 + +この演算子と[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) (`===`) 演算子の最も顕著な違いは、厳密等価演算子が型変換を試みない点です。厳密等価演算は、オペランドの型が異なる場合は常に異なるものと見なします。 + +## 例 + +### 型変換がない場合の比較 + +```js +1 == 1; // true +"hello" == "hello"; // true +``` + +### 型変換がある場合の比較 + +```js +"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +0 == !!null; // true (論理 NOT 演算子を参照) +0 == !!undefined; // true (論理 NOT 演算子を参照) +null == undefined; // true + +const number1 = new Number(3); +const number2 = new Number(3); +number1 == 3; // true +number1 == number2; // false +``` + +### オブジェクトの比較 + +```js +const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 == object2 // false +object2 == object2 // true +``` + +### 文字列と String オブジェクトの比較 + +`new String()` を使用して構築された文字列はオブジェクトであることに注意してください。文字列リテラルとの比較を行うと、 `String` オブジェクトは文字列リテラルに変換され、その中身が比較されます。ただし、両方のオペランドが `String` オブジェクトであった場合は、オブジェクトとして比較され、同じオブジェクトを参照している場合だけ比較に成功します。 + +```js +const string1 = "hello"; +const string2 = String("hello"); +const string3 = new String("hello"); +const string4 = new String("hello"); + +console.log(string1 == string2); // true +console.log(string1 == string3); // true +console.log(string2 == string3); // true +console.log(string3 == string4); // false +console.log(string4 == string4); // true +``` + +### Date と文字列の比較 + +```js +const d = new Date('December 17, 1995 03:24:00'); +const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" +console.log(d == s); //true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Inequality) +- [厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) +- [厳密不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/ja/web/javascript/reference/operators/exponentiation/index.html b/files/ja/web/javascript/reference/operators/exponentiation/index.html deleted file mode 100644 index 40531f5a6c..0000000000 --- a/files/ja/web/javascript/reference/operators/exponentiation/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: べき乗 (**) -slug: Web/JavaScript/Reference/Operators/Exponentiation -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Exponentiation ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>べき乗演算子 (<code>**</code>) は、1番目のオペランドを2番目のオペランドの累乗まで上げた結果を返します。これは <code>Math.pow</code> と同等ですが、オペランドとして <a href="/ja/docs/Web/JavaScript/Data_structures#BigInt_%E5%9E%8B">BigInt</a> も受け入れます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> ** <var>var2</var> -</pre> - -<h2 id="説明">説明</h2> - -<p>べき乗演算子は右結合的です: <code><var>a</var> ** <var>b</var> ** <var>c</var></code> は <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code> と等しくなります。</p> - -<p>PHP や Python など、べき乗演算子 (<code>**</code>) を持つほとんどの言語では、べき乗演算子は単項演算子 (単項演算子 <code>+</code> や単項演算子 <code>-</code> など) よりも優先順位が高いと定義されていますが、いくつかの例外があります。例えば、Bash では <code>**</code> 演算子は単項演算子よりも優先順位が低いと定義されています。</p> - -<p>JavaScriptでは、あいまいなべき乗式を記述することはできません。 つまり、基数の直前に単項演算子 (<code>+/-/~/!/delete/void/typeof</code>) を置くことはできません。 これを行うと、SyntaxError が発生します。</p> - -<pre class="brush: js notranslate">-2 ** 2; -// Bashでは 4 他の言語では -4 -// JavaScriptでは意図があいまいなため無効 - - --(2 ** 2); -// JavaScriptでは意図が明白なため -4 -</pre> - -<p>注意: 一部のプログラミング言語ではべき乗計算にキャレット記号 <kbd>^</kbd> を使用していますが、JavaScript では<a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和</a>にこの記号を使用しています。</p> - -<h2 id="例">例</h2> - -<h3 id="基本的なべき乗">基本的なべき乗</h3> - -<pre class="brush: js notranslate">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN -</pre> - -<h3 id="結合">結合</h3> - -<pre class="brush: js notranslate">2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<h3 id="単項演算子との使用">単項演算子との使用</h3> - -<p>べき乗式の結果の符号を反転させる</p> - -<pre class="brush: js notranslate">-(2 ** 2) // -4 -</pre> - -<p>べき乗式の基底を強制的に負の数にする</p> - -<pre class="brush: js notranslate">(-2) ** 2 // 4 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exp-operator', 'Exponentiation operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.exponentiation")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/exponentiation/index.md b/files/ja/web/javascript/reference/operators/exponentiation/index.md new file mode 100644 index 0000000000..938125b0fa --- /dev/null +++ b/files/ja/web/javascript/reference/operators/exponentiation/index.md @@ -0,0 +1,96 @@ +--- +title: べき乗 (**) +slug: Web/JavaScript/Reference/Operators/Exponentiation +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.exponentiation +translation_of: Web/JavaScript/Reference/Operators/Exponentiation +--- +{{jsSidebar("Operators")}} + +べき乗演算子 (`**`) は、1 つ目のオペランドを2 つ目オペランドの累乗にした結果を返します。これは `Math.pow` と同等ですが、オペランドとして BigInt も受け入れます。 + +{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}} + +## 構文 + +```js +x ** y +``` + +## 解説 + +べき乗演算子は右結合です。 `a ** b ** c` は `a ** (b ** c)` と等しくなります。 + +PHP や Python など、べき乗演算子 (`**`) を持つほとんどの言語では、べき乗演算子は単項演算子 (単項 `+` や単項 `-` など) よりも優先順位が高いと定義されていますが、いくつかの例外があります。例えば、Bash では `**` 演算子は単項演算子よりも優先順位が低いと定義されています。 + +JavaScript では、あいまいなべき乗式を記述することはできません。 つまり、基数の直前に単項演算子 (`+/-/~/!/delete/void/typeof`) を置くことはできません。 これを行うと、SyntaxError が発生します。 + +```js +-2 ** 2; +// Bashでは 4 他の言語では -4 +// JavaScript では演算があいまいなため無効 + + +-(2 ** 2); +// JavaScript では意図が明白なため -4 +``` + +注意: 一部のプログラミング言語ではべき乗計算にキャレット記号 <kbd>^</kbd> を使用していますが、JavaScript では[ビット排他的論理和](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR)にこの記号を使用しています。 + +## 例 + +### 基本的なべき乗 + +```js +2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN +``` + +### 結合性 + +```js +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +``` + +### 単項演算子との使用 + +べき乗式の結果の符号を反転させる例です。 + +```js +-(2 ** 2) // -4 +``` + +べき乗式の基底を強制的に負の数にする例です。 + +```js +(-2) ** 2 // 4 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html deleted file mode 100644 index 9a7faa7c49..0000000000 --- a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: べき乗代入 (**=) -slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>べき乗代入演算子 (<code>**=</code>) は、変数の値を右辺のオペランドでべき乗します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x **= y -<strong>Meaning:</strong> x = x ** y</pre> - -<h2 id="例">例</h2> - -<h3 id="べき乗代入の仕様">べき乗代入の仕様</h3> - -<pre class="brush: js notranslate">// 次の変数を想定 -// bar = 5 - -bar **= 2 // 25 -bar **= 'foo' // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.exponentiation_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.md b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.md new file mode 100644 index 0000000000..c2675e3791 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: べき乗代入 (**=) +slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.exponentiation_assignment +translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment +--- +{{jsSidebar("Operators")}} + +べき乗代入演算子 (`**=`) は、変数の値を右オペランドでべき乗します。 + +{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}} + +## 構文 + +```js +x **= y // x = x ** y +``` + +## 例 + +### べき乗代入の仕様 + +```js +// 次の変数を想定 +// bar = 5 + +bar **= 2 // 25 +bar **= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) diff --git a/files/ja/web/javascript/reference/operators/function/index.html b/files/ja/web/javascript/reference/operators/function/index.html deleted file mode 100644 index a39cecb627..0000000000 --- a/files/ja/web/javascript/reference/operators/function/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: 関数式 -slug: Web/JavaScript/Reference/Operators/function -tags: - - Function - - JavaScript - - Language feature - - Operator - - Primary Expressions - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/function ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong><code>function</code></strong> キーワードは、式の中で関数を定義するために使用されます。</p> - -<p>{{jsxref("Function/Function", "Function")}} コンストラクターや{{jsxref("Statements/function", "関数宣言", "", 1)}}を用いて関数を定義することもできます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html", "shorter")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>myFunction</var> = function [<var>name</var>]([<var>param1</var>[, <var>param2[</var>, ..., <var>paramN</var>]]]) { - <var>statements</var> -};</pre> - -<p>ES2015 からは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}も使えます。</p> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>name</var></code> {{optional_inline}}</dt> - <dd>関数名。省略可能で、その場合は関数は<em>無名</em>になります。 name は関数本体のみのローカルです。</dd> - <dt><code><var>paramN</var></code> {{optional_inline}}</dt> - <dd>関数に渡される引数の名前です。</dd> - <dt><code><var>statements</var></code> {{optional_inline}}</dt> - <dd>関数の本体を構成する文です。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>関数式は関数宣言とよく似ており、ほとんど同じ書式でもあります (詳しくは {{jsxref("Statements/function", "function")}} 文を参照してください)。関数式と関数宣言の主な相違点は、<em>関数名</em>です。関数式では、<em>無名</em>関数を生成するために、関数名を省略できます。関数式は、定義するとすぐに実行する <strong>IIFE</strong> (即時実行関数)として使用できます。詳細については、{{jsxref("Functions", "関数", "", 1)}}の章を参照してください。</p> - -<h3 id="Function_expression_hoisting" name="Function_expression_hoisting">関数式の巻き上げ</h3> - -<p>JavaScript の関数式は、{{jsxref("Statements/function", "関数宣言", "#Function_declaration_hoisting", 1)}}と違って巻き上げられません。定義前に関数式を使用することはできません。</p> - -<pre class="brush: js">console.log(notHoisted) // undefined -// 変数名は巻き上げが行われますが、定義は行われません。そのため undefined になります。 -notHoisted(); // TypeError: notHoisted is not a function - -var notHoisted = function() { - console.log('bar'); -}; -</pre> - -<h3 id="Named_function_expression" name="Named_function_expression">名前付き関数式</h3> - -<p>関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。<u><strong>この名前は関数本体 (スコープ) に対してのみローカルです</strong></u>。これにより非標準の {{jsxref("Functions/arguments/callee", "arguments.callee")}} プロパティの使用も避けられます。</p> - -<pre class="brush: js">let math = { - 'factit': function factorial(n) { - console.log(n) - if (n <= 1) { - return 1; - } - return n * factorial(n - 1); - } -}; - -math.factit(3) //3;2;1; -</pre> - -<p>関数式が代入された変数は <code>name</code> プロパティを持ちます。別の変数に代入しても name は変わりません。関数名が省略された場合、変数名になります (暗黙的ｇな名前)。関数名が存在したら、それが関数名になります (明示的な名前)。これは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}にもあてはまります (アローは名前がないので変数名を暗黙的な名前として与える)。</p> - -<pre class="brush: js">var foo = function() {} -foo.name // "foo" - -var foo2 = foo -foo2.name // "foo" - -var bar = function baz() {} -bar.name // "baz" - -console.log(foo === foo2); // true -console.log(typeof baz); // undefined -console.log(bar === baz); // false (errors because baz == undefined) -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Creating_an_unnamed_function" name="Creating_an_unnamed_function">無名関数の作成</h3> - -<p>次の例では、無名関数を定義してそれを <code>x</code> に割り当てます。 関数は引数の 2 乗を返します。</p> - -<pre class="brush: js">var x = function(y) { - return y * y; -}; -</pre> - -<h3 id="Using_a_function_as_a_callback" name="Using_a_function_as_a_callback">関数をコールバックとして使用</h3> - -<p>より一般的には{{Glossary("Callback_function", "コールバック")}}として使われます。</p> - -<pre class="brush: js">button.addEventListener('click', function(event) { - console.log('button is clicked!') -})</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.function")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Arrow_functions", "アロー関数", "", 1)}}</li> - <li>{{jsxref("Functions_and_function_scope", "関数と関数スコープ", "", 1)}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function", "function")}} 文</li> - <li>{{jsxref("Statements/function*", "function*")}} 文</li> - <li>{{jsxref("Operators/function*", "function*")}} 式</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Statements/async_function", "非同期関数", "", 1)}}</li> - <li>{{jsxref("Operators/async_function", "非同期関数式", "", 1)}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/function/index.md b/files/ja/web/javascript/reference/operators/function/index.md new file mode 100644 index 0000000000..4bd7d85ccd --- /dev/null +++ b/files/ja/web/javascript/reference/operators/function/index.md @@ -0,0 +1,151 @@ +--- +title: 関数式 +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - 言語機能 + - 演算子 + - Primary Expressions +browser-compat: javascript.operators.function +translation_of: Web/JavaScript/Reference/Operators/function +--- +{{jsSidebar("Operators")}} + +**`function`** キーワードは、式の中で関数を定義するために使用されます。 + +{{jsxref("Function/Function", "Function")}} コンストラクターや{{jsxref("Statements/function", "関数宣言", "", 1)}}を用いて関数を定義することもできます。 + +{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html", "shorter")}} + +## 構文 + +この式は文の先頭に置くことができません。 + +```js +function [name]([param1[, param2[, ..., paramN]]]) { + statements +} +``` + +ES2015 からは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}も使えます。 + +### 引数 + +- `name` {{optional_inline}} + - : 関数名。省略可能で、その場合は関数は*無名*になります。 name は関数本体のみのローカルです。 +- `paramN` {{optional_inline}} + - : 関数に渡される引数の名前です。 +- `statements` {{optional_inline}} + - : 関数の本体を構成する文です。 + +## 解説 + +関数式は関数宣言とよく似ており、ほとんど同じ書式でもあります (詳しくは {{jsxref("Statements/function", "function")}} 文を参照してください)。関数式と関数宣言の主な相違点は、*関数名*です。関数式では、*無名*関数を生成するために、関数名を省略できます。関数式は、定義するとすぐに実行する **IIFE** (即時実行関数)として使用できます。詳細については、{{jsxref("Functions", "関数", "", 1)}}の章を参照してください。 + +### 関数式の巻き上げ + +JavaScript の関数式は、{{jsxref("Statements/function", "関数宣言", "#Function_declaration_hoisting", 1)}}と違って巻き上げられません。定義前に関数式を使用することはできません。 + +```js +console.log(notHoisted) // undefined +// 変数名は巻き上げが行われますが、定義は行われません。そのため undefined になります。 +notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +``` + +### 名前付き関数式 + +関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。**この名前は関数本体 (スコープ) に対してローカルです**。これにより標準外の {{jsxref("Functions/arguments/callee", "arguments.callee")}} プロパティの使用も避けられます。 + +```js +let math = { + 'factit': function factorial(n) { + console.log(n) + if (n <= 1) { + return 1; + } + return n * factorial(n - 1); + } +}; + +math.factit(3) //3;2;1; +``` + +関数式が代入された変数は `name` プロパティを持ちます。別の変数に代入しても name は変わりません。関数名が省略された場合、(暗黙的な名前が) 変数名になります。関数名が存在したら、それが関数名になります (明示的な名前)。これは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}にもあてはまります (アロー関数は名前がないので変数名を暗黙的な名前として与えます)。 + +```js +var foo = function() {} +foo.name // "foo" + +var foo2 = foo +foo2.name // "foo" + +var bar = function baz() {} +bar.name // "baz" + +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (errors because baz == undefined) +``` + +## 例 + +### 無名関数の作成 + +次の例では、無名関数を定義してそれを `x` に割り当てます。 関数は引数の 2 乗を返します。 + +```js +var x = function(y) { + return y * y; +}; +``` + +### 関数をコールバックとして使用 + +{{Glossary("Callback_function", "コールバック")}}としてより頻繁に使われます。 + +```js +button.addEventListener('click', function(event) { + console.log('button is clicked!') +}) +``` + +### 即時実行関数式 (IIFE) の使用 + +無名の関数が生成され、呼び出されます。 + +```js +(function() { + console.log('Code runs!') +})(); + +// または + +!function() { + console.log('Code runs!') +}(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}} +- {{jsxref("Functions", "関数", "", 1)}} +- {{jsxref("Function")}} +- {{jsxref("Statements/function", "function")}} 文 +- {{jsxref("Statements/function*", "function*")}} 文 +- {{jsxref("Operators/function*", "function*")}} 式 +- {{jsxref("GeneratorFunction")}} +- {{jsxref("Statements/async_function", "非同期関数", "", 1)}} +- {{jsxref("Operators/async_function", "非同期関数式", "", 1)}} diff --git a/files/ja/web/javascript/reference/operators/greater_than/index.html b/files/ja/web/javascript/reference/operators/greater_than/index.html deleted file mode 100644 index e5a05c3bbb..0000000000 --- a/files/ja/web/javascript/reference/operators/greater_than/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 大なり (>) -slug: Web/JavaScript/Reference/Operators/Greater_than -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Greater_than ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>大なり演算子 (<code>></code>) は、左辺のオペランドが右辺のオペランドより大きい場合は <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドは、 <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a> アルゴリズムを使用して比較されます。このアルゴリズムの概要については、 <a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a> 演算子のドキュメントを参照して下さい。</p> - -<h2 id="例">例</h2> - -<h3 id="文字列と文字列の比較">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" > "b"); // false -console.log("a" > "a"); // false -console.log("a" > "3"); // true</pre> - -<h3 id="文字列と数値の比較">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" > 3); // true -console.log("3" > 3); // false -console.log("3" > 5); // false - -console.log("hello" > 5); // false -console.log(5 > "hello"); // false - -console.log("5" > 3n); // true -console.log("3" > 5n); // false</pre> - -<h3 id="数値と数値の比較">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 > 3); // true -console.log(3 > 3); // false -console.log(3 > 5); // false</pre> - -<h3 id="数値と_BigInt_の比較">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n > 3); // true -console.log(3 > 5n); // false</pre> - -<h3 id="ブール値、_null_、_undefined_、_NaN_の比較">ブール値、 null 、 undefined 、 NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true > false); // true -console.log(false > true); // false - -console.log(true > 0); // true -console.log(true > 1); // false - -console.log(null > 0); // false -console.log(1 > null); // true - -console.log(undefined > 3); // false -console.log(3 > undefined); // false - -console.log(3 > NaN); // false -console.log(NaN > 3); // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.greater_than")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/greater_than/index.md b/files/ja/web/javascript/reference/operators/greater_than/index.md new file mode 100644 index 0000000000..c6da0b0667 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/greater_than/index.md @@ -0,0 +1,98 @@ +--- +title: 大なり (>) +slug: Web/JavaScript/Reference/Operators/Greater_than +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.greater_than +translation_of: Web/JavaScript/Reference/Operators/Greater_than +--- +{{jsSidebar("Operators")}} + +大なり演算子 (`>`) は、左辺のオペランドが右辺のオペランドより大きい場合は `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}} + +## 構文 + +```js +x > y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。このアルゴリズムの概要については、[小なり](/ja/docs/Web/JavaScript/Reference/Operators/Less_than)演算子のドキュメントを参照して下さい。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" > "b"); // false +console.log("a" > "a"); // false +console.log("a" > "3"); // true +``` + +### 文字列と数値の比較 + +```js +console.log("5" > 3); // true +console.log("3" > 3); // false +console.log("3" > 5); // false + +console.log("hello" > 5); // false +console.log(5 > "hello"); // false + +console.log("5" > 3n); // true +console.log("3" > 5n); // false +``` + +### 数値と数値の比較 + +```js +console.log(5 > 3); // true +console.log(3 > 3); // false +console.log(3 > 5); // false +``` + +### Number と BigInt の比較 + +```js +console.log(5n > 3); // true +console.log(3 > 5n); // false +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true > false); // true +console.log(false > true); // false + +console.log(true > 0); // true +console.log(true > 1); // false + +console.log(null > 0); // false +console.log(1 > null); // true + +console.log(undefined > 3); // false +console.log(3 > undefined); // false + +console.log(3 > NaN); // false +console.log(NaN > 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [小なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than) +- [小なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html deleted file mode 100644 index 12800994b8..0000000000 --- a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 大なりイコール (>=) -slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>大なりイコール演算子 (<code>>=</code>) は、左辺のオペランドが右辺のオペランド以上の場合は <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドは、<a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a>アルゴリズムを使用して比較されます。 このアルゴリズムの概要は<a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a>演算子のドキュメントを参照して下さい。</p> - -<h2 id="例">例</h2> - -<h3 id="文字列と文字列の比較">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" >= "b"); // false -console.log("a" >= "a"); // true -console.log("a" >= "3"); // true -</pre> - -<h3 id="文字列と数値の比較">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" >= 3); // true -console.log("3" >= 3); // true -console.log("3" >= 5); // false - -console.log("hello" >= 5); // false -console.log(5 >= "hello"); // false</pre> - -<h3 id="数値と数値の比較">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 >= 3); // true -console.log(3 >= 3); // true -console.log(3 >= 5); // false</pre> - -<h3 id="数値と_BigInt_の比較">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n >= 3); // true -console.log(3 >= 3n); // true -console.log(3 >= 5n); // false</pre> - -<h3 id="ブール値、_null_、_undefined_、_NaN_の比較">ブール値、 null 、 undefined 、 NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true >= false); // true -console.log(true >= true); // true -console.log(false >= true); // false - -console.log(true >= 0); // true -console.log(true >= 1); // true - -console.log(null >= 0); // true -console.log(1 >= null); // true - -console.log(undefined >= 3); // false -console.log(3 >= undefined); // false - -console.log(3 >= NaN); // false -console.log(NaN >= 3); // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.greater_than_or_equal")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.md b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.md new file mode 100644 index 0000000000..db06364474 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.md @@ -0,0 +1,97 @@ +--- +title: 大なりイコール (>=) +slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.greater_than_or_equal +translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal +--- +{{jsSidebar("Operators")}} + +大なりイコール演算子 (`>=`) は、左辺のオペランドが右辺のオペランド以上の場合は `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}} + +## 構文 + +```js +x >= y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。 このアルゴリズムの概要については、[小なり](/ja/docs/Web/JavaScript/Reference/Operators/Less_than)演算子のドキュメントを参照して下さい。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" >= "b"); // false +console.log("a" >= "a"); // true +console.log("a" >= "3"); // true +``` + +### 文字列と数値の比較 + +```js +console.log("5" >= 3); // true +console.log("3" >= 3); // true +console.log("3" >= 5); // false + +console.log("hello" >= 5); // false +console.log(5 >= "hello"); // false +``` + +### 数値と数値の比較 + +```js +console.log(5 >= 3); // true +console.log(3 >= 3); // true +console.log(3 >= 5); // false +``` + +### Number と BigInt の比較 + +```js +console.log(5n >= 3); // true +console.log(3 >= 3n); // true +console.log(3 >= 5n); // false +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true >= false); // true +console.log(true >= true); // true +console.log(false >= true); // false + +console.log(true >= 0); // true +console.log(true >= 1); // true + +console.log(null >= 0); // true +console.log(1 >= null); // true + +console.log(undefined >= 3); // false +console.log(3 >= undefined); // false + +console.log(3 >= NaN); // false +console.log(NaN >= 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [小なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than) +- [小なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/ja/web/javascript/reference/operators/increment/index.html b/files/ja/web/javascript/reference/operators/increment/index.html deleted file mode 100644 index 8cbb2486a8..0000000000 --- a/files/ja/web/javascript/reference/operators/increment/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: インクリメント (++) -slug: Web/JavaScript/Reference/Operators/Increment -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Increment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>インクリメント演算子 (<code>++</code>) は、オペランドをインクリメント (1を加算) して値を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>++ or ++<var>x</var> -</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドに後置で演算子を付けると (例えば、 <code><var>x</var>++</code>) 、インクリメント演算子はインクリメントしますが、インクリメント前の値を返します。</p> - -<p>オペランドに前置で演算子を付けると (例えば、 <code>++<var>x</var></code>) 、インクリメント演算子はインクリメントし、インクリメント後の値を返します。</p> - -<h2 id="例">例</h2> - -<h3 id="後置インクリメント">後置インクリメント</h3> - -<pre class="brush: js notranslate">let x = 3; -y = x++; - -// y = 3 -// x = 4 -</pre> - -<h3 id="前置インクリメント">前置インクリメント</h3> - -<pre class="brush: js notranslate">let a = 2; -b = ++a; - -// a = 3 -// b = 3 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.increment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/increment/index.md b/files/ja/web/javascript/reference/operators/increment/index.md new file mode 100644 index 0000000000..3c3c712463 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/increment/index.md @@ -0,0 +1,71 @@ +--- +title: インクリメント (++) +slug: Web/JavaScript/Reference/Operators/Increment +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.increment +translation_of: Web/JavaScript/Reference/Operators/Increment +--- +{{jsSidebar("Operators")}} + +インクリメント演算子 (`++`) は、オペランドをインクリメント (1 を加算) して値を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-increment.html")}} + +## 構文 + +```js +x++ +++x +``` + +## 解説 + +オペランドに後置で演算子を付けると (例えば、 `x++`) 、インクリメント演算子はインクリメントしますが、インクリメント前の値を返します。 + +オペランドに前置で演算子を付けると (例えば、 `++x`) 、インクリメント演算子はインクリメントし、インクリメント後の値を返します。 + +## 例 + +### 後置インクリメント + +```js +let x = 3; +y = x++; + +// y = 3 +// x = 4 +``` + +### 前置インクリメント + +```js +let a = 2; +b = ++a; + +// a = 3 +// b = 3 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/index.html b/files/ja/web/javascript/reference/operators/index.html deleted file mode 100644 index aa1fde203b..0000000000 --- a/files/ja/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: 式と演算子 -slug: Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Landing page - - Operators - - Overview - - Reference - - 概要 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators ---- -<div>{{JSSidebar("Operators")}}</div> - -<p class="summary">この節では、JavaScript 言語のすべての演算子、式、キーワードについて記述しています。</p> - -<h2 id="Expressions_and_operators_by_category">式と演算子 (カテゴリー別)</h2> - -<p>アルファベット順の一覧は左側のサイドバーをご覧ください。</p> - -<h3 id="Primary_expressions">基本式</h3> - -<p>JavaScript の基本的なキーワードと一般的な式です。</p> - -<dl> - <dt>{{JSxRef("Operators/this", "this")}}</dt> - <dd><code>this</code> キーワードは関数の実行コンテキストを参照します。</dd> - <dt>{{JSxRef("Operators/function", "function")}}</dt> - <dd><code>function</code> キーワードは関数式を定義します。</dd> - <dt>{{JSxRef("Operators/class", "class")}}</dt> - <dd><code>class</code> キーワードはクラス式を定義します。</dd> - <dt>{{JSxRef("Operators/function*", "function*")}}</dt> - <dd><code>function*</code> キーワードはジェネレーター関数式を定義します。</dd> - <dt>{{JSxRef("Operators/yield", "yield")}}</dt> - <dd>ジェネレーター関数の一時停止と再開を行います。</dd> - <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt> - <dd>別のジェネレーター関数または反復可能オブジェクトを代行します。</dd> - <dt>{{JSxRef("Operators/async_function", "async function")}}</dt> - <dd><code>async function</code> は非同期の関数式を定義します。</dd> - <dt>{{JSxRef("Operators/await", "await")}}</dt> - <dd>非同期関数式の停止/再開と、プロミスの解決/拒否を待ちます。</dd> - <dt>{{JSxRef("Global_Objects/Array", "[]")}}</dt> - <dd>配列初期化子またはリテラル構文です。</dd> - <dt>{{JSxRef("Operators/Object_initializer", "{}")}}</dt> - <dd>オブジェクト初期化子またはリテラル構文です。</dd> - <dt>{{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}</dt> - <dd>正規表現式のリテラル構文です。</dd> - <dt>{{JSxRef("Operators/Grouping", "( )")}}</dt> - <dd>グループ化演算子です。</dd> -</dl> - -<h3 id="Left-hand-side_expressions">左辺式</h3> - -<p>左辺値は、代入の対象になります。</p> - -<dl> - <dt>{{JSxRef("Operators/Property_accessors", "プロパティアクセサー", "", 1)}}</dt> - <dd>プロパティアクセス演算子はオブジェクトのプロパティやメソッドへのアクセスを提供します<br> - (<code>object.property</code> や <code>object["property"]</code>)。</dd> - <dt>{{JSxRef("Operators/new", "new")}}</dt> - <dd><code>new</code> 演算子はコンストラクターのインスタンスを作成します。</dd> - <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt> - <dd>コンストラクター内で <code>new.target</code> を使うことで、{{jsxref("Operators/new", "new")}} によって呼び出されるコンストラクターを参照できます。</dd> - <dt>{{JSxRef("Statements/import%2Emeta", "import.meta")}}</dt> - <dd>コンテキストに依存したメタデータを JavaScript モジュールへ公開するオブジェクトです。</dd> - <dt>{{JSxRef("Operators/super", "super")}}</dt> - <dd><code>super</code> キーワードは親コンストラクターを呼び出します。</dd> - <dt>{{JSxRef("Operators/Spread_syntax", "...obj")}}</dt> - <dd>展開記法 (スプレッド記法) は、式を複数の引数または複数の要素に展開して、それぞれ関数呼び出しまたは配列リテラルに渡します。</dd> -</dl> - -<h3 id="Increment_and_decrement">インクリメントとデクリメント</h3> - -<p>接尾/接頭辞のインクリメント演算子と接尾/接頭辞のデクリメント演算子です。</p> - -<dl> - <dt>{{JSxRef("Operators/Increment", "A++")}}</dt> - <dd>後置型インクリメント演算子。</dd> - <dt>{{JSxRef("Operators/Decrement", "A--")}}</dt> - <dd>後置型デクリメント演算子。</dd> - <dt>{{JSxRef("Operators/Increment", "++A")}}</dt> - <dd>前置型インクリメント演算子。</dd> - <dt>{{JSxRef("Operators/Decrement", "--A")}}</dt> - <dd>前置型デクリメント演算子。</dd> -</dl> - -<h3 id="Unary_operators">単項演算子</h3> - -<p>単項演算は、1 個のオペランドによる演算です。</p> - -<dl> - <dt>{{JSxRef("Operators/delete", "delete")}}</dt> - <dd><code>delete</code> 演算子は、オブジェクトからプロパティを削除します。</dd> - <dt>{{JSxRef("Operators/void", "void")}}</dt> - <dd><code>void</code> 演算子は、式の戻り値を破棄します。</dd> - <dt>{{JSxRef("Operators/typeof", "typeof")}}</dt> - <dd><code>typeof</code> 演算子は、与えられたオブジェクトの型を判別します。</dd> - <dt>{{JSxRef("Operators/Unary_plus", "+")}}</dt> - <dd>単項正値演算子は、そのオペランドを Number 型に変換します。</dd> - <dt>{{JSxRef("Operators/Unary_negation", "-")}}</dt> - <dd>単項負値演算子は、そのオペランドを Number 型に変換して正負を反転します。</dd> - <dt>{{JSxRef("Operators/Bitwise_NOT", "~")}}</dt> - <dd>ビット否定演算子です。</dd> - <dt>{{JSxRef("Operators/Logical_NOT", "!")}}</dt> - <dd>論理否定演算子です。</dd> -</dl> - -<h3 id="Arithmetic_operators">算術演算子</h3> - -<p>算術演算子は、数値 (リテラルまたは値) をオペランドとして取り、1 個の数値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/Addition", "+")}}</dt> - <dd>加算演算子です。</dd> - <dt>{{JSxRef("Operators/Subtraction", "-")}}</dt> - <dd>減算演算子です。</dd> - <dt>{{JSxRef("Operators/Division", "/")}}</dt> - <dd>除算演算子です。</dd> - <dt>{{JSxRef("Operators/Multiplication", "*")}}</dt> - <dd>乗算演算子です。</dd> - <dt>{{JSxRef("Operators/Remainder", "%")}}</dt> - <dd>剰余演算子です。</dd> - <dt>{{JSxRef("Operators/Exponentiation", "**")}}</dt> - <dd>べき乗演算子です。</dd> -</dl> - -<h3 id="Relational_operators">関係演算子</h3> - -<p>比較演算子は、そのオペランドを比較し、その比較が真かどうかに基づいて <code>Boolean</code> 値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/in", "in")}}</dt> - <dd><code>in</code> 演算子は、与えられたプロパティをオブジェクトが持っているかどうかを判別します。</dd> - <dt>{{JSxRef("Operators/instanceof", "instanceof")}}</dt> - <dd><code>instanceof</code> 演算子は、オブジェクトが別のオブジェクトのインスタンスかどうかを判別します。</dd> - <dt>{{JSxRef("Operators/Less_than", "<")}}</dt> - <dd>小なり演算子です。</dd> - <dt>{{JSxRef("Operators/Greater_than", ">")}}</dt> - <dd>大なり演算子です。</dd> - <dt>{{JSxRef("Operators/Less_than_or_equal", "<=")}}</dt> - <dd>小なりイコール演算子です。</dd> - <dt>{{JSxRef("Operators/Greater_than_or_equal", ">=")}}</dt> - <dd>大なりイコール演算子です。</dd> -</dl> - -<div class="notecard note"> -<p><strong>注: =></strong> は演算子ではなく、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> のための記法です。</p> -</div> - -<h3 id="Equality_operators">等値演算子</h3> - -<p>等値演算子の評価結果は常に、比較が真かどうかに基づいて <code>Boolean</code> 型の値になります。</p> - -<dl> - <dt>{{JSxRef("Operators/Equality", "==")}}</dt> - <dd>等値演算子です。</dd> - <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt> - <dd>不等値演算子です。</dd> - <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt> - <dd>同値演算子です。</dd> - <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt> - <dd>非同値演算子です。</dd> -</dl> - -<h3 id="Bitwise_shift_operators">ビットシフト演算子</h3> - -<p>オペランドのすべてのビットをシフト演算します。</p> - -<dl> - <dt>{{JSxRef("Operators/Left_shift", "<<")}}</dt> - <dd>ビット左シフト演算子です。</dd> - <dt>{{JSxRef("Operators/Right_shift", ">>")}}</dt> - <dd>ビット右シフト演算子です。</dd> - <dt>{{JSxRef("Operators/Unsigned_right_shift", ">>>")}}</dt> - <dd>ビット符号なし右シフト演算子です。</dd> -</dl> - -<h3 id="Binary_bitwise_operators">バイナリービット演算子</h3> - -<p>ビット演算子は、そのオペランドを 32 ビット (0 と 1) の並びとして扱い、標準の JavaScript 数値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/Bitwise_AND", "&")}}</dt> - <dd>ビット論理積 (AND) です。</dd> - <dt>{{JSxRef("Operators/Bitwise_OR", "|")}}</dt> - <dd>ビット論理和 (OR) です。</dd> - <dt>{{JSxRef("Operators/Bitwise_XOR", "^")}}</dt> - <dd>ビット排他的論理和 (XOR) です。</dd> -</dl> - -<h3 id="Binary_logical_operators">バイナリー論理演算子</h3> - -<p>論理演算には、一般的に (論理) 真偽値が使用され、それが置かれた時に真偽値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/Logical_AND", "&&")}}</dt> - <dd>論理積 (AND) です。</dd> - <dt>{{JSxRef("Operators/Logical_OR", "||")}}</dt> - <dd>論理和 (OR) です。</dd> - <dt>{{JSxRef("Operators/Nullish_coalescing_operator", "??")}}</dt> - <dd>Null 合体演算子です。</dd> -</dl> - -<h3 id="Conditional_ternary_operator">条件 (三項) 演算子</h3> - -<dl> - <dt>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> - <dd> - <p>この条件演算子は、条件の論理値を基に、2 つの値のいずれか一方を返します。</p> - </dd> -</dl> - -<h3 id="Optional_Chaining_operator">オプショナルチェイニング演算子</h3> - -<dl> - <dt>{{JSxRef("Operators/Optional_chaining", "?.")}}</dt> - <dd> - <p>オプショナルチェイニング演算子は、参照が <a href="/ja/docs/Glossary/Nullish">nullish</a>（<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>）の場合にエラーを発生させるのではなく、<code>undefined</code> を返します。</p> - </dd> -</dl> - -<h3 id="Assignment_operators">代入演算子</h3> - -<p>代入演算子は、右辺のオペランドに基づいて、値を左辺のオペランドに代入します。</p> - -<dl> - <dt>{{JSxRef("Operators/Assignment", "=")}}</dt> - <dd>代入演算子です。</dd> - <dt>{{JSxRef("Operators/Multiplication_assignment", "*=")}}</dt> - <dd>乗算値を代入します。</dd> - <dt>{{JSxRef("Operators/Exponentiation_assignment", "**=")}}</dt> - <dd>べき乗値を代入します。</dd> - <dt>{{JSxRef("Operators/Division_assignment", "/=")}}</dt> - <dd>除算値を代入します。</dd> - <dt>{{JSxRef("Operators/Remainder_assignment", "%=")}}</dt> - <dd>剰余値を代入します。</dd> - <dt>{{JSxRef("Operators/Addition_assignment", "+=")}}</dt> - <dd>加算値を代入します。</dd> - <dt>{{JSxRef("Operators/Subtraction_assignment", "-=")}}</dt> - <dd>減算値を代入します。</dd> - <dt>{{JSxRef("Operators/Left_shift_assignment", "<<=")}}</dt> - <dd>左シフトした値を代入します。</dd> - <dt>{{JSxRef("Operators/Right_shift_assignment", ">>=")}}</dt> - <dd>右シフトした値を代入します。</dd> - <dt>{{JSxRef("Operators/Unsigned_right_shift_assignment", ">>>=")}}</dt> - <dd>符号なしの右シフトした値を代入します。</dd> - <dt>{{JSxRef("Operators/Bitwise_AND_assignment", "&=")}}</dt> - <dd>ビット論理積 (AND) の値を代入します。</dd> - <dt>{{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}}</dt> - <dd>ビット排他的論理和 (XOR) の値を代入します。</dd> - <dt>{{JSxRef("Operators/Bitwise_OR_assignment", "|=")}}</dt> - <dd>ビット論理和 (OR) の値を代入します。</dd> - <dt>{{JSxRef("Operators/Logical_AND_assignment", "&&=")}}</dt> - <dd>論理積代入です。</dd> - <dt>{{JSxRef("Operators/Logical_OR_assignment", "||=")}}</dt> - <dd>論理和代入です。</dd> - <dt>{{JSxRef("Operators/Logical_nullish_assignment", "??=")}}</dt> - <dd>論理 Null 代入です。</dd> - <dt>{{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> - {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> - <dd> - <p>分割代入は、配列やオブジェクトのプロパティを、配列やオブジェクトリテラルに似た構文を使用して変数に代入します。</p> - </dd> -</dl> - -<h3 id="Comma_operator">カンマ演算子</h3> - -<dl> - <dt>{{JSxRef("Operators/Comma_Operator", ",")}}</dt> - <dd>カンマ演算子は、複数の式を単一の文で評価し、その最後の式の結果を返します。</dd> -</dl> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">演算子の優先順位</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/index.md b/files/ja/web/javascript/reference/operators/index.md new file mode 100644 index 0000000000..c5b135ee13 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/index.md @@ -0,0 +1,248 @@ +--- +title: 式と演算子 +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Landing page + - 演算子 + - 概要 + - Reference +browser-compat: javascript.operators +translation_of: Web/JavaScript/Reference/Operators +--- +{{JSSidebar("Operators")}} + +この節では、JavaScript 言語のすべての演算子、式、キーワードについて記述しています。 + +## 式と演算子 (カテゴリー別) + +アルファベット順の一覧は左側のサイドバーをご覧ください。 + +### 基本式 + +JavaScript の基本的なキーワードと一般的な式です。 + +- {{JSxRef("Operators/this", "this")}} + - : `this` キーワードは関数の実行コンテキストを参照します。 +- {{JSxRef("Operators/function", "function")}} + - : `function` キーワードは関数式を定義します。 +- {{JSxRef("Operators/class", "class")}} + - : `class` キーワードはクラス式を定義します。 +- {{JSxRef("Operators/function*", "function*")}} + - : `function*` キーワードはジェネレーター関数式を定義します。 +- {{JSxRef("Operators/yield", "yield")}} + - : ジェネレーター関数の一時停止と再開を行います。 +- {{JSxRef("Operators/yield*", "yield*")}} + - : 別のジェネレーター関数または反復可能オブジェクトを代行します。 +- {{JSxRef("Operators/async_function", "async function")}} + - : `async function` は非同期の関数式を定義します。 +- {{JSxRef("Operators/await", "await")}} + - : 非同期関数式の停止/再開と、プロミスの解決/拒否を待ちます。 +- {{JSxRef("Global_Objects/Array", "[]")}} + - : 配列初期化子またはリテラル構文です。 +- {{JSxRef("Operators/Object_initializer", "{}")}} + - : オブジェクト初期化子またはリテラル構文です。 +- {{JSxRef("Global_Objects/RegExp", "/ab+c/i")}} + - : 正規表現式のリテラル構文です。 +- {{JSxRef("Operators/Grouping", "( )")}} + - : グループ化演算子です。 + +### 左辺式 + +左辺値は、代入の対象になります。 + +- {{JSxRef("Operators/Property_accessors", "プロパティアクセサー", "", 1)}} + - : プロパティアクセス演算子はオブジェクトのプロパティやメソッドへのアクセス (`object.property` や `object["property"]`) を提供します。 +- {{JSxRef("Operators/new", "new")}} + - : `new` 演算子はコンストラクターのインスタンスを作成します。 +- {{JSxRef("Operators/new%2Etarget", "new.target")}} + - : コンストラクター内で `new.target` を使うことで、{{JSxRef("Operators/new", "new")}} によって呼び出されるコンストラクターを参照できます。 +- {{JSxRef("Statements/import%2Emeta", "import.meta")}} + - : コンテキストに依存したメタデータを JavaScript モジュールへ公開するオブジェクトです。 +- {{JSxRef("Operators/super", "super")}} + - : `super` キーワードは親コンストラクターを呼び出します。 +- {{JSxRef("Operators/Spread_syntax", "...obj")}} + - : 展開記法 (スプレッド記法) は、式を複数の引数または複数の要素に展開して、それぞれ関数呼び出しまたは配列リテラルに渡します。 + +### インクリメントとデクリメント + +接尾/接頭辞のインクリメント演算子と接尾/接頭辞のデクリメント演算子です。 + +- {{JSxRef("Operators/Increment", "A++")}} + - : 後置型インクリメント演算子。 +- {{JSxRef("Operators/Decrement", "A--")}} + - : 後置型デクリメント演算子。 +- {{JSxRef("Operators/Increment", "++A")}} + - : 前置型インクリメント演算子。 +- {{JSxRef("Operators/Decrement", "--A")}} + - : 前置型デクリメント演算子。 + +### 単項演算子 + +単項演算は、1 個のオペランドによる演算です。 + +- {{JSxRef("Operators/delete", "delete")}} + - : `delete` 演算子は、オブジェクトからプロパティを削除します。 +- {{JSxRef("Operators/void", "void")}} + - : `void` 演算子は、式の戻り値を破棄します。 +- {{JSxRef("Operators/typeof", "typeof")}} + - : `typeof` 演算子は、与えられたオブジェクトの型を判別します。 +- {{JSxRef("Operators/Unary_plus", "+")}} + - : 単項正値演算子は、そのオペランドを Number 型に変換します。 +- {{JSxRef("Operators/Unary_negation", "-")}} + - : 単項負値演算子は、そのオペランドを Number 型に変換して正負を反転します。 +- {{JSxRef("Operators/Bitwise_NOT", "~")}} + - : ビット否定演算子です。 +- {{JSxRef("Operators/Logical_NOT", "!")}} + - : 論理否定演算子です。 + +<h3 id="Arithmetic_operators">算術演算子</h3> + +算術演算子は、数値 (リテラルまたは値) をオペランドとして取り、1 個の数値を返します。 + +- {{JSxRef("Operators/Addition", "+")}} + - : 加算演算子です。 +- {{JSxRef("Operators/Subtraction", "-")}} + - : 減算演算子です。 +- {{JSxRef("Operators/Division", "/")}} + - : 除算演算子です。 +- {{JSxRef("Operators/Multiplication", "*")}} + - : 乗算演算子です。 +- {{JSxRef("Operators/Remainder", "%")}} + - : 剰余演算子です。 +- {{JSxRef("Operators/Exponentiation", "**")}} + - : べき乗演算子です。 + +### 関係演算子 + +比較演算子は、そのオペランドを比較し、その比較が真かどうかに基づいて `Boolean` 値を返します。 + +- {{JSxRef("Operators/in", "in")}} + - : `in` 演算子は、与えられたプロパティをオブジェクトが持っているかどうかを判別します。 +- {{JSxRef("Operators/instanceof", "instanceof")}} + - : `instanceof` 演算子は、オブジェクトが別のオブジェクトのインスタンスかどうかを判別します。 +- {{JSxRef("Operators/Less_than", "<")}} + - : 小なり演算子です。 +- {{JSxRef("Operators/Greater_than", ">")}} + - : 大なり演算子です。 +- {{JSxRef("Operators/Less_than_or_equal", "<=")}} + - : 小なりイコール演算子です。 +- {{JSxRef("Operators/Greater_than_or_equal", ">=")}} + - : 大なりイコール演算子です。 + +> **Note:** `=>` は演算子ではなく、[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)のための記法です。 + +<h3 id="Equality_operators">等値演算子</h3> + +等値演算子の評価結果は常に、比較が真かどうかに基づいて `Boolean` 型の値になります。 + +- {{JSxRef("Operators/Equality", "==")}} + - : 等値演算子です。 +- {{JSxRef("Operators/Inequality", "!=")}} + - : 不等値演算子です。 +- {{JSxRef("Operators/Strict_equality", "===")}} + - : 同値演算子です。 +- {{JSxRef("Operators/Strict_inequality", "!==")}} + - : 非同値演算子です。 + +<h3 id="Bitwise_shift_operators">ビットシフト演算子</h3> + +オペランドのすべてのビットをシフト演算します。 + +- {{JSxRef("Operators/Left_shift", "<<")}} + - : ビット左シフト演算子です。 +- {{JSxRef("Operators/Right_shift", ">>")}} + - : ビット右シフト演算子です。 +- {{JSxRef("Operators/Unsigned_right_shift", ">>>")}} + - : ビット符号なし右シフト演算子です。 + +### バイナリービット演算子 + +ビット演算子は、そのオペランドを 32 ビット (0 と 1) の並びとして扱い、標準の JavaScript 数値を返します。 + +- {{JSxRef("Operators/Bitwise_AND", "&")}} + - : ビット論理積 (AND) です。 +- {{JSxRef("Operators/Bitwise_OR", "|")}} + - : ビット論理和 (OR) です。 +- {{JSxRef("Operators/Bitwise_XOR", "^")}} + - : ビット排他的論理和 (XOR) です。 + +### バイナリー論理演算子 + +論理演算には、一般的に (論理) 真偽値が使用され、それが置かれた時に真偽値を返します。 + +- {{JSxRef("Operators/Logical_AND", "&&")}} + - : 論理積 (AND) です。 +- {{JSxRef("Operators/Logical_OR", "||")}} + - : 論理和 (OR) です。 +- {{JSxRef("Operators/Nullish_coalescing_operator", "??")}} + - : Null 合体演算子です。 + +### 条件 (三項) 演算子 + +- {{JSxRef("Operators/Conditional_Operator", "(条件 ? 真の場合 : 負の場合)")}} + - : この条件演算子は、条件の論理値を基に、2 つの値のいずれか一方を返します。 + +<h3 id="Optional_Chaining_operator">オプショナルチェーン演算子</h3> + +- {{JSxRef("Operators/Optional_chaining", "?.")}} + - : オプショナルチェーン演算子は、参照が [nullish](/ja/docs/Glossary/Nullish) ([`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) または [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined)) の場合にエラーを発生させるのではなく、`undefined` を返します。 + + +<h3 id="Assignment_operators">代入演算子</h3> + +代入演算子は、右辺のオペランドに基づいて、値を左辺のオペランドに代入します。 + +- {{JSxRef("Operators/Assignment", "=")}} + - : 代入演算子です。 +- {{JSxRef("Operators/Multiplication_assignment", "*=")}} + - : 乗算値を代入します。 +- {{JSxRef("Operators/Exponentiation_assignment", "**=")}} + - : べき乗値を代入します。 +- {{JSxRef("Operators/Division_assignment", "/=")}} + - : 除算値を代入します。 +- {{JSxRef("Operators/Remainder_assignment", "%=")}} + - : 剰余値を代入します。 +- {{JSxRef("Operators/Addition_assignment", "+=")}} + - : 加算値を代入します。 +- {{JSxRef("Operators/Subtraction_assignment", "-=")}} + - : 減算値を代入します。 +- {{JSxRef("Operators/Left_shift_assignment", "<<=")}} + - : 左シフトした値を代入します。 +- {{JSxRef("Operators/Right_shift_assignment", ">>=")}} + - : 右シフトした値を代入します。 +- {{JSxRef("Operators/Unsigned_right_shift_assignment", ">>>=")}} + - : 符号なしの右シフトした値を代入します。 +- {{JSxRef("Operators/Bitwise_AND_assignment", "&=")}} + - : ビット論理積 (AND) の値を代入します。 +- {{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}} + - : ビット排他的論理和 (XOR) の値を代入します。 +- {{JSxRef("Operators/Bitwise_OR_assignment", "|=")}} + - : ビット論理和 (OR) の値を代入します。 +- {{JSxRef("Operators/Logical_AND_assignment", "&&=")}} + - : 論理積代入です。 +- {{JSxRef("Operators/Logical_OR_assignment", "||=")}} + - : 論理和代入です。 +- {{JSxRef("Operators/Logical_nullish_assignment", "??=")}} + - : 論理 Null 代入です。 +- {{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}} + {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}} + - : 分割代入は、配列やオブジェクトのプロパティを、配列やオブジェクトリテラルに似た構文を使用して変数に代入します。 + + +<h3 id="Comma_operator">カンマ演算子</h3> + +- {{JSxRef("Operators/Comma_Operator", ",")}} + - : カンマ演算子は、複数の式を単一の文で評価し、その最後の式の結果を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) diff --git a/files/ja/web/javascript/reference/operators/inequality/index.html b/files/ja/web/javascript/reference/operators/inequality/index.html deleted file mode 100644 index aab622a884..0000000000 --- a/files/ja/web/javascript/reference/operators/inequality/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 不等価 (!=) -slug: Web/JavaScript/Reference/Operators/Inequality -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Inequality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>不等価演算子 (<code>!=</code>) は、2つのオペランドが等しくないかをチェックし、ブール値の結果を返します。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子とは異なり、異なる型のオペランドを変換して比較を行おうとします。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h2 id="説明">説明</h2> - -<p>不等価演算子は、そのオペランドが等しくないかどうかをチェックします。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子の否定なので、次の2行は常に同じ結果になります。</p> - -<pre class="brush: js notranslate">x != y - -!(x == y)</pre> - -<p>比較アルゴリズムの詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子のページを参照して下さい。</p> - -<p>等価演算子と同様に、不等価演算子は異なる型のオペランドを変換して比較しようとします。</p> - -<pre class="brush: js notranslate">3 != "3"; // false</pre> - -<p>これを防止し、異なる型が異なる結果を返すようにするには、代わりに<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子を使用します:</p> - -<pre class="brush: js notranslate">3 !== "3"; // true</pre> - -<h2 id="例">例</h2> - -<h3 id="型変換なしの比較">型変換なしの比較</h3> - -<pre class="brush: js notranslate">1 != 2; // true -"hello" != "hola"; // true - -1 != 1; // false -"hello" != "hello"; // false</pre> - -<h3 id="型変換ありの比較">型変換ありの比較</h3> - -<pre class="brush: js notranslate">"1" != 1; // false -1 != "1"; // false -0 != false; // false -0 != null; // true -0 != undefined; // true -null != undefined; // false - -const number1 = new Number(3); -const number2 = new Number(3); -number1 != 3; // false -number1 != number2; // true</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = {"key": "value"} -const object2 = {"key": "value"}; - -object1 != object2 // true -object2 != object2 // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.inequality")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/inequality/index.md b/files/ja/web/javascript/reference/operators/inequality/index.md new file mode 100644 index 0000000000..29e40f7b29 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/inequality/index.md @@ -0,0 +1,100 @@ +--- +title: 不等価 (!=) +slug: Web/JavaScript/Reference/Operators/Inequality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.inequality +translation_of: Web/JavaScript/Reference/Operators/Inequality +--- +{{jsSidebar("Operators")}} + +不等価演算子 (`!=`) は、2 つのオペランドが等しくないことを検査し、論理値で結果を返します。[厳密不等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality)演算子とは異なり、異なる型のオペランドを変換して比較を行おうとします。 + +{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}} + +## 構文 + +```js +x != y +``` + +## 解説 + +不等価演算子は、そのオペランドが等しくないことを検査します。これは[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。 + +```js +x != y + +!(x == y) +``` + +比較アルゴリズムの詳細については、[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子のページを参照して下さい。 + +等価演算子と同様に、不等価演算子は異なる型のオペランドを変換して比較しようとします。 + +```js +3 != "3"; // false +``` + +これを防止し、異なる型が異なる結果を返すようにするには、代わりに[厳密不等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality)演算子を使用してください。 + +```js +3 !== "3"; // true +``` + +## 例 + +### 型変換がない場合の比較 + +```js +1 != 2; // true +"hello" != "hola"; // true + +1 != 1; // false +"hello" != "hello"; // false +``` + +### 型変換がある場合の比較 + +```js +"1" != 1; // false +1 != "1"; // false +0 != false; // false +0 != null; // true +0 != undefined; // true +0 != !!null; // false (論理 NOT 演算子を参照) +0 != !!undefined; // false (論理 NOT 演算子を参照) +null != undefined; // false + +const number1 = new Number(3); +const number2 = new Number(3); +number1 != 3; // false +number1 != number2; // true +``` + +### オブジェクトの比較 + +```js +const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 != object2 // true +object2 != object2 // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Equality) +- [厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) +- [厳密不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/ja/web/javascript/reference/operators/left_shift/index.html b/files/ja/web/javascript/reference/operators/left_shift/index.html deleted file mode 100644 index e0f494ba5a..0000000000 --- a/files/ja/web/javascript/reference/operators/left_shift/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 左シフト (<<) -slug: Web/JavaScript/Reference/Operators/Left_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - ビット演算子 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Left_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>左シフト演算子 (<code><<</code>)</strong>は、1つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。0のビットが右からずれて入ります。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> << <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>この演算子は、1つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。0のビットが右からずれて入ります。</p> - -<p>例えば <code>9 << 2</code> は 36 になります。</p> - -<pre class="brush: js notranslate">. 9 (10進数): 00000000000000000000000000001001 (2進数) - -------------------------------- -9 << 2 (10進数): 00000000000000000000000000100100 (2進数) = 36 (10進数) -</pre> - -<p>任意の数 <code>x</code> を <code>y</code> ビット分だけ左にビット単位にずらすと、 <code>x * 2 ** y</code> になります。<br> - ですから、例えば <code>9 << 3</code> は <code>9 * (2 ** 3) = 9 * (8) = 72</code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_left_shift" name="Using_left_shift">左シフトの使用</h3> - -<pre class="brush: js notranslate">9 << 3; // 72 - -// 9 * (2 ** 3) = 9 * (8) = 72 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.left_shift")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">JavaScript ガイドのビット毎演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">左シフト代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/left_shift/index.md b/files/ja/web/javascript/reference/operators/left_shift/index.md new file mode 100644 index 0000000000..0e8b1420a8 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/left_shift/index.md @@ -0,0 +1,61 @@ +--- +title: 左シフト (<<) +slug: Web/JavaScript/Reference/Operators/Left_shift +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.left_shift +translation_of: Web/JavaScript/Reference/Operators/Left_shift +--- +{{jsSidebar("Operators")}} + +**左シフト演算子 (`<<`)** は、1 つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。0 のビットが右からずれて入ります。 + +{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}} + +## 構文 + +```js +a << b +``` + +## 解説 + +この演算子は、1 つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。 0 のビットが右からずれて入ります。 + +例えば `9 << 2` は 36 になります。 + +```js +. 9 (10 進数): 00000000000000000000000000001001 (2 進数) + -------------------------------- +9 << 2 (10 進数): 00000000000000000000000000100100 (2 進数) = 36 (10 進数) +``` + +任意の数 `x` を `y` ビット分だけ左にビット単位にずらすと、 `x * 2 ** y` になります。 + ですから、例えば `9 << 3` は `9 * (2 ** 3) = 9 * (8) = 72` になります。 + +## 例 + +### 左シフトの使用 + +```js +9 << 3; // 72 + +// 9 * (2 ** 3) = 9 * (8) = 72 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [左シフト代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment) diff --git a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html deleted file mode 100644 index be51e08dda..0000000000 --- a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 左シフト代入 (<<=) -slug: Web/JavaScript/Reference/Operators/Left_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>左シフト代入演算子 (<code><<=</code>) は、指定された量のビットを左に移動し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x <<= y -<strong>Meaning:</strong> x = x << y</pre> - -<h2 id="例">例</h2> - -<h3 id="左シフト代入の使用">左シフト代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; -// 00000000000000000000000000000101 - -bar <<= 2; // 20 -// 00000000000000000000000000010100</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.left_shift_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Left_shift">左シフト演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md new file mode 100644 index 0000000000..66f59bc046 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 左シフト代入 (<<=) +slug: Web/JavaScript/Reference/Operators/Left_shift_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.left_shift_assignment +translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment +--- +{{jsSidebar("Operators")}} + +左シフト代入演算子 (`<<=`) は、指定された数だけビットを左に移動し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}} + +## 構文 + +```js +x <<= y // x = x << y +``` + +## 例 + +### 左シフト代入の使用 + +```js +let a = 5; +// 00000000000000000000000000000101 + +a <<= 2; // 20 +// 00000000000000000000000000010100 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [左シフト演算子](/ja/docs/Web/JavaScript/Reference/Operators/Left_shift) diff --git a/files/ja/web/javascript/reference/operators/less_than/index.html b/files/ja/web/javascript/reference/operators/less_than/index.html deleted file mode 100644 index e3d838febc..0000000000 --- a/files/ja/web/javascript/reference/operators/less_than/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 小なり (<) -slug: Web/JavaScript/Reference/Operators/Less_than -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Less_than ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>小なり演算子 (<code><</code>) は、左辺のオペランドが右辺のオペランドより小さい場合は <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h2 id="説明">説明</h2> - -<p>オペランドは、以下に大まかに要約されている<a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">抽象関係比較</a>アルゴリズムを使用して比較されます:</p> - -<ul> - <li>最初に、オブジェクトは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code> を使用してプリミティブに変換されます。</li> - <li>両方の値が文字列である場合、それらに含まれる Unicode コードポイントの値に基づいて、文字列として比較されます。</li> - <li>それ以外の場合、 JavaScript は非数値型を数値に変換しようとします: - <ul> - <li>ブール値 <code>true</code> および <code>false</code> は、それぞれ 1 および 0 に変換されます。</li> - <li><code>null</code> は 0 に変換されます。</li> - <li><code>undefined</code> は <code>NaN</code> に変換されます。</li> - <li>文字列は、含まれている値に基づいて変換され、数値が含まれていない場合は <code>NaN</code> として変換されます。</li> - </ul> - </li> - <li>いずれかの値が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> の場合、演算子は <code>false</code> を返します。</li> - <li>それ以外の場合、値は数値として比較されます。</li> -</ul> - -<h2 id="例">例</h2> - -<h3 id="文字列と文字列の比較">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" < "b"); // true -console.log("a" < "a"); // false -console.log("a" < "3"); // false</pre> - -<h3 id="文字列と数値の比較">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" < 3); // false -console.log("3" < 3); // false -console.log("3" < 5); // true - -console.log("hello" < 5); // false -console.log(5 < "hello"); // false - -console.log("5" < 3n); // false -console.log("3" < 5n); // true</pre> - -<h3 id="数値と数値の比較">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 < 3); // false -console.log(3 < 3); // false -console.log(3 < 5); // true</pre> - -<h3 id="数値と_BigInt_の比較">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n < 3); // false -console.log(3 < 5n); // true</pre> - -<h3 id="ブール値_null_undefined_NaN_の比較">ブール値, null, undefined, NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true < false); // false -console.log(false < true); // true - -console.log(0 < true); // true -console.log(true < 1); // false - -console.log(null < 0); // false -console.log(null < 1); // true - -console.log(undefined < 3); // false -console.log(3 < undefined); // false - -console.log(3 < NaN); // false -console.log(NaN < 3); // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.less_than")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/less_than/index.md b/files/ja/web/javascript/reference/operators/less_than/index.md new file mode 100644 index 0000000000..c685d6d433 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/less_than/index.md @@ -0,0 +1,110 @@ +--- +title: 小なり (<) +slug: Web/JavaScript/Reference/Operators/Less_than +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.less_than +translation_of: Web/JavaScript/Reference/Operators/Less_than +--- +{{jsSidebar("Operators")}} + +小なり演算子 (`<`) は、左辺のオペランドが右辺のオペランドより小さい場合は `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}} + +## 構文 + +```js +x < y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。以下に大まかに要約します。 + +- 最初に、オブジェクトは [`Symbol.ToPrimitive`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) の `hint` 引数を `'number'` として使用してプリミティブに変換されます。 +- 両方の値が文字列である場合、それらに含まれる Unicode コードポイントの値に基づいて、文字列として比較されます。 +- それ以外の場合、 JavaScript は非数値型を数値に変換しようとします。 + + - 論理値 `true` および `false` は、それぞれ 1 および 0 に変換されます。 + - `null` は 0 に変換されます。 + - `undefined` は `NaN` に変換されます。 + - 文字列は、含まれている値に基づいて変換され、数値が含まれていない場合は `NaN` として変換されます。 + +- いずれかの値が [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) の場合、演算子は `false` を返します。 +- それ以外の場合、値は数値として比較されます。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" < "b"); // true +console.log("a" < "a"); // false +console.log("a" < "3"); // false +``` + +### 文字列と数値の比較 + +```js +console.log("5" < 3); // false +console.log("3" < 3); // false +console.log("3" < 5); // true + +console.log("hello" < 5); // false +console.log(5 < "hello"); // false + +console.log("5" < 3n); // false +console.log("3" < 5n); // true +``` + +### 数値と数値の比較 + +```js +console.log(5 < 3); // false +console.log(3 < 3); // false +console.log(3 < 5); // true +``` + +### Number と BigInt の比較 + +```js +console.log(5n < 3); // false +console.log(3 < 5n); // true +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true < false); // false +console.log(false < true); // true + +console.log(0 < true); // true +console.log(true < 1); // false + +console.log(null < 0); // false +console.log(null < 1); // true + +console.log(undefined < 3); // false +console.log(3 < undefined); // false + +console.log(3 < NaN); // false +console.log(NaN < 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [大なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [小なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.html b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.html deleted file mode 100644 index dce2c02d1b..0000000000 --- a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 小なりイコール (<=) -slug: Web/JavaScript/Reference/Operators/Less_than_or_equal -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>小なりイコール演算子 (<code><=</code>) は、左のオペランドが右のオペランドより小さいか等しい場合に <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは<a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a>アルゴリズムを使用して比較されます。このアルゴリズムの概要は<a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">大なり</a>演算子のドキュメントをご覧ください。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="String_to_string_comparison" name="String_to_string_comparison">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" <= "b"); // true -console.log("a" <= "a"); // true -console.log("a" <= "3"); // false -</pre> - -<h3 id="String_to_number_comparison" name="String_to_number_comparison">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" <= 3); // false -console.log("3" <= 3); // true -console.log("3" <= 5); // true - -console.log("hello" <= 5); // false -console.log(5 <= "hello"); // false</pre> - -<h3 id="Number_to_Number_comparison" name="Number_to_Number_comparison">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 <= 3); // false -console.log(3 <= 3); // true -console.log(3 <= 5); // true</pre> - -<h3 id="Number_to_BigInt_comparison" name="Number_to_BigInt_comparison">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n <= 3); // false -console.log(3 <= 3n); // true -console.log(3 <= 5n); // true</pre> - -<h3 id="Comparing_Boolean_null_undefined_NaN" name="Comparing_Boolean_null_undefined_NaN">論理型, null, undefined, NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true <= false); // false -console.log(true <= true); // true -console.log(false <= true); // true - -console.log(true <= 0); // false -console.log(true <= 1); // true - -console.log(null <= 0); // true -console.log(1 <= null); // false - -console.log(undefined <= 3); // false -console.log(3 <= undefined); // false - -console.log(3 <= NaN); // false -console.log(NaN <= 3); // false</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.less_than_or_equal")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">大なり演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">大なりイコール演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md new file mode 100644 index 0000000000..53a5e53eb9 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md @@ -0,0 +1,97 @@ +--- +title: 小なりイコール (<=) +slug: Web/JavaScript/Reference/Operators/Less_than_or_equal +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.less_than_or_equal +translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal +--- +{{jsSidebar("Operators")}} + +小なりイコール演算子 (`<=`) は、左のオペランドが右のオペランドより小さいか等しい場合に `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}} + +## 構文 + +```js +x <= y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。 このアルゴリズムの概要については、[小なり](/ja/docs/Web/JavaScript/Reference/Operators/Less_than)演算子のドキュメントを参照して下さい。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" <= "b"); // true +console.log("a" <= "a"); // true +console.log("a" <= "3"); // false +``` + +### 文字列と数値の比較 + +```js +console.log("5" <= 3); // false +console.log("3" <= 3); // true +console.log("3" <= 5); // true + +console.log("hello" <= 5); // false +console.log(5 <= "hello"); // false +``` + +### 数値と数値の比較 + +```js +console.log(5 <= 3); // false +console.log(3 <= 3); // true +console.log(3 <= 5); // true +``` + +### Number と BigInt の比較 + +```js +console.log(5n <= 3); // false +console.log(3 <= 3n); // true +console.log(3 <= 5n); // true +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true <= false); // false +console.log(true <= true); // true +console.log(false <= true); // true + +console.log(true <= 0); // false +console.log(true <= 1); // true + +console.log(null <= 0); // true +console.log(1 <= null); // false + +console.log(undefined <= 3); // false +console.log(3 <= undefined); // false + +console.log(3 <= NaN); // false +console.log(NaN <= 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [大なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [小なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than) diff --git a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html deleted file mode 100644 index 95ac42b650..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: 論理積代入 (&&=) -slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment -tags: - - JavaScript - - Language feature - - Logical assignment - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Logical_AND_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>論理積代入 (<code>x &&= y</code>) 演算子は、<code>x</code> が {{Glossary("truthy")}} である場合にのみ代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>expr1</em> &&= <em>expr2</em> -</pre> - -<h2 id="説明">説明</h2> - -<h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND">論理積演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> - -<p><code>(偽値の式) && expr</code> は、偽値の式が短絡評価されます。</p> - -<p>短絡評価とは、上記の <code><em>expr</em></code> 部分が<strong>評価されない</strong>ことを意味します。したがって、評価された場合の副作用は発生しません。（例えば、<code><em>expr</em></code> が関数呼び出しである場合、呼び出しは行われません。）</p> - -<p>論理積代入も短絡評価されます。これは、<code>x &&= y</code> が以下と等価であることを意味します。</p> - -<pre class="brush: js notranslate">x && (x = y);</pre> - -<p>そして、常に代入が行われる以下と等価ではありません。</p> - -<pre class="brush: js notranslate example-bad">x = x && y; -</pre> - -<h2 id="例">例</h2> - -<h3 id="論理積代入演算子の使用">論理積代入演算子の使用</h3> - -<pre class="brush: js notranslate">let x = 0; -let y = 1; - -x &&= 0; // 0 -x &&= 1; // 0 -y &&= 1; // 1 -y &&= 0; // 0 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('Logical Assignment', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.logical_and_assignment")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND">論理積 (&&)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null合体 (<code>??</code>)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">ビット論理積代入 (<code>&=</code>)</a></li> - <li>{{jsxref("Boolean")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md new file mode 100644 index 0000000000..d185cedff8 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md @@ -0,0 +1,75 @@ +--- +title: 論理積代入 (&&=) +slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment +tags: + - JavaScript + - 言語機能 + - 論理代入 + - 演算子 + - Reference +browser-compat: javascript.operators.logical_and_assignment +translation_of: Web/JavaScript/Reference/Operators/Logical_AND_assignment +--- +{{jsSidebar("Operators")}} + +論理積代入 (`x &&= y`) 演算子は、`x` が{{Glossary("truthy", "真値")}}である場合にのみ代入を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}} + +## 構文 + +```js +expr1 &&= expr2 +``` + +## 解説 + +### 短絡評価 (ショートサーキット) + +[論理積演算子](/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND)は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。 + +`(偽値の式) && expr` は、偽値の式が短絡評価されます。 + +短絡評価とは、上記の `expr` 部分が**評価されない**ことを意味します。したがって、評価された場合の副作用は発生しません (例えば、`expr` が関数呼び出しである場合、呼び出しは行われません)。 + +論理積代入も短絡評価されます。これは、`x &&= y` が以下と等価であることを意味します。 + +```js +x && (x = y); +``` + +そして、常に代入が行われる以下とは等価ではありません。 + +```js example-bad +x = x && y; +``` + +## 例 + +### 論理積代入演算子の使用 + +```js +let x = 0; +let y = 1; + +x &&= 0; // 0 +x &&= 1; // 0 +y &&= 1; // 1 +y &&= 0; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [論理積演算子 (&&)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND) +- [Null 合体演算子 (`??`)](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [ビット論理積代入 (`&=`)](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) +- {{Glossary("Truthy", "真値")}} +- {{Glossary("Falsy", "偽値")}} diff --git a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html deleted file mode 100644 index ba7ebab53d..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Null 合体代入 (??=) -slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Null 合体代入 (<code>x ??= y</code>) 演算子は、<code>x</code> が {{Glossary("nullish")}} (<code>null</code> または <code>undefined</code>) である場合にのみ代入を行います。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>expr1</em> ??= <em>expr2</em> -</pre> - -<h2 id="説明">説明</h2> - -<h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> - -<p><code>(null や undefined ではない式) ?? expr</code> は、左辺が <code>null</code> でも <code>undefined</code> でもないことが証明されたら、左辺の式が短絡評価されます。</p> - -<p>短絡評価とは、上記の <code><em>expr</em></code> 部分が<strong>評価されない</strong>ことを意味します。したがって、評価された場合の副作用は発生しません。（例えば、<code><em>expr</em></code> が関数呼び出しである場合、呼び出しは行われません。）</p> - -<p>Null 合体代入も短絡評価されます。これは、<code>x ??= y</code> が以下と等価であることを意味します。</p> - -<pre class="brush: js notranslate">x ?? (x = y);</pre> - -<p>そして、常に代入が行われる以下と等価ではありません。</p> - -<pre class="brush: js notranslate example-bad">x = x ?? y; -</pre> - -<h2 id="例">例</h2> - -<h3 id="Null_合体代入演算子の使用">Null 合体代入演算子の使用</h3> - -<pre class="brush: js notranslate">function config(options) { - options.duration ??= 100; - options.speed ??= 25; - return options; -} - -config({ duration: 125 }); // { duration: 125, speed: 25 } -config({}); // { duration: 100, speed: 25 } -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('Logical Assignment', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.logical_nullish_assignment")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子 (<code>??</code>)</a></li> - <li>{{Glossary("Nullish")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.md new file mode 100644 index 0000000000..cf42315146 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.md @@ -0,0 +1,76 @@ +--- +title: Null 合体代入 (??=) +slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 論理演算子 + - 演算子 + - Reference +browser-compat: javascript.operators.logical_nullish_assignment +translation_of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment +--- +{{jsSidebar("Operators")}} + +Null 合体代入 (`x ??= y`) 演算子は、`x` が {{Glossary("nullish")}} (`null` または `undefined`) である場合にのみ代入を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}} + +## 構文 + +```js +expr1 ??= expr2 +``` + +## 解説 + +### 短絡評価 (ショートサーキット) + +[Null 合体演算子](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。 + +`(null や undefined ではない式) ?? expr` は、左辺が `null` でも `undefined` でもないことが証明されたら、左辺の式が短絡評価されます。 + +短絡評価とは、上記の `expr` 部分が**評価されない**ことを意味します。したがって、評価された場合の副作用は発生しません (例えば、`expr` が関数呼び出しである場合、呼び出しは行われません)。 + +Null 合体代入も短絡評価されます。これは、`x ??= y` が以下と等価であることを意味します。 + +```js +x ?? (x = y); +``` + +そして、常に代入が行われる以下と等価ではありません。 + +```js example-bad +x = x ?? y; +``` + +## 例 + +### Null 合体代入演算子の使用 + +```js +function config(options) { + options.duration ??= 100; + options.speed ??= 25; + return options; +} + +config({ duration: 125 }); // { duration: 125, speed: 25 } +config({}); // { duration: 100, speed: 25 } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Noll 合体演算子 (`??`)](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- {{Glossary("Nullish")}} +- {{Glossary("Truthy", "真値")}} +- {{Glossary("Falsy", "偽値")}} diff --git a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html deleted file mode 100644 index 96de814889..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 論理和代入 (||=) -slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>論理和代入演算子 (<code>x ||= y</code>) は、<code>x</code> が {{Glossary("falsy")}} である場合にのみ代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>expr1</em> ||= <em>expr2</em> -</pre> - -<h2 id="説明">説明</h2> - -<h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和</a>演算子は次のように動作します。</p> - -<pre class="brush: js notranslate">x || y; -// x が truthy の場合 x を返します -// x が truthy ではない場合 y を返します</pre> - -<p>論理和演算子は、1番目のオペランドが既に結果を決定していない場合にのみ、2番目のオペランドの評価を行う短絡評価をします。</p> - -<p>論理和代入も短絡評価されます。これは、<code>x ||= y</code> が以下と等価であることを意味します。</p> - -<pre class="brush: js notranslate">x || (x = y); -</pre> - -<p>そして、常に代入が行われる以下と等価ではありません。</p> - -<pre class="brush: js notranslate example-bad">x = x || y; -</pre> - -<p>注意: この動作は、数学的な代入演算子やビット代入演算子とは異なることに注意してください。</p> - -<h2 id="例">例</h2> - -<h3 id="デフォルトの内容を設定する">デフォルトの内容を設定する</h3> - -<p>"lyrics" 要素が空の場合は、<code><a href="/ja/docs/Web/API/Element/innerHTML">innerHTML</a></code> をデフォルト値に設定します。</p> - -<pre class="brush: js notranslate">document.getElementById('lyrics').innerHTML ||= '<i>No lyrics.</i>'</pre> - -<p>ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。</p> - -<p>注意: チェック対象の API が返す値に注意してください。空の文字列（{{Glossary("falsy")}} な値）が返される場合は、<code>||=</code> を使用する必要があります。それ以外の場合（戻り値が {{jsxref("null")}} または {{jsxref("undefined")}} の場合）は <code>??=</code> 演算子を使用します。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('Logical Assignment', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.logical_or_assignment")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和演算子 (||)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null合体演算子 (<code>??</code>)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入 (<code>|=</code>)</a></li> - <li>{{jsxref("Boolean")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md new file mode 100644 index 0000000000..3b04602f07 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md @@ -0,0 +1,81 @@ +--- +title: 論理和代入 (||=) +slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment +tags: + - JavaScript + - 言語機能 + - 論理代入 + - 演算子 + - Reference +browser-compat: javascript.operators.logical_or_assignment +translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment +--- +{{jsSidebar("Operators")}} + +論理和代入演算子 (`x ||= y`) は、`x` が{{Glossary("falsy", "偽値")}}である場合にのみ代入を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}} + +## 構文 + +```js +expr1 ||= expr2 +``` + +## 解説 + +### 短絡評価 (ショートサーキット) + +[論理和](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR)演算子は次のように動作します。 + +```js +x || y; +// x が真値の場合 x を返します +// x が真値ではない場合 y を返します +``` + +論理和演算子は、1 つ目のオペランドがまだ結果を決定していない場合にのみ、2 つ目のオペランドの評価を行う短絡評価をします。 + +論理和代入も同様に短絡評価され、右辺の評価が行われる論理演算の場合にのみ代入が行われます。言い替えれば、`x ||= y` は以下と等価です。 + +```js +x || (x = y); +``` + +そして、常に代入が行われる以下と等価ではありません。 + +```js example-bad +x = x || y; +``` + +なお、この動作は、数学的な代入演算子やビット代入演算子とは異なることに注意してください。 + +## 例 + +### 既定の内容を設定する + +"lyrics" 要素が空の場合は、既定値を表示します。 + +```js +document.getElementById('lyrics').textContent ||= 'No lyrics.' +``` + +ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。 + +注意: チェック対象の API が返す値に注意してください。空の文字列 ({{Glossary("falsy", "偽値")}}) が返される場合は、`||=` を使用する必要があります。それ以外の場合 (返値が {{jsxref("null")}} または {{jsxref("undefined")}} の場合) は `??=` 演算子を使用してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [論理和演算子 (||)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR) +- [Null 合体演算子 (`??`)](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [ビット論理和代入演算子 (`|=`)](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) +- {{Glossary("Truthy", "真値")}} +- {{Glossary("Falsy", "偽値")}} diff --git a/files/ja/web/javascript/reference/operators/multiplication/index.html b/files/ja/web/javascript/reference/operators/multiplication/index.html deleted file mode 100644 index 4aed5ac7f6..0000000000 --- a/files/ja/web/javascript/reference/operators/multiplication/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 乗算 (*) -slug: Web/JavaScript/Reference/Operators/Multiplication -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Multiplication ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>乗算演算子 (<code>*</code>) はオペランドの積を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> * <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="数値を使用した乗算">数値を使用した乗算</h3> - -<pre class="brush: js notranslate"> 2 * 2 // 4 --2 * 2 // -4 -</pre> - -<h3 id="無限大との乗算">無限大との乗算</h3> - -<pre class="brush: js notranslate">Infinity * 0 // NaN -Infinity * Infinity // Infinity</pre> - -<h3 id="非数との乗算">非数との乗算</h3> - -<pre class="brush: js notranslate">'foo' * 2 // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Multiplication operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.multiplication")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/multiplication/index.md b/files/ja/web/javascript/reference/operators/multiplication/index.md new file mode 100644 index 0000000000..2dd23d0093 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/multiplication/index.md @@ -0,0 +1,64 @@ +--- +title: 乗算 (*) +slug: Web/JavaScript/Reference/Operators/Multiplication +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.multiplication +translation_of: Web/JavaScript/Reference/Operators/Multiplication +--- +{{jsSidebar("Operators")}} + +乗算演算子 (`*`) はオペランドの積を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}} + +## 構文 + +```js +x * y +``` + +## 例 + +### 数値を用いた乗算 + +```js + 2 * 2 // 4 +-2 * 2 // -4 +``` + +### 無限大との乗算 + +```js +Infinity * 0 // NaN +Infinity * Infinity // Infinity +``` + +### 非数との乗算 + +```js +'foo' * 2 // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html deleted file mode 100644 index 557ce809ee..0000000000 --- a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 乗算代入 (*=) -slug: Web/JavaScript/Reference/Operators/Multiplication_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>乗算代入演算子 (<code>*=</code>) は、変数に右のオペランドの値を乗算し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x *= y -<strong>Meaning:</strong> x = x * y</pre> - -<h2 id="例">例</h2> - -<h3 id="乗算代入の使用">乗算代入の使用</h3> - -<pre class="brush: js notranslate">// 次の変数を想定 -// bar = 5 - -bar *= 2 // 10 -bar *= 'foo' // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.multiplication_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md new file mode 100644 index 0000000000..2824916583 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 乗算代入 (*=) +slug: Web/JavaScript/Reference/Operators/Multiplication_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.multiplication_assignment +translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment +--- +{{jsSidebar("Operators")}} + +乗算代入演算子 (`*=`) は、変数に右のオペランドの値を乗算し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}} + +## 構文 + +```js +x *= y // x = x * y +``` + +## 例 + +### 乗算代入の使用 + +```js +// 次の変数を想定 +// bar = 5 + +bar *= 2 // 10 +bar *= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) diff --git a/files/ja/web/javascript/reference/operators/remainder/index.html b/files/ja/web/javascript/reference/operators/remainder/index.html deleted file mode 100644 index 0d757f4d3c..0000000000 --- a/files/ja/web/javascript/reference/operators/remainder/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 剰余 (%) -slug: Web/JavaScript/Reference/Operators/Remainder -tags: -- JavaScript -- Language feature -- Operator -- Reference -translation_of: Web/JavaScript/Reference/Operators/Remainder ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>剰余演算子 (<code>%</code>) は、 1 つ目のオペランドが 2 つ目のオペランドで除算されたときに残った剰余を返します。これは常に被除数の符号を取ります。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> - -<p>なお、多くの言語では ‘%’ はリマインダー演算子ですが、言語によっては (例えば <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python や Perl</a> では) モジュロ演算子になります。正の数同士の場合は、この 2 つの値は等価ですが、被除数と除数が異なる符号の場合は結果が異なります。 JavaScript でモジュロを得るには、 <code>a % n</code> の代わりに <code>((a % n ) + n ) % n</code> を使用してください。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js notranslate"><strong>演算子:</strong> <var>var1</var> % <var>var2</var> -</pre> - -<h2 id="Examples">例</h2> - -<h3 id="Remainder_with_positive_dividend">正の値の剰余</h3> - -<pre class="brush: js notranslate"> 12 % 5 // 2 - 1 % -2 // 1 - 1 % 2 // 1 - 2 % 3 // 2 -5.5 % 2 // 1.5 -</pre> - -<h3 id="Remainder_with_negative_dividend">負の値の剰余</h3> - -<pre class="brush: js notranslate">-12 % 5 // -2 --1 % 2 // -1 --4 % 2 // -0</pre> - -<h3 id="Remainder_with_NaN">NaN の剰余</h3> - -<pre class="brush: js notranslate">NaN % 2 // NaN</pre> - -<h3 id="Remainder_with_Infinity">無限大の剰余</h3> - -<pre class="brush: js notranslate">Infinity % 2 // NaN -Infinity % 0 // NaN -Infinity % Infinity // NaN -</pre> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}} - </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.remainder")}}</p> - -<h2 id="See_also">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/remainder/index.md b/files/ja/web/javascript/reference/operators/remainder/index.md new file mode 100644 index 0000000000..9ca1a6046a --- /dev/null +++ b/files/ja/web/javascript/reference/operators/remainder/index.md @@ -0,0 +1,80 @@ +--- +title: 剰余 (%) +slug: Web/JavaScript/Reference/Operators/Remainder +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.remainder +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +{{jsSidebar("Operators")}} + +剰余演算子 (`%`) は、1 つ目のオペランドが 2 つ目のオペランドで除算されたときに残った剰余を返します。これは常に被除数の符号を取ります。 + +{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}} + +なお、多くの言語では ‘%’ はリマインダー演算子ですが、言語によっては (例えば [Python や Perl](https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages) では) モジュロ演算子になります。正の数同士の場合は、この 2 つの値は等価ですが、被除数と除数が異なる符号の場合は結果が異なります。 JavaScript でモジュロを得るには、 `a % n` の代わりに `((a % n ) + n ) % n` を使用してください。 + +## 構文 + +```js +x % y +``` + +## 例 + +### 正の値の剰余 + +```js + 12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +``` + +### 負の値の剰余 + +```js +-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0 +``` + +### NaN の剰余 + +```js +NaN % 2 // NaN +``` + +### 無限大の剰余 + +```js +Infinity % 2 // NaN +Infinity % 0 // NaN +Infinity % Infinity // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) +- [Remainder operator vs. modulo operator](https://2ality.com/2019/08/remainder-vs-modulo.html) +- [Mod and Remainder are not the Same](https://rob.conery.io/2018/08/21/mod-and-remainder-are-not-the-same/) diff --git a/files/ja/web/javascript/reference/operators/remainder_assignment/index.html b/files/ja/web/javascript/reference/operators/remainder_assignment/index.html deleted file mode 100644 index c70fc20598..0000000000 --- a/files/ja/web/javascript/reference/operators/remainder_assignment/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 剰余代入 (%=) -slug: Web/JavaScript/Reference/Operators/Remainder_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>剰余代入演算子 (<code>%=</code>) は、変数を右辺のオペランドの値で除算し、剰余を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x %= y -<strong>Meaning:</strong> x = x % y</pre> - -<h2 id="例">例</h2> - -<h3 id="剰余代入の使用">剰余代入の使用</h3> - -<pre class="brush: js notranslate">// 以下の変数を想定 -// bar = 5 - -bar %= 2 // 1 -bar %= 'foo' // NaN -bar %= 0 // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.remainder_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/remainder_assignment/index.md b/files/ja/web/javascript/reference/operators/remainder_assignment/index.md new file mode 100644 index 0000000000..c518fd7989 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/remainder_assignment/index.md @@ -0,0 +1,49 @@ +--- +title: 剰余代入 (%=) +slug: Web/JavaScript/Reference/Operators/Remainder_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.remainder_assignment +translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment +--- +{{jsSidebar("Operators")}} + +剰余代入演算子 (`%=`) は、変数を右辺のオペランドの値で除算し、剰余を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}} + +## 構文 + +```js +x %= y // x = x % y +``` + +## 例 + +### 剰余代入の使用 + +```js +// 以下の変数を想定 +// bar = 5 + +bar %= 2 // 1 +bar %= 'foo' // NaN +bar %= 0 // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) diff --git a/files/ja/web/javascript/reference/operators/right_shift/index.html b/files/ja/web/javascript/reference/operators/right_shift/index.html deleted file mode 100644 index fa01116c74..0000000000 --- a/files/ja/web/javascript/reference/operators/right_shift/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 右シフト (>>) -slug: Web/JavaScript/Reference/Operators/Right_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Right_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>右シフト演算子 (<code>>></code>)</strong> (ゼロ埋め右シフト) は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> >> <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>この演算子は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。</p> - -<p>例えば、 <code>9 >>> 2</code> は 2 となります。</p> - -<pre class="brush: js notranslate">. 9 (10進数): 00000000000000000000000000001001 (2進数) - -------------------------------- -9 >>> 2 (10進数): 00000000000000000000000000000010 (2進数) = 2 (10進数) -</pre> - -<p>同様に、 <code>-9 >> 2</code> は符号が保存されるため、 <code>-3</code> になります。</p> - -<pre class="brush: js notranslate">. -9 (10進数): 11111111111111111111111111110111 (2進数) - -------------------------------- --9 >> 2 (10進数): 11111111111111111111111111111101 (2進数) = -3 (10進数) -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_right_shift" name="Using_right_shift">右シフトの使用</h3> - -<pre class="brush: js notranslate"> 9 >> 2; // 2 --9 >> 2; // -3 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.right_shift")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">JavaScript ガイドのビット毎演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">右シフト代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/right_shift/index.md b/files/ja/web/javascript/reference/operators/right_shift/index.md new file mode 100644 index 0000000000..ced5e93c2b --- /dev/null +++ b/files/ja/web/javascript/reference/operators/right_shift/index.md @@ -0,0 +1,65 @@ +--- +title: 右シフト (>>) +slug: Web/JavaScript/Reference/Operators/Right_shift +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.right_shift +translation_of: Web/JavaScript/Reference/Operators/Right_shift +--- +{{jsSidebar("Operators")}} + +**右シフト演算子 (`>>`)** は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。 + +{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}} + +## 構文 + +```js +a >> b +``` + +## 解説 + +この演算子は、1 つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。 + +例えば、 `9 >> 2` は 2 となります。 + +```js +. 9 (10 進数): 00000000000000000000000000001001 (2 進数) + -------------------------------- +9 >> 2 (10 進数): 00000000000000000000000000000010 (2 進数) = 2 (10 進数) +``` + +同様に、 `-9 >> 2` は符号が保存されるため、 `-3` になります。 + +```js +. -9 (10 進数): 11111111111111111111111111110111 (2 進数) + -------------------------------- +-9 >> 2 (10 進数): 11111111111111111111111111111101 (2 進数) = -3 (10 進数) +``` + +## 例 + +### 右シフトの使用 + +```js + 9 >> 2; // 2 +-9 >> 2; // -3 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [右シフト代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment) diff --git a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html deleted file mode 100644 index ba48bb625b..0000000000 --- a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 右シフト代入 (>>=) -slug: Web/JavaScript/Reference/Operators/Right_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>右シフト代入演算子 (<code>>>=</code>) は、指定された量のビットを右に移動し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x >>= y -<strong>Meaning:</strong> x = x >> y</pre> - -<h2 id="例">例</h2> - -<h3 id="右シフト代入の使用">右シフト代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; // (00000000000000000000000000000101) -a >>= 2; // 1 (00000000000000000000000000000001) - -let b = -5; // (-00000000000000000000000000000101) -b >>= 2; // -2 (-00000000000000000000000000000010)</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.right_shift_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Right_shift">右シフト演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md new file mode 100644 index 0000000000..fb30c2d912 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 右シフト代入 (>>=) +slug: Web/JavaScript/Reference/Operators/Right_shift_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.right_shift_assignment +translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment +--- +{{jsSidebar("Operators")}} + +右シフト代入演算子 (`>>=`) は、指定された数だけビットを右に移動し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}} + +## 構文 + +```js +x >>= y // x = x >> y +``` + +## 例 + +### 右シフト代入の使用 + +```js +let a = 5; // (00000000000000000000000000000101) +a >>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>= 2; // -2 (-00000000000000000000000000000010) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [右シフト演算子](/ja/docs/Web/JavaScript/Reference/Operators/Right_shift) diff --git a/files/ja/web/javascript/reference/operators/spread_syntax/index.html b/files/ja/web/javascript/reference/operators/spread_syntax/index.html deleted file mode 100644 index 4de5455ce3..0000000000 --- a/files/ja/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: スプレッド構文 -slug: Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Language feature - - Reference - - イテレーター - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>スプレッド構文</strong> (<code>...</code>) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>関数呼び出しの場合:</p> - -<pre class="syntaxbox notranslate"><var>myFunction</var>(...<var>iterableObj</var>); -</pre> - -<p>配列リテラルや文字列の場合:</p> - -<pre class="syntaxbox notranslate">[...<var>iterableObj</var>, '4', 'five', 6];</pre> - -<p>オブジェクトリテラルの場合 (ECMAScript 2018 の新機能)</p> - -<pre class="syntaxbox notranslate">let <var>objClone</var> = { ...<var>obj</var> };</pre> - -<h2 id="Rest_syntax_parameters" name="Rest_syntax_parameters">残余構文 (引数)</h2> - -<p>残余構文はスプレッド構文と外見がよく似ていますが、配列やオブジェクトの<em>分割代入</em>に使われます。</p> - -<p>こちらはスプレッド構文とは逆の働きといえます。スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して 1 つのオブジェクトに「濃縮」します。{{jsxref("Functions/rest_parameters", "残余引数", "", 1)}}を参照してください。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Spread_in_function_calls" name="Spread_in_function_calls">関数呼び出しでの展開</h3> - -<h4 id="Replace_apply" name="Replace_apply">apply() を置き換える</h4> - -<p>配列の要素を引数にして関数を呼び出すには {{jsxref("Function.prototype.apply()")}} を使うのが一般的です。</p> - -<pre class="brush: js notranslate">function myFunction(x, y, z) { } -let args = [0, 1, 2]; -myFunction.apply(null, args);</pre> - -<p>スプレッド構文を使うと、上のコードは次のように書くことができます。</p> - -<pre class="brush: js notranslate">function myFunction(x, y, z) { } -let args = [0, 1, 2]; -myFunction(...args);</pre> - -<p>スプレッド構文は、引数の何番目でも使えます。また、複数回使えます。</p> - -<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } -let args = [0, 1]; -myFunction(-1, ...args, 2, ...[3]);</pre> - -<h4 id="Apply_for_new" name="Apply_for_new">new 演算子の適用</h4> - -<p>{{jsxref("Operators/new", "new")}} によってコンストラクターを呼び出すとき、配列と <code>apply()</code> を<strong>直接</strong>使用することはできません (<code>apply()</code> は <code>[[Call]]</code> を実行するのであり <code>[[Construct]]</code> ではない)。ただし、配列はスプレッド構文のおかげで簡単に <code>new</code> を使用することができます。</p> - -<pre class="brush: js notranslate">let dateFields = [1970, 0, 1]; // 1 Jan 1970 -let d = new Date(...dateFields); -</pre> - -<p>スプレッド構文を使わずに同じ結果を得るには、専用の関数を使う<strong>間接的</strong>な手段を取らざるをえません。</p> - -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { - function partial () { - return constructor.apply(this, args); - }; - if (typeof constructor.prototype === "object") { - partial.prototype = Object.create(constructor.prototype); - } - return partial; -} - - -function myConstructor () { - console.log("arguments.length: " + arguments.length); - console.log(arguments); - this.prop1="val1"; - this.prop2="val2"; -}; - -let myArguments = ["hi", "how", "are", "you", "mr", null]; -let myConstructorWithArguments = applyAndNew(myConstructor, myArguments); - -console.log(new myConstructorWithArguments); -// (internal log of myConstructor): arguments.length: 6 -// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] -// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> - -<h3 id="Spread_in_array_literals" name="Spread_in_array_literals">配列リテラルでのスプレッド構文</h3> - -<h4 id="A_more_powerful_array_literal" name="A_more_powerful_array_literal">より強力な配列リテラル</h4> - -<p>スプレッド構文を使用しない場合、既存の配列を一部として使用して新しい配列を作成するには、配列リテラル構文は十分ではなく、{{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} などを組み合わせて使う高圧的なコードを使用しなければなりません。</p> - -<pre class="brush: js notranslate">let parts = ['shoulders', 'knees']; -let lyrics = ['head', ...parts, 'and', 'toes']; -// ["head", "shoulders", "knees", "and", "toes"] -</pre> - -<p>関数の引数と同様に、<code>...</code> は配列リテラルのどこでも、何回でも使えます。</p> - -<h4 id="Copy_an_array" name="Copy_an_array">配列を複製する</h4> - -<pre class="brush: js notranslate">let arr = [1, 2, 3]; -let arr2 = [...arr]; // arr.slice() のような動きです - -arr2.push(4); -// arr2 は [1, 2, 3, 4] になります -// arr は変更されません -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> コピーは 1 段階の深さで行われます。そのため、次の例のような多次元配列のようなオブジェクトをコピーする場合には適さないでしょう。({{jsxref("Object.assign()")}} についても同じことが言えます。)</p> - -<pre class="brush: js example-bad notranslate">let a = [[1], [2], [3]]; -let b = [...a]; - -b.shift().shift(); -// 1 - -// あらら、配列 'a' も影響を受けちゃった。 -a -// [[], [2], [3]] -</pre> -</div> - -<h4 id="A_better_way_to_concatenate_arrays" name="A_better_way_to_concatenate_arrays">配列を連結するより良い方法</h4> - -<p>ある配列を既存の配列の末尾に連結するには、{{jsxref("Array.prototype.concat()")}} がよく使われます。スプレッド構文を使用しないと、これは次のように行われます。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -// arr2 のすべての要素を arr1 に追加する -arr1 = arr1.concat(arr2);</pre> - -<p>スプレッド構文を使うと、次のように書けます。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -arr1 = [...arr1, ...arr2]; -// arr1 は [0, 1, 2, 3, 4, 5] となる -// 注: これ以外に const を使用すると、TypeError (invalid assignment) が発生します -</pre> - -<p>{{jsxref("Array.prototype.unshift()")}} は、値の配列を既存の配列の先頭に挿入するためによく使われます。スプレッド構文を使用しないと、これは次のように行われます。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -// arr2 のすべての要素を arr1 へ移植します -Array.prototype.unshift.apply(arr1, arr2) - -// arr1 is now [3, 4, 5, 0, 1, 2]</pre> - -<p>スプレッド構文を使うと、次のようになります。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -arr1 = [...arr2, ...arr1]; -// arr1 is now [3, 4, 5, 0, 1, 2] -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>unshift()</code> とは異なり、これは新しい <code>arr1</code> を生成しており、その場では元の <code>arr1</code> を変更しません</p> -</div> - -<h3 id="Spread_in_object_literals" name="Spread_in_object_literals">Object リテラルで使う</h3> - -<p><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (ES2018) では、{{jsxref("Operators/Object_initializer", "オブジェクトリテラル", 1)}}でのスプレッド構文が追加されています。スプレッド構文の対象となるオブジェクトの列挙可能なプロパティを、新しいオブジェクトにコピーします。</p> - -<p>浅いコピー (プロトタイプを除く) の作成や、マージしたオブジェクトの作成が {{jsxref("Object.assign()")}} を使うよりも短いコードで書けます。</p> - -<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 }; -let obj2 = { foo: 'baz', y: 13 }; - -let clonedObj = { ...obj1 }; -// Object { foo: "bar", x: 42 } - -let mergedObj = { ...obj1, ...obj2 }; -// Object { foo: "baz", x: 42, y: 13 }</pre> - -<p>{{jsxref("Object.assign()")}} は{{jsxref("Functions/set", "セッター")}}を起動しますが、スプレッド構文は起動しないことに注意してください。</p> - -<p>スプレッド構文は {{jsxref("Object.assign()")}} 関数を置き換えたり模倣することはできないことに注意してください。</p> - -<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 }; -let obj2 = { foo: 'baz', y: 13 }; -const merge = ( ...objects ) => ( { ...objects } ); - -let mergedObj1 = merge (obj1, obj2); -// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } - -let mergedObj2 = merge ({}, obj1, obj2); -// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> - -<p>上記の例では、スプレッド構文は期待通りに動作しません。残りの引数があるため、引数の<em>配列</em>がオブジェクトリテラルにとして展開されます。</p> - -<h3 id="Only_for_iterables" name="Only_for_iterables">反復可能オブジェクトにのみ利用可能</h3> - -<p>オブジェクト自体は反復可能ではありませんが、配列の中で使用したり、<code>map()</code>, <code>reduce()</code>, <code>assign()</code> などの反復関数と共に使用したりすることで反復可能になります。2 つのオブジェクトをスプレッド演算子で結合する場合は、結合時に別の反復処理関数を使用することを前提としています。</p> - -<p>スプレッド構文 (スプレッドプロパティの場合を除く) は、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">反復可能</a>オブジェクトにのみ適用できます。</p> - -<pre class="brush: js notranslate">let obj = {'key1': 'value1'}; -let array = [...obj]; // TypeError: obj is not iterable -</pre> - -<h3 id="Spread_with_many_values" name="Spread_with_many_values">大量の値を展開する場合</h3> - -<p>JavaScript エンジンには、引数の個数に上限があります。関数呼び出しでのスプレッド構文では、引数の個数がその上限を超えてしまう可能性に留意してください。詳細は {{jsxref("Function.prototype.apply", "apply()")}} のページを参照してください。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-initializer', 'Array initializer')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object initializer')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.spread")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Functions/rest_parameters", "残余引数", "", 1)}} (also ‘<code>...</code>’)</li> - <li>{{jsxref("Function.prototype.apply()")}} (also ‘<code>...</code>’)</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/spread_syntax/index.md b/files/ja/web/javascript/reference/operators/spread_syntax/index.md new file mode 100644 index 0000000000..c8a2a5f71a --- /dev/null +++ b/files/ja/web/javascript/reference/operators/spread_syntax/index.md @@ -0,0 +1,286 @@ +--- +title: スプレッド構文 +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - イテレーター + - JavaScript + - 言語機能 + - Reference +browser-compat: javascript.operators.spread +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +{{jsSidebar("Operators")}} + +**スプレッド構文** (`...`) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。 + +{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}} + +## 解説 + +スプレッド構文は、オブジェクトや配列のすべての要素を何らかのリストに入れる必要がある場合に使用することができます。 + +上記の例では、定義された関数は、引数として `x`、`y`、`z` を受け取り、これらの値の合計を返します。配列の値も定義されています。 + +この関数を呼び出す際には、スプレッド構文と配列名 — `...numbers` を使って、配列内のすべての値を渡します。 + +配列に 3 つ以上の数値が含まれていた場合 (`[1, 2, 3, 4]` など)、4 つすべてが渡されることを除けば、それでも問題なく動作しますが、次のように関数にさらに引数を追加しない限り、最初の 3 つだけが使用されます。 + +```js +function sum(x, y, z, n) { + return x + y + z + n; +} +``` + +上記の例はやや柔軟性に欠けます。スプレッド構文の真価は、オブジェクトや配列などに含まれる要素の数に関係なく、同じ値で動作することにあります。 + +一般的には、ローカルデータストアに新しいアイテムを追加したり、保存されているすべてのアイテムに新しく追加されたアイテムを加えて表示したりする場合に使用されます。この種の操作を非常にシンプルに表すと、次のようになります。 + +```js +let numberStore = [0, 1, 2]; +let newNumber = 12; +numberStore = [...numberStore, newNumber]; +``` + +上記の例では、最後の行を何度でも再実行して、配列の最後に 12 を追加し続けることができます。 + +## 構文 + +関数呼び出しの場合: + +```js +myFunction(...iterableObj); // iterableObj のすべての要素を関数 myFunction の引数として渡す +``` + +配列リテラルや文字列の場合: + +```js +[...iterableObj, '4', 'five', 6]; // iterableObj のすべての要素を挿入することで、2 つの配列を組み合わせる +``` + +オブジェクトリテラルの場合 (ECMAScript 2018 の新機能) + +```js +let objClone = { ...obj }; // オブジェクトのすべてのキーと値の組を渡す +``` + +## 残余構文 (引数) + +残余構文はスプレッド構文と外見がよく似ていますが、こちらはスプレッド構文とは逆の働きといえます。スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して 1 つのオブジェクトに「濃縮」します。{{jsxref("Functions/rest_parameters", "残余引数", "", 1)}}を参照してください。 + +## 例 + +### 関数呼び出しでの展開 + +#### apply() を置き換える + +配列の要素を引数にして関数を呼び出すには {{jsxref("Function.prototype.apply()")}} を使うのが一般的です。 + +```js +function myFunction(x, y, z) { } +let args = [0, 1, 2]; +myFunction.apply(null, args); +``` + +スプレッド構文を使うと、上のコードは次のように書くことができます。 + +```js +function myFunction(x, y, z) { } +let args = [0, 1, 2]; +myFunction(...args); +``` + +スプレッド構文は、引数リストのどの引数でも使用でき、またスプレッド構文は複数回使用することもできます。 + +```js +function myFunction(v, w, x, y, z) { } +let args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]); +``` + +#### new 演算子の適用 + +{{jsxref("Operators/new", "new")}} によってコンストラクターを呼び出すとき、配列と `apply()` を**直接**使用することはできません (`apply()` は `[[Call]]` を実行するのであり `[[Construct]]` ではない)。ただし、配列はスプレッド構文のおかげで簡単に `new` を使用することができます。 + +```js +let dateFields = [1970, 0, 1]; // 1 Jan 1970 +let d = new Date(...dateFields); +``` + +スプレッド構文を使わずに同じ結果を得るには、専用の関数を使う**間接的**な手段を取らざるをえません。 + +```js +function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +let myArguments = ["hi", "how", "are", "you", "mr", null]; +let myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"} +``` + +### 配列リテラルでのスプレッド構文 + +#### より強力な配列リテラル + +スプレッド構文を使用しない場合、既存の配列を一部として使用して新しい配列を作成するには、配列リテラル構文は十分ではなく、{{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} などを組み合わせて使う高圧的なコードを使用しなければなりません。 + +```js +let parts = ['shoulders', 'knees']; +let lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +``` + +関数の引数と同様に、`...` は配列リテラルのどこでも、何回でも使えます。 + +#### 配列を複製する + +```js +let arr = [1, 2, 3]; +let arr2 = [...arr]; // arr.slice() のような動きです + +arr2.push(4); +// arr2 は [1, 2, 3, 4] になります +// arr は変更されません +``` + +> **Note:** コピーは 1 段階の深さで行われます。そのため、次の例のような多次元配列のようなオブジェクトをコピーする場合には適さないでしょう。({{jsxref("Object.assign()")}} についても同じことが言えます。) +> +> ```js example-bad +> let a = [[1], [2], [3]]; +> let b = [...a]; +> +> b.shift().shift(); +> // 1 +> +> // しまった。 'a' も影響を受けてしまった。 +> a +> // [[], [2], [3]] +> ``` + +#### 配列を連結するより良い方法 + +ある配列を既存の配列の末尾に連結するには、{{jsxref("Array.prototype.concat()")}} がよく使われます。スプレッド構文を使用しないと、これは次のように行われます。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +// arr2 のすべての要素を arr1 に追加する +arr1 = arr1.concat(arr2); +``` + +スプレッド構文を使うと、次のように書けます。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +arr1 = [...arr1, ...arr2]; +// arr1 は [0, 1, 2, 3, 4, 5] となる +// 注: これ以外に const を使用すると、TypeError (invalid assignment) が発生します +``` + +{{jsxref("Array.prototype.unshift()")}} は、値の配列を既存の配列の先頭に挿入するためによく使われます。スプレッド構文を使用しないと、これは次のように行われます。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +// arr2 のすべての要素を arr1 へ移植します +Array.prototype.unshift.apply(arr1, arr2) + +// arr1 is now [3, 4, 5, 0, 1, 2]</pre> +``` + +スプレッド構文を使うと、次のようになります。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +arr1 = [...arr2, ...arr1]; +// arr1 is now [3, 4, 5, 0, 1, 2] +``` + +> **Note:** `unshift()` とは異なり、これは新しい `arr1` を生成しており、その場では元の `arr1` を変更しません。 + +### オブジェクトリテラルでのスプレッド構文 + +[Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) proposal (ES2018) では、{{jsxref("Operators/Object_initializer", "オブジェクトリテラル", 1)}}でのスプレッド構文が追加されています。スプレッド構文の対象となるオブジェクトの列挙可能なプロパティを、新しいオブジェクトにコピーします。 + +浅いコピー (プロトタイプを除く) の作成や、マージしたオブジェクトの作成が {{jsxref("Object.assign()")}} を使うよりも短いコードで書けます。 + +```js +let obj1 = { foo: 'bar', x: 42 }; +let obj2 = { foo: 'baz', y: 13 }; + +let clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +let mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 } +``` + +{{jsxref("Object.assign()")}} は{{jsxref("Functions/set", "セッター")}}を起動しますが、スプレッド構文は起動しないことに注意してください。 + +スプレッド構文は {{jsxref("Object.assign()")}} 関数を置き換えたり模倣することはできないことに注意してください。 + +```js +let obj1 = { foo: 'bar', x: 42 }; +let obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +let mergedObj1 = merge (obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +let mergedObj2 = merge ({}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } } +``` + +上記の例では、スプレッド構文は期待通りに動作しません。残りの引数があるため、引数の*配列*がオブジェクトリテラルにとして展開されます。 + +### 反復可能オブジェクトにのみ利用可能 + +オブジェクト自体は反復可能ではありませんが、配列の中で使用したり、`map()`, `reduce()`, `assign()` などの反復関数と共に使用したりすることで反復可能になります。2 つのオブジェクトをスプレッド演算子で結合する場合は、結合時に別の反復処理関数を使用することを前提としています。 + +スプレッド構文 (スプレッドプロパティの場合を除く) は、[反復可能](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator)オブジェクトにのみ適用できます。 + +```js +let obj = {'key1': 'value1'}; +let array = [...obj]; // TypeError: obj is not iterable +``` + +### 大量の値を展開する場合 + +JavaScript エンジンには、引数の個数に上限があります。関数呼び出しでのスプレッド構文では、引数の個数がその上限を超えてしまう可能性に留意してください。詳細は {{jsxref("Function.prototype.apply", "apply()")}} のページを参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Functions/rest_parameters", "残余引数", "", 1)}} (こちらも ‘`...`’) +- {{jsxref("Function.prototype.apply()")}} (こちらも ‘`...`’) diff --git a/files/ja/web/javascript/reference/operators/strict_equality/index.html b/files/ja/web/javascript/reference/operators/strict_equality/index.html deleted file mode 100644 index 436a6d0899..0000000000 --- a/files/ja/web/javascript/reference/operators/strict_equality/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: 厳密等価 (===) -slug: Web/JavaScript/Reference/Operators/Strict_equality -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Strict_equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>厳密等価演算子 (<code>===</code>) は、二つのオペランドが等しいことを検査し、論理値で結果を返します <a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>厳密等価演算子 (<code>===</code> および <code>!==</code>) は、<a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">厳密等価比較アルゴリズム</a>を使用して二つのオペランドを比較します。</p> - -<ul> - <li>オペランドの型が異なる場合は、 <code>false</code> を返します。</li> - <li>両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り <code>true</code> を返します。</li> - <li>両方のオペランドが <code>null</code> または両方のオペランドが <code>undefined</code> であった場合は <code>true</code> を返します。</li> - <li>どちらかのオペランドが <code>NaN</code> であった場合は <code>false</code> を返します。</li> - <li>それ以外の場合は、二つのオペランドの値を比較します。 - <ul> - <li>数値型は同じ値の数値である必要があります。 <code>+0</code> と <code>-0</code> は同じ値と見なされます。</li> - <li>文字列型は同じ文字が同じ順序で並んでいる必要があります。</li> - <li>論理型は両方が <code>true</code> であるか両方が <code>false</code> である必要があります。</li> - </ul> - </li> -</ul> - -<p>この演算子と<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a> (<code>==</code>) 演算子の最も顕著な違いは、オペランドの型が異なる場合、 <code>==</code> 演算子は比較前に同じ型に変換しようとすることです。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparing_operands_of_the_same_type" name="Comparing_operands_of_the_same_type">オペランドが同じ型である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("hello" === "hello"); // true -console.log("hello" === "hola"); // false - -console.log(3 === 3); // true -console.log(3 === 4); // false - -console.log(true === true); // true -console.log(true === false); // false - -console.log(null === null); // true</pre> - -<h3 id="Comparing_operands_of_different_types" name="Comparing_operands_of_different_types">オペランドが異なる方である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("3" === 3); // false - -console.log(true === 1); // false - -console.log(null === undefined); // false</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = { - name: "hello" -} - -const object2 = { - name: "hello" -} - -console.log(object1 === object2); // false -console.log(object1 === object1); // true</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.strict_inequality")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/strict_equality/index.md b/files/ja/web/javascript/reference/operators/strict_equality/index.md new file mode 100644 index 0000000000..81ed20e794 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/strict_equality/index.md @@ -0,0 +1,94 @@ +--- +title: 厳密等価 (===) +slug: Web/JavaScript/Reference/Operators/Strict_equality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.strict_equality +translation_of: Web/JavaScript/Reference/Operators/Strict_equality +--- +{{jsSidebar("Operators")}} + +厳密等価演算子 (`===`) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。 + +{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}} + +## 構文 + +```js +x === y +``` + +## 解説 + +厳密等価演算子 (`===` および `!==`) は、[厳密等価比較アルゴリズム](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6)を使用して 2 つのオペランドを比較します。 + +- オペランドの型が異なる場合は、 `false` を返します。 +- 両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り `true` を返します。 +- 両方のオペランドが `null` または両方のオペランドが `undefined` であった場合は `true` を返します。 +- どちらかのオペランドが `NaN` であった場合は `false` を返します。 +- それ以外の場合は、2 つのオペランドの値を比較します。 + + - 数値型は同じ値の数値である必要があります。 `+0` と `-0` は同じ値と見なされます。 + - 文字列型は同じ文字が同じ順序で並んでいる必要があります。 + - 論理型は両方が `true` であるか両方が `false` である必要があります。 + +この演算子と[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality) (`==`) 演算子の最も顕著な違いは、オペランドの型が異なる場合、 `==` 演算子は比較前に同じ型に変換しようとすることです。 + +## 例 + +### オペランドが同じ型である場合の比較 + +```js +console.log("hello" === "hello"); // true +console.log("hello" === "hola"); // false + +console.log(3 === 3); // true +console.log(3 === 4); // false + +console.log(true === true); // true +console.log(true === false); // false + +console.log(null === null); // true +``` + +### オペランドが異なる型である場合の比較 + +```js +console.log("3" === 3); // false + +console.log(true === 1); // false + +console.log(null === undefined); // false +``` + +### オブジェクトの比較 + +```js +const object1 = { + name: "hello" +} + +const object2 = { + name: "hello" +} + +console.log(object1 === object2); // false +console.log(object1 === object1); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Equality) +- [不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Inequality) +- [厳密不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/ja/web/javascript/reference/operators/strict_inequality/index.html b/files/ja/web/javascript/reference/operators/strict_inequality/index.html deleted file mode 100644 index c74ae24677..0000000000 --- a/files/ja/web/javascript/reference/operators/strict_inequality/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 厳密不等価 (!==) -slug: Web/JavaScript/Reference/Operators/Strict_inequality -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Strict_inequality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>厳密不等価演算子 (<code>!==</code>) は、二つのオペランドが等しくないことを検査し、論理値で結果を返します <a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価</a>演算子とは異なり、厳密不等価演算子はオペランドの型が異なる場合、常に異なると判断します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>厳密不等価演算子は、オペランドが等しくないことを検査します。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a>演算子の逆に当たるので、以下の2行は常に同じ結果を生み出します。</p> - -<pre class="brush: js notranslate">x !== y - -!(x === y)</pre> - -<p>比較アルゴリズムの詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a>演算子のページをご覧ください。</p> - -<p>厳密等価演算子とと同様に、厳密不等価演算子はオペランドの型が異なると、常に異なるものと見なします。</p> - -<pre class="brush: js notranslate">3 !== "3"; // true</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparing_operands_of_the_same_type" name="Comparing_operands_of_the_same_type">オペランドが同じ型である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("hello" !== "hello"); // false -console.log("hello" !== "hola"); // true - -console.log(3 !== 3); // false -console.log(3 !== 4); // true - -console.log(true !== true); // false -console.log(true !== false); // true - -console.log(null !== null); // false</pre> - -<h3 id="Comparing_operands_of_different_types" name="Comparing_operands_of_different_types">オペランドが異なる方である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("3" !== 3); // true - -console.log(true !== 1); // true - -console.log(null !== undefined); // true</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = { - name: "hello" -} - -const object2 = { - name: "hello" -} - -console.log(object1 !== object2); // true -console.log(object1 !== object1); // false</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.strict_inequality")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/strict_inequality/index.md b/files/ja/web/javascript/reference/operators/strict_inequality/index.md new file mode 100644 index 0000000000..0044e1161b --- /dev/null +++ b/files/ja/web/javascript/reference/operators/strict_inequality/index.md @@ -0,0 +1,96 @@ +--- +title: 厳密不等価 (!==) +slug: Web/JavaScript/Reference/Operators/Strict_inequality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.strict_inequality +translation_of: Web/JavaScript/Reference/Operators/Strict_inequality +--- +{{jsSidebar("Operators")}} + +厳密不等価演算子 (`!==`) は、2 つのオペランドが等しくないことを検査し、論理値で結果を返します。[不等価](/ja/docs/Web/JavaScript/Reference/Operators/Inequality)演算子とは異なり、厳密不等価演算子はオペランドの型が異なる場合、常に異なると判断します。 + +{{EmbedInteractiveExample("pages/js/expressions-strict-inequality.html")}} + +## 構文 + +```js +x !== y +``` + +## 解説 + +厳密不等価演算子は、オペランドが等しくないことを検査します。これは[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。 + +```js +x !== y + +!(x === y) +``` + +比較アルゴリズムの詳細については、[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子のページを参照して下さい。 + +厳密等価演算子と同様に、厳密不等価演算子はオペランドの型が異なると、常に異なるものと見なします。 + +```js +3 !== "3"; // true +``` + +## 例 + +### オペランドが同じ型である場合の比較 + +```js +console.log("hello" !== "hello"); // false +console.log("hello" !== "hola"); // true + +console.log(3 !== 3); // false +console.log(3 !== 4); // true + +console.log(true !== true); // false +console.log(true !== false); // true + +console.log(null !== null); // false +``` + +### オペランドが異なる型である場合の比較 + +```js +console.log("3" !== 3); // true + +console.log(true !== 1); // true + +console.log(null !== undefined); // true +``` + +### オブジェクトの比較 + +```js +const object1 = { + name: "hello" +} + +const object2 = { + name: "hello" +} + +console.log(object1 !== object2); // true +console.log(object1 !== object1); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Equality) +- [不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Inequality) +- [厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) diff --git a/files/ja/web/javascript/reference/operators/subtraction/index.html b/files/ja/web/javascript/reference/operators/subtraction/index.html deleted file mode 100644 index 1a02506128..0000000000 --- a/files/ja/web/javascript/reference/operators/subtraction/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 減算 (-) -slug: Web/JavaScript/Reference/Operators/Subtraction -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Subtraction ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>減算演算子 (<code>-</code>) は2つのオペランドを減算し、それらの差を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> - <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="数値による減算">数値による減算</h3> - -<pre class="brush: js notranslate">5 - 3 // 2 -3 - 5 // -2</pre> - -<h3 id="非数による減算">非数による減算</h3> - -<pre class="brush: js notranslate">'foo' - 3 // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.subtraction")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/subtraction/index.md b/files/ja/web/javascript/reference/operators/subtraction/index.md new file mode 100644 index 0000000000..5e074c174c --- /dev/null +++ b/files/ja/web/javascript/reference/operators/subtraction/index.md @@ -0,0 +1,57 @@ +--- +title: 減算 (-) +slug: Web/JavaScript/Reference/Operators/Subtraction +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.subtraction +translation_of: Web/JavaScript/Reference/Operators/Subtraction +--- +{{jsSidebar("Operators")}} + +減算演算子 (`-`) は 2 つのオペランドの間で減算し、それらの差を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}} + +## 構文 + +```js +x - y +``` + +## 例 + +### 数値の減算 + +```js +5 - 3 // 2 +3 - 5 // -2 +``` + +### 非数の減算 + +```js +'foo' - 3 // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html deleted file mode 100644 index f44dbc8232..0000000000 --- a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 減算代入 (-=) -slug: Web/JavaScript/Reference/Operators/Subtraction_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>減算代入演算子 (<code>-=</code>) は、変数から右辺のオペランドの値を減算し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x -= y -<strong>Meaning:</strong> x = x - y</pre> - -<h2 id="例">例</h2> - -<h3 id="減算代入の使用">減算代入の使用</h3> - -<pre class="brush: js notranslate">// 次の変数を想定 -// bar = 5 - -bar -= 2 // 3 -bar -= 'foo' // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.subtraction_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md new file mode 100644 index 0000000000..5a0f431797 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 減算代入 (-=) +slug: Web/JavaScript/Reference/Operators/Subtraction_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.subtraction_assignment +translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment +--- +{{jsSidebar("Operators")}} + +減算代入演算子 (`-=`) は、変数から右辺のオペランドの値を減算し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}} + +## 構文 + +```js +x -= y // x = x - y +``` + +## 例 + +### 減算代入の使用 + +```js +// 次の変数を想定 +// bar = 5 + +bar -= 2 // 3 +bar -= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) diff --git a/files/ja/web/javascript/reference/operators/this/index.html b/files/ja/web/javascript/reference/operators/this/index.html deleted file mode 100644 index 1d466424d4..0000000000 --- a/files/ja/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,486 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Reference/Operators/this -tags: - - JavaScript - - Language feature - - Operator - - Primary Expressions - - Reference - - this - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/this ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>関数の <code>this</code> キーワード</strong> は、JavaScript ではほかの言語と少々異なる動作をします。また、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a>と非厳格モードでも違いがあります。</p> - -<p>ほとんどの場合、<code>this</code> の値はどのように関数が呼ばれたかによって決定されます（実行時結合）。これは実行時に割り当てできず、関数が呼び出されるたびに異なる可能性があります。ES5 では、関数が{{jsxref('Operators/this', "どのように呼ばれたかに関係なく <code>this</code> の値を設定する", 'The_bind_method', 1)}} {{jsxref("Function.prototype.bind()", "bind()")}} メソッドが導入され、ES2015 では、独自の <code>this</code> バインディングを行わない<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>が導入されました（これは包含するレキシカルコンテキストの <code>this</code> の値を保持します）。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">this</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>非厳格モードでは、実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です。厳格モードではどのような値でも取り得ます。</p> - -<h2 id="解説">解説</h2> - -<h3 id="Global_context" name="Global_context">グローバルコンテキスト</h3> - -<p>グローバル実行コンテキスト (すべての関数の外側) では、厳格モードであるかどうかにかかわらず、<code>this</code> はグローバルオブジェクトを参照します。</p> - -<pre class="brush:js notranslate">// ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。 -console.log(this === window); // true - -a = 37; -console.log(window.a); // 37 - -this.b = "MDN"; -console.log(window.b) // "MDN" -console.log(b) // "MDN" -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。</p> -</div> - -<h3 id="Function_context" name="Function_context">関数コンテキスト</h3> - -<p>関数内での <code>this</code> の値は、関数の呼び出され方によって異なります。</p> - -<p>下記のコードは<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a>ではないため、また呼び出し時に <code>this</code> の値が設定されないため、<code>this</code> は既定でグローバルオブジェクトとなり、これはブラウザーでは {{domxref("Window", "window")}} です。</p> - -<pre class="brush:js notranslate">function f1() { - return this; -} - -// ブラウザー上で -f1() === window; // true - -// Node 上で -f1() === global; // true</pre> - -<p>ただし厳格モードでは、実行コンテキストに入るときに <code>this</code> 値が設定されていないと、以下の例のように <code>undefined</code> のままになります。</p> - -<pre class="brush:js notranslate">function f2() { - 'use strict'; // 厳格モードにする - return this; -} - -f2() === undefined; // true -</pre> - -<div class="note">二番目の例において、<code>this</code> が {{jsxref("undefined")}} となるのは <code>f2</code> が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば <code>window.f2()</code>) ではないためです。この機能は初めて<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a>への対応が始まったとき、一部のブラウザーが実装していませんでした。その結果、これらのブラウザーは不正確に <code>window</code> オブジェクトを返していました。</div> - -<p>関数の呼び出し時に <code>this</code> の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。</p> - -<h3 id="クラスコンテキスト">クラスコンテキスト</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス</a>は関数の機能であるため、クラスと関数の <code>this</code> の動作は似ています。ただし、いくつかの違いと注意点があります。</p> - -<p>クラスのコンストラクター内では、<code>this</code> は通常のオブジェクトです。クラス内のすべての非静的メソッドは <code>this</code> のプロトタイプに追加されます。</p> - -<pre class="brush: js notranslate">class Example { - constructor() { - const proto = Object.getPrototypeOf(this); - console.log(Object.getOwnPropertyNames(proto)); - } - first(){} - second(){} - static third(){} -} - -new Example(); // ['constructor', 'first', 'second'] -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> 静的メソッドは <code>this</code> のプロパティではありません。それらはクラス自体のプロパティです。</p> -</div> - -<h3 id="派生クラス">派生クラス</h3> - -<p>基本クラスのコンストラクターとは異なり、派生コンストラクターには初期の <code>this</code> バインディングがありません。{{jsxref("Operators/super", "super()")}} を呼び出すとコンストラクター内に <code>this</code> バインディングが作成され、基本的に以下のコードを評価する効果があります。ここで、Base は継承されたクラスです。</p> - -<pre class="brush: js notranslate">this = new Base();</pre> - -<div class="blockIndicator warning"> -<p><strong>警告:</strong> super() を呼び出す前に <code>this</code> を参照するとエラーが発生します。</p> -</div> - -<p>派生クラスは、<code>オブジェクト</code>を return するか、コンストラクターを持たない場合を除き、<code>super()</code> を呼び出す前に return することはできません。</p> - -<pre class="brush: js notranslate">class Base {} -class Good extends Base {} -class AlsoGood extends Base { - constructor() { - return {a: 5}; - } -} -class Bad extends Base { - constructor() {} -} - -new Good(); -new AlsoGood(); -new Bad(); // 参照エラー</pre> - -<h2 id="例">例</h2> - -<h3 id="関数コンテキスト内の_this">関数コンテキスト内の this</h3> - -<pre class="brush:js notranslate">// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます -var obj = {a: 'Custom'}; - -// このプロパティはグローバルオブジェクトに設定されます -var a = 'Global'; - -function whatsThis() { - return this.a; // this の値は関数の呼び出し方によって変わります -function is called -} - -whatsThis(); // 関数内の this として 'Global' は設定されていないので、デフォルトではグローバル/ウィンドウオブジェクトになります。 -whatsThis.call(obj); // 関数内の this として 'Custom' が obj に設定されています -whatsThis.apply(obj); // 関数内の this として 'Custom' が obj に設定されています -</pre> - -<h3 id="this_とオブジェクト変換">this とオブジェクト変換</h3> - -<pre class="brush:js notranslate">function add(c, d) { - return this.a + this.b + c + d; -} - -var o = {a: 1, b: 3}; - -// 最初の引数は 'this' として使用する -// オブジェクトで、続く引数は関数呼び出しの -// 引数として使用されます。 -add.call(o, 5, 7); // 16 - -// 最初の引数は 'this' として使用する -// オブジェクトで、二番目の引数は関数呼び出しの -// 引数として使用される配列です。 -add.apply(o, [10, 20]); // 34 -</pre> - -<p>なお、非厳格モードにおいて、<code>call</code> と <code>apply</code> は、<code>this</code> として渡された値がオブジェクトではない場合、内部の <code>ToObject</code> 操作を利用してオブジェクトに変換しようします。<code>7</code> や <code>'foo'</code> のようなプリミティブが渡された場合、関連するコンストラクターを使用してオブジェクトに変換されます。たとえば、プリミティブの数値である <code>7</code> は <code>new Number(7)</code> であるかのようにオブジェクトに変換され、文字列の <code>'foo'</code> は <code>new String('foo')</code> であるかのようにオブジェクトに変換されます。</p> - -<pre class="brush:js notranslate">function bar() { - console.log(Object.prototype.toString.call(this)); -} - -bar.call(7); // [object Number] -bar.call('foo'); // [object String] -bar.call(undefined); // [object global] -</pre> - -<h3 id="The_bind_method" name="The_bind_method"><code>bind</code> メソッド</h3> - -<p>ECMAScript 5 で {{jsxref("Function.prototype.bind")}} が導入されました。<code>f.bind(someObject)</code> の呼び出しは、<code>f</code> と同じ内部とスコープを持つ新しい関数を生成し、ここが <code>this</code> が発生するオリジナルの関数ですが、関数がどのように使われるかにかかわらず、新しい関数では <code>bind</code> の最初の引数に永続的にバインドされます。</p> - -<pre class="brush:js notranslate">function f() { - return this.a; -} - -var g = f.bind({a: 'azerty'}); -console.log(g()); // azerty - -var h = g.bind({a: 'yoo'}); // bind は一度しか機能しない -console.log(h()); // azerty - -var o = {a: 37, f: f, g: g, h: h}; -console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty -</pre> - -<h3 id="Arrow_functions" name="Arrow_functions">アロー関数</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>では、<code>this</code> はそれを囲むレキシカルコンテキストの <code>this</code> の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます。</p> - -<pre class="brush: js notranslate">var globalObject = this; -var foo = (() => this); -console.log(foo() === globalObject); // true</pre> - -<div class="note"> -<p>メモ: アロー関数の呼び出し時に <code>this</code> 引数が <code>call</code>, <code>bind</code>, <code>apply</code> に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (<code>thisArg</code>) は <code>null</code> を設定してください</p> -</div> - -<pre class="brush: js notranslate">// オブジェクトのメソッドとして呼び出す。 -var obj = {func: foo}; -console.log(obj.func() === globalObject); // true - -// call を使用して this の設定を試みる -console.log(foo.call(obj) === globalObject); // true - -// bind を使用して this の設定を試みる -foo = foo.bind(obj); -console.log(foo() === globalObject); // true</pre> - -<p>何があっても、<code>foo</code> の <code>this</code> は生成されたときの値が設定されています (上記の例ではグローバルオブジェクトです)。同様のことが、ほかの関数内で生成したアロー関数にも適用されます。それらの <code>this</code> には、それを包含するレキシカルコンテキストのものになります。</p> - -<pre class="brush:js notranslate">// this を返す関数を返す bar メソッドを持つ -// obj を生成します。返された関数はアロー関数 -// として生成されているため、その this は -// それを包含する関数の this に永続的に拘束 -// されます。bar の値は呼び出し時に設定でき、 -// 返値の関数の値に順に設定します。 -var obj = { - bar: function() { - var x = (() => this); - return x; - } -}; - -// bar を obj のメソッドとして呼び出す際、その this を obj に設定します -// 返値の関数への参照を fn に割り当てます。 -var fn = obj.bar(); - -// 厳格モードでは、this を設定せずに fn を呼び出すと -// 通常はグローバルオブジェクトか undefined が既定値となります。 -console.log(fn() === obj); // true - -// しかし obj のメソッドを call することなく参照するのは要注意です。 -var fn2 = obj.bar; -// するとアロー関数の呼び出しで this は bar の -// this に従うため window と同じになります。 -console.log(fn2()() == window); // true -</pre> - -<p>上記では、関数 (この無名関数を A と呼びます) に <code>obj.bar</code> が返すアロー関数として生成されたほかの関数 (この無名関数を B と呼びます) を割り当てています。結果として、呼び出されたときに関数 B の <code>this</code> は、永続的に <code>obj.bar</code> (関数 A) の <code>this</code> が設定されます。返された関数 (関数 B) が呼びされるとき、その <code>this</code> は常に最初に設定されたものになります。上記のコード例では、関数 B の <code>this</code> は <code>obj</code> である関数 A の <code>this</code> が設定されているため、通常はその <code>this</code> に <code>undefined</code> かグローバルオブジェクト (または、以前の例のグローバルコンテキストのように、いずれかのメソッド) が設定されますが、<code>obj</code> の設定が残ります。</p> - -<h3 id="As_an_object_method" name="As_an_object_method">オブジェクトのメソッドとして</h3> - -<p>関数がオブジェクトのメソッドとして呼び出されるとき、その <code>this</code> にはメソッドが呼び出されたオブジェクトが設定されます。</p> - -<p>次の例では、<code>o.f()</code> が起動したとき、関数内の <code>this</code> には、<code>o</code> オブジェクトが関連付けられます。</p> - -<pre class="brush:js notranslate">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // 37 -</pre> - -<p>この振る舞いは、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、<code>o</code> の定義中に <code>f</code> メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から <code>o.f</code> に付け足すことができます。その結果は同じ振る舞いになります。</p> - -<pre class="brush:js notranslate">var o = {prop: 37}; - -function independent() { - return this.prop; -} - -o.f = independent; - -console.log(o.f()); // 37 -</pre> - -<p>これは、関数が <code>o</code> の <code>f</code> のメンバーとして呼び出されることだけが重要なことを示しています。</p> - -<p>同様に、<code>this</code> の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト <code>o.b</code> の <code>g</code> メソッドとして呼び出しています。実行時に、関数内の <code>this</code> は <code>o.b</code> を参照します。オブジェクト自体が <code>o</code> のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。</p> - -<pre class="brush:js notranslate">o.b = {g: independent, prop: 42}; -console.log(o.b.g()); // 42 -</pre> - -<h4 id="this_on_the_objects_prototype_chain" name="this_on_the_objects_prototype_chain">オブジェクトのプロトタイプチェーン上の <code>this</code></h4> - -<p>同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、<code>this</code> はメソッドを呼び出したオブジェクトを参照します。</p> - -<pre class="brush:js notranslate">var o = {f: function() { return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>この例では、変数 <code>p</code> に割り当てられたオブジェクト自身は <code>f</code> プロパティを持たず、プロトタイプから継承しています。しかし、<code>f</code> に対する検索が、最終的に <code>o</code> でその名前を持つメンバーを見つけることは重要ではありません。検索は <code>p.f</code> への参照から開始されるため、関数内の <code>this</code> は <code>p</code> として参照されるオブジェクトの値を取ります。<code>f</code> は <code>p</code> のメソッドとして呼ばれたため、その <code>this</code> は <code>p</code> を参照します。これは、JavaScript のプロトタイプ継承の興味深い機能です。</p> - -<h4 id="this_with_a_getter_or_setter" name="this_with_a_getter_or_setter">ゲッター/セッターと <code>this</code></h4> - -<p>再度、同じ概念が、ゲッターやセッターから呼ばれる関数にも当てはまります。ゲッターやセッターとして使用される関数は、このプロパティを設定するか、または得られている元のオブジェクトに関連付けられている <code>this</code> を持ちます。</p> - -<pre class="brush:js notranslate">function sum() { - return this.a + this.b + this.c; -} - -var o = { - a: 1, - b: 2, - c: 3, - get average() { - return (this.a + this.b + this.c) / 3; - } -}; - -Object.defineProperty(o, 'sum', { - get: sum, enumerable: true, configurable: true}); - -console.log(o.average, o.sum); // 2, 6 -</pre> - -<h3 id="As_a_constructor" name="As_a_constructor">コンストラクターとして</h3> - -<p>関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その <code>this</code> は生成された新しいオブジェクトに関連付けられます。</p> - -<div class="note"> -<p>コンストラクターの既定では、<code>this</code> で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、<code>this</code> オブジェクトが返されます)。</p> -</div> - -<pre class="brush:js notranslate">/* - * Constructors work like this: - * - * function MyConstructor(){ - * // Actual function body code goes here. - * // Create properties on |this| as - * // desired by assigning to them. E.g., - * this.fum = "nom"; - * // et cetera... - * - * // If the function has a return statement that - * // returns an object, that object will be the - * // result of the |new| expression. Otherwise, - * // the result of the expression is the object - * // currently bound to |this| - * // (i.e., the common case most usually seen). - * } - */ - -function C() { - this.a = 37; -} - -var o = new C(); -console.log(o.a); // 37 - - -function C2() { - this.a = 37; - return {a: 38}; -} - -o = new C2(); -console.log(o.a); // 38 -</pre> - -<p>最後の例 (<code>C2</code>) では、構築中にオブジェクトを返しているので、<code>this</code> が結び付けられている新しいオブジェクトは単に破棄されています。(これは根本的に "<code>this.a = 37;</code>" ステートメントを死んだコードにしてしまっています。これは実行されるので、正確には死んだコードではありませんが、外部への影響がありません。)</p> - -<h3 id="As_a_DOM_event_handler" name="As_a_DOM_event_handler">DOM イベントハンドラーとして</h3> - -<p>関数がイベントハンドラとして使用された場合、その <code>this</code> はリスナーが配置されている要素に設定されます ({{domxref("EventTarget/addEventListener", "addEventListener()")}} 以外のメソッドで動的に追加されたリスナーについては、この規約に従わないブラウザー－もあります)。</p> - -<pre class="brush:js notranslate">// リスナーとして呼び出された場合は、関連づけられた要素を青にする -function bluify(e) { - // 常に true - console.log(this === e.currentTarget); - // currentTarget と target が同じオブジェクトであれば true - console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; -} - -// 文書内の各要素の一覧を取得 -var elements = document.getElementsByTagName('*'); - -// クリックリスナーとして bluify を追加することで、 -// 要素をクリックすると青くなるようになる -for(var i = 0 ; i < elements.length; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> - -<h3 id="In_an_inline_event_handler" name="In_an_inline_event_handler">インラインイベントハンドラー内</h3> - -<p>コードがインラインの <a href="/ja/docs/Web/Guide/Events/Event_handlers">on-イベントハンドラー</a>から呼び出されたとき、その <code>this</code> にはリスナーが配置されている DOM 要素が設定されます。</p> - -<pre class="brush:js notranslate"><button onclick="alert(this.tagName.toLowerCase());"> - Show this -</button> -</pre> - -<p>上記のアラートは <code>button</code> と表示します。ただし、外側のコードがこのように設定された <code>this</code> を持っているだけだということに注意してください。</p> - -<pre class="brush:js notranslate"><button onclick="alert((function() { return this; })());"> - Show inner this -</button> -</pre> - -<p>この場合、内側の関数の <code>this</code> は設定されていないので、グローバルの window オブジェクトを返します (つまり、<code>this</code> が呼び出しによって設定されていないので、非厳格モードの既定オブジェクトです)。</p> - -<h3 id="クラスの中の_this">クラスの中の this</h3> - -<div class="blockIndicator note"></div> - -<p>通常の関数と同様に、メソッド内の <code>this</code> の値は、どのように呼び出されるかによって異なります。クラス内の <code>this</code> が常にクラスのインスタンスを参照するように、この動作をオーバーライドしておくと便利な場合もあります。これを実現するには、コンストラクターでクラスのメソッドをバインドします。</p> - -<pre class="brush: js notranslate">class Car { - constructor() { - // 違いを示すために sayHi ではなく sayBye をバインドする - this.sayBye = this.sayBye.bind(this); - } - sayHi() { - console.log(`Hello from ${this.name}`); - } - sayBye() { - console.log(`Bye from ${this.name}`); - } - get name() { - return 'Ferrari'; - } -} - -class Bird { - get name() { - return 'Tweety'; - } -} - -const car = new Car(); -const bird = new Bird(); - -// メソッドの 'this' の値は呼び出し元に依存します -car.sayHi(); // Hello from Ferrari -bird.sayHi = car.sayHi; -bird.sayHi(); // Hello from Tweety - -// バインドされたメソッドの場合、'this' は呼び出し元に依存しません -bird.sayBye = car.sayBye; -bird.sayBye(); // Bye from Ferrari</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> クラスは常に厳格モードのコードです。これを定義せずに <code>this</code> でメソッドを呼び出すとエラーが発生します。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.this")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a></li> - <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Gentle explanation of 'this' keyword in JavaScript</a></li> - <li>Getting the global context: {{jsxref("globalThis")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/this/index.md b/files/ja/web/javascript/reference/operators/this/index.md new file mode 100644 index 0000000000..3595fcaaee --- /dev/null +++ b/files/ja/web/javascript/reference/operators/this/index.md @@ -0,0 +1,487 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - 言語機能 + - 演算子 + - Primary Expressions + - リファレンス + - this +browser-compat: javascript.operators.this +translation_of: Web/JavaScript/Reference/Operators/this +--- +{{jsSidebar("Operators")}} + +**関数の `this` キーワード** は、JavaScript ではほかの言語と少々異なる動作をします。また、[strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)であるかどうかでも違いがあります。 + +ほとんどの場合、`this` の値はどのように関数が呼ばれたかによって決定されます (実行時結合)。これは実行時に代入によって設定することはできず、関数が呼び出されるたびに異なる可能性があります。ES5 では {{jsxref("Function.prototype.bind()", "bind()")}} メソッドが導入され、関数が{{jsxref('Operators/this', "どのように呼ばれたかに関係なく `this` の値を設定する", 'The_bind_method', 1)}}することができるようになり、ES2015 では、自身では `this` の結び付けを行わない[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)が導入されました (これは包含する構文上のコンテキストの `this` の値を保持します)。 + +{{EmbedInteractiveExample("pages/js/expressions-this.html")}} + +## 構文 + +``` +this +``` + +### 値 + +strict モードでない場合は、実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です。 strict モードではどのような値でも取り得ます。 + +## 解説 + +### グローバルコンテキスト + +グローバル実行コンテキスト (すべての関数の外側) では、strict モードであるかどうかにかかわらず、`this` はグローバルオブジェクトを参照します。 + +``` js +// ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。 +console.log(this === window); // true + +a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b) // "MDN" +console.log(b) // "MDN" +``` + +> **Note:** コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。 + +### 関数コンテキスト + +関数内での `this` の値は、関数の呼び出し方によって異なります。 + +下記のコードは [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)ではないため、また呼び出し時に `this` の値が設定されないため、`this` は既定でグローバルオブジェクトとなり、これはブラウザーでは {{domxref("Window", "window")}} です。 + +```js +function f1() { + return this; +} + +// ブラウザー上で +f1() === window; // true + +// Node 上で +f1() === global; // true +``` + +ただし strict モードでは、実行コンテキストに入るときに `this` 値が設定されていないと、以下の例のように `undefined` のままになります。 + +```js +function f2() { + 'use strict'; // strict モードにする + return this; +} + +f2() === undefined; // true +``` + +> **Note:** 二番目の例において、`this` が {{jsxref("undefined")}} となるのは `f2` が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば `window.f2()`) ではないためです。この機能は初めて [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)への対応が始まったとき、一部のブラウザーが実装していませんでした。結果的に、これらのブラウザーは不正確に `window` オブジェクトを返していました。 + +関数の呼び出し時に `this` の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。 + +### クラスコンテキスト + +[クラス](/ja/docs/Web/JavaScript/Reference/Classes)は関数の機能であるため、クラスと関数の `this` の動作は似ています。ただし、いくつかの違いと注意点があります。 + +クラスのコンストラクター内では、`this` は通常のオブジェクトです。クラス内のすべて静的でないメソッドは `this` のプロトタイプに追加されます。 + +```js +class Example { + constructor() { + const proto = Object.getPrototypeOf(this); + console.log(Object.getOwnPropertyNames(proto)); + } + first(){} + second(){} + static third(){} +} + +new Example(); // ['constructor', 'first', 'second'] +``` + +> **Note:** 静的メソッドは `this` のプロパティではありません。クラス自身のプロパティです。 + +### 派生クラス + +基本クラスのコンストラクターとは異なり、派生コンストラクターには初期の `this` の結び付けがありません。{{jsxref("Operators/super", "super()")}} を呼び出すとコンストラクター内に `this` の結び付けが作成され、基本的に以下のコードを評価する効果があります。ここで、Base は継承されたクラスです。 + +```js +this = new Base(); +``` + +> **Warning:** `this` を `super()` の呼び出しの前に参照すると、エラーが発生します。 + +派生クラスはでは `super()` を呼び出す前に return をしてはいけません。ただし、 `Object` を返す場合やコンストラクターがない場合を除きます。 + +```js +class Base {} +class Good extends Base {} +class AlsoGood extends Base { + constructor() { + return {a: 5}; + } +} +class Bad extends Base { + constructor() {} +} + +new Good(); +new AlsoGood(); +new Bad(); // 参照エラー +``` + +## 例 + +### 関数コンテキスト内の this + +```js +// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます。 +var obj = {a: 'Custom'}; + +// 変数を定義すると、その変数がグローバルの window のプロパティとして割り当てられます。 +var a = 'Global'; + +function whatsThis() { + return this.a; // this の値は関数の呼び出し方によって変わります +} + +whatsThis(); // 'Global' はこの関数では関 this として設定されていないので、既定でグローバルの window オブジェクトになります +whatsThis.call(obj); // 'Custom' が関数内の this として obj に設定されています +whatsThis.apply(obj); // 'Custom' が関数内の this として obj に設定されています +``` + +### this とオブジェクト変換 + +```js +function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// 最初の引数は 'this' として使用する +// オブジェクトで、続く引数は関数呼び出しの +// 引数として使用されます。 +add.call(o, 5, 7); // 16 + +// 最初の引数は 'this' として使用する +// オブジェクトで、二番目の引数は関数呼び出しの +// 引数として使用される配列です。 +add.apply(o, [10, 20]); // 34 +``` + +なお、 strict モードでない場合、`call` と `apply` は、`this` として渡された値がオブジェクトではないと、内部の `ToObject` 操作を利用してオブジェクトに変換しようします。`7` や `'foo'` のようなプリミティブが渡された場合、関連するコンストラクターを使用してオブジェクトに変換されます。たとえば、プリミティブの数値である `7` は `new Number(7)` であるかのようにオブジェクトに変換され、文字列の `'foo'` は `new String('foo')` であるかのようにオブジェクトに変換されます。 + +```js +function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String] +bar.call(undefined); // [object global] +``` + +### `bind` メソッド + +ECMAScript 5 で {{jsxref("Function.prototype.bind()")}} が導入されました。`f.bind(someObject)` の呼び出しは、`f` と同じ内部とスコープを持つ新しい関数を生成し、ここが `this` が発生するオリジナルの関数ですが、関数がどのように使われるかにかかわらず、新しい関数では `bind` の最初の引数に永続的にバインドされます。 + +```js +function f() { + return this.a; +} + +var g = f.bind({a: 'azerty'}); +console.log(g()); // azerty + +var h = g.bind({a: 'yoo'}); // bind は一度しか機能しない +console.log(h()); // azerty + +var o = {a: 37, f: f, g: g, h: h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty +``` + +### アロー関数 + +[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)では、`this` はそれを囲む構文上のコンテキストの `this` の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます。 + +```js +var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true +``` + +> **Note:** アロー関数の呼び出し時に `this` 引数が `call`, `bind`, `apply` に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (`thisArg`) は `null` を設定してください。 + + +```js +// オブジェクトのメソッドとして呼び出す。 +var obj = {func: foo}; +console.log(obj.func() === globalObject); // true + +// call を使用して this の設定を試みる +console.log(foo.call(obj) === globalObject); // true + +// bind を使用して this の設定を試みる +foo = foo.bind(obj); +console.log(foo() === globalObject); // true +``` + +何があっても、`foo` の `this` は生成されたときの値が設定されています (上記の例ではグローバルオブジェクトです)。同様のことが、ほかの関数内で生成したアロー関数にも適用されます。それらの `this` には、それを包含する構文上のコンテキストのものになります。 + +```js +// this を返す関数を返す bar メソッドを持つ +// obj を生成します。返された関数はアロー関数 +// として生成されているため、その this は +// それを包含する関数の this に永続的に拘束 +// されます。bar の値は呼び出し時に設定でき、 +// 返値の関数の値に順に設定します。 +var obj = { + bar: function() { + var x = (() => this); + return x; + } +}; + +// bar を obj のメソッドとして呼び出す際、その this を obj に設定します +// 返値の関数への参照を fn に割り当てます。 +var fn = obj.bar(); + +// strict モードでは、this を設定せずに fn を呼び出すと +// 通常はグローバルオブジェクトか undefined が既定値となります。 +console.log(fn() === obj); // true + +// しかし obj のメソッドを call することなく参照するのは要注意です。 +var fn2 = obj.bar; +// するとアロー関数の呼び出しで this は bar の +// this に従うため window と同じになります。 +console.log(fn2()() == window); // true +``` + +上記では、関数 (この無名関数を A と呼びます) に `obj.bar` が返すアロー関数として生成されたほかの関数 (この無名関数を B と呼びます) を割り当てています。結果として、呼び出されたときに関数 B の `this` は、永続的に `obj.bar` (関数 A) の `this` が設定されます。返された関数 (関数 B) が呼びされるとき、その `this` は常に最初に設定されたものになります。上記のコード例では、関数 B の `this` は `obj` である関数 A の `this` が設定されているため、通常はその `this` に `undefined` かグローバルオブジェクト (または、以前の例のグローバルコンテキストのように、いずれかのメソッド) が設定されますが、`obj` の設定が残ります。 + +### オブジェクトのメソッドとして + +関数がオブジェクトのメソッドとして呼び出されるとき、その `this` にはメソッドが呼び出されたオブジェクトが設定されます。 + +次の例では、`o.f()` が起動したとき、関数内の `this` には、`o` オブジェクトが関連付けられます。 + +```js +var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +``` + +この動作は、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、`o` の定義中に `f` メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から `o.f` に付け足すことができます。その結果は同じ動作になります。 + +```js +var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // 37 +``` + +これは、関数が `o` の `f` のメンバーとして呼び出されることだけが重要なことを示しています。 + +同様に、`this` の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト `o.b` の `g` メソッドとして呼び出しています。実行時に、関数内の `this` は `o.b` を参照します。オブジェクト自体が `o` のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。 + +```js +o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // 42 +``` + +#### オブジェクトのプロトタイプチェーン上の `this` + +同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、`this` はメソッドを呼び出したオブジェクトを参照します。 + +```js +var o = {f: function() { return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +``` + +この例では、変数 `p` に割り当てられたオブジェクト自身は `f` プロパティを持たず、プロトタイプから継承しています。しかし、`f` に対する検索が、最終的に `o` でその名前を持つメンバーを見つけることは重要ではありません。検索は `p.f` への参照から開始されるため、関数内の `this` は `p` として参照されるオブジェクトの値を取ります。`f` は `p` のメソッドとして呼ばれたため、その `this` は `p` を参照します。これは、JavaScript のプロトタイプ継承の興味深い機能です。 + +#### ゲッター/セッターと `this` + +再度、同じ概念が、ゲッターやセッターから呼ばれる関数にも当てはまります。ゲッターやセッターとして使用される関数は、このプロパティを設定するか、または得られている元のオブジェクトに関連付けられている `this` を持ちます。 + +```js +function sum() { + return this.a + this.b + this.c; +} + +var o = { + a: 1, + b: 2, + c: 3, + get average() { + return (this.a + this.b + this.c) / 3; + } +}; + +Object.defineProperty(o, 'sum', { + get: sum, enumerable: true, configurable: true}); + +console.log(o.average, o.sum); // 2, 6 +``` + +### コンストラクターとして + +関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その `this` は生成された新しいオブジェクトに関連付けられます。 + +> **Note:** コンストラクターの既定では、`this` で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、`this` オブジェクトが返されます)。 + +```js +/* + * コンストラクターは下記のように動作します。 + * + * function MyConstructor(){ + * // 実際の関数本体のコードはこちらになります。 + * // プロパティに代入することで、 |this| に必要な + * // プロパティを作成します。例えば、 + * this.fum = "nom"; + * // など... + * + * // 関数にオブジェクトを返す return 文があれば、 + * // そのオブジェクトが |new| 式の結果になります。 + * // そうでなければ、式の結果は現在 |this| に + * // バインドされているオブジェクトになります + * // (つまり、最もよく見られる一般的なケースです)。 + * } + */ + +function C() { + this.a = 37; +} + +var o = new C(); +console.log(o.a); // 37 + +function C2() { + this.a = 37; + return {a: 38}; +} + +o = new C2(); +console.log(o.a); // 38 +``` + +最後の例 (`C2`) では、構築中にオブジェクトを返しているので、`this` が結び付けられている新しいオブジェクトは単に破棄されています。(これは根本的に "`this.a = 37;`" 文を死んだコードにしてしまっています。これは実行されるので、正確には死んだコードではありませんが、外部への影響がありません。) + +### DOM イベントハンドラーとして + +関数がイベントハンドラとして使用された場合、その `this` はリスナーが配置されている要素に設定されます ({{domxref("EventTarget/addEventListener", "addEventListener()")}} 以外のメソッドで動的に追加されたリスナーについては、この規約に従わないブラウザーもあります)。 + +```js +// リスナーとして呼び出された場合は、関連づけられた要素を青にする +function bluify(e) { + // 常に true + console.log(this === e.currentTarget); + // currentTarget と target が同じオブジェクトであれば true + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// 文書内の各要素の一覧を取得 +var elements = document.getElementsByTagName('*'); + +// クリックリスナーとして bluify を追加することで、 +// 要素をクリックすると青くなるようになる +for (var i = 0; i < elements.length; i++) { + elements[i].addEventListener('click', bluify, false); +} +``` + +### インラインイベントハンドラー内 + +コードがインラインの [on-イベントハンドラー](/ja/docs/Web/Events/Event_handlers)から呼び出されたとき、その `this` にはリスナーが配置されている DOM 要素が設定されます。 + +```html +<button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +``` + +上記のアラートは `button` と表示します。ただし、外側のコードがこのように設定された `this` を持っているだけだということに注意してください。 + +```html +<button onclick="alert((function() { return this; })());"> + Show inner this +</button> +``` + +この場合、内側の関数の `this` は設定されていないので、グローバルの window オブジェクトを返します (つまり、`this` が呼び出しによって設定されていないので、非 strict モードの既定オブジェクトです)。 + +### クラス内の this + +通常の関数と同様に、メソッド内の `this` の値は、どのように呼び出されるかによって異なります。クラス内の `this` が常にクラスのインスタンスを参照するように、この動作をオーバーライドしておくと便利な場合もあります。これを実現するには、コンストラクターでクラスのメソッドをバインドします。 + +```js +class Car { + constructor() { + // 違いを示すために sayHi ではなく sayBye をバインドする + this.sayBye = this.sayBye.bind(this); + } + sayHi() { + console.log(`Hello from ${this.name}`); + } + sayBye() { + console.log(`Bye from ${this.name}`); + } + get name() { + return 'Ferrari'; + } +} + +class Bird { + get name() { + return 'Tweety'; + } +} + +const car = new Car(); +const bird = new Bird(); + +// メソッドの 'this' の値は呼び出し元に依存します +car.sayHi(); // Hello from Ferrari +bird.sayHi = car.sayHi; +bird.sayHi(); // Hello from Tweety + +// バインドされたメソッドの場合、'this' は呼び出し元に依存しません +bird.sayBye = car.sayBye; +bird.sayBye(); // Bye from Ferrari +``` + +> **Note:** クラスは常に strict モードのコードです。これを定義せずに `this` でメソッドを呼び出すとエラーが発生します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) +- [Gentle + explanation of 'this' keyword in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/) +- グローバルコンテキストの取得: {{jsxref("globalThis")}} diff --git a/files/ja/web/javascript/reference/operators/unary_negation/index.html b/files/ja/web/javascript/reference/operators/unary_negation/index.html deleted file mode 100644 index 0a7fe27e04..0000000000 --- a/files/ja/web/javascript/reference/operators/unary_negation/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 単項マイナス (-) -slug: Web/JavaScript/Reference/Operators/Unary_negation -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Unary_negation ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>単項マイナス演算子 (<code>-</code>) はオペランドの前に置かれ、符号を反転します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><strong>演算子:</strong> -<var>x</var> -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Negating_numbers" name="Negating_numbers">数値の符号を反転</h3> - -<pre class="brush: js notranslate">const x = 3; -const y = -x; - -// y = -3 -// x = 3 -</pre> - -<h3 id="Negating_non-numbers" name="Negating_non-numbers">数値以外の符号を反転</h3> - -<p>単項マイナス演算子は、数値でないものを数値に変換することができます。</p> - -<pre class="brush: js notranslate">const x = "4"; -const y = -x; - -// y = -4 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-unary-minus-operator', 'Unary negation operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.unary_negation")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unary_negation/index.md b/files/ja/web/javascript/reference/operators/unary_negation/index.md new file mode 100644 index 0000000000..562ee6dc0f --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unary_negation/index.md @@ -0,0 +1,65 @@ +--- +title: 単項マイナス (-) +slug: Web/JavaScript/Reference/Operators/Unary_negation +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unary_negation +translation_of: Web/JavaScript/Reference/Operators/Unary_negation +--- +{{jsSidebar("Operators")}} + +単項マイナス演算子 (`-`) はオペランドの前に置かれ、符号を反転します。 + +{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}} + +## 構文 + +```js +-x +``` + +## 例 + +### 数値の符号を反転 + +```js +const x = 3; +const y = -x; + +// y = -3 +// x = 3 +``` + +### 数値以外の符号を反転 + +単項マイナス演算子は、数値でないものを数値に変換することができます。 + +```js +const x = "4"; +const y = -x; + +// y = -4 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/unary_plus/index.html b/files/ja/web/javascript/reference/operators/unary_plus/index.html deleted file mode 100644 index 418686a5c1..0000000000 --- a/files/ja/web/javascript/reference/operators/unary_plus/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 単項プラス (+) -slug: Web/JavaScript/Reference/Operators/Unary_plus -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Unary_plus ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>単項プラス演算子 (<code>+</code>) は、オペランドの前に置かれ、そのオペランドを評価し、それが数値以外の場合は数値に変換します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}</div> - - - -<h2 id="例">例</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> +<var>x</var> -</pre> - -<h2 id="説明">説明</h2> - -<p>単項マイナス (<code>-</code>) も非数値を数値に変換できますが、単項プラスは数値に対して他の演算を行わないため、非数値を数値に変換する最も高速で好ましい方法です。これは、整数や浮動小数点の文字列表現や、非文字列値である <code>true</code>、<code>false</code>、<code>null</code> を変換することができます。10進数と16進数（接頭辞 0x）の両形式の整数と負の数（16進数の負の数はサポートされていません）がサポートされています。BigInt 値に対してこの演算子を使用すると TypeError がスローされます。特定の値を解析できない場合は、{{jsxref("NaN")}} と評価されます。</p> - -<h2 id="例_2">例</h2> - -<h3 id="数値での使い方">数値での使い方</h3> - -<pre class="brush: js notranslate">const x = 1; -const y = -1; - -console.log(+x); -// 1 -console.log(+y); -// -1</pre> - -<h3 id="数値以外での使い方">数値以外での使い方</h3> - -<pre class="brush: js notranslate">+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -+1n // BigInt 値は数値に変換できないためエラーになります -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-unary-plus-operator', 'Unary plus operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.unary_plus")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unary_plus/index.md b/files/ja/web/javascript/reference/operators/unary_plus/index.md new file mode 100644 index 0000000000..58fe221e94 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unary_plus/index.md @@ -0,0 +1,70 @@ +--- +title: 単項プラス (+) +slug: Web/JavaScript/Reference/Operators/Unary_plus +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unary_plus +translation_of: Web/JavaScript/Reference/Operators/Unary_plus +--- +{{jsSidebar("Operators")}} + +<p>単項プラス演算子 (`+`) は、オペランドの前に置かれ、そのオペランドを評価し、それが数値以外の場合は数値に変換します。</p> + +{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}} + +## 構文 + +```js ++x +``` + +## 解説 + +単項マイナス (`-`) も非数値を数値に変換できますが、単項プラスは数値に対して他の演算を行わないため、非数値を数値に変換する最も高速で好ましい方法です。これは、整数や浮動小数点の文字列表現や、非文字列値である `true`、`false`、`null` を変換することができます。10 進数と 16 進数 (接頭辞 0x) の両形式の整数と負の数 (ただし 16 進数を除く) に対応しています。BigInt 値に対してこの演算子を使用すると TypeError が発生します。特定の値を解析できない場合は、{{jsxref("NaN")}} と評価されます。</p> + +## 例 + +### 数値での使い方 + +```js +const x = 1; +const y = -1; + +console.log(+x); +// 1 +console.log(+y); +// -1 +``` + +### 数値以外での使い方 + +```js ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN ++1n // BigInt 値は数値に変換できないためエラーになります +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.html deleted file mode 100644 index 7e0c7aa258..0000000000 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 符号なし右シフト (>>>) -slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>符号なし右シフト演算子 (<code>>>></code>)</strong> (ゼロ埋め右シフト) は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0のビットが左からずれて入ります。符号ビットは <code>0</code> になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし32ビット整数を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> >>> <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>この演算子は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0のビットが左からずれて入ります。符号ビットは <code>0</code> になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし32ビット整数を返します。</p> - -<p>負の数ではない場合、ゼロ埋め右シフトと符号保存右シフトは同じ結果をになります。例えば、 <code>9 >>> 2</code> は 2 となり、 <code>9 >> 2</code> と同じになります。</p> - -<pre class="brush: js notranslate">. 9 (10進数): 00000000000000000000000000001001 (2進数) - -------------------------------- -9 >>> 2 (10進数): 00000000000000000000000000000010 (2進数) = 2 (10進数) -</pre> - -<p>しかし、これは負の数の場合は当てはまりません。例えば、 <code>-9 >>> 2</code> は 1073741821 になり、 <code>-9 >> 2</code> (<code>-3</code> になる) とは異なります。</p> - -<pre class="brush: js notranslate">. -9 (10進数): 11111111111111111111111111110111 (2進数) - -------------------------------- --9 >>> 2 (10進数): 00111111111111111111111111111101 (2進数) = 1073741821 (10進数) -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_unsigned_right_shift" name="Using_unsigned_right_shift">符号なし右シフトの使用</h3> - -<pre class="brush: js notranslate"> 9 >>> 2; // 2 --9 >>> 2; // 1073741821 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.unsigned_right_shift")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">符号なし右シフト代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md new file mode 100644 index 0000000000..564f0c257d --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md @@ -0,0 +1,65 @@ +--- +title: 符号なし右シフト (>>>) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unsigned_right_shift +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift +--- +{{jsSidebar("Operators")}} + +**符号なし右シフト演算子 (`>>>`)** (ゼロ埋め右シフト) は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0 のビットが左からずれて入ります。符号ビットは `0` になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし 32 ビット整数を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}} + +## 構文 + +```js +a >>> b +``` + +## 解説 + +この演算子は、1 つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0 のビットが左からずれて入ります。符号ビットは `0` になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし 32 ビット整数を返します。 + +負の数ではない場合、ゼロ埋め右シフトと符号保存右シフトは同じ結果をになります。例えば、 `9 >>> 2` は 2 となり、 `9 >> 2` と同じになります。 + +```js +. 9 (10 進数): 00000000000000000000000000001001 (2 進数) + -------------------------------- +9 >>> 2 (10 進数): 00000000000000000000000000000010 (2 進数) = 2 (10 進数) +``` + +しかし、これは負の数の場合は当てはまりません。例えば、 `-9 >>> 2` は 1073741821 になり、 `-9 >> 2` とは異なります (`-3` になる)。 + +```js +. -9 (10 進数): 11111111111111111111111111110111 (2 進数) + -------------------------------- +-9 >>> 2 (10 進数): 00111111111111111111111111111101 (2 進数) = 1073741821 (10 進数) +``` + +## 例 + +### 符号なし右シフトの使用 + +```js + 9 >>> 2; // 2 +-9 >>> 2; // 1073741821 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [符号なし右シフト代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment) diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html deleted file mode 100644 index 4e23558b27..0000000000 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 符号なし右シフト代入 (>>>=) -slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>符号なし右シフト代入演算子 (<em><code>>>>=</code></em>) は、指定された量のビットを右に移動し、結果を変数に割り当てます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x >>>= y -<strong>Meaning:</strong> x = x >>> y</pre> - -<h2 id="例">例</h2> - -<h3 id="符号なし右シフト代入の使用">符号なし右シフト代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; // (00000000000000000000000000000101) -a >>>= 2; // 1 (00000000000000000000000000000001) - -let b = -5; // (-00000000000000000000000000000101) -b >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.unsigned_right_shift_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">符号なし右シフト演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md new file mode 100644 index 0000000000..4d8cccb022 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 符号なし右シフト代入 (>>>=) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unsigned_right_shift_assignment +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +--- +{{jsSidebar("Operators")}} + +符号なし右シフト代入演算子 (_`>>>=`_) は、指定された数だけビットを右に移動し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}} + +## 構文 + +```js +x >>>= y // x = x >>> y +``` + +## 例 + +### 符号なし右シフト代入の使用 + +```js +let a = 5; // (00000000000000000000000000000101) +a >>>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>>= 2; // 1073741822 (00111111111111111111111111111110) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [符号なし右シフト演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift) diff --git a/files/ja/web/security/same-origin_policy/index.html b/files/ja/web/security/same-origin_policy/index.html index 213ffab6b6..cbb3d64fbb 100644 --- a/files/ja/web/security/same-origin_policy/index.html +++ b/files/ja/web/security/same-origin_policy/index.html @@ -14,7 +14,7 @@ translation_of: Web/Security/Same-origin_policy --- <div>{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}</div> -<p><span class="seoSummary"><strong>同一オリジンポリシー</strong>は重要なセキュリティの仕組みであり、ある{{Glossary("origin", "オリジン")}}によって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するものです。制限するものです。</span></p> +<p><span class="seoSummary"><strong>同一オリジンポリシー</strong>は重要なセキュリティの仕組みであり、ある{{Glossary("origin", "オリジン")}}によって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するものです。</span></p> <p>これにより、悪意のある可能性のあるドキュメントを隔離し、起こりうる攻撃のベクターを減らすことができます。例えば、インターネット上の悪意のあるウェブサイトがブラウザー内で JS を実行して、 (ユーザーがサインインしている) サードパーティのウェブメールサービスや (公開 IP アドレスを持たないことで攻撃者の直接アクセスから保護されている) 企業のイントラネットからデータを読み取り、そのデータを攻撃者に中継することを防ぎます。</p> @@ -124,7 +124,7 @@ translation_of: Web/Security/Same-origin_policy <li>CSS を <code><link rel="stylesheet" href="..."></code> で使用する場合。 CSS は<a href="https://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html">緩い構文規則</a>を持っているため、オリジンをまたぐ CSS には適切な <code>Content-Type</code> ヘッダーを付加することが必要です。制約はブラウザーにより異なり、ブラウザーごとの詳細は <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/gg622939(v=vs.85)?redirectedfrom=MSDN">Internet Explorer</a>, <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2010-46/">Firefox</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="https://support.apple.com/kb/HT4070">Safari</a> (<a href="https://support.apple.com/kb/HT4070?viewlocale=ja_JP">日本語訳</a>) (CVE-2010-0051 までスクロールしてください), <a href="https://security.opera.com/cross-domain-data-theft-with-css-load-opera-security-advisories/">Opera</a> の各項目を参照してください。</li> <li>{{htmlelement("img")}} で表示された画像。</li> <li>{{htmlelement("video")}} および {{htmlelement("audio")}} で再生されたメディア。</li> - <li>{{htmlelement("object")}} または {{htmlelement("embed")}} で埋め込まれた外部リソースを。</li> + <li>{{htmlelement("object")}} または {{htmlelement("embed")}} で埋め込まれた外部リソース。</li> <li>{{cssxref("@font-face")}} が適用されたフォント。異なるオリジンのフォントを許容するブラウザーもありますが、同一オリジンを要求するものもあります。</li> <li>{{htmlelement("iframe")}} に関連するあらゆること。このような形のオリジン間のやりとりを防ぐため、サイトに {{HTTPHeader("X-Frame-Options")}} ヘッダーを使用することができます。</li> </ul> diff --git a/files/ja/web/security/types_of_attacks/index.html b/files/ja/web/security/types_of_attacks/index.html index fe99ad3a25..2539af2807 100644 --- a/files/ja/web/security/types_of_attacks/index.html +++ b/files/ja/web/security/types_of_attacks/index.html @@ -13,28 +13,28 @@ translation_of: Web/Security/Types_of_attacks <h2 id="クロスサイトスクリプティング_XSS">クロスサイトスクリプティング (XSS)</h2> -<p>クロスサイトスクリプティング（XSS）は、攻撃者が悪意のあるクライアント側のコードをウェブサイトに注入することができるセキュリティエクスプロイトです。このコードは被害者によって実行され、攻撃者はアクセス制御を迂回したり、ユーザーになりすましたりすることができます。Open Web Application Security Project によると、XSS は2017年に<a href="https://owasp.org/images/7/72/OWASP_Top_10-2017_(en).pdf">7番目に多いウェブアプリの脆弱性</a>だったという。</p> +<p>クロスサイトスクリプティング（XSS）は、攻撃者が悪意のあるクライアント側のコードをウェブサイトに注入することができるセキュリティエクスプロイトです。このコードは被害者によって実行され、攻撃者はアクセス制御を迂回したり、ユーザーになりすましたりすることができます。Open Web Application Security Project によると、XSS は2017年に<a href="https://owasp.org/www-project-top-ten/2017/Top_10">7番目に多いウェブアプリの脆弱性</a>だったという。</p> -<p>これらの攻撃は、ウェブアプリが十分な検証やエンコーディングを採用していない場合に成功します。ユーザーのブラウザは、悪意のあるスクリプトが信頼できないものであることを検出できないため、クッキー、セッション トークン、またはその他のサイト固有の機密情報へのアクセスを許可したり、悪意のあるスクリプトに {{glossary("HTML")}} コンテンツを書き換えさせたりします。</p> +<p>これらの攻撃は、ウェブアプリが十分な検証やエンコーディングを採用していない場合に成功します。ユーザーのブラウザーは、悪意のあるスクリプトが信頼できないものであることを検出できないため、クッキー、セッション トークン、またはその他のサイト固有の機密情報へのアクセスを許可したり、悪意のあるスクリプトに {{glossary("HTML")}} コンテンツを書き換えさせたりします。</p> <p>クロスサイトスクリプティング攻撃は、通常、1) 信頼されていないソース (多くの場合、ウェブリクエスト) を介してウェブアプリにデータが入力されたり、2) 悪意のあるコンテンツが検証されずに動的なコンテンツがウェブユーザーに送信されたりした場合に発生します。</p> -<p>悪意のあるコンテンツには、{{glossary("JavaScript")}} が含まれていることが多いですが、HTML、Flash、またはブラウザが実行できるその他のコードが含まれていることもあります。XSS に基づく攻撃の種類はほぼ無限にありますが、一般的には、クッキーなどのセッション情報などのプライベートデータを攻撃者に送信したり、攻撃者が管理するウェブページに被害者をリダイレクトさせたり、脆弱性のあるサイトを装ってユーザーのマシンに悪意のある操作を行ったりすることが多いです。</p> +<p>悪意のあるコンテンツには、{{glossary("JavaScript")}} が含まれていることが多いですが、HTML、Flash、またはブラウザーが実行できるその他のコードが含まれていることもあります。XSS に基づく攻撃の種類はほぼ無限にありますが、一般的には、クッキーなどのセッション情報などのプライベートデータを攻撃者に送信したり、攻撃者が管理するウェブページに被害者をリダイレクトさせたり、脆弱性のあるサイトを装ってユーザーのマシンに悪意のある操作を行ったりすることが多いです。</p> <p>XSS 攻撃は、蓄積型 (パーシステントとも呼ばれる)、反映型 (非パーシステントとも呼ばれる)、DOM ベースの3つに分類されます。</p> <dl> <dt>格納された XSS 攻撃</dt> - <dd>注入されたスクリプトは、ターゲットのサーバーに永久に保存されます。そして、被害者は、ブラウザがデータの要求を送信すると、この悪意のあるスクリプトをサーバーから取得します。</dd> + <dd>注入されたスクリプトは、ターゲットのサーバーに永久に保存されます。そして、被害者は、ブラウザーがデータの要求を送信すると、この悪意のあるスクリプトをサーバーから取得します。</dd> <dt>反映された XSS 攻撃</dt> - <dd>ユーザーがだまされて悪意のあるリンクをクリックしたり、特別に細工されたフォームを送信したり、悪意のあるサイトを閲覧したりすると、注入されたコードは脆弱性のあるウェブサイトに移動します。ウェブサーバーは、注入されたスクリプトを、エラーメッセージ、検索結果、またはリクエストの一部としてサーバーに送信されたデータを含むその他の応答など、ユーザのブラウザに反映させます。ブラウザは、レスポンスがユーザーが既にやり取りしたことのある「信頼できる」サーバーからのものであると想定しているため、コードを実行します。</dd> + <dd>ユーザーがだまされて悪意のあるリンクをクリックしたり、特別に細工されたフォームを送信したり、悪意のあるサイトを閲覧したりすると、注入されたコードは脆弱性のあるウェブサイトに移動します。ウェブサーバーは、注入されたスクリプトを、エラーメッセージ、検索結果、またはリクエストの一部としてサーバーに送信されたデータを含むその他の応答など、ユーザーのブラウザーに反映させます。ブラウザーは、レスポンスがユーザーが既にやり取りしたことのある「信頼できる」サーバーからのものであると想定しているため、コードを実行します。</dd> <dt>DOM ベースの XSS 攻撃</dt> - <dd>ペイロードは、元のクライアントサイドスクリプトが使用していた DOM 環境 (被害者のブラウザ内) を変更した結果、実行されます。つまり、ページ自体は変わりませんが、DOM 環境を悪意を持って改変した結果、ページに含まれるクライアント側のコードが予期せぬ形で実行される。</dd> + <dd>ペイロードは、元のクライアントサイドスクリプトが使用していた DOM 環境 (被害者のブラウザー内) を変更した結果、実行されます。つまり、ページ自体は変わりませんが、DOM 環境を悪意を持って改変した結果、ページに含まれるクライアント側のコードが予期せぬ形で実行される。</dd> </dl> -<h2 id="クロスサイトリクエストフォージェリ_CSRF">クロスサイトリクエストフォージェリ (CSRF)</h2> +<h2 id="クロスサイトリクエストフォージェリー_CSRF">クロスサイトリクエストフォージェリー (CSRF)</h2> -<p>CSRF ( XSRF とも呼ぶ) は、関連するクラスの攻撃です。攻撃者はユーザーのブラウザにユーザーの同意なく、または、知らないうちにウェブサイトのバックエンドへの要求を実行させます。攻撃者は XSS ペイロードを使用して CSRF 攻撃を開始できます。</p> +<p>CSRF (XSRF とも呼ぶ) は、関連するクラスの攻撃です。攻撃者はユーザーのブラウザーにユーザーの同意なく、または、知らないうちにウェブサイトのバックエンドへの要求を実行させます。攻撃者は XSS ペイロードを使用して CSRF 攻撃を開始できます。</p> <p>Wikipedia には、CSRF の良い例が記載されています。この状況では、誰かが (例えば、フィルタリングされていないチャットやフォーラムで) 実際には画像ではない画像を含むが、その代わりに、それは本当にお金を引き出すためにあなたの銀行のサーバーへのリクエストです。</p> @@ -49,26 +49,25 @@ translation_of: Web/Security/Types_of_attacks </form> <script>window.addEventListener('DOMContentLoaded', (e) => { document.querySelector('form').submit(); }</script></pre> -<p><br> - これを防ぐためには、いくつかのテクニックがあります。</p> +<p>これを防ぐためには、いくつかのテクニックがあります。</p> <ul> - <li>GET エンドポイントは、変更を実行するアクションであって、単にデータを取得するだけのものではなく、POST (または他の HTTP メソッド) リクエストの送信を必要とするものでなければなりません。POST エンドポイントは、クエリ文字列内のパラメータを持つ GET リクエストを相互に受け入れてはいけません</li> + <li>GET エンドポイントは、変更を実行するアクションであって、データを取得するだけのものではなく、POST (または他の HTTP メソッド) リクエストの送信を必要とするものでなければなりません。POST エンドポイントは、クエリ文字列内のパラメータを持つ GET リクエストを相互に受け入れてはいけません</li> <li>CSRF トークンは、非表示の入力フィールドを経由して <form> 要素に含まれなければなりません。このトークンはユーザーごとに一意で、リクエストが送られたときにサーバーが期待値を調べることができるように、(たとえばクッキーに) 保存されるべきです。アクションを実行する可能性のあるすべての非 GET リクエストに対して、 この入力フィールドは期待値と比較されるべきです。不一致があった場合、リクエストは中止されるべきです</li> <li>CSRF トークンを予測できないことに依存しています。トークンはサインイン時に再生成されなければなりません</li> - <li>機密性の高い動作 (セッションクッキーなど) に使用されるクッキーは、SameSite 属性を Strict または Lax に設定して、有効期限を短くする必要があります (上記の SameSite cookies を参照)。サポートしているブラウザでは、これはクロスサイトリクエストと一緒にセッションクッキーが送信されないようにする効果があり、そのリクエストはアプリケーションサーバーに対して事実上認証されません</li> - <li>CSRF トークンと SameSite Cookie の両方を導入する必要があります。これにより、すべてのブラウザが保護され、SameSite のクッキーでは対応できない場合 (別のサブドメインからの攻撃など) にも保護されます</li> + <li>機密性の高い動作 (セッションクッキーなど) に使用されるクッキーは、SameSite 属性を Strict または Lax に設定して、有効期限を短くする必要があります (上記の SameSite cookies を参照)。サポートしているブラウザーでは、これはクロスサイトリクエストと一緒にセッションクッキーが送信されないようにする効果があり、そのリクエストはアプリケーションサーバーに対して事実上認証されません</li> + <li>CSRF トークンと SameSite Cookie の両方を導入する必要があります。これにより、すべてのブラウザーが保護され、SameSite のクッキーでは対応できない場合 (別のサブドメインからの攻撃など) にも保護されます</li> </ul> <p>より多くの予防のヒントについては、OWASP CSRF prevention チートシートを参照してください。</p> <h2 id="中間者攻撃_MitM">中間者攻撃 (MitM)</h2> -<p>第三者がウェブサーバーとクライアント（ブラウザ）間のトラフィックを傍受し、ウェブサーバーになりすましてデータ（ログイン情報やクレジットカード情報など）を取得します。トラフィックは、場合によっては変更された状態で通過します。オープン WiFi ネットワークは、この攻撃を実行する一般的な手段です。</p> +<p>第三者がウェブサーバーとクライアント（ブラウザー）間のトラフィックを傍受し、ウェブサーバーになりすましてデータ（ログイン情報やクレジットカード情報など）を取得します。トラフィックは、場合によっては変更された状態で通過します。オープン WiFi ネットワークは、この攻撃を実行する一般的な手段です。</p> <h2 id="セッションハイジャック">セッションハイジャック</h2> -<p>セッションハイジャックは、ユーザの認証されたセッションにアクセスして悪用することです。これは、既存のセッションのクッキーを盗んだり、ユーザ (またはブラウザ) を騙して、あらかじめ設定されたセッション ID のクッキーを設定させることで起こる可能性があります。</p> +<p>セッションハイジャックは、ユーザーの認証されたセッションにアクセスして悪用することです。これは、既存のセッションのクッキーを盗んだり、ユーザー (またはブラウザー) を騙して、あらかじめ設定されたセッション ID のクッキーを設定させることで起こる可能性があります。</p> <p>厳密な Content-Security-Policy を展開することで、侵入経路を制限することができます。</p> @@ -80,11 +79,11 @@ translation_of: Web/Security/Types_of_attacks <pre class="notranslate">Set-Cookie: CSRF=e8b667; Secure; Domain=example.com</pre> -<p>脆弱性のあるアプリケーションがサブドメイン上で利用可能な場合、このメカニズムはセッション固定化攻撃で悪用される可能性があります。ユーザが親ドメイン(または別のサブドメイン)のページを訪問したとき、アプリケーションはユーザのクッキーで送られた既存の値を信頼するかもしれません。これにより、攻撃者は CSRF 保護を迂回したり、ユーザがログインした後にセッションを乗っ取ったりすることができます。<br> - あるいは、親ドメインが <code>includeSubdomains</code> が設定された <a href="/ja/docs/Glossary/HSTS">HTTP Strict-Transport-Security</a> を使用しない場合、アクティブな MitM の対象となるユーザ (おそらくオープンなWiFi ネットワークに接続されている) は、存在しないサブドメインからの Set-Cookie ヘッダを持つレスポンスを提供される可能性があります。ブラウザは違法なクッキーを保存し、example.com の下の他のすべてのページにそれを送信します。</p> +<p>脆弱性のあるアプリケーションがサブドメイン上で利用可能な場合、このメカニズムはセッション固定化攻撃で悪用される可能性があります。ユーザーが親ドメイン(または別のサブドメイン)のページを訪問したとき、アプリケーションはユーザーのクッキーで送られた既存の値を信頼するかもしれません。これにより、攻撃者は CSRF 保護を迂回したり、ユーザーがログインした後にセッションを乗っ取ったりすることができます。<br> + あるいは、親ドメインが <code>includeSubdomains</code> が設定された <a href="/ja/docs/Glossary/HSTS">HTTP Strict-Transport-Security</a> を使用しない場合、アクティブな MitM の対象となるユーザー (おそらくオープンな WiFi ネットワークに接続されている) は、存在しないサブドメインからの Set-Cookie ヘッダーを持つレスポンスを提供される可能性があります。ブラウザーは違法なクッキーを保存し、example.com の下の他のすべてのページにそれを送信します。</p> -<p>セッションの固定化は主に、ユーザが認証するときに (たとえクッキーがすでに存在していても) セッションクッキーの値を再生成し、 CSRF トークンをユーザに結びつけることによって緩和されるべきです。</p> +<p>セッションの固定化は主に、ユーザーが認証するときに (たとえクッキーがすでに存在していても) セッションクッキーの値を再生成し、 CSRF トークンをユーザーに結びつけることによって緩和されるべきです。</p> <h3 id="セッションのサイドジャッキング">セッションのサイドジャッキング</h3> -<h3 id="ブラウザハイジャックマルウェア">ブラウザハイジャックマルウェア</h3> +<h3 id="ブラウザーハイジャックマルウェア">ブラウザーハイジャックマルウェア</h3> diff --git a/files/ja/web/svg/element/femorphology/index.md b/files/ja/web/svg/element/femorphology/index.md new file mode 100644 index 0000000000..2e157f42ad --- /dev/null +++ b/files/ja/web/svg/element/femorphology/index.md @@ -0,0 +1,148 @@ +--- +title: <feMorphology> +slug: Web/SVG/Element/feMorphology +tags: + - 要素 + - NeedsBrowserCompatibility + - NeedsContent + - NeedsMobileBrowserCompatibility + - SVG + - SVG フィルター +browser-compat: svg.elements.feMorphology +translation_of: Web/SVG/Element/feMorphology +--- +{{SVGRef}} + +**`<feMorphology>`** は [SVG](/ja/docs/Web/SVG) のフィルタープリミティブで、入力画像の拡大・縮小に用いられます。このプリミティブの有用性は、特に太らせたり痩せさせたりする効果にあります。 + +## 使用場面 + +{{svginfo}} + +## 属性 + +### グローバル属性 + +* [コア属性](/ja/docs/Web/SVG/Attribute#core_attributes) +* [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute#presentation_attributes) +* [Filter primitive attributes](/ja/docs/Web/SVG/Attribute#filter_primitive_attributes) +* {{SVGAttr("class")}} +* {{SVGAttr("style")}} + +### 特有の属性 + +* {{SVGAttr("in")}} +* {{SVGAttr("operator")}} +* {{SVGAttr("radius")}} + +## DOM インターフェイス + +この要素は {{domxref("SVGFEMorphologyElement")}} インターフェイスを実装しています。 + +## 例 + +<h3 id="Filtering_SVG_content">SVG コンテンツのフィルタリング</h3> + +#### SVG + +```html +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> + <filter id="erode"> + <feMorphology operator="erode" radius="1"/> + </filter> + <filter id="dilate"> + <feMorphology operator="dilate" radius="2"/> + </filter> + <text y="1em">Normal text</text> + <text id="thin" y="2em">Thinned text</text> + <text id="thick" y="3em">Fattened text</text> +</svg> +``` + +#### CSS + +```css +text { + font-family: Arial, Helvetica, sans-serif; + font-size: 3em; +} + +#thin { + filter: url(#erode); +} + +#thick { + filter: url(#dilate); +} +``` + +{{EmbedLiveSample("Filtering_SVG_content", 340, 180)}} + +<h3 id="Filtering_HTML_content">HTML コンテンツのフィルタリング</h3> + +#### SVG + +```html +<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> + <filter id="erode"> + <feMorphology operator="erode" radius="1"/> + </filter> + <filter id="dilate"> + <feMorphology operator="dilate" radius="2"/> + </filter> +</svg> + +<p>Normal text</p> +<p id="thin">Thinned text</p> +<p id="thick">Fattened text</p> +``` + +#### CSS + +```css +p { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 3em; +} + +#thin { + filter: url(#erode); +} + +#thick { + filter: url(#dilate); +} +``` + +{{EmbedLiveSample("Filtering_HTML_content", 340, 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +* {{SVGElement("filter")}} +* {{SVGElement("animate")}} +* {{SVGElement("set")}} +* {{SVGElement("feBlend")}} +* {{SVGElement("feColorMatrix")}} +* {{SVGElement("feComponentTransfer")}} +* {{SVGElement("feComposite")}} +* {{SVGElement("feConvolveMatrix")}} +* {{SVGElement("feDiffuseLighting")}} +* {{SVGElement("feDisplacementMap")}} +* {{SVGElement("feFlood")}} +* {{SVGElement("feGaussianBlur")}} +* {{SVGElement("feImage")}} +* {{SVGElement("feMerge")}} +* {{SVGElement("feOffset")}} +* {{SVGElement("feSpecularLighting")}} +* {{SVGElement("feTile")}} +* {{SVGElement("feTurbulence")}} +* [SVG チュートリアル: フィルター効果](/ja/docs/Web/SVG/Tutorial/Filter_effects) diff --git a/files/ja/web/svg/element/pattern/index.html b/files/ja/web/svg/element/pattern/index.html deleted file mode 100644 index 9a7f70231b..0000000000 --- a/files/ja/web/svg/element/pattern/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: <pattern> -slug: Web/SVG/Element/pattern -translation_of: Web/SVG/Element/pattern ---- -<div>{{SVGRef}}</div> - -<p><strong><code><pattern></code></strong>要素は同じ図形をx軸y軸方向にタイルを敷き詰めるように繰り返し描画させます．</p> - -<p><code><pattern></code>は他の<a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes">graphics elements</a>の{{SVGAttr("fill")}}または{{SVGAttr("stroke")}}属性として参照されることが可能です．</p> - -<div id="Exemple"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> - -<pre class="brush: html; highlight[4]"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> - <defs> - <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> - <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> - </pattern> - </defs> - - <circle cx="50" cy="50" r="50" fill="url(#star)"/> - <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> -</svg></pre> - -<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> -</div> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{SVGAttr("height")}}</dt> - <dd>This attribute determines the height of the pattern tile.<br> - <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("href")}}</dt> - <dd>This attribute reference a template pattern that provides default values for the <code><pattern></code> attributes.<br> - <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("patternContentUnits")}}</dt> - <dd>This attribute defines the coordinate system for the contents of the {{ SVGElement("pattern") }}.<br> - <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small> - <p class="note"><strong>Note:</strong> This attribute has no effect if a <code>viewBox</code> attribute is specified on the <code><pattern></code> element.</p> - </dd> - <dt>{{SVGAttr("patternTransform")}}</dt> - <dd>This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.<br> - <small><em>Value type</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("patternUnits")}}</dt> - <dd>This attribute defines the coordinate system for attributes <code>x</code>, <code>y</code>, <code>width</code> and <code>height</code>.<br> - <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("preserveAspectRatio")}}</dt> - <dd>This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.<br> - <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("viewBox")}}</dt> - <dd>This attribute defines the bound of the SVG viewport for the pattern fragment.<br> - <small><em>Value type</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("width")}}</dt> - <dd>This attribute determines the width of the pattern tile.<br> - <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("x")}}</dt> - <dd>This attribute determines the x coordinate shift of the pattern tile.<br> - <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> - <dd>This attribute reference a template pattern that provides default values for the <code><pattern></code> attributes.<br> - <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small> - <p class="note"><strong>Note:</strong> For browsers implementing <code>href</code>, if both <code>href</code> and <code>xlink:href</code> are set, <code>xlink:href</code> will be ignored and only <code>href</code> will be used.</p> - </dd> - <dt>{{SVGAttr("y")}}</dt> - <dd>This attribute determines the y coordinate shift of the pattern tile.<br> - <small><em>Value type</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> -</dl> - -<h3 id="グローバル属性">グローバル属性</h3> - -<dl> - <dt><a href="/ja/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> - <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> - <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> - <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> - <dt>XLink Attributes</dt> - <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd> -</dl> - -<h2 id="Usage_notes">Usage notes</h2> - -<p>{{svginfo}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("svg.elements.pattern")}}</p> diff --git a/files/ja/web/svg/element/pattern/index.md b/files/ja/web/svg/element/pattern/index.md new file mode 100644 index 0000000000..26cee880cb --- /dev/null +++ b/files/ja/web/svg/element/pattern/index.md @@ -0,0 +1,101 @@ +--- +title: <pattern> +slug: Web/SVG/Element/pattern +tags: + - 要素 + - SVG + - SVG コンテナー +browser-compat: svg.elements.pattern +translation_of: Web/SVG/Element/pattern +--- +{{SVGRef}} + +**`<pattern>`** 要素は、ある領域をカバーするために、x座標とy座標の間隔を繰り返して (「タイル」) 再描画することができるグラフィックオブジェクトを定義します。 + +`<pattern>` は、他の[グラフィック要素](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の {{SVGAttr("fill")}} や {{SVGAttr("stroke")}} 属性から参照され、参照されたパターンでそれらの要素を埋めたり、描いたりします。 + +<h2 id="Example">例</h2> + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> + <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> + </pattern> + </defs> + + <circle cx="50" cy="50" r="50" fill="url(#star)"/> + <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> +</svg> +``` + +{{EmbedLiveSample('Example', 150, '100%')}} + +## 属性 + +* {{SVGAttr("height")}} + * : この属性はパターンタイルの高さを指定します。 + *値の型*: [**\<length>**](/ja/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/ja/docs/Web/SVG/Content_type#percentage); *既定値*: `0`; *アニメーション*: **可** +* {{SVGAttr("href")}} + * : この属性は `<pattern>` 属性の既定値を提供するテンプレートパターンを参照します。 + *値の型*: [**\<URL>**](/ja/docs/Web/SVG/Content_type#url); *既定値*: *none*; *アニメーション*: **可** +* {{SVGAttr("patternContentUnits")}} + * : この属性は {{SVGElement("pattern")}} の内容物の座標系を定義します。 + *値の型*: `userSpaceOnUse`|`objectBoundingBox`; *既定値*: `userSpaceOnUse`; *アニメーション*: **可** + + > **Note:** この属性は、`viewBox` 属性が `<pattern>` 上に指定された場合は効果がありません。 +* {{SVGAttr("patternTransform")}} + * : この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。 + *値の型*: **[\<transform-list>](/ja/docs/Web/SVG/Content_type#transform-list)**; *既定値*: *none*; *アニメーション*: **可** +* {{SVGAttr("patternUnits")}} + * : この属性は `x`, `y`, `width`, `height` の各属性の座標系を定義します。 + *値の型*: `userSpaceOnUse`|`objectBoundingBox`; *既定値*: `objectBoundingBox`; *アニメーション*: **可** +* {{SVGAttr("preserveAspectRatio")}} + * : この属性は、SVG フラグメントが異なるアスペクト比を持つコンテナーに埋め込まれた場合に、どのように変形させなければならないかを定義します。 + *値の型*: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; *既定値*: `xMidYMid meet`; *アニメーション*: **可** +* {{SVGAttr("viewBox")}} + * : この属性は、パターンフラグメントの SVG ビューポートの境界を定義します。 + *値の型*: **[\<list-of-numbers>](/ja/docs/Web/SVG/Content_type#list-of-ts)** ; *既定値*: none; *アニメーション*: **可** +* {{SVGAttr("width")}} + * : この属性はパターンタイルの幅を指定します。 + *値の型*: [**\<length>**](/ja/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/ja/docs/Web/SVG/Content_type#percentage) ; *既定値*: `0`; *アニメーション*: **可** +* {{SVGAttr("x")}} + * : この属性はパターンタイルの x 方向のシフト量を指定します。 + *値の型*: [**\<length>**](/ja/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/ja/docs/Web/SVG/Content_type#percentage) ; *既定値*: `0`; *アニメーション*: **可** +* {{SVGAttr("xlink:href")}} {{deprecated_inline}} + * : この属性は `<pattern>` 属性の既定値を提供するテンプレートパターンを参照します。 + *値の型*: [**\<URL>**](/ja/docs/Web/SVG/Content_type#url); *既定値*: *none*; *アニメーション*: **可** + + > **Note:** `href` を実装しているブラウザーでは、 `href` と `xlink:href` を共に設定した場合、`xlink:href` は無視され `href` のみが使用されます。 +* {{SVGAttr("y")}} + * : この属性はパターンタイルの y 方向のシフト量を指定します。 + *値の型*: [**\<length>**](/ja/docs/Web/SVG/Content_type#length)|[**\<percentage>**](/ja/docs/Web/SVG/Content_type#percentage) ; *既定値*: `0`; *アニメーション*: **可** + +### グローバル属性 + +* [コア属性](/ja/docs/Web/SVG/Attribute/Core) + * : 最重要なもの: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +* [スタイル付け属性](/ja/docs/Web/SVG/Attribute/Styling) + * : {{SVGAttr('class')}}, {{SVGAttr('style')}} +* [条件処理属性](/ja/docs/Web/SVG/Attribute/Conditional_Processing) + * : 最重要なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +* [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute/Presentation) + * : 最重要なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +* XLink 属性 + * : 最重要なもの: {{SVGAttr("xlink:title")}} + +## 利用メモ + +{{svginfo}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} |
