CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>線に基づく配置を使用したグリッドレイアウト - CSS: カスケーディングスタイルシート | MDN</title><link rel="alternate" title="Grid-Layout mithilfe von linienbasierter Platzierung" href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="de"/><link rel="alternate" title="Grid layout using line-based placement" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="en"/><link rel="alternate" title="Placer les éléments sur les lignes d'une grille CSS" href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="fr"/><link rel="alternate" title="Line-based placement with CSS Grid" href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="ko"/><link rel="alternate" title="Расположение элементов по грид-линиям с помощью CSS Grid" href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="ru"/><link rel="alternate" title="CSS 网格中基于线的定位" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="zh"/><link rel="alternate" title="線に基づく配置を使用したグリッドレイアウト" href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" hrefLang="ja"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="グリッドレイアウトの基本概念の記事では、線番号を使ってグリッド上にアイテムを配置する方法をご紹介しました。今回は、この仕様の基本的な機能について詳しくご紹介します。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement"/><meta property="og:title" content="線に基づく配置を使用したグリッドレイアウト - CSS: カスケーディングスタイルシート | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="グリッドレイアウトの基本概念の記事では、線番号を使ってグリッド上にアイテムを配置する方法をご紹介しました。今回は、この仕様の基本的な機能について詳しくご紹介します。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-css document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/ja/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/ja/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/ja/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/ja/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/ja/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/ja/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/ja/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/ja/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/ja/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/ja/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/ja/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FWeb%2FCSS%2FCSS_grid_layout%2FGrid_layout_using_line-based_placement" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FWeb%2FCSS%2FCSS_grid_layout%2FGrid_layout_using_line-based_placement" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">開発者向けのウェブ技術</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/CSS" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS: カスケーディングスタイルシート</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/CSS/CSS_grid_layout" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS グリッドレイアウト</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">線に基づく配置を使用したグリッドレイアウト</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>日本語</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/ja/docs/MDN/Community/Contributing/Translated_content#アクティブなロケール">このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="CSSRef"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#線番号によるアイテムの配置">線番号によるアイテムの配置</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grid-column_および_grid-row_の一括指定"><code>grid-column</code> および <code>grid-row</code> の一括指定</a></li><li class="document-toc-item "><a class="document-toc-link" href="#既定のスパン">既定のスパン</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grid-area_プロパティ"><code>grid-area</code> プロパティ</a></li><li class="document-toc-item "><a class="document-toc-link" href="#逆に数える">逆に数える</a></li><li class="document-toc-item "><a class="document-toc-link" href="#溝または路地">溝または路地</a></li><li class="document-toc-item "><a class="document-toc-link" href="#span_キーワードの使用"><code>span</code> キーワードの使用</a></li></ul></section></div></div><div class="sidebar-body"> <ol> <li class="section"><a href="/ja/docs/Web/CSS">CSS</a></li> <li class="section"><a href="/ja/docs/Learn/CSS">チュートリアル</a></li> <li><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> <li class="toggle"> <details> <summary>CSS の第一歩</summary> <ol> <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩の概要</a></li> <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か</a></li> <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li> <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></li> <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS の働き</a></li> <li><a href="/ja/docs/Learn/CSS/First_steps/Styling_a_biography_page">評価課題: 経歴ページのスタイル設定</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>CSS の構成要素</summary> <ol> <li><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素の概要</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_layers">Cascade layers</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">書字方向の操作</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">内容のはみ出し</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS における大きさの指定</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォームの要素</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイル付け</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">評価課題: CSS の基本的な理解度</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">評価課題: 素敵なレターヘッドの便箋の作成</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box">評価課題: かっこいいボックス</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>テキストの装飾</summary> <ol> <li><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾の概要</a></li> <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> <li><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">評価課題: コミュニティスクールのホームページの組版</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>CSS レイアウト</summary> <ol> <li><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウトの概要</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">古いレイアウト方法</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーの対応</a></li> <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">評価課題: 基礎的なレイアウトの理解</a></li> </ol> </details> </li> <li class="section"><a href="/ja/docs/Web/CSS/Reference">Reference</a></li> <li class="toggle"><details><summary>Modules</summary><ol><li><a href="/ja/docs/Web/CSS/CSS_anchor_positioning">CSS アンカー位置指定</a></li><li><a href="/ja/docs/Web/CSS/CSS_animations">CSS アニメーション</a></li><li><a href="/ja/docs/Web/CSS/CSS_backgrounds_and_borders">CSS 背景と境界</a></li><li><a href="/ja/docs/Web/CSS/CSS_basic_user_interface">CSS 基本ユーザーインターフェイス</a></li><li><a href="/ja/docs/Web/CSS/CSS_box_alignment">CSS ボックス配置</a></li><li><a href="/ja/docs/Web/CSS/CSS_box_model">CSS ボックスモデル</a></li><li><a href="/ja/docs/Web/CSS/CSS_box_sizing">CSS ボックスサイズ指定</a></li><li><a href="/ja/docs/Web/CSS/CSS_cascade">CSS カスケードと継承</a></li><li><a href="/ja/docs/Web/CSS/CSS_cascading_variables">カスケード変数のための CSS カスタムプロパティ</a></li><li><a href="/ja/docs/Web/CSS/CSS_color_adjustment">CSS 色調整</a></li><li><a href="/ja/docs/Web/CSS/CSS_colors">CSS 色</a></li><li><a href="/ja/docs/Web/CSS/CSS_compositing_and_blending">CSS 合成と混合</a></li><li><a href="/ja/docs/Web/CSS/CSS_conditional_rules">CSS 条件付き規則</a></li><li><a href="/ja/docs/Web/CSS/CSS_containment">CSS 拘束</a></li><li><a href="/ja/docs/Web/CSS/CSS_counter_styles">CSS カウンタースタイル</a></li><li><a href="/ja/docs/Web/CSS/CSS_display">CSS 表示方法</a></li><li><a href="/ja/docs/Web/CSS/CSS_filter_effects">フィルター効果</a></li><li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout">CSS フレックスボックスレイアウト</a></li><li><a href="/ja/docs/Web/CSS/CSS_font_loading">CSS フォント読み込み</a></li><li><a href="/ja/docs/Web/CSS/CSS_fonts">CSS フォント</a></li><li><a href="/ja/docs/Web/CSS/CSS_fragmentation">CSS 断片化</a></li><li><a href="/ja/docs/Web/CSS/CSS_generated_content">CSS 生成コンテンツ</a></li><li><a href="/ja/docs/Web/CSS/CSS_grid_layout">CSS グリッドレイアウト</a></li><li><a href="/ja/docs/Web/CSS/CSS_images">CSS 画像</a></li><li><a href="/ja/docs/Web/CSS/CSS_inline_layout">CSS インラインレイアウト</a></li><li><a href="/ja/docs/Web/CSS/CSS_lists">CSS リスト</a></li><li><a href="/ja/docs/Web/CSS/CSS_logical_properties_and_values">CSS 論理的プロパティと値</a></li><li><a href="/ja/docs/Web/CSS/CSS_masking">CSS マスク</a></li><li><a href="/ja/docs/Web/CSS/CSS_media_queries">メディアクエリー</a></li><li><a href="/ja/docs/Web/CSS/CSS_motion_path">CSS モーションパス</a></li><li><a href="/ja/docs/Web/CSS/CSS_multicol_layout">CSS 段組みレイアウト</a></li><li><a href="/ja/docs/Web/CSS/CSS_namespaces">CSS 名前空間</a></li><li><a href="/ja/docs/Web/CSS/CSS_nesting">CSS 入れ子</a></li><li><a href="/ja/docs/Web/CSS/CSS_overflow">CSS オーバーフロー</a></li><li><a href="/ja/docs/Web/CSS/CSS_overscroll_behavior">CSS オーバースクロール動作</a></li><li><a href="/ja/docs/Web/CSS/CSS_paged_media">CSS ページメディア</a></li><li><a href="/ja/docs/Web/CSS/CSS_positioned_layout">CSS 位置指定レイアウト</a></li><li><a href="/ja/docs/Web/CSS/CSS_properties_and_values_API">CSS プロパティと値 API</a></li><li><a href="/ja/docs/Web/CSS/CSS_pseudo-elements">CSS 擬似要素</a></li><li><a href="/ja/docs/Web/CSS/CSS_ruby_layout">CSS ルビレイアウト</a></li><li><a href="/ja/docs/Web/CSS/CSS_scoping">CSS スコープ</a></li><li><a href="/ja/docs/Web/CSS/CSS_scroll-driven_animations">CSS スクロール駆動アニメーション</a></li><li><a href="/ja/docs/Web/CSS/CSS_scroll_snap">CSS スクロールスナップ</a></li><li><a href="/ja/docs/Web/CSS/CSS_scrollbars_styling">CSS スクロールバースタイル設定</a></li><li><a href="/ja/docs/Web/CSS/CSS_selectors">CSS セレクター</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/CSS_shadow_parts">CSS shadow parts</a></li><li><a href="/ja/docs/Web/CSS/CSS_shapes">CSS シェイプ</a></li><li><a href="/ja/docs/Web/CSS/CSS_syntax">CSS 構文</a></li><li><a href="/ja/docs/Web/CSS/CSS_table">CSS 表</a></li><li><a href="/ja/docs/Web/CSS/CSS_text">CSS テキスト</a></li><li><a href="/ja/docs/Web/CSS/CSS_text_decoration">CSS テキスト装飾</a></li><li><a href="/ja/docs/Web/CSS/CSS_transforms">CSS 座標変換</a></li><li><a href="/ja/docs/Web/CSS/CSS_transitions">CSS トランジション</a></li><li><a href="/ja/docs/Web/CSS/CSS_view_transitions">CSS ビュー遷移</a></li><li><a href="/ja/docs/Web/CSS/CSS_writing_modes">CSS 書字方向</a></li><li><a href="/ja/docs/Web/CSS/CSSOM_view">CSSOM View</a></li></ol></details></li> <li class="toggle"><details><summary>Properties</summary><ol><li class="toggle"><details><summary>-moz-*</summary><ol><li><a href="/ja/docs/Web/CSS/-moz-float-edge">-moz-float-edge</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-moz-force-broken-image-icon">-moz-force-broken-image-icon</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-moz-image-region">-moz-image-region</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-moz-orient">-moz-orient</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-moz-user-focus">-moz-user-focus</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-moz-user-input">-moz-user-input</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>-webkit-*</summary><ol><li><a href="/ja/docs/Web/CSS/-webkit-border-before">-webkit-border-before</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-box-reflect">-webkit-box-reflect</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-line-clamp">-webkit-line-clamp</a></li><li><a href="/ja/docs/Web/CSS/-webkit-mask-box-image">-webkit-mask-box-image</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-mask-composite">-webkit-mask-composite</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-mask-position-x">-webkit-mask-position-x</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-mask-position-y">-webkit-mask-position-y</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-mask-repeat-x">-webkit-mask-repeat-x</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-mask-repeat-y">-webkit-mask-repeat-y</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-tap-highlight-color">-webkit-tap-highlight-color</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-text-fill-color">-webkit-text-fill-color</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/-webkit-text-security">-webkit-text-security</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/-webkit-text-stroke">-webkit-text-stroke</a></li><li><a href="/ja/docs/Web/CSS/-webkit-text-stroke-color">-webkit-text-stroke-color</a></li><li><a href="/ja/docs/Web/CSS/-webkit-text-stroke-width">-webkit-text-stroke-width</a></li><li><a href="/ja/docs/Web/CSS/-webkit-touch-callout">-webkit-touch-callout</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li></ol></details></li><li><a href="/ja/docs/Web/CSS/accent-color">accent-color</a></li><li class="toggle"><details><summary>align-*</summary><ol><li><a href="/ja/docs/Web/CSS/align-content">align-content</a></li><li><a href="/ja/docs/Web/CSS/align-items">align-items</a></li><li><a href="/ja/docs/Web/CSS/align-self">align-self</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/all">all</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/anchor-name">anchor-name</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li class="toggle"><details><summary>animation-*</summary><ol><li><a href="/ja/docs/Web/CSS/animation">animation</a></li><li><a href="/ja/docs/Web/CSS/animation-composition">animation-composition</a></li><li><a href="/ja/docs/Web/CSS/animation-delay">animation-delay</a></li><li><a href="/ja/docs/Web/CSS/animation-direction">animation-direction</a></li><li><a href="/ja/docs/Web/CSS/animation-duration">animation-duration</a></li><li><a href="/ja/docs/Web/CSS/animation-fill-mode">animation-fill-mode</a></li><li><a href="/ja/docs/Web/CSS/animation-iteration-count">animation-iteration-count</a></li><li><a href="/ja/docs/Web/CSS/animation-name">animation-name</a></li><li><a href="/ja/docs/Web/CSS/animation-play-state">animation-play-state</a></li><li><a href="/ja/docs/Web/CSS/animation-range">animation-range</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/animation-range-end">animation-range-end</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/animation-range-start">animation-range-start</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/animation-timeline">animation-timeline</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/animation-timing-function">animation-timing-function</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/appearance">appearance</a></li><li><a href="/ja/docs/Web/CSS/aspect-ratio">aspect-ratio</a></li><li><a href="/ja/docs/Web/CSS/backdrop-filter">backdrop-filter</a></li><li><a href="/ja/docs/Web/CSS/backface-visibility">backface-visibility</a></li><li class="toggle"><details><summary>background-*</summary><ol><li><a href="/ja/docs/Web/CSS/background">background</a></li><li><a href="/ja/docs/Web/CSS/background-attachment">background-attachment</a></li><li><a href="/ja/docs/Web/CSS/background-blend-mode">background-blend-mode</a></li><li><a href="/ja/docs/Web/CSS/background-clip">background-clip</a></li><li><a href="/ja/docs/Web/CSS/background-color">background-color</a></li><li><a href="/ja/docs/Web/CSS/background-image">background-image</a></li><li><a href="/ja/docs/Web/CSS/background-origin">background-origin</a></li><li><a href="/ja/docs/Web/CSS/background-position">background-position</a></li><li><a href="/ja/docs/Web/CSS/background-position-x">background-position-x</a></li><li><a href="/ja/docs/Web/CSS/background-position-y">background-position-y</a></li><li><a href="/ja/docs/Web/CSS/background-repeat">background-repeat</a></li><li><a href="/ja/docs/Web/CSS/background-size">background-size</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/block-size">block-size</a></li><li class="toggle"><details><summary>border-*</summary><ol><li><a href="/ja/docs/Web/CSS/border">border</a></li><li><a href="/ja/docs/Web/CSS/border-block">border-block</a></li><li><a href="/ja/docs/Web/CSS/border-block-color">border-block-color</a></li><li><a href="/ja/docs/Web/CSS/border-block-end">border-block-end</a></li><li><a href="/ja/docs/Web/CSS/border-block-end-color">border-block-end-color</a></li><li><a href="/ja/docs/Web/CSS/border-block-end-style">border-block-end-style</a></li><li><a href="/ja/docs/Web/CSS/border-block-end-width">border-block-end-width</a></li><li><a href="/ja/docs/Web/CSS/border-block-start">border-block-start</a></li><li><a href="/ja/docs/Web/CSS/border-block-start-color">border-block-start-color</a></li><li><a href="/ja/docs/Web/CSS/border-block-start-style">border-block-start-style</a></li><li><a href="/ja/docs/Web/CSS/border-block-start-width">border-block-start-width</a></li><li><a href="/ja/docs/Web/CSS/border-block-style">border-block-style</a></li><li><a href="/ja/docs/Web/CSS/border-block-width">border-block-width</a></li><li><a href="/ja/docs/Web/CSS/border-bottom">border-bottom</a></li><li><a href="/ja/docs/Web/CSS/border-bottom-color">border-bottom-color</a></li><li><a href="/ja/docs/Web/CSS/border-bottom-left-radius">border-bottom-left-radius</a></li><li><a href="/ja/docs/Web/CSS/border-bottom-right-radius">border-bottom-right-radius</a></li><li><a href="/ja/docs/Web/CSS/border-bottom-style">border-bottom-style</a></li><li><a href="/ja/docs/Web/CSS/border-bottom-width">border-bottom-width</a></li><li><a href="/ja/docs/Web/CSS/border-collapse">border-collapse</a></li><li><a href="/ja/docs/Web/CSS/border-color">border-color</a></li><li><a href="/ja/docs/Web/CSS/border-end-end-radius">border-end-end-radius</a></li><li><a href="/ja/docs/Web/CSS/border-end-start-radius">border-end-start-radius</a></li><li><a href="/ja/docs/Web/CSS/border-image">border-image</a></li><li><a href="/ja/docs/Web/CSS/border-image-outset">border-image-outset</a></li><li><a href="/ja/docs/Web/CSS/border-image-repeat">border-image-repeat</a></li><li><a href="/ja/docs/Web/CSS/border-image-slice">border-image-slice</a></li><li><a href="/ja/docs/Web/CSS/border-image-source">border-image-source</a></li><li><a href="/ja/docs/Web/CSS/border-image-width">border-image-width</a></li><li><a href="/ja/docs/Web/CSS/border-inline">border-inline</a></li><li><a href="/ja/docs/Web/CSS/border-inline-color">border-inline-color</a></li><li><a href="/ja/docs/Web/CSS/border-inline-end">border-inline-end</a></li><li><a href="/ja/docs/Web/CSS/border-inline-end-color">border-inline-end-color</a></li><li><a href="/ja/docs/Web/CSS/border-inline-end-style">border-inline-end-style</a></li><li><a href="/ja/docs/Web/CSS/border-inline-end-width">border-inline-end-width</a></li><li><a href="/ja/docs/Web/CSS/border-inline-start">border-inline-start</a></li><li><a href="/ja/docs/Web/CSS/border-inline-start-color">border-inline-start-color</a></li><li><a href="/ja/docs/Web/CSS/border-inline-start-style">border-inline-start-style</a></li><li><a href="/ja/docs/Web/CSS/border-inline-start-width">border-inline-start-width</a></li><li><a href="/ja/docs/Web/CSS/border-inline-style">border-inline-style</a></li><li><a href="/ja/docs/Web/CSS/border-inline-width">border-inline-width</a></li><li><a href="/ja/docs/Web/CSS/border-left">border-left</a></li><li><a href="/ja/docs/Web/CSS/border-left-color">border-left-color</a></li><li><a href="/ja/docs/Web/CSS/border-left-style">border-left-style</a></li><li><a href="/ja/docs/Web/CSS/border-left-width">border-left-width</a></li><li><a href="/ja/docs/Web/CSS/border-radius">border-radius</a></li><li><a href="/ja/docs/Web/CSS/border-right">border-right</a></li><li><a href="/ja/docs/Web/CSS/border-right-color">border-right-color</a></li><li><a href="/ja/docs/Web/CSS/border-right-style">border-right-style</a></li><li><a href="/ja/docs/Web/CSS/border-right-width">border-right-width</a></li><li><a href="/ja/docs/Web/CSS/border-spacing">border-spacing</a></li><li><a href="/ja/docs/Web/CSS/border-start-end-radius">border-start-end-radius</a></li><li><a href="/ja/docs/Web/CSS/border-start-start-radius">border-start-start-radius</a></li><li><a href="/ja/docs/Web/CSS/border-style">border-style</a></li><li><a href="/ja/docs/Web/CSS/border-top">border-top</a></li><li><a href="/ja/docs/Web/CSS/border-top-color">border-top-color</a></li><li><a href="/ja/docs/Web/CSS/border-top-left-radius">border-top-left-radius</a></li><li><a href="/ja/docs/Web/CSS/border-top-right-radius">border-top-right-radius</a></li><li><a href="/ja/docs/Web/CSS/border-top-style">border-top-style</a></li><li><a href="/ja/docs/Web/CSS/border-top-width">border-top-width</a></li><li><a href="/ja/docs/Web/CSS/border-width">border-width</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/bottom">bottom</a></li><li class="toggle"><details><summary>box-*</summary><ol><li><a href="/ja/docs/Web/CSS/box-align">box-align</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-decoration-break">box-decoration-break</a></li><li><a href="/ja/docs/Web/CSS/box-direction">box-direction</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-flex">box-flex</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-flex-group">box-flex-group</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-lines">box-lines</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-ordinal-group">box-ordinal-group</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-orient">box-orient</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-pack">box-pack</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/box-shadow">box-shadow</a></li><li><a href="/ja/docs/Web/CSS/box-sizing">box-sizing</a></li></ol></details></li><li class="toggle"><details><summary>break-*</summary><ol><li><a href="/ja/docs/Web/CSS/break-after">break-after</a></li><li><a href="/ja/docs/Web/CSS/break-before">break-before</a></li><li><a href="/ja/docs/Web/CSS/break-inside">break-inside</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/caption-side">caption-side</a></li><li><a href="/ja/docs/Web/CSS/caret-color">caret-color</a></li><li><a href="/ja/docs/Web/CSS/clear">clear</a></li><li class="toggle"><details><summary>clip-*</summary><ol><li><a href="/ja/docs/Web/CSS/clip">clip</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/clip-path">clip-path</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/clip-rule">clip-rule</a></li></ol></details></li><li class="toggle"><details><summary>color-*</summary><ol><li><a href="/ja/docs/Web/CSS/color">color</a></li><li><a href="/ja/docs/Web/CSS/color-interpolation">color-interpolation</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/color-interpolation-filters">color-interpolation-filters</a></li><li><a href="/ja/docs/Web/CSS/color-scheme">color-scheme</a></li></ol></details></li><li class="toggle"><details><summary>column-*</summary><ol><li><a href="/ja/docs/Web/CSS/column-count">column-count</a></li><li><a href="/ja/docs/Web/CSS/column-fill">column-fill</a></li><li><a href="/ja/docs/Web/CSS/column-gap">column-gap</a></li><li><a href="/ja/docs/Web/CSS/column-rule">column-rule</a></li><li><a href="/ja/docs/Web/CSS/column-rule-color">column-rule-color</a></li><li><a href="/ja/docs/Web/CSS/column-rule-style">column-rule-style</a></li><li><a href="/ja/docs/Web/CSS/column-rule-width">column-rule-width</a></li><li><a href="/ja/docs/Web/CSS/column-span">column-span</a></li><li><a href="/ja/docs/Web/CSS/column-width">column-width</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/columns">columns</a></li><li class="toggle"><details><summary>contain-*</summary><ol><li><a href="/ja/docs/Web/CSS/contain">contain</a></li><li><a href="/ja/docs/Web/CSS/contain-intrinsic-block-size">contain-intrinsic-block-size</a></li><li><a href="/ja/docs/Web/CSS/contain-intrinsic-height">contain-intrinsic-height</a></li><li><a href="/ja/docs/Web/CSS/contain-intrinsic-inline-size">contain-intrinsic-inline-size</a></li><li><a href="/ja/docs/Web/CSS/contain-intrinsic-size">contain-intrinsic-size</a></li><li><a href="/ja/docs/Web/CSS/contain-intrinsic-width">contain-intrinsic-width</a></li></ol></details></li><li class="toggle"><details><summary>container-*</summary><ol><li><a href="/ja/docs/Web/CSS/container">container</a></li><li><a href="/ja/docs/Web/CSS/container-name">container-name</a></li><li><a href="/ja/docs/Web/CSS/container-type">container-type</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/content">content</a></li><li><a href="/ja/docs/Web/CSS/content-visibility">content-visibility</a></li><li class="toggle"><details><summary>counter-*</summary><ol><li><a href="/ja/docs/Web/CSS/counter-increment">counter-increment</a></li><li><a href="/ja/docs/Web/CSS/counter-reset">counter-reset</a></li><li><a href="/ja/docs/Web/CSS/counter-set">counter-set</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/cursor">cursor</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/cx">cx</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/cy">cy</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/d">d</a></li><li><a href="/ja/docs/Web/CSS/direction">direction</a></li><li><a href="/ja/docs/Web/CSS/display">display</a></li><li><a href="/ja/docs/Web/CSS/dominant-baseline">dominant-baseline</a></li><li><a href="/ja/docs/Web/CSS/empty-cells">empty-cells</a></li><li><a href="/ja/docs/Web/CSS/field-sizing">field-sizing</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li class="toggle"><details><summary>fill-*</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/fill">fill</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/fill-opacity">fill-opacity</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/fill-rule">fill-rule</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/filter">filter</a></li><li class="toggle"><details><summary>flex-*</summary><ol><li><a href="/ja/docs/Web/CSS/flex">flex</a></li><li><a href="/ja/docs/Web/CSS/flex-basis">flex-basis</a></li><li><a href="/ja/docs/Web/CSS/flex-direction">flex-direction</a></li><li><a href="/ja/docs/Web/CSS/flex-flow">flex-flow</a></li><li><a href="/ja/docs/Web/CSS/flex-grow">flex-grow</a></li><li><a href="/ja/docs/Web/CSS/flex-shrink">flex-shrink</a></li><li><a href="/ja/docs/Web/CSS/flex-wrap">flex-wrap</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/float">float</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/flood-color">flood-color</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/flood-opacity">flood-opacity</a></li><li class="toggle"><details><summary>font-*</summary><ol><li><a href="/ja/docs/Web/CSS/font">font</a></li><li><a href="/ja/docs/Web/CSS/font-family">font-family</a></li><li><a href="/ja/docs/Web/CSS/font-feature-settings">font-feature-settings</a></li><li><a href="/ja/docs/Web/CSS/font-kerning">font-kerning</a></li><li><a href="/ja/docs/Web/CSS/font-language-override">font-language-override</a></li><li><a href="/ja/docs/Web/CSS/font-optical-sizing">font-optical-sizing</a></li><li><a href="/ja/docs/Web/CSS/font-palette">font-palette</a></li><li><a href="/ja/docs/Web/CSS/font-size">font-size</a></li><li><a href="/ja/docs/Web/CSS/font-size-adjust">font-size-adjust</a></li><li><a href="/ja/docs/Web/CSS/font-smooth">font-smooth</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/font-stretch">font-stretch</a></li><li><a href="/ja/docs/Web/CSS/font-style">font-style</a></li><li><a href="/ja/docs/Web/CSS/font-synthesis">font-synthesis</a></li><li><a href="/ja/docs/Web/CSS/font-synthesis-position">font-synthesis-position</a></li><li><a href="/ja/docs/Web/CSS/font-synthesis-small-caps">font-synthesis-small-caps</a></li><li><a href="/ja/docs/Web/CSS/font-synthesis-style">font-synthesis-style</a></li><li><a href="/ja/docs/Web/CSS/font-synthesis-weight">font-synthesis-weight</a></li><li><a href="/ja/docs/Web/CSS/font-variant">font-variant</a></li><li><a href="/ja/docs/Web/CSS/font-variant-alternates">font-variant-alternates</a></li><li><a href="/ja/docs/Web/CSS/font-variant-caps">font-variant-caps</a></li><li><a href="/ja/docs/Web/CSS/font-variant-east-asian">font-variant-east-asian</a></li><li><a href="/ja/docs/Web/CSS/font-variant-emoji">font-variant-emoji</a></li><li><a href="/ja/docs/Web/CSS/font-variant-ligatures">font-variant-ligatures</a></li><li><a href="/ja/docs/Web/CSS/font-variant-numeric">font-variant-numeric</a></li><li><a href="/ja/docs/Web/CSS/font-variant-position">font-variant-position</a></li><li><a href="/ja/docs/Web/CSS/font-variation-settings">font-variation-settings</a></li><li><a href="/ja/docs/Web/CSS/font-weight">font-weight</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/forced-color-adjust">forced-color-adjust</a></li><li><a href="/ja/docs/Web/CSS/gap">gap</a></li><li class="toggle"><details><summary>grid-*</summary><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-start">grid-column-start</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-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></details></li><li><a href="/ja/docs/Web/CSS/hanging-punctuation">hanging-punctuation</a></li><li><a href="/ja/docs/Web/CSS/height">height</a></li><li><a href="/ja/docs/Web/CSS/hyphenate-character">hyphenate-character</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/hyphenate-limit-chars">hyphenate-limit-chars</a></li><li><a href="/ja/docs/Web/CSS/hyphens">hyphens</a></li><li class="toggle"><details><summary>image-*</summary><ol><li><a href="/ja/docs/Web/CSS/image-orientation">image-orientation</a></li><li><a href="/ja/docs/Web/CSS/image-rendering">image-rendering</a></li><li><a href="/ja/docs/Web/CSS/image-resolution">image-resolution</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li><a href="/ja/docs/Web/CSS/initial-letter">initial-letter</a></li><li><a href="/ja/docs/Web/CSS/inline-size">inline-size</a></li><li class="toggle"><details><summary>inset-*</summary><ol><li><a href="/ja/docs/Web/CSS/inset">inset</a></li><li><a href="/ja/docs/Web/CSS/inset-block">inset-block</a></li><li><a href="/ja/docs/Web/CSS/inset-block-end">inset-block-end</a></li><li><a href="/ja/docs/Web/CSS/inset-block-start">inset-block-start</a></li><li><a href="/ja/docs/Web/CSS/inset-inline">inset-inline</a></li><li><a href="/ja/docs/Web/CSS/inset-inline-end">inset-inline-end</a></li><li><a href="/ja/docs/Web/CSS/inset-inline-start">inset-inline-start</a></li></ol></details></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/interpolate-size">interpolate-size</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/isolation">isolation</a></li><li class="toggle"><details><summary>justify-*</summary><ol><li><a href="/ja/docs/Web/CSS/justify-content">justify-content</a></li><li><a href="/ja/docs/Web/CSS/justify-items">justify-items</a></li><li><a href="/ja/docs/Web/CSS/justify-self">justify-self</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/left">left</a></li><li><a href="/ja/docs/Web/CSS/letter-spacing">letter-spacing</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/lighting-color">lighting-color</a></li><li class="toggle"><details><summary>line-*</summary><ol><li><a href="/ja/docs/Web/CSS/line-break">line-break</a></li><li><a href="/ja/docs/Web/CSS/line-height">line-height</a></li><li><a href="/ja/docs/Web/CSS/line-height-step">line-height-step</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>list-*</summary><ol><li><a href="/ja/docs/Web/CSS/list-style">list-style</a></li><li><a href="/ja/docs/Web/CSS/list-style-image">list-style-image</a></li><li><a href="/ja/docs/Web/CSS/list-style-position">list-style-position</a></li><li><a href="/ja/docs/Web/CSS/list-style-type">list-style-type</a></li></ol></details></li><li class="toggle"><details><summary>margin-*</summary><ol><li><a href="/ja/docs/Web/CSS/margin">margin</a></li><li><a href="/ja/docs/Web/CSS/margin-block">margin-block</a></li><li><a href="/ja/docs/Web/CSS/margin-block-end">margin-block-end</a></li><li><a href="/ja/docs/Web/CSS/margin-block-start">margin-block-start</a></li><li><a href="/ja/docs/Web/CSS/margin-bottom">margin-bottom</a></li><li><a href="/ja/docs/Web/CSS/margin-inline">margin-inline</a></li><li><a href="/ja/docs/Web/CSS/margin-inline-end">margin-inline-end</a></li><li><a href="/ja/docs/Web/CSS/margin-inline-start">margin-inline-start</a></li><li><a href="/ja/docs/Web/CSS/margin-left">margin-left</a></li><li><a href="/ja/docs/Web/CSS/margin-right">margin-right</a></li><li><a href="/ja/docs/Web/CSS/margin-top">margin-top</a></li><li><a href="/ja/docs/Web/CSS/margin-trim">margin-trim</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>marker-*</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/marker">marker</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/marker-end">marker-end</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/marker-mid">marker-mid</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/marker-start">marker-start</a></li></ol></details></li><li class="toggle"><details><summary>mask-*</summary><ol><li><a href="/ja/docs/Web/CSS/mask">mask</a></li><li><a href="/ja/docs/Web/CSS/mask-border">mask-border</a></li><li><a href="/ja/docs/Web/CSS/mask-border-mode">mask-border-mode</a></li><li><a href="/ja/docs/Web/CSS/mask-border-outset">mask-border-outset</a></li><li><a href="/ja/docs/Web/CSS/mask-border-repeat">mask-border-repeat</a></li><li><a href="/ja/docs/Web/CSS/mask-border-slice">mask-border-slice</a></li><li><a href="/ja/docs/Web/CSS/mask-border-source">mask-border-source</a></li><li><a href="/ja/docs/Web/CSS/mask-border-width">mask-border-width</a></li><li><a href="/ja/docs/Web/CSS/mask-clip">mask-clip</a></li><li><a href="/ja/docs/Web/CSS/mask-composite">mask-composite</a></li><li><a href="/ja/docs/Web/CSS/mask-image">mask-image</a></li><li><a href="/ja/docs/Web/CSS/mask-mode">mask-mode</a></li><li><a href="/ja/docs/Web/CSS/mask-origin">mask-origin</a></li><li><a href="/ja/docs/Web/CSS/mask-position">mask-position</a></li><li><a href="/ja/docs/Web/CSS/mask-repeat">mask-repeat</a></li><li><a href="/ja/docs/Web/CSS/mask-size">mask-size</a></li><li><a href="/ja/docs/Web/CSS/mask-type">mask-type</a></li></ol></details></li><li class="toggle"><details><summary>math-*</summary><ol><li><a href="/ja/docs/Web/CSS/math-depth">math-depth</a></li><li><a href="/ja/docs/Web/CSS/math-shift">math-shift</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/math-style">math-style</a></li></ol></details></li><li class="toggle"><details><summary>max-*</summary><ol><li><a href="/ja/docs/Web/CSS/max-block-size">max-block-size</a></li><li><a href="/ja/docs/Web/CSS/max-height">max-height</a></li><li><a href="/ja/docs/Web/CSS/max-inline-size">max-inline-size</a></li><li><a href="/ja/docs/Web/CSS/max-width">max-width</a></li></ol></details></li><li class="toggle"><details><summary>min-*</summary><ol><li><a href="/ja/docs/Web/CSS/min-block-size">min-block-size</a></li><li><a href="/ja/docs/Web/CSS/min-height">min-height</a></li><li><a href="/ja/docs/Web/CSS/min-inline-size">min-inline-size</a></li><li><a href="/ja/docs/Web/CSS/min-width">min-width</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/mix-blend-mode">mix-blend-mode</a></li><li><a href="/ja/docs/Web/CSS/object-fit">object-fit</a></li><li><a href="/ja/docs/Web/CSS/object-position">object-position</a></li><li class="toggle"><details><summary>offset-*</summary><ol><li><a href="/ja/docs/Web/CSS/offset">offset</a></li><li><a href="/ja/docs/Web/CSS/offset-anchor">offset-anchor</a></li><li><a href="/ja/docs/Web/CSS/offset-distance">offset-distance</a></li><li><a href="/ja/docs/Web/CSS/offset-path">offset-path</a></li><li><a href="/ja/docs/Web/CSS/offset-position">offset-position</a></li><li><a href="/ja/docs/Web/CSS/offset-rotate">offset-rotate</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/opacity">opacity</a></li><li><a href="/ja/docs/Web/CSS/order">order</a></li><li><a href="/ja/docs/Web/CSS/orphans">orphans</a></li><li class="toggle"><details><summary>outline-*</summary><ol><li><a href="/ja/docs/Web/CSS/outline">outline</a></li><li><a href="/ja/docs/Web/CSS/outline-color">outline-color</a></li><li><a href="/ja/docs/Web/CSS/outline-offset">outline-offset</a></li><li><a href="/ja/docs/Web/CSS/outline-style">outline-style</a></li><li><a href="/ja/docs/Web/CSS/outline-width">outline-width</a></li></ol></details></li><li class="toggle"><details><summary>overflow-*</summary><ol><li><a href="/ja/docs/Web/CSS/overflow">overflow</a></li><li><a href="/ja/docs/Web/CSS/overflow-anchor">overflow-anchor</a></li><li><a href="/ja/docs/Web/CSS/overflow-block">overflow-block</a></li><li><a href="/ja/docs/Web/CSS/overflow-clip-margin">overflow-clip-margin</a></li><li><a href="/ja/docs/Web/CSS/overflow-inline">overflow-inline</a></li><li><a href="/ja/docs/Web/CSS/overflow-wrap">overflow-wrap</a></li><li><a href="/ja/docs/Web/CSS/overflow-x">overflow-x</a></li><li><a href="/ja/docs/Web/CSS/overflow-y">overflow-y</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/overlay">overlay</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li class="toggle"><details><summary>overscroll-*</summary><ol><li><a href="/ja/docs/Web/CSS/overscroll-behavior">overscroll-behavior</a></li><li><a href="/ja/docs/Web/CSS/overscroll-behavior-block">overscroll-behavior-block</a></li><li><a href="/ja/docs/Web/CSS/overscroll-behavior-inline">overscroll-behavior-inline</a></li><li><a href="/ja/docs/Web/CSS/overscroll-behavior-x">overscroll-behavior-x</a></li><li><a href="/ja/docs/Web/CSS/overscroll-behavior-y">overscroll-behavior-y</a></li></ol></details></li><li class="toggle"><details><summary>padding-*</summary><ol><li><a href="/ja/docs/Web/CSS/padding">padding</a></li><li><a href="/ja/docs/Web/CSS/padding-block">padding-block</a></li><li><a href="/ja/docs/Web/CSS/padding-block-end">padding-block-end</a></li><li><a href="/ja/docs/Web/CSS/padding-block-start">padding-block-start</a></li><li><a href="/ja/docs/Web/CSS/padding-bottom">padding-bottom</a></li><li><a href="/ja/docs/Web/CSS/padding-inline">padding-inline</a></li><li><a href="/ja/docs/Web/CSS/padding-inline-end">padding-inline-end</a></li><li><a href="/ja/docs/Web/CSS/padding-inline-start">padding-inline-start</a></li><li><a href="/ja/docs/Web/CSS/padding-left">padding-left</a></li><li><a href="/ja/docs/Web/CSS/padding-right">padding-right</a></li><li><a href="/ja/docs/Web/CSS/padding-top">padding-top</a></li></ol></details></li><li class="toggle"><details><summary>page-*</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/page">page</a></li><li><a href="/ja/docs/Web/CSS/page-break-after">page-break-after</a></li><li><a href="/ja/docs/Web/CSS/page-break-before">page-break-before</a></li><li><a href="/ja/docs/Web/CSS/page-break-inside">page-break-inside</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/paint-order">paint-order</a></li><li><a href="/ja/docs/Web/CSS/perspective">perspective</a></li><li><a href="/ja/docs/Web/CSS/perspective-origin">perspective-origin</a></li><li class="toggle"><details><summary>place-*</summary><ol><li><a href="/ja/docs/Web/CSS/place-content">place-content</a></li><li><a href="/ja/docs/Web/CSS/place-items">place-items</a></li><li><a href="/ja/docs/Web/CSS/place-self">place-self</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/pointer-events">pointer-events</a></li><li class="toggle"><details><summary>position-*</summary><ol><li><a href="/ja/docs/Web/CSS/position">position</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-anchor">position-anchor</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-area">position-area</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-try">position-try</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-try-fallbacks">position-try-fallbacks</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-try-order">position-try-order</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-visibility">position-visibility</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li><a href="/ja/docs/Web/CSS/print-color-adjust">print-color-adjust</a></li><li><a href="/ja/docs/Web/CSS/quotes">quotes</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/r">r</a></li><li><a href="/ja/docs/Web/CSS/resize">resize</a></li><li><a href="/ja/docs/Web/CSS/right">right</a></li><li><a href="/ja/docs/Web/CSS/rotate">rotate</a></li><li><a href="/ja/docs/Web/CSS/row-gap">row-gap</a></li><li><a href="/ja/docs/Web/CSS/ruby-align">ruby-align</a></li><li><a href="/ja/docs/Web/CSS/ruby-position">ruby-position</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/rx">rx</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/ry">ry</a></li><li><a href="/ja/docs/Web/CSS/scale">scale</a></li><li class="toggle"><details><summary>scroll-*</summary><ol><li><a href="/ja/docs/Web/CSS/scroll-behavior">scroll-behavior</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin">scroll-margin</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-block">scroll-margin-block</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-block-end">scroll-margin-block-end</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-block-start">scroll-margin-block-start</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-bottom">scroll-margin-bottom</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-inline">scroll-margin-inline</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-inline-end">scroll-margin-inline-end</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-inline-start">scroll-margin-inline-start</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-left">scroll-margin-left</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-right">scroll-margin-right</a></li><li><a href="/ja/docs/Web/CSS/scroll-margin-top">scroll-margin-top</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding">scroll-padding</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-block">scroll-padding-block</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-block-end">scroll-padding-block-end</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-block-start">scroll-padding-block-start</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-bottom">scroll-padding-bottom</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-inline">scroll-padding-inline</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-inline-end">scroll-padding-inline-end</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-inline-start">scroll-padding-inline-start</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-left">scroll-padding-left</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-right">scroll-padding-right</a></li><li><a href="/ja/docs/Web/CSS/scroll-padding-top">scroll-padding-top</a></li><li><a href="/ja/docs/Web/CSS/scroll-snap-align">scroll-snap-align</a></li><li><a href="/ja/docs/Web/CSS/scroll-snap-stop">scroll-snap-stop</a></li><li><a href="/ja/docs/Web/CSS/scroll-snap-type">scroll-snap-type</a></li><li><a href="/ja/docs/Web/CSS/scroll-timeline">scroll-timeline</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/scroll-timeline-axis">scroll-timeline-axis</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/scroll-timeline-name">scroll-timeline-name</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>scrollbar-*</summary><ol><li><a href="/ja/docs/Web/CSS/scrollbar-color">scrollbar-color</a></li><li><a href="/ja/docs/Web/CSS/scrollbar-gutter">scrollbar-gutter</a></li><li><a href="/ja/docs/Web/CSS/scrollbar-width">scrollbar-width</a></li></ol></details></li><li class="toggle"><details><summary>shape-*</summary><ol><li><a href="/ja/docs/Web/CSS/shape-image-threshold">shape-image-threshold</a></li><li><a href="/ja/docs/Web/CSS/shape-margin">shape-margin</a></li><li><a href="/ja/docs/Web/CSS/shape-outside">shape-outside</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/shape-rendering">shape-rendering</a></li></ol></details></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stop-color">stop-color</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stop-opacity">stop-opacity</a></li><li class="toggle"><details><summary>stroke-*</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke">stroke</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-dasharray">stroke-dasharray</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-dashoffset">stroke-dashoffset</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-linecap">stroke-linecap</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-linejoin">stroke-linejoin</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-miterlimit">stroke-miterlimit</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-opacity">stroke-opacity</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/stroke-width">stroke-width</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/tab-size">tab-size</a></li><li><a href="/ja/docs/Web/CSS/table-layout">table-layout</a></li><li class="toggle"><details><summary>text-*</summary><ol><li><a href="/ja/docs/Web/CSS/text-align">text-align</a></li><li><a href="/ja/docs/Web/CSS/text-align-last">text-align-last</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/text-anchor">text-anchor</a></li><li><a href="/ja/docs/Web/CSS/text-combine-upright">text-combine-upright</a></li><li><a href="/ja/docs/Web/CSS/text-decoration">text-decoration</a></li><li><a href="/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a></li><li><a href="/ja/docs/Web/CSS/text-decoration-line">text-decoration-line</a></li><li><a href="/ja/docs/Web/CSS/text-decoration-skip">text-decoration-skip</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/text-decoration-skip-ink">text-decoration-skip-ink</a></li><li><a href="/ja/docs/Web/CSS/text-decoration-style">text-decoration-style</a></li><li><a href="/ja/docs/Web/CSS/text-decoration-thickness">text-decoration-thickness</a></li><li><a href="/ja/docs/Web/CSS/text-emphasis">text-emphasis</a></li><li><a href="/ja/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a></li><li><a href="/ja/docs/Web/CSS/text-emphasis-position">text-emphasis-position</a></li><li><a href="/ja/docs/Web/CSS/text-emphasis-style">text-emphasis-style</a></li><li><a href="/ja/docs/Web/CSS/text-indent">text-indent</a></li><li><a href="/ja/docs/Web/CSS/text-justify">text-justify</a></li><li><a href="/ja/docs/Web/CSS/text-orientation">text-orientation</a></li><li><a href="/ja/docs/Web/CSS/text-overflow">text-overflow</a></li><li><a href="/ja/docs/Web/CSS/text-rendering">text-rendering</a></li><li><a href="/ja/docs/Web/CSS/text-shadow">text-shadow</a></li><li><a href="/ja/docs/Web/CSS/text-size-adjust">text-size-adjust</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/text-spacing-trim">text-spacing-trim</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/text-transform">text-transform</a></li><li><a href="/ja/docs/Web/CSS/text-underline-offset">text-underline-offset</a></li><li><a href="/ja/docs/Web/CSS/text-underline-position">text-underline-position</a></li><li><a href="/ja/docs/Web/CSS/text-wrap">text-wrap</a></li><li><a href="/ja/docs/Web/CSS/text-wrap-mode">text-wrap-mode</a></li><li><a href="/ja/docs/Web/CSS/text-wrap-style">text-wrap-style</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/timeline-scope">timeline-scope</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/top">top</a></li><li><a href="/ja/docs/Web/CSS/touch-action">touch-action</a></li><li class="toggle"><details><summary>transform-*</summary><ol><li><a href="/ja/docs/Web/CSS/transform">transform</a></li><li><a href="/ja/docs/Web/CSS/transform-box">transform-box</a></li><li><a href="/ja/docs/Web/CSS/transform-origin">transform-origin</a></li><li><a href="/ja/docs/Web/CSS/transform-style">transform-style</a></li></ol></details></li><li class="toggle"><details><summary>transition-*</summary><ol><li><a href="/ja/docs/Web/CSS/transition">transition</a></li><li><a href="/ja/docs/Web/CSS/transition-behavior">transition-behavior</a></li><li><a href="/ja/docs/Web/CSS/transition-delay">transition-delay</a></li><li><a href="/ja/docs/Web/CSS/transition-duration">transition-duration</a></li><li><a href="/ja/docs/Web/CSS/transition-property">transition-property</a></li><li><a href="/ja/docs/Web/CSS/transition-timing-function">transition-timing-function</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/translate">translate</a></li><li><a href="/ja/docs/Web/CSS/unicode-bidi">unicode-bidi</a></li><li><a href="/ja/docs/Web/CSS/user-modify">user-modify</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/user-select">user-select</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/vector-effect">vector-effect</a></li><li><a href="/ja/docs/Web/CSS/vertical-align">vertical-align</a></li><li class="toggle"><details><summary>view-*</summary><ol><li><a href="/ja/docs/Web/CSS/view-timeline">view-timeline</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/view-timeline-axis">view-timeline-axis</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/view-timeline-inset">view-timeline-inset</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/view-timeline-name">view-timeline-name</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/view-transition-name">view-transition-name</a></li></ol></details></li><li><a href="/ja/docs/Web/CSS/visibility">visibility</a></li><li><a href="/ja/docs/Web/CSS/white-space">white-space</a></li><li><a href="/ja/docs/Web/CSS/white-space-collapse">white-space-collapse</a></li><li><a href="/ja/docs/Web/CSS/widows">widows</a></li><li><a href="/ja/docs/Web/CSS/width">width</a></li><li><a href="/ja/docs/Web/CSS/will-change">will-change</a></li><li><a href="/ja/docs/Web/CSS/word-break">word-break</a></li><li><a href="/ja/docs/Web/CSS/word-spacing">word-spacing</a></li><li><a href="/ja/docs/Web/CSS/writing-mode">writing-mode</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/x">x</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/y">y</a></li><li><a href="/ja/docs/Web/CSS/z-index">z-index</a></li><li><a href="/ja/docs/Web/CSS/zoom">zoom</a></li></ol></details></li> <li class="toggle"><details><summary>Selectors</summary><ol><li><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></li><li><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></li><li><a href="/ja/docs/Web/CSS/Nesting_selector">& 入れ子セレクター</a></li><li><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a></li><li><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></li></ol></details></li> <li class="toggle"><details><summary>Combinators</summary><ol><li><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></li><li><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/Namespace_separator">Namespace separator</a></li><li><a href="/ja/docs/Web/CSS/Next-sibling_combinator">次兄弟結合子</a></li><li><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a></li><li><a href="/ja/docs/Web/CSS/Subsequent-sibling_combinator">後続兄弟結合子</a></li></ol></details></li> <li class="toggle"><details><summary>Pseudo-classes</summary><ol><li><a href="/ja/docs/Web/CSS/:-moz-broken">:-moz-broken</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-drag-over">:-moz-drag-over</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-first-node">:-moz-first-node</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:-moz-handler-blocked">:-moz-handler-blocked</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:-moz-handler-crashed">:-moz-handler-crashed</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:-moz-handler-disabled">:-moz-handler-disabled</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-last-node">:-moz-last-node</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-loading">:-moz-loading</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-locale-dir_ltr">:-moz-locale-dir(ltr)</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-locale-dir_rtl">:-moz-locale-dir(rtl)</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-only-whitespace">:-moz-only-whitespace</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:-moz-submit-invalid">:-moz-submit-invalid</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:-moz-suppressed">:-moz-suppressed</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:-moz-user-disabled">:-moz-user-disabled</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:-moz-window-inactive">:-moz-window-inactive</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:active">:active</a></li><li><a href="/ja/docs/Web/CSS/:any-link">:any-link</a></li><li><a href="/ja/docs/Web/CSS/:autofill">:autofill</a></li><li><a href="/ja/docs/Web/CSS/:blank">:blank</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:buffering">:buffering</a></li><li><a href="/ja/docs/Web/CSS/:checked">:checked</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:current">:current</a></li><li><a href="/ja/docs/Web/CSS/:default">:default</a></li><li><a href="/ja/docs/Web/CSS/:defined">:defined</a></li><li><a href="/ja/docs/Web/CSS/:dir">:dir()</a></li><li><a href="/ja/docs/Web/CSS/:disabled">:disabled</a></li><li><a href="/ja/docs/Web/CSS/:empty">:empty</a></li><li><a href="/ja/docs/Web/CSS/:enabled">:enabled</a></li><li><a href="/ja/docs/Web/CSS/:first">:first</a></li><li><a href="/ja/docs/Web/CSS/:first-child">:first-child</a></li><li><a href="/ja/docs/Web/CSS/:first-of-type">:first-of-type</a></li><li><a href="/ja/docs/Web/CSS/:focus">:focus</a></li><li><a href="/ja/docs/Web/CSS/:focus-visible">:focus-visible</a></li><li><a href="/ja/docs/Web/CSS/:focus-within">:focus-within</a></li><li><a href="/ja/docs/Web/CSS/:fullscreen">:fullscreen</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:future">:future</a></li><li><a href="/ja/docs/Web/CSS/:has">:has()</a></li><li><a href="/ja/docs/Web/CSS/:host">:host</a></li><li><a href="/ja/docs/Web/CSS/:host-context">:host-context()</a></li><li><a href="/ja/docs/Web/CSS/:host_function">:host()</a></li><li><a href="/ja/docs/Web/CSS/:hover">:hover</a></li><li><a href="/ja/docs/Web/CSS/:in-range">:in-range</a></li><li><a href="/ja/docs/Web/CSS/:indeterminate">:indeterminate</a></li><li><a href="/ja/docs/Web/CSS/:invalid">:invalid</a></li><li><a href="/ja/docs/Web/CSS/:is">:is()</a></li><li><a href="/ja/docs/Web/CSS/:lang">:lang()</a></li><li><a href="/ja/docs/Web/CSS/:last-child">:last-child</a></li><li><a href="/ja/docs/Web/CSS/:last-of-type">:last-of-type</a></li><li><a href="/ja/docs/Web/CSS/:left">:left</a></li><li><a href="/ja/docs/Web/CSS/:link">:link</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:local-link">:local-link</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:modal">:modal</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:muted">:muted</a></li><li><a href="/ja/docs/Web/CSS/:not">:not()</a></li><li><a href="/ja/docs/Web/CSS/:nth-child">:nth-child()</a></li><li><a href="/ja/docs/Web/CSS/:nth-last-child">:nth-last-child()</a></li><li><a href="/ja/docs/Web/CSS/:nth-last-of-type">:nth-last-of-type()</a></li><li><a href="/ja/docs/Web/CSS/:nth-of-type">:nth-of-type()</a></li><li><a href="/ja/docs/Web/CSS/:only-child">:only-child</a></li><li><a href="/ja/docs/Web/CSS/:only-of-type">:only-of-type</a></li><li><a href="/ja/docs/Web/CSS/:optional">:optional</a></li><li><a href="/ja/docs/Web/CSS/:out-of-range">:out-of-range</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:past">:past</a></li><li><a href="/ja/docs/Web/CSS/:paused">:paused</a></li><li><a href="/ja/docs/Web/CSS/:picture-in-picture">:picture-in-picture</a></li><li><a href="/ja/docs/Web/CSS/:placeholder-shown">:placeholder-shown</a></li><li><a href="/ja/docs/Web/CSS/:playing">:playing</a></li><li><a href="/ja/docs/Web/CSS/:popover-open">:popover-open</a></li><li><a href="/ja/docs/Web/CSS/:read-only">:read-only</a></li><li><a href="/ja/docs/Web/CSS/:read-write">:read-write</a></li><li><a href="/ja/docs/Web/CSS/:required">:required</a></li><li><a href="/ja/docs/Web/CSS/:right">:right</a></li><li><a href="/ja/docs/Web/CSS/:root">:root</a></li><li><a href="/ja/docs/Web/CSS/:scope">:scope</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:seeking">:seeking</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:stalled">:stalled</a></li><li><a href="/ja/docs/Web/CSS/:state">:state()</a></li><li><a href="/ja/docs/Web/CSS/:target">:target</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:target-within">:target-within</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/:user-invalid">:user-invalid (:-moz-ui-invalid)</a></li><li><a href="/ja/docs/Web/CSS/:user-valid">:user-valid (:-moz-ui-valid)</a></li><li><a href="/ja/docs/Web/CSS/:valid">:valid</a></li><li><a href="/ja/docs/Web/CSS/:visited">:visited</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/:volume-locked">:volume-locked</a></li><li><a href="/ja/docs/Web/CSS/:where">:where()</a></li></ol></details></li> <li class="toggle"><details><summary>Pseudo-elements</summary><ol><li><a href="/ja/docs/Web/CSS/::-moz-color-swatch">::-moz-color-swatch</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-moz-focus-inner">::-moz-focus-inner</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-moz-list-bullet">::-moz-list-bullet</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-moz-list-number">::-moz-list-number</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-moz-meter-bar">::-moz-meter-bar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-moz-progress-bar">::-moz-progress-bar</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-moz-range-progress">::-moz-range-progress</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-moz-range-thumb">::-moz-range-thumb</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-moz-range-track">::-moz-range-track</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-inner-spin-button">::-webkit-inner-spin-button</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-meter-bar">::-webkit-meter-bar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value">::-webkit-meter-even-less-good-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-meter-inner-element">::-webkit-meter-inner-element</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-meter-optimum-value">::-webkit-meter-optimum-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value">::-webkit-meter-suboptimum-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-progress-bar">::-webkit-progress-bar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-progress-inner-element">::-webkit-progress-inner-element</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-webkit-progress-value">::-webkit-progress-value</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-webkit-scrollbar">::-webkit-scrollbar</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-search-cancel-button">::-webkit-search-cancel-button</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::-webkit-search-results-button">::-webkit-search-results-button</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-webkit-slider-runnable-track">::-webkit-slider-runnable-track</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::-webkit-slider-thumb">::-webkit-slider-thumb</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/::after">::after (:after)</a></li><li><a href="/ja/docs/Web/CSS/::backdrop">::backdrop</a></li><li><a href="/ja/docs/Web/CSS/::before">::before (:before)</a></li><li><a href="/ja/docs/Web/CSS/::cue">::cue</a></li><li><a href="/ja/docs/Web/CSS/::file-selector-button">::file-selector-button</a></li><li><a href="/ja/docs/Web/CSS/::first-letter">::first-letter</a></li><li><a href="/ja/docs/Web/CSS/::first-line">::first-line (:first-line)</a></li><li><a href="/ja/docs/Web/CSS/::grammar-error">::grammar-error</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/::highlight">::highlight()</a></li><li><a href="/ja/docs/Web/CSS/::marker">::marker</a></li><li><a href="/ja/docs/Web/CSS/::part">::part()</a></li><li><a href="/ja/docs/Web/CSS/::placeholder">::placeholder</a></li><li><a href="/ja/docs/Web/CSS/::selection">::selection</a></li><li><a href="/ja/docs/Web/CSS/::slotted">::slotted()</a></li><li><a href="/ja/docs/Web/CSS/::spelling-error">::spelling-error</a></li><li><a href="/ja/docs/Web/CSS/::target-text">::target-text</a></li><li><a href="/ja/docs/Web/CSS/::view-transition">::view-transition</a></li><li><a href="/ja/docs/Web/CSS/::view-transition-group">::view-transition-group</a></li><li><a href="/ja/docs/Web/CSS/::view-transition-image-pair">::view-transition-image-pair</a></li><li><a href="/ja/docs/Web/CSS/::view-transition-new">::view-transition-new</a></li><li><a href="/ja/docs/Web/CSS/::view-transition-old">::view-transition-old</a></li></ol></details></li> <li class="toggle"><details><summary>At-rules</summary><ol><li><a href="/ja/docs/Web/CSS/@charset">@charset</a></li><li><a href="/ja/docs/Web/CSS/@color-profile">@color-profile</a></li><li><a href="/ja/docs/Web/CSS/@container">@container</a></li><li><a href="/ja/docs/Web/CSS/@counter-style">@counter-style</a></li><li><a href="/ja/docs/Web/CSS/@document">@document</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/@font-face">@font-face</a></li><li><a href="/ja/docs/Web/CSS/@font-feature-values">@font-feature-values</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/@font-palette-values">@font-palette-values</a></li><li><a href="/ja/docs/Web/CSS/@import">@import</a></li><li><a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a></li><li><a href="/ja/docs/Web/CSS/@layer">@layer</a></li><li><a href="/ja/docs/Web/CSS/@media">@media</a></li><li><a href="/ja/docs/Web/CSS/@namespace">@namespace</a></li><li><a href="/ja/docs/Web/CSS/@page">@page</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/@position-try">@position-try</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/@property">@property</a></li><li><a href="/ja/docs/Web/CSS/@scope">@scope</a></li><li><a href="/ja/docs/Web/CSS/@starting-style">@starting-style</a></li><li><a href="/ja/docs/Web/CSS/@supports">@supports</a></li><li><a href="/ja/docs/Web/CSS/@view-transition">@view-transition</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li></ol></details></li> <li class="toggle"><details><summary>Functions</summary><ol><li><a href="/ja/docs/Web/CSS/-moz-image-rect">-moz-image-rect</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/abs">abs()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/acos">acos()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/anchor-size">anchor-size()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/anchor">anchor()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/asin">asin()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/atan">atan()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/atan2">atan2()</a></li><li><a href="/ja/docs/Web/CSS/attr">attr()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/blur">blur()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/brightness">brightness()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/calc-size">calc-size()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/calc">calc()</a></li><li><a href="/ja/docs/Web/CSS/basic-shape/circle">circle()</a></li><li><a href="/ja/docs/Web/CSS/clamp">clamp()</a></li><li><a href="/ja/docs/Web/CSS/color_value/color-contrast">color-contrast()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/color_value/color-mix">color-mix()</a></li><li><a href="/ja/docs/Web/CSS/color_value/color">color()</a></li><li><a href="/ja/docs/Web/CSS/gradient/conic-gradient">conic-gradient()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/contrast">contrast()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/cos">cos()</a></li><li><a href="/ja/docs/Web/CSS/counter">counter()</a></li><li><a href="/ja/docs/Web/CSS/counters">counters()</a></li><li><a href="/ja/docs/Web/CSS/cross-fade">cross-fade()</a></li><li><a href="/ja/docs/Web/CSS/color_value/device-cmyk">device-cmyk()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></li><li><a href="/ja/docs/Web/CSS/element">element()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/basic-shape/ellipse">ellipse()</a></li><li><a href="/ja/docs/Web/CSS/env">env()</a></li><li><a href="/ja/docs/Web/CSS/exp">exp()</a></li><li><a href="/ja/docs/Web/CSS/fit-content_function">fit-content()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/grayscale">grayscale()</a></li><li><a href="/ja/docs/Web/CSS/color_value/hsl">hsl()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></li><li><a href="/ja/docs/Web/CSS/color_value/hwb">hwb()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/hypot">hypot()</a></li><li><a href="/ja/docs/Web/CSS/image/image-set">image-set()</a></li><li><a href="/ja/docs/Web/CSS/image/image">image()</a></li><li><a href="/ja/docs/Web/CSS/basic-shape/inset">inset()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/invert">invert()</a></li><li><a href="/ja/docs/Web/CSS/color_value/lab">lab()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/@import/layer_function">layer()</a></li><li><a href="/ja/docs/Web/CSS/color_value/lch">lch()</a></li><li><a href="/ja/docs/Web/CSS/color_value/light-dark">light-dark()</a></li><li><a href="/ja/docs/Web/CSS/gradient/linear-gradient">linear-gradient()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/log">log()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/matrix">matrix()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></li><li><a href="/ja/docs/Web/CSS/max">max()</a></li><li><a href="/ja/docs/Web/CSS/min">min()</a></li><li><a href="/ja/docs/Web/CSS/minmax">minmax()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/mod">mod()</a></li><li><a href="/ja/docs/Web/CSS/color_value/oklab">oklab()</a></li><li><a href="/ja/docs/Web/CSS/color_value/oklch">oklch()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/opacity">opacity()</a></li><li><a href="/ja/docs/Web/CSS/image/paint">paint()</a></li><li><a href="/ja/docs/Web/CSS/font-palette/palette-mix">palette-mix()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/basic-shape/path">path()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/perspective">perspective()</a></li><li><a href="/ja/docs/Web/CSS/basic-shape/polygon">polygon()</a></li><li><a href="/ja/docs/Web/CSS/pow">pow()</a></li><li><a href="/ja/docs/Web/CSS/gradient/radial-gradient">radial-gradient()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/ray">ray()</a></li><li><a href="/ja/docs/Web/CSS/basic-shape/rect">rect()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/rem">rem()</a></li><li><a href="/ja/docs/Web/CSS/repeat">repeat()</a></li><li><a href="/ja/docs/Web/CSS/gradient/repeating-conic-gradient">repeating-conic-gradient()</a></li><li><a href="/ja/docs/Web/CSS/gradient/repeating-linear-gradient">repeating-linear-gradient()</a></li><li><a href="/ja/docs/Web/CSS/gradient/repeating-radial-gradient">repeating-radial-gradient()</a></li><li><a href="/ja/docs/Web/CSS/color_value/rgb">rgb()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/rotateX">rotateX()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/rotateY">rotateY()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/round">round()</a></li><li><a href="/ja/docs/Web/CSS/filter-function/saturate">saturate()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/scale">scale()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/scaleX">scaleX()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/scaleY">scaleY()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></li><li><a href="/ja/docs/Web/CSS/animation-timeline/scroll">scroll()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/filter-function/sepia">sepia()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/basic-shape/shape">shape()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/sign">sign()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/sin">sin()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/skew">skew()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/skewX">skewX()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/skewY">skewY()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/sqrt">sqrt()</a></li><li><a href="/ja/docs/Web/CSS/symbols">symbols()</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/tan">tan()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/translate">translate()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/translate3d">translate3d()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/translateX">translateX()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/translateY">translateY()</a></li><li><a href="/ja/docs/Web/CSS/transform-function/translateZ">translateZ()</a></li><li><a href="/ja/docs/Web/CSS/url_function">url()</a></li><li><a href="/ja/docs/Web/CSS/var">var()</a></li><li><a href="/ja/docs/Web/CSS/animation-timeline/view">view()</a><abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr></li><li><a href="/ja/docs/Web/CSS/basic-shape/xywh">xywh()</a></li></ol></details></li> <li class="toggle"><details><summary>Types</summary><ol><li><a href="/ja/docs/Web/CSS/absolute-size"><absolute-size></a></li><li><a href="/ja/docs/Web/CSS/alpha-value"><alpha-value></a></li><li><a href="/ja/docs/Web/CSS/angle"><angle></a></li><li><a href="/ja/docs/Web/CSS/angle-percentage"><angle-percentage></a></li><li><a href="/ja/docs/Web/CSS/basic-shape"><basic-shape></a></li><li><a href="/ja/docs/Web/CSS/blend-mode"><blend-mode></a></li><li><a href="/ja/docs/Web/CSS/box-edge"><box-edge></a></li><li><a href="/ja/docs/Web/CSS/calc-keyword"><calc-keyword></a></li><li><a href="/ja/docs/Web/CSS/calc-sum"><calc-sum></a></li><li><a href="/ja/docs/Web/CSS/color-interpolation-method"><color-interpolation-method></a></li><li><a href="/ja/docs/Web/CSS/color_value"><color></a></li><li><a href="/ja/docs/Web/CSS/custom-ident"><custom-ident></a></li><li><a href="/ja/docs/Web/CSS/dashed-ident"><dashed-ident></a></li><li><a href="/ja/docs/Web/CSS/dimension"><dimension></a></li><li><a href="/ja/docs/Web/CSS/display-box"><display-box></a></li><li><a href="/ja/docs/Web/CSS/display-inside"><display-inside></a></li><li><a href="/ja/docs/Web/CSS/display-internal"><display-internal></a></li><li><a href="/ja/docs/Web/CSS/display-legacy"><display-legacy></a></li><li><a href="/ja/docs/Web/CSS/display-listitem"><display-listitem></a></li><li><a href="/ja/docs/Web/CSS/display-outside"><display-outside></a></li><li><a href="/ja/docs/Web/CSS/easing-function"><easing-function></a></li><li><a href="/ja/docs/Web/CSS/filter-function"><filter-function></a></li><li><a href="/ja/docs/Web/CSS/flex_value"><flex></a></li><li><a href="/ja/docs/Web/CSS/frequency"><frequency></a></li><li><a href="/ja/docs/Web/CSS/frequency-percentage"><frequency-percentage></a></li><li><a href="/ja/docs/Web/CSS/generic-family"><generic-family></a></li><li><a href="/ja/docs/Web/CSS/gradient"><gradient></a></li><li><a href="/ja/docs/Web/CSS/hex-color"><hex-color></a></li><li><a href="/ja/docs/Web/CSS/hue"><hue></a></li><li><a href="/ja/docs/Web/CSS/hue-interpolation-method"><hue-interpolation-method></a></li><li><a href="/ja/docs/Web/CSS/ident"><ident></a></li><li><a href="/ja/docs/Web/CSS/image"><image></a></li><li><a href="/ja/docs/Web/CSS/integer"><integer></a></li><li><a href="/ja/docs/Web/CSS/length"><length></a></li><li><a href="/ja/docs/Web/CSS/length-percentage"><length-percentage></a></li><li><a href="/ja/docs/Web/CSS/line-style"><line-style></a></li><li><a href="/ja/docs/Web/CSS/named-color"><named-color></a></li><li><a href="/ja/docs/Web/CSS/number"><number></a></li><li><a href="/ja/docs/Web/CSS/overflow_value"><overflow></a></li><li><a href="/ja/docs/Web/CSS/percentage"><percentage></a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/position-area_value"><position-area></a></li><li><a href="/ja/docs/Web/CSS/position_value"><position></a></li><li><a href="/ja/docs/Web/CSS/ratio"><ratio></a></li><li><a href="/ja/docs/Web/CSS/relative-size"><relative-size></a></li><li><a href="/ja/docs/Web/CSS/resolution"><resolution></a></li><li><a href="/ja/docs/Web/CSS/shape"><shape></a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">非推奨</span> </abbr></li><li><a href="/ja/docs/Web/CSS/string"><string></a></li><li><a href="/ja/docs/Web/CSS/system-color"><system-color></a></li><li><a href="/ja/docs/Web/CSS/time"><time></a></li><li><a href="/ja/docs/Web/CSS/time-percentage"><time-percentage></a></li><li><a href="/ja/docs/Web/CSS/transform-function"><transform-function></a></li><li><a href="/ja/docs/Web/CSS/url_value"><url></a></li></ol></details></li> <li class="section no-link">Guides</li> <li class="toggle"> <details> <summary>Animations</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations">Using CSS animations</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Backgrounds and Borders</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li> <li><a href="/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images">Resizing background images</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Box alignment</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables">Box alignment in block layout</a></li> <li><a href="/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox">Box alignment in flexbox</a></li> <li><a href="/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout">Box alignment in grid layout</a></li> <li><a href="/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout">Box alignment in multi-column layout</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Box model</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model">Introduction to the CSS basic box model</a></li> <li><a href="/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing">Mastering margin collapsing</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Colors</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_colors/Applying_color">Applying color to HTML elements</a></li> <li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/CSS_colors/Color_values">Color values</a></li> <li><a href="/ja/docs/Web/CSS/CSS_colors/Relative_colors">相対色の使用</a></li> <li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely">Using color wisely</a></li> <li><a href="/ja/docs/Web/Accessibility/Understanding_Colors_and_Luminance">Accessibility: Understanding colors and luminance</a></li> <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Accessibility: Color contrast</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Columns</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_multicol_layout/Basic_concepts">Basic concepts of Multicol</a></li> <li><a href="/ja/docs/Web/CSS/CSS_multicol_layout/Styling_columns">Styling columns</a></li> <li><a href="/ja/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns">Spanning and balancing</a></li> <li><a href="/ja/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout">Handling overflow in Multicol</a></li> <li><a href="/ja/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout">Content breaks in Multicol</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Conditional rules</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries">Using feature queries</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Containment</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_containment/Using_CSS_containment">CSS 拘束の使用</a></li> <li><a href="/ja/docs/Web/CSS/CSS_containment/Container_queries">CSS コンテナークエリー</a></li> <li><a href="/ja/docs/Web/CSS/CSS_containment/Container_size_and_style_queries">コンテナーのサイズおよびスタイルクエリーの使用</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>CSSOM view</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSSOM_view/Coordinate_systems">Coordinate systems</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>フレックスボックス</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox">Basic concepts of Flexbox</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods">Comparison with other layout methods</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container">Aligning items in a flex container</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items">Ordering flex items</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis">Controlling flex item ratios</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items">Mastering wrapping of flex items</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox">Typical use cases of Flexbox</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Flow layout</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow">Block and Inline layout in normal flow</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow">In flow and Out of flow</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts">Formatting contexts explained</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes">Flow layout and writing modes</a></li> <li><a href="/ja/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow">Flow layout and overflow</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Fonts</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide">OpenType font features guide</a></li> <li><a href="/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide">Variable fonts guide</a></li> </ol> </details> </li> <li class="toggle"> <details open=""> <summary>Grid</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout">Basics concepts of grid layout</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods">Relationship to other layout methods</a></li> <li><em><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" aria-current="page">Line-based placement</a></em></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas">Grid template areas</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines">Layout using named grid lines</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout">Auto-placement in grid layout</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout">Box alignment in grid layout</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes">Grids, logical values and writing modes</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility">Grid layout and accessibility</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement">Grid Layout and progressive enhancement</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids">Realizing common layouts using grids</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Subgrid">Subgrid</a></li> <li><a href="/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout">Masonry layout</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Images</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients">Using CSS gradients</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Lists and counters</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">Using CSS counters</a></li> <li><a href="/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation">Consistent list indentation</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Logical properties</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values">Basic concepts</a></li> <li><a href="/ja/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning">Floating and positioning</a></li> <li><a href="/ja/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding">Margins, borders and padding</a></li> <li><a href="/ja/docs/Web/CSS/CSS_logical_properties_and_values/Sizing">Sizing</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Math functions</summary> <ol> <li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions">Using CSS math functions</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Media queries</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries">Using media queries</a></li> <li><a href="/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility">Using media queries for accessibility</a></li> <li><a href="/ja/docs/Web/CSS/CSS_media_queries/Testing_media_queries">Testing media queries programmatically</a></li> <li><a href="/ja/docs/Web/CSS/CSS_media_queries/Printing">Printing</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Nesting style rules</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting">Using CSS nesting</a></li> <li><a href="/ja/docs/Web/CSS/CSS_nesting/Nesting_at-rules">Nesting at-rules</a></li> <li><a href="/ja/docs/Web/CSS/CSS_nesting/Nesting_and_specificity">Nesting and specificity</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>位置指定</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index">Understanding CSS z-index</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Scroll snap</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_scroll_snap/Basic_concepts">Basic concepts of scroll snap</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Shapes</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_shapes/Overview_of_shapes">Overview of shapes</a></li> <li><a href="/ja/docs/Web/CSS/CSS_shapes/From_box_values">Shapes from box values</a></li> <li><a href="/ja/docs/Web/CSS/CSS_shapes/Basic_shapes">Basic shapes</a></li> <li><a href="/ja/docs/Web/CSS/CSS_shapes/Shapes_from_images">Shapes from images</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Text</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_text/Wrapping_breaking_text">Wrapping and breaking text</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Transforms</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms">Using transforms</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Transitions</summary> <ol> <li><a href="/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions">Using transitions</a></li> </ol> </details> </li> <li class="section"><a href="/ja/docs/Web/CSS/Layout_cookbook">Layout cookbook</a></li> <li class="toggle"> <ol> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">Media objects</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split navigation</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb navigation</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/List_group_with_badges">List group with badges</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Card">Card</a></li> <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Grid wrapper</a></li> </ol> </li> <li class="section no-link">Tools</li> <li class="toggle"> <ol> <li><a href="/ja/docs/Web/CSS/CSS_colors/Color_picker_tool">Color picker</a></li> <li><a href="/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator">Box shadow generator</a></li> <li><a href="/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator">Border image generator</a></li> <li><a href="/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator">Border radius generator</a></li> </ol> </li> </ol> </div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#線番号によるアイテムの配置">線番号によるアイテムの配置</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grid-column_および_grid-row_の一括指定"><code>grid-column</code> および <code>grid-row</code> の一括指定</a></li><li class="document-toc-item "><a class="document-toc-link" href="#既定のスパン">既定のスパン</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grid-area_プロパティ"><code>grid-area</code> プロパティ</a></li><li class="document-toc-item "><a class="document-toc-link" href="#逆に数える">逆に数える</a></li><li class="document-toc-item "><a class="document-toc-link" href="#溝または路地">溝または路地</a></li><li class="document-toc-item "><a class="document-toc-link" href="#span_キーワードの使用"><code>span</code> キーワードの使用</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="ja"><header><h1>線に基づく配置を使用したグリッドレイアウト</h1></header><div class="section-content"><p><a href="/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout">グリッドレイアウトの基本概念</a>の記事では、線番号を使ってグリッド上にアイテムを配置する方法をご紹介しました。今回は、この仕様の基本的な機能について詳しくご紹介します。</p> <p>グリッドレイアウトを使用する際には、常に番号付きの線があるので、番号付きの線からグリッドの探求を始めるのが最も論理的な方法です。グリッドには列と行にそれぞれ番号が振られており、1 から順番に並んでいます。ただし、グリッドは文書の記述方法に応じて番号が振られます。英語のような左書きの言語では、行 1 はグリッドの左側にあります。アラビア語のように右書きの言語では、行 1 はグリッドの右端になります。書字方向とグリッドの相互作用については、後のガイドで詳しく説明します。</p></div><section aria-labelledby="基本的な例"><h3 id="基本的な例"><a href="#基本的な例">基本的な例</a></h3><div class="section-content"><p>非常に簡単な例として、3 本の列トラックと 3 本の行トラックを持つグリッドを考えてみましょう。これにより、各次元に 4 本の線ができます。</p> <p>グリッドコンテナーの中には、4 つの子要素があります。これらをグリッドに何も配置しなければ、自動配置ルールに従って、最初の 4 つのセルにそれぞれ 1 つのアイテムが配置されます。<a href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html" class="external" target="_blank">Firefox グリッドハイライター</a>を使うと、グリッドの列と行がどのように定義されているかがわかります。</p> <p> <img src="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement/highlighted_grid.png" alt="開発ツールで強調表示されたグリッド" width="900" height="296" loading="lazy"> </p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="A basic example sample" id="frame_a_basic_example" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="a_basic_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="線番号によるアイテムの配置"><h2 id="線番号によるアイテムの配置"><a href="#線番号によるアイテムの配置">線番号によるアイテムの配置</a></h2><div class="section-content"><p>これらのアイテムをグリッド上のどこに配置するかは、線ベースの配置を使って制御できます。最初のアイテムは、グリッドの左端から始まり、1 列分のトラックに広がるようにしたいと思います。また、グリッドの一番上にある 1 行目の線から始まり、4 行目の線までの範囲に配置します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } </code></pre></div> <p>一部のアイテムを配置すると、グリッド上の他のアイテムは自動配置ルールで配置され続けます。これがどのように機能するかは後のガイドで詳しく説明しますが、グリッドを操作していると、配置されていないアイテムがグリッドの空いているセルに配置されていくのがわかります。</p> <p>それぞれのアイテムを個別に扱うことで、 4 つのアイテムすべてを行と列のトラックにまたがって配置することができます。必要であれば、セルを空のままにすることもできます。グリッドレイアウトのとても良い点の 1 つは、マージンを使って余白を確保しなくても、デザインに余白を確保できることです。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .box4 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Positioning items by line number sample" id="frame_positioning_items_by_line_number" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="positioning_items_by_line_number" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="grid-column_および_grid-row_の一括指定"><h2 id="grid-column_および_grid-row_の一括指定"><a href="#grid-column_および_grid-row_の一括指定"><code>grid-column</code> および <code>grid-row</code> の一括指定</a></h2><div class="section-content"><p>ここでは、各アイテムを配置するためにかなり多くのコードを使用しています。当然ながら一括指定プロパティがあります。<a href="/ja/docs/Web/CSS/grid-column-start"><code>grid-column-start</code></a> と <a href="/ja/docs/Web/CSS/grid-column-end"><code>grid-column-end</code></a> のプロパティは併せて <a href="/ja/docs/Web/CSS/grid-column"><code>grid-column</code></a> となり、<a href="/ja/docs/Web/CSS/grid-row-start"><code>grid-row-start</code></a> と <a href="/ja/docs/Web/CSS/grid-row-end"><code>grid-row-end</code></a> は併せて <a href="/ja/docs/Web/CSS/grid-row"><code>grid-row</code></a> となります。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column: 1 / 2; grid-row: 1 / 4; } .box2 { grid-column: 3 / 4; grid-row: 1 / 3; } .box3 { grid-column: 2 / 3; grid-row: 1 / 2; } .box4 { grid-column: 2 / 4; grid-row: 3 / 4; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="The grid-column and grid-row shorthands sample" id="frame_the_grid-column_and_grid-row_shorthands" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="the_grid-column_and_grid-row_shorthands" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="既定のスパン"><h2 id="既定のスパン"><a href="#既定のスパン">既定のスパン</a></h2><div class="section-content"><p>上の例では、プロパティを実演するために、列と行のすべての端点を指定していますが、実際には、アイテムが 1 つのトラックにしか広がらない場合は、 <code>grid-column-end</code> や <code>grid-row-end</code> の値を省略することができます。グリッドの既定では、1 つのトラックにまたがるように設定されています。</p></div></section><section aria-labelledby="既定のスパンに個別指定で配置"><h3 id="既定のスパンに個別指定で配置"><a href="#既定のスパンに個別指定で配置">既定のスパンに個別指定で配置</a></h3><div class="section-content"><p>つまり、基本的な個別指定で例を表すと次のようになります。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-row-start: 1; grid-row-end: 3; } .box3 { grid-column-start: 2; grid-row-start: 1; } .box4 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Default spans with longhand placement sample" id="frame_default_spans_with_longhand_placement" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="default_spans_with_longhand_placement" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="一括指定の配置における既定のスパン"><h3 id="一括指定の配置における既定のスパン"><a href="#一括指定の配置における既定のスパン">一括指定の配置における既定のスパン</a></h3><div class="section-content"><p>一括指定は以下のコードのようになります。スラッシュはなく、2 番目の値は 1 つのトラックにまたがるアイテムのみになります。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column: 1; grid-row: 1 / 4; } .box2 { grid-column: 3; grid-row: 1 / 3; } .box3 { grid-column: 2; grid-row: 1; } .box4 { grid-column: 2 / 4; grid-row: 3; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Default spans with shorthand placement sample" id="frame_default_spans_with_shorthand_placement" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="default_spans_with_shorthand_placement" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="grid-area_プロパティ"><h2 id="grid-area_プロパティ"><a href="#grid-area_プロパティ"><code>grid-area</code> プロパティ</a></h2><div class="section-content"><p>さらに一歩進んで、各領域を単一のプロパティ <a href="/ja/docs/Web/CSS/grid-area"><code>grid-area</code></a> で定義することができます。 grid-area の値の順番は以下の通りです。</p> <ul> <li>grid-row-start</li> <li>grid-column-start</li> <li>grid-row-end</li> <li>grid-column-end</li> </ul> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { grid-area: 1 / 3 / 3 / 4; } .box3 { grid-area: 1 / 2 / 2 / 3; } .box4 { grid-area: 3 / 2 / 4 / 4; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="The grid-area property sample" id="frame_the_grid-area_property" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="the_grid-area_property" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>この <code>grid-area</code> の値の順序は、少し奇妙に思えるかもしれません。これは、例えば、マージンやパディングを一括指定として指定するときの順番とは逆です。これは、グリッドが CSS Writing Modes 仕様書で定義されているフローに関連した方向を使用しているためだと理解するとよいでしょう。グリッドと書字方向の連携については後述しますが、ここではフローに関連した方向の概念が 4 つあります。</p> <ul> <li>block-start</li> <li>block-end</li> <li>inline-start</li> <li>inline-end</li> </ul> <p>ここでは、左書きの言語である英語で考えてみます。 block-start はグリッドコンテナーの先頭の行の線で、 block-end はコンテナーの末尾の行の線です。inline-start は左の列の線で、inline-start は常に現在の書字方向でテキストが書かれる位置であり、inline-end はグリッドの最終列の線です。</p> <p><code>grid-area</code> プロパティを使用してグリッド領域を指定する際には、まず、両方の先頭の線、 <code>block-start</code> と <code>inline-start</code> を定義し、次に両方の末尾の線、 <code>block-end</code> と <code>inline-end</code> を定義します。top、right、bottom、leftという物理的なプロパティに慣れていると、最初は変わっているように見えますが、ウェブサイトが書字方向によって多数の方向があると考えれば、より納得がいきます。</p></div></section><section aria-labelledby="逆に数える"><h2 id="逆に数える"><a href="#逆に数える">逆に数える</a></h2><div class="section-content"><p>また、グリッドのブロックやインラインの端から逆に数えることもできます。英語の場合は、右の列の線と最後の行の線になります。これらの線は <code>-1</code> として扱われ、そこから逆算することができます。つまり、最後から 2 行目は <code>-2</code> となります。最後の線は、<em>明示的グリッド</em> （<code>grid-template-columns</code> と <code>grid-template-rows</code> で定義されるグリッド）の最後の線であり、その外で追加された<em>暗黙的グリッド</em>である行や列は考慮されないことに注意しましょう。</p> <p>次の例では、アイテムを配置する際に、グリッドの右と下から行うことで、それまでのレイアウトを反転させています。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; grid-row-end: -4; } .box2 { grid-column-start: -3; grid-column-end: -4; grid-row-start: -1; grid-row-end: -3; } .box3 { grid-column-start: -2; grid-column-end: -3; grid-row-start: -1; grid-row-end: -2; } .box4 { grid-column-start: -2; grid-column-end: -4; grid-row-start: -3; grid-row-end: -4; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Counting backwards sample" id="frame_counting_backwards" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="counting_backwards" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="グリッドをまたがってアイテムを伸ばす"><h3 id="グリッドをまたがってアイテムを伸ばす"><a href="#グリッドをまたがってアイテムを伸ばす">グリッドをまたがってアイテムを伸ばす</a></h3><div class="section-content"><p>グリッドの先頭と末尾の線を指定することができると、アイテムをグリッド全体に引き伸ばせるので便利です。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.item { grid-column: 1 / -1; } </code></pre></div></div></section><section aria-labelledby="溝または路地"><h2 id="溝または路地"><a href="#溝または路地">溝または路地</a></h2><div class="section-content"><p>CSS Grid 仕様書では、<a href="/ja/docs/Web/CSS/column-gap"><code>column-gap</code></a> と <a href="/ja/docs/Web/CSS/row-gap"><code>row-gap</code></a> プロパティを使って、列と行のトラックの間に溝を追加する機能があります。これらは、段組みレイアウトにおける <a href="/ja/docs/Web/CSS/column-gap"><code>column-gap</code></a> プロパティと同様の働きをする間隔を指定します。</p> <div class="notecard note"> <p><strong>メモ:</strong> グリッドがブラウザーに初めて搭載されたとき、<a href="/ja/docs/Web/CSS/column-gap"><code>column-gap</code></a>、<a href="/ja/docs/Web/CSS/row-gap"><code>row-gap</code></a>、<a href="/ja/docs/Web/CSS/gap"><code>gap</code></a> プロパティには、それぞれ <code>grid-</code> という接頭辞が付けられ、<code>grid-column-gap</code>、<code>grid-row-gap</code>、<code>grid-gap</code> となっていました。</p> <p>ブラウザーのレンダリングエンジンはこの接頭辞を削除するように更新されていますが、接頭辞付きのバージョンは別名として維持されるため、安全に使用することができます。</p> </div> <p>間隔はグリッドのトラック間にのみ現れ、コンテナーの上下左右に余白を追加することはありません。これらのプロパティをグリッドコンテナーに使用することで、先ほどの例に間隔を追加することができます。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column: 1; grid-row: 1 / 4; } .box2 { grid-column: 3; grid-row: 1 / 3; } .box3 { grid-column: 2; grid-row: 1; } .box4 { grid-column: 2 / 4; grid-row: 3; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); column-gap: 20px; row-gap: 1em; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Gutters or Alleys sample" id="frame_gutters_or_alleys" width="300" height="350" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="gutters_or_alleys" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="gap_一括指定"><h3 id="gap_一括指定"><a href="#gap_一括指定">gap 一括指定</a></h3><div class="section-content"><p>この 2 つのプロパティは、 <a href="/ja/docs/Web/CSS/gap"><code>gap</code></a> という省略形で表すこともできます。<code>gap</code> に 1 つの値だけを指定すると、列と行の両方の間隔に適用されます。2 つの値を指定した場合は、1 つ目の値が <code>row-gap</code> に、2 つ目の値が <code>column-gap</code> に使用されます。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 1em 20px; } </code></pre></div> <p>線ベースのアイテムの配置において、間隔はあたかも線の幅が増えたかのように機能します。その線から始まるものは間隔の後に始まり、間隔を処理したり、間隔に何かを配置することはできません。通常のトラックのように動作するガッターが必要な場合は、もちろん、そのためのトラックを定義することができます。</p></div></section><section aria-labelledby="span_キーワードの使用"><h2 id="span_キーワードの使用"><a href="#span_キーワードの使用"><code>span</code> キーワードの使用</a></h2><div class="section-content"><p>先頭の線と末尾の線を番号で指定するだけでなく、先頭の線を指定してから領域をまたぐトラックの数を指定することもできます。</p> <div class="code-example"><pre class="brush: css hidden notranslate"><code>* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column: 1; grid-row: 1 / span 3; } .box2 { grid-column: 3; grid-row: 1 / span 2; } .box3 { grid-column: 2; grid-row: 1; } .box4 { grid-column: 2 / span 2; grid-row: 3; } </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Using the span keyword sample" id="frame_using_the_span_keyword" width="300" height="330" src="about:blank" data-live-path="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement" data-live-id="using_the_span_keyword" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>また、<code>grid-row-start</code>/<code>grid-row-end</code> や <code>grid-column-start</code>/<code>grid-column-end</code> の値に <code>span</code> キーワードを使用することもできます。次の 2 つの例では、同じグリッド領域を作成します。最初の例では、先頭の行の線を設定し、次に末尾の行を設定し、3 本にまたがるようにしたいと説明しています。領域は 1 本目から始まり、3 本目から 4 本目までとなります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; } </code></pre></div> <p>2 つ目の例では、アイテムを終了させたい末尾の行の線を指定し、先頭の線を <code>span 3</code> と設定しています。これは、アイテムが指定された行の線から上方に広がる必要があることを意味しています。領域は 4 本目から始まり、 1 本目まで 3 本にまたがっています。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box1 { grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; } </code></pre></div> <p>グリッドにおける線ベースの配置に慣れるために、列数の異なるグリッドにアイテムを配置して、一般的なレイアウトをいくつか作ってみましょう。すべてのアイテムを配置しなくても、残ったアイテムは自動配置のルールに従って配置されることを覚えておいてください。このようにして、思い通りのレイアウトになることもありますが、思いがけないところにアイテムが表示されている場合は、そのアイテムの位置が設定されているかどうかを確認してください。</p> <p>また、このように明示的に配置すると、グリッド上のアイテム同士が重なってしまうことがあります。いい効果が得られることもありますが、先頭の線や末尾の線の指定を間違えると、間違って重なってしまうこともあります。<a href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html" class="external" target="_blank">Firefox グリッドハイライター</a>は、特にグリッドが非常に複雑な場合、学習の際にとても役立ちます。</p></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-07-28T12:52:30.000Z">2024年7月28日</time> by <a href="/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md?plain=1" title="Folder: ja/web/css/css_grid_layout/grid_layout_using_line-based_placement (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-ja.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FCSS_grid_layout%2FGrid_layout_using_line-based_placement&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60ja%2Fweb%2Fcss%2Fcss_grid_layout%2Fgrid_layout_using_line-based_placement%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FCSS_grid_layout%2FGrid_layout_using_line-based_placement%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Fweb%2Fcss%2Fcss_grid_layout%2Fgrid_layout_using_line-based_placement%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fbdaf9eadc7f695cc5d61e564e1a4d586de4f4675%0A*+Document+last+modified%3A+2024-07-28T12%3A52%3A30.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/ja/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"線に基づく配置を使用したグリッドレイアウト","mdn_url":"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement","locale":"ja","native":"日本語","sidebarHTML":"\n\n<ol>\n <li class=\"section\"><a href=\"/ja/docs/Web/CSS\">CSS</a></li>\n <li class=\"section\"><a href=\"/ja/docs/Learn/CSS\">チュートリアル</a></li>\n <li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS の基本</a></li>\n <li class=\"toggle\">\n <details>\n <summary>CSS の第一歩</summary>\n <ol>\n <li><a href=\"/ja/docs/Learn/CSS/First_steps\">CSS の第一歩の概要</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/First_steps/What_is_CSS\">CSS とは何か</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/First_steps/Getting_started\">CSS 入門</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured\">CSS の全体像</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/First_steps/How_CSS_works\">CSS の働き</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/First_steps/Styling_a_biography_page\">評価課題: 経歴ページのスタイル設定</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>CSS の構成要素</summary>\n <ol>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks\">CSS の構成要素の概要</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors\">CSS セレクター</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">Type, class, and ID selectors</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">Attribute selectors</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">Pseudo-classes and pseudo-elements</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">Combinators</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">カスケードと継承</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Cascade_layers\">Cascade layers</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/The_box_model\">ボックスモデル</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">背景と境界</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">書字方向の操作</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Overflowing_content\">内容のはみ出し</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS の値と単位</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">CSS における大きさの指定</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">画像、メディア、フォームの要素</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Styling_tables\">表のスタイル付け</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS\">CSS のデバッグ</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Organizing\">CSS の整理</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">評価課題: CSS の基本的な理解度</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">評価課題: 素敵なレターヘッドの便箋の作成</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">評価課題: かっこいいボックス</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>テキストの装飾</summary>\n <ol>\n <li><a href=\"/ja/docs/Learn/CSS/Styling_text\">テキストの装飾の概要</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Styling_text/Fundamentals\">基本的なテキストとフォントの装飾</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Styling_text/Styling_lists\">リストの装飾</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Styling_text/Styling_links\">リンクの装飾</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Styling_text/Web_fonts\">ウェブフォント</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">評価課題: コミュニティスクールのホームページの組版</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>CSS レイアウト</summary>\n <ol>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout\">CSS レイアウトの概要</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Introduction\">CSS レイアウト入門</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Normal_Flow\">通常フロー</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Flexbox\">フレックスボックス</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Grids\">グリッド</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Floats\">浮動</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Positioning\">位置指定</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">段組みレイアウト</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Media_queries\">メディアクエリーの初心者向けガイド</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">古いレイアウト方法</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">古いブラウザーの対応</a></li>\n <li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">評価課題: 基礎的なレイアウトの理解</a></li>\n </ol>\n </details>\n </li>\n\n <li class=\"section\"><a href=\"/ja/docs/Web/CSS/Reference\">Reference</a></li>\n <li class=\"toggle\"><details><summary>Modules</summary><ol><li><a href=\"/ja/docs/Web/CSS/CSS_anchor_positioning\">CSS アンカー位置指定</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_animations\">CSS アニメーション</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_backgrounds_and_borders\">CSS 背景と境界</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_basic_user_interface\">CSS 基本ユーザーインターフェイス</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_box_alignment\">CSS ボックス配置</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_box_model\">CSS ボックスモデル</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_box_sizing\">CSS ボックスサイズ指定</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_cascade\">CSS カスケードと継承</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_cascading_variables\">カスケード変数のための CSS カスタムプロパティ</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_color_adjustment\">CSS 色調整</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_colors\">CSS 色</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_compositing_and_blending\">CSS 合成と混合</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_conditional_rules\">CSS 条件付き規則</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_containment\">CSS 拘束</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_counter_styles\">CSS カウンタースタイル</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_display\">CSS 表示方法</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_filter_effects\">フィルター効果</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout\">CSS フレックスボックスレイアウト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_font_loading\">CSS フォント読み込み</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_fonts\">CSS フォント</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_fragmentation\">CSS 断片化</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_generated_content\">CSS 生成コンテンツ</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout\">CSS グリッドレイアウト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_images\">CSS 画像</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_inline_layout\">CSS インラインレイアウト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_lists\">CSS リスト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_logical_properties_and_values\">CSS 論理的プロパティと値</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_masking\">CSS マスク</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_media_queries\">メディアクエリー</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_motion_path\">CSS モーションパス</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_multicol_layout\">CSS 段組みレイアウト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_namespaces\">CSS 名前空間</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_nesting\">CSS 入れ子</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_overflow\">CSS オーバーフロー</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_overscroll_behavior\">CSS オーバースクロール動作</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_paged_media\">CSS ページメディア</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_positioned_layout\">CSS 位置指定レイアウト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_properties_and_values_API\">CSS プロパティと値 API</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_pseudo-elements\">CSS 擬似要素</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_ruby_layout\">CSS ルビレイアウト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_scoping\">CSS スコープ</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_scroll-driven_animations\">CSS スクロール駆動アニメーション</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_scroll_snap\">CSS スクロールスナップ</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_scrollbars_styling\">CSS スクロールバースタイル設定</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_selectors\">CSS セレクター</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/CSS_shadow_parts\">CSS shadow parts</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_shapes\">CSS シェイプ</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_syntax\">CSS 構文</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_table\">CSS 表</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_text\">CSS テキスト</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_text_decoration\">CSS テキスト装飾</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_transforms\">CSS 座標変換</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_transitions\">CSS トランジション</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_view_transitions\">CSS ビュー遷移</a></li><li><a href=\"/ja/docs/Web/CSS/CSS_writing_modes\">CSS 書字方向</a></li><li><a href=\"/ja/docs/Web/CSS/CSSOM_view\">CSSOM View</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Properties</summary><ol><li class=\"toggle\"><details><summary>-moz-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/-moz-float-edge\">-moz-float-edge</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-moz-force-broken-image-icon\">-moz-force-broken-image-icon</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-moz-image-region\">-moz-image-region</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-moz-orient\">-moz-orient</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-moz-user-focus\">-moz-user-focus</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-moz-user-input\">-moz-user-input</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>-webkit-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/-webkit-border-before\">-webkit-border-before</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-box-reflect\">-webkit-box-reflect</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-line-clamp\">-webkit-line-clamp</a></li><li><a href=\"/ja/docs/Web/CSS/-webkit-mask-box-image\">-webkit-mask-box-image</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-mask-composite\">-webkit-mask-composite</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-mask-position-x\">-webkit-mask-position-x</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-mask-position-y\">-webkit-mask-position-y</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-mask-repeat-x\">-webkit-mask-repeat-x</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-mask-repeat-y\">-webkit-mask-repeat-y</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-tap-highlight-color\">-webkit-tap-highlight-color</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-text-fill-color\">-webkit-text-fill-color</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/-webkit-text-security\">-webkit-text-security</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/-webkit-text-stroke\">-webkit-text-stroke</a></li><li><a href=\"/ja/docs/Web/CSS/-webkit-text-stroke-color\">-webkit-text-stroke-color</a></li><li><a href=\"/ja/docs/Web/CSS/-webkit-text-stroke-width\">-webkit-text-stroke-width</a></li><li><a href=\"/ja/docs/Web/CSS/-webkit-touch-callout\">-webkit-touch-callout</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/accent-color\">accent-color</a></li><li class=\"toggle\"><details><summary>align-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/align-content\">align-content</a></li><li><a href=\"/ja/docs/Web/CSS/align-items\">align-items</a></li><li><a href=\"/ja/docs/Web/CSS/align-self\">align-self</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/all\">all</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/anchor-name\">anchor-name</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li class=\"toggle\"><details><summary>animation-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/animation\">animation</a></li><li><a href=\"/ja/docs/Web/CSS/animation-composition\">animation-composition</a></li><li><a href=\"/ja/docs/Web/CSS/animation-delay\">animation-delay</a></li><li><a href=\"/ja/docs/Web/CSS/animation-direction\">animation-direction</a></li><li><a href=\"/ja/docs/Web/CSS/animation-duration\">animation-duration</a></li><li><a href=\"/ja/docs/Web/CSS/animation-fill-mode\">animation-fill-mode</a></li><li><a href=\"/ja/docs/Web/CSS/animation-iteration-count\">animation-iteration-count</a></li><li><a href=\"/ja/docs/Web/CSS/animation-name\">animation-name</a></li><li><a href=\"/ja/docs/Web/CSS/animation-play-state\">animation-play-state</a></li><li><a href=\"/ja/docs/Web/CSS/animation-range\">animation-range</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/animation-range-end\">animation-range-end</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/animation-range-start\">animation-range-start</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/animation-timeline\">animation-timeline</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/animation-timing-function\">animation-timing-function</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/appearance\">appearance</a></li><li><a href=\"/ja/docs/Web/CSS/aspect-ratio\">aspect-ratio</a></li><li><a href=\"/ja/docs/Web/CSS/backdrop-filter\">backdrop-filter</a></li><li><a href=\"/ja/docs/Web/CSS/backface-visibility\">backface-visibility</a></li><li class=\"toggle\"><details><summary>background-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/background\">background</a></li><li><a href=\"/ja/docs/Web/CSS/background-attachment\">background-attachment</a></li><li><a href=\"/ja/docs/Web/CSS/background-blend-mode\">background-blend-mode</a></li><li><a href=\"/ja/docs/Web/CSS/background-clip\">background-clip</a></li><li><a href=\"/ja/docs/Web/CSS/background-color\">background-color</a></li><li><a href=\"/ja/docs/Web/CSS/background-image\">background-image</a></li><li><a href=\"/ja/docs/Web/CSS/background-origin\">background-origin</a></li><li><a href=\"/ja/docs/Web/CSS/background-position\">background-position</a></li><li><a href=\"/ja/docs/Web/CSS/background-position-x\">background-position-x</a></li><li><a href=\"/ja/docs/Web/CSS/background-position-y\">background-position-y</a></li><li><a href=\"/ja/docs/Web/CSS/background-repeat\">background-repeat</a></li><li><a href=\"/ja/docs/Web/CSS/background-size\">background-size</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/block-size\">block-size</a></li><li class=\"toggle\"><details><summary>border-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/border\">border</a></li><li><a href=\"/ja/docs/Web/CSS/border-block\">border-block</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-color\">border-block-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-end\">border-block-end</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-end-color\">border-block-end-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-end-style\">border-block-end-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-end-width\">border-block-end-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-start\">border-block-start</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-start-color\">border-block-start-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-start-style\">border-block-start-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-start-width\">border-block-start-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-style\">border-block-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-block-width\">border-block-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-bottom\">border-bottom</a></li><li><a href=\"/ja/docs/Web/CSS/border-bottom-color\">border-bottom-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-bottom-left-radius\">border-bottom-left-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-bottom-right-radius\">border-bottom-right-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-bottom-style\">border-bottom-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-bottom-width\">border-bottom-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-collapse\">border-collapse</a></li><li><a href=\"/ja/docs/Web/CSS/border-color\">border-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-end-end-radius\">border-end-end-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-end-start-radius\">border-end-start-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-image\">border-image</a></li><li><a href=\"/ja/docs/Web/CSS/border-image-outset\">border-image-outset</a></li><li><a href=\"/ja/docs/Web/CSS/border-image-repeat\">border-image-repeat</a></li><li><a href=\"/ja/docs/Web/CSS/border-image-slice\">border-image-slice</a></li><li><a href=\"/ja/docs/Web/CSS/border-image-source\">border-image-source</a></li><li><a href=\"/ja/docs/Web/CSS/border-image-width\">border-image-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline\">border-inline</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-color\">border-inline-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-end\">border-inline-end</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-end-color\">border-inline-end-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-end-style\">border-inline-end-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-end-width\">border-inline-end-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-start\">border-inline-start</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-start-color\">border-inline-start-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-start-style\">border-inline-start-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-start-width\">border-inline-start-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-style\">border-inline-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-inline-width\">border-inline-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-left\">border-left</a></li><li><a href=\"/ja/docs/Web/CSS/border-left-color\">border-left-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-left-style\">border-left-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-left-width\">border-left-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-radius\">border-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-right\">border-right</a></li><li><a href=\"/ja/docs/Web/CSS/border-right-color\">border-right-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-right-style\">border-right-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-right-width\">border-right-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-spacing\">border-spacing</a></li><li><a href=\"/ja/docs/Web/CSS/border-start-end-radius\">border-start-end-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-start-start-radius\">border-start-start-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-style\">border-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-top\">border-top</a></li><li><a href=\"/ja/docs/Web/CSS/border-top-color\">border-top-color</a></li><li><a href=\"/ja/docs/Web/CSS/border-top-left-radius\">border-top-left-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-top-right-radius\">border-top-right-radius</a></li><li><a href=\"/ja/docs/Web/CSS/border-top-style\">border-top-style</a></li><li><a href=\"/ja/docs/Web/CSS/border-top-width\">border-top-width</a></li><li><a href=\"/ja/docs/Web/CSS/border-width\">border-width</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/bottom\">bottom</a></li><li class=\"toggle\"><details><summary>box-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/box-align\">box-align</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-decoration-break\">box-decoration-break</a></li><li><a href=\"/ja/docs/Web/CSS/box-direction\">box-direction</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-flex\">box-flex</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-flex-group\">box-flex-group</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-lines\">box-lines</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-ordinal-group\">box-ordinal-group</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-orient\">box-orient</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-pack\">box-pack</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/box-shadow\">box-shadow</a></li><li><a href=\"/ja/docs/Web/CSS/box-sizing\">box-sizing</a></li></ol></details></li><li class=\"toggle\"><details><summary>break-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/break-after\">break-after</a></li><li><a href=\"/ja/docs/Web/CSS/break-before\">break-before</a></li><li><a href=\"/ja/docs/Web/CSS/break-inside\">break-inside</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/caption-side\">caption-side</a></li><li><a href=\"/ja/docs/Web/CSS/caret-color\">caret-color</a></li><li><a href=\"/ja/docs/Web/CSS/clear\">clear</a></li><li class=\"toggle\"><details><summary>clip-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/clip\">clip</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/clip-path\">clip-path</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/clip-rule\">clip-rule</a></li></ol></details></li><li class=\"toggle\"><details><summary>color-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/color\">color</a></li><li><a href=\"/ja/docs/Web/CSS/color-interpolation\">color-interpolation</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/color-interpolation-filters\">color-interpolation-filters</a></li><li><a href=\"/ja/docs/Web/CSS/color-scheme\">color-scheme</a></li></ol></details></li><li class=\"toggle\"><details><summary>column-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/column-count\">column-count</a></li><li><a href=\"/ja/docs/Web/CSS/column-fill\">column-fill</a></li><li><a href=\"/ja/docs/Web/CSS/column-gap\">column-gap</a></li><li><a href=\"/ja/docs/Web/CSS/column-rule\">column-rule</a></li><li><a href=\"/ja/docs/Web/CSS/column-rule-color\">column-rule-color</a></li><li><a href=\"/ja/docs/Web/CSS/column-rule-style\">column-rule-style</a></li><li><a href=\"/ja/docs/Web/CSS/column-rule-width\">column-rule-width</a></li><li><a href=\"/ja/docs/Web/CSS/column-span\">column-span</a></li><li><a href=\"/ja/docs/Web/CSS/column-width\">column-width</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/columns\">columns</a></li><li class=\"toggle\"><details><summary>contain-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/contain\">contain</a></li><li><a href=\"/ja/docs/Web/CSS/contain-intrinsic-block-size\">contain-intrinsic-block-size</a></li><li><a href=\"/ja/docs/Web/CSS/contain-intrinsic-height\">contain-intrinsic-height</a></li><li><a href=\"/ja/docs/Web/CSS/contain-intrinsic-inline-size\">contain-intrinsic-inline-size</a></li><li><a href=\"/ja/docs/Web/CSS/contain-intrinsic-size\">contain-intrinsic-size</a></li><li><a href=\"/ja/docs/Web/CSS/contain-intrinsic-width\">contain-intrinsic-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>container-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/container\">container</a></li><li><a href=\"/ja/docs/Web/CSS/container-name\">container-name</a></li><li><a href=\"/ja/docs/Web/CSS/container-type\">container-type</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/content\">content</a></li><li><a href=\"/ja/docs/Web/CSS/content-visibility\">content-visibility</a></li><li class=\"toggle\"><details><summary>counter-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/counter-increment\">counter-increment</a></li><li><a href=\"/ja/docs/Web/CSS/counter-reset\">counter-reset</a></li><li><a href=\"/ja/docs/Web/CSS/counter-set\">counter-set</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/cursor\">cursor</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/cx\">cx</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/cy\">cy</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/d\">d</a></li><li><a href=\"/ja/docs/Web/CSS/direction\">direction</a></li><li><a href=\"/ja/docs/Web/CSS/display\">display</a></li><li><a href=\"/ja/docs/Web/CSS/dominant-baseline\">dominant-baseline</a></li><li><a href=\"/ja/docs/Web/CSS/empty-cells\">empty-cells</a></li><li><a href=\"/ja/docs/Web/CSS/field-sizing\">field-sizing</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li class=\"toggle\"><details><summary>fill-*</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/fill\">fill</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/fill-opacity\">fill-opacity</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/fill-rule\">fill-rule</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/filter\">filter</a></li><li class=\"toggle\"><details><summary>flex-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/flex\">flex</a></li><li><a href=\"/ja/docs/Web/CSS/flex-basis\">flex-basis</a></li><li><a href=\"/ja/docs/Web/CSS/flex-direction\">flex-direction</a></li><li><a href=\"/ja/docs/Web/CSS/flex-flow\">flex-flow</a></li><li><a href=\"/ja/docs/Web/CSS/flex-grow\">flex-grow</a></li><li><a href=\"/ja/docs/Web/CSS/flex-shrink\">flex-shrink</a></li><li><a href=\"/ja/docs/Web/CSS/flex-wrap\">flex-wrap</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/float\">float</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/flood-color\">flood-color</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/flood-opacity\">flood-opacity</a></li><li class=\"toggle\"><details><summary>font-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/font\">font</a></li><li><a href=\"/ja/docs/Web/CSS/font-family\">font-family</a></li><li><a href=\"/ja/docs/Web/CSS/font-feature-settings\">font-feature-settings</a></li><li><a href=\"/ja/docs/Web/CSS/font-kerning\">font-kerning</a></li><li><a href=\"/ja/docs/Web/CSS/font-language-override\">font-language-override</a></li><li><a href=\"/ja/docs/Web/CSS/font-optical-sizing\">font-optical-sizing</a></li><li><a href=\"/ja/docs/Web/CSS/font-palette\">font-palette</a></li><li><a href=\"/ja/docs/Web/CSS/font-size\">font-size</a></li><li><a href=\"/ja/docs/Web/CSS/font-size-adjust\">font-size-adjust</a></li><li><a href=\"/ja/docs/Web/CSS/font-smooth\">font-smooth</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/font-stretch\">font-stretch</a></li><li><a href=\"/ja/docs/Web/CSS/font-style\">font-style</a></li><li><a href=\"/ja/docs/Web/CSS/font-synthesis\">font-synthesis</a></li><li><a href=\"/ja/docs/Web/CSS/font-synthesis-position\">font-synthesis-position</a></li><li><a href=\"/ja/docs/Web/CSS/font-synthesis-small-caps\">font-synthesis-small-caps</a></li><li><a href=\"/ja/docs/Web/CSS/font-synthesis-style\">font-synthesis-style</a></li><li><a href=\"/ja/docs/Web/CSS/font-synthesis-weight\">font-synthesis-weight</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant\">font-variant</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-alternates\">font-variant-alternates</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-caps\">font-variant-caps</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-east-asian\">font-variant-east-asian</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-emoji\">font-variant-emoji</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-ligatures\">font-variant-ligatures</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-numeric\">font-variant-numeric</a></li><li><a href=\"/ja/docs/Web/CSS/font-variant-position\">font-variant-position</a></li><li><a href=\"/ja/docs/Web/CSS/font-variation-settings\">font-variation-settings</a></li><li><a href=\"/ja/docs/Web/CSS/font-weight\">font-weight</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/forced-color-adjust\">forced-color-adjust</a></li><li><a href=\"/ja/docs/Web/CSS/gap\">gap</a></li><li class=\"toggle\"><details><summary>grid-*</summary><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-start\">grid-column-start</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-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></details></li><li><a href=\"/ja/docs/Web/CSS/hanging-punctuation\">hanging-punctuation</a></li><li><a href=\"/ja/docs/Web/CSS/height\">height</a></li><li><a href=\"/ja/docs/Web/CSS/hyphenate-character\">hyphenate-character</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/hyphenate-limit-chars\">hyphenate-limit-chars</a></li><li><a href=\"/ja/docs/Web/CSS/hyphens\">hyphens</a></li><li class=\"toggle\"><details><summary>image-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/image-orientation\">image-orientation</a></li><li><a href=\"/ja/docs/Web/CSS/image-rendering\">image-rendering</a></li><li><a href=\"/ja/docs/Web/CSS/image-resolution\">image-resolution</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/initial-letter\">initial-letter</a></li><li><a href=\"/ja/docs/Web/CSS/inline-size\">inline-size</a></li><li class=\"toggle\"><details><summary>inset-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/inset\">inset</a></li><li><a href=\"/ja/docs/Web/CSS/inset-block\">inset-block</a></li><li><a href=\"/ja/docs/Web/CSS/inset-block-end\">inset-block-end</a></li><li><a href=\"/ja/docs/Web/CSS/inset-block-start\">inset-block-start</a></li><li><a href=\"/ja/docs/Web/CSS/inset-inline\">inset-inline</a></li><li><a href=\"/ja/docs/Web/CSS/inset-inline-end\">inset-inline-end</a></li><li><a href=\"/ja/docs/Web/CSS/inset-inline-start\">inset-inline-start</a></li></ol></details></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/interpolate-size\">interpolate-size</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/isolation\">isolation</a></li><li class=\"toggle\"><details><summary>justify-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/justify-content\">justify-content</a></li><li><a href=\"/ja/docs/Web/CSS/justify-items\">justify-items</a></li><li><a href=\"/ja/docs/Web/CSS/justify-self\">justify-self</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/left\">left</a></li><li><a href=\"/ja/docs/Web/CSS/letter-spacing\">letter-spacing</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/lighting-color\">lighting-color</a></li><li class=\"toggle\"><details><summary>line-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/line-break\">line-break</a></li><li><a href=\"/ja/docs/Web/CSS/line-height\">line-height</a></li><li><a href=\"/ja/docs/Web/CSS/line-height-step\">line-height-step</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>list-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/list-style\">list-style</a></li><li><a href=\"/ja/docs/Web/CSS/list-style-image\">list-style-image</a></li><li><a href=\"/ja/docs/Web/CSS/list-style-position\">list-style-position</a></li><li><a href=\"/ja/docs/Web/CSS/list-style-type\">list-style-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>margin-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/margin\">margin</a></li><li><a href=\"/ja/docs/Web/CSS/margin-block\">margin-block</a></li><li><a href=\"/ja/docs/Web/CSS/margin-block-end\">margin-block-end</a></li><li><a href=\"/ja/docs/Web/CSS/margin-block-start\">margin-block-start</a></li><li><a href=\"/ja/docs/Web/CSS/margin-bottom\">margin-bottom</a></li><li><a href=\"/ja/docs/Web/CSS/margin-inline\">margin-inline</a></li><li><a href=\"/ja/docs/Web/CSS/margin-inline-end\">margin-inline-end</a></li><li><a href=\"/ja/docs/Web/CSS/margin-inline-start\">margin-inline-start</a></li><li><a href=\"/ja/docs/Web/CSS/margin-left\">margin-left</a></li><li><a href=\"/ja/docs/Web/CSS/margin-right\">margin-right</a></li><li><a href=\"/ja/docs/Web/CSS/margin-top\">margin-top</a></li><li><a href=\"/ja/docs/Web/CSS/margin-trim\">margin-trim</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>marker-*</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/marker\">marker</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/marker-end\">marker-end</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/marker-mid\">marker-mid</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/marker-start\">marker-start</a></li></ol></details></li><li class=\"toggle\"><details><summary>mask-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/mask\">mask</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border\">mask-border</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border-mode\">mask-border-mode</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border-outset\">mask-border-outset</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border-repeat\">mask-border-repeat</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border-slice\">mask-border-slice</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border-source\">mask-border-source</a></li><li><a href=\"/ja/docs/Web/CSS/mask-border-width\">mask-border-width</a></li><li><a href=\"/ja/docs/Web/CSS/mask-clip\">mask-clip</a></li><li><a href=\"/ja/docs/Web/CSS/mask-composite\">mask-composite</a></li><li><a href=\"/ja/docs/Web/CSS/mask-image\">mask-image</a></li><li><a href=\"/ja/docs/Web/CSS/mask-mode\">mask-mode</a></li><li><a href=\"/ja/docs/Web/CSS/mask-origin\">mask-origin</a></li><li><a href=\"/ja/docs/Web/CSS/mask-position\">mask-position</a></li><li><a href=\"/ja/docs/Web/CSS/mask-repeat\">mask-repeat</a></li><li><a href=\"/ja/docs/Web/CSS/mask-size\">mask-size</a></li><li><a href=\"/ja/docs/Web/CSS/mask-type\">mask-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>math-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/math-depth\">math-depth</a></li><li><a href=\"/ja/docs/Web/CSS/math-shift\">math-shift</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/math-style\">math-style</a></li></ol></details></li><li class=\"toggle\"><details><summary>max-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/max-block-size\">max-block-size</a></li><li><a href=\"/ja/docs/Web/CSS/max-height\">max-height</a></li><li><a href=\"/ja/docs/Web/CSS/max-inline-size\">max-inline-size</a></li><li><a href=\"/ja/docs/Web/CSS/max-width\">max-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>min-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/min-block-size\">min-block-size</a></li><li><a href=\"/ja/docs/Web/CSS/min-height\">min-height</a></li><li><a href=\"/ja/docs/Web/CSS/min-inline-size\">min-inline-size</a></li><li><a href=\"/ja/docs/Web/CSS/min-width\">min-width</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/mix-blend-mode\">mix-blend-mode</a></li><li><a href=\"/ja/docs/Web/CSS/object-fit\">object-fit</a></li><li><a href=\"/ja/docs/Web/CSS/object-position\">object-position</a></li><li class=\"toggle\"><details><summary>offset-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/offset\">offset</a></li><li><a href=\"/ja/docs/Web/CSS/offset-anchor\">offset-anchor</a></li><li><a href=\"/ja/docs/Web/CSS/offset-distance\">offset-distance</a></li><li><a href=\"/ja/docs/Web/CSS/offset-path\">offset-path</a></li><li><a href=\"/ja/docs/Web/CSS/offset-position\">offset-position</a></li><li><a href=\"/ja/docs/Web/CSS/offset-rotate\">offset-rotate</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/opacity\">opacity</a></li><li><a href=\"/ja/docs/Web/CSS/order\">order</a></li><li><a href=\"/ja/docs/Web/CSS/orphans\">orphans</a></li><li class=\"toggle\"><details><summary>outline-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/outline\">outline</a></li><li><a href=\"/ja/docs/Web/CSS/outline-color\">outline-color</a></li><li><a href=\"/ja/docs/Web/CSS/outline-offset\">outline-offset</a></li><li><a href=\"/ja/docs/Web/CSS/outline-style\">outline-style</a></li><li><a href=\"/ja/docs/Web/CSS/outline-width\">outline-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>overflow-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/overflow\">overflow</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-anchor\">overflow-anchor</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-block\">overflow-block</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-clip-margin\">overflow-clip-margin</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-inline\">overflow-inline</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-wrap\">overflow-wrap</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-x\">overflow-x</a></li><li><a href=\"/ja/docs/Web/CSS/overflow-y\">overflow-y</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/overlay\">overlay</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li class=\"toggle\"><details><summary>overscroll-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/overscroll-behavior\">overscroll-behavior</a></li><li><a href=\"/ja/docs/Web/CSS/overscroll-behavior-block\">overscroll-behavior-block</a></li><li><a href=\"/ja/docs/Web/CSS/overscroll-behavior-inline\">overscroll-behavior-inline</a></li><li><a href=\"/ja/docs/Web/CSS/overscroll-behavior-x\">overscroll-behavior-x</a></li><li><a href=\"/ja/docs/Web/CSS/overscroll-behavior-y\">overscroll-behavior-y</a></li></ol></details></li><li class=\"toggle\"><details><summary>padding-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/padding\">padding</a></li><li><a href=\"/ja/docs/Web/CSS/padding-block\">padding-block</a></li><li><a href=\"/ja/docs/Web/CSS/padding-block-end\">padding-block-end</a></li><li><a href=\"/ja/docs/Web/CSS/padding-block-start\">padding-block-start</a></li><li><a href=\"/ja/docs/Web/CSS/padding-bottom\">padding-bottom</a></li><li><a href=\"/ja/docs/Web/CSS/padding-inline\">padding-inline</a></li><li><a href=\"/ja/docs/Web/CSS/padding-inline-end\">padding-inline-end</a></li><li><a href=\"/ja/docs/Web/CSS/padding-inline-start\">padding-inline-start</a></li><li><a href=\"/ja/docs/Web/CSS/padding-left\">padding-left</a></li><li><a href=\"/ja/docs/Web/CSS/padding-right\">padding-right</a></li><li><a href=\"/ja/docs/Web/CSS/padding-top\">padding-top</a></li></ol></details></li><li class=\"toggle\"><details><summary>page-*</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/page\">page</a></li><li><a href=\"/ja/docs/Web/CSS/page-break-after\">page-break-after</a></li><li><a href=\"/ja/docs/Web/CSS/page-break-before\">page-break-before</a></li><li><a href=\"/ja/docs/Web/CSS/page-break-inside\">page-break-inside</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/paint-order\">paint-order</a></li><li><a href=\"/ja/docs/Web/CSS/perspective\">perspective</a></li><li><a href=\"/ja/docs/Web/CSS/perspective-origin\">perspective-origin</a></li><li class=\"toggle\"><details><summary>place-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/place-content\">place-content</a></li><li><a href=\"/ja/docs/Web/CSS/place-items\">place-items</a></li><li><a href=\"/ja/docs/Web/CSS/place-self\">place-self</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/pointer-events\">pointer-events</a></li><li class=\"toggle\"><details><summary>position-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/position\">position</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-anchor\">position-anchor</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-area\">position-area</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-try\">position-try</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-try-fallbacks\">position-try-fallbacks</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-try-order\">position-try-order</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-visibility\">position-visibility</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/print-color-adjust\">print-color-adjust</a></li><li><a href=\"/ja/docs/Web/CSS/quotes\">quotes</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/r\">r</a></li><li><a href=\"/ja/docs/Web/CSS/resize\">resize</a></li><li><a href=\"/ja/docs/Web/CSS/right\">right</a></li><li><a href=\"/ja/docs/Web/CSS/rotate\">rotate</a></li><li><a href=\"/ja/docs/Web/CSS/row-gap\">row-gap</a></li><li><a href=\"/ja/docs/Web/CSS/ruby-align\">ruby-align</a></li><li><a href=\"/ja/docs/Web/CSS/ruby-position\">ruby-position</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/rx\">rx</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/ry\">ry</a></li><li><a href=\"/ja/docs/Web/CSS/scale\">scale</a></li><li class=\"toggle\"><details><summary>scroll-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/scroll-behavior\">scroll-behavior</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin\">scroll-margin</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-block\">scroll-margin-block</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-block-end\">scroll-margin-block-end</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-block-start\">scroll-margin-block-start</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-bottom\">scroll-margin-bottom</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-inline\">scroll-margin-inline</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-inline-end\">scroll-margin-inline-end</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-inline-start\">scroll-margin-inline-start</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-left\">scroll-margin-left</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-right\">scroll-margin-right</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-margin-top\">scroll-margin-top</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding\">scroll-padding</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-block\">scroll-padding-block</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-block-end\">scroll-padding-block-end</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-block-start\">scroll-padding-block-start</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-bottom\">scroll-padding-bottom</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-inline\">scroll-padding-inline</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-inline-end\">scroll-padding-inline-end</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-inline-start\">scroll-padding-inline-start</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-left\">scroll-padding-left</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-right\">scroll-padding-right</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-padding-top\">scroll-padding-top</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-snap-align\">scroll-snap-align</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-snap-stop\">scroll-snap-stop</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-snap-type\">scroll-snap-type</a></li><li><a href=\"/ja/docs/Web/CSS/scroll-timeline\">scroll-timeline</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/scroll-timeline-axis\">scroll-timeline-axis</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/scroll-timeline-name\">scroll-timeline-name</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>scrollbar-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/scrollbar-color\">scrollbar-color</a></li><li><a href=\"/ja/docs/Web/CSS/scrollbar-gutter\">scrollbar-gutter</a></li><li><a href=\"/ja/docs/Web/CSS/scrollbar-width\">scrollbar-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>shape-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/shape-image-threshold\">shape-image-threshold</a></li><li><a href=\"/ja/docs/Web/CSS/shape-margin\">shape-margin</a></li><li><a href=\"/ja/docs/Web/CSS/shape-outside\">shape-outside</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/shape-rendering\">shape-rendering</a></li></ol></details></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stop-color\">stop-color</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stop-opacity\">stop-opacity</a></li><li class=\"toggle\"><details><summary>stroke-*</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke\">stroke</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-dasharray\">stroke-dasharray</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-dashoffset\">stroke-dashoffset</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-linecap\">stroke-linecap</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-linejoin\">stroke-linejoin</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-miterlimit\">stroke-miterlimit</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-opacity\">stroke-opacity</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/stroke-width\">stroke-width</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/tab-size\">tab-size</a></li><li><a href=\"/ja/docs/Web/CSS/table-layout\">table-layout</a></li><li class=\"toggle\"><details><summary>text-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/text-align\">text-align</a></li><li><a href=\"/ja/docs/Web/CSS/text-align-last\">text-align-last</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/text-anchor\">text-anchor</a></li><li><a href=\"/ja/docs/Web/CSS/text-combine-upright\">text-combine-upright</a></li><li><a href=\"/ja/docs/Web/CSS/text-decoration\">text-decoration</a></li><li><a href=\"/ja/docs/Web/CSS/text-decoration-color\">text-decoration-color</a></li><li><a href=\"/ja/docs/Web/CSS/text-decoration-line\">text-decoration-line</a></li><li><a href=\"/ja/docs/Web/CSS/text-decoration-skip\">text-decoration-skip</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/text-decoration-skip-ink\">text-decoration-skip-ink</a></li><li><a href=\"/ja/docs/Web/CSS/text-decoration-style\">text-decoration-style</a></li><li><a href=\"/ja/docs/Web/CSS/text-decoration-thickness\">text-decoration-thickness</a></li><li><a href=\"/ja/docs/Web/CSS/text-emphasis\">text-emphasis</a></li><li><a href=\"/ja/docs/Web/CSS/text-emphasis-color\">text-emphasis-color</a></li><li><a href=\"/ja/docs/Web/CSS/text-emphasis-position\">text-emphasis-position</a></li><li><a href=\"/ja/docs/Web/CSS/text-emphasis-style\">text-emphasis-style</a></li><li><a href=\"/ja/docs/Web/CSS/text-indent\">text-indent</a></li><li><a href=\"/ja/docs/Web/CSS/text-justify\">text-justify</a></li><li><a href=\"/ja/docs/Web/CSS/text-orientation\">text-orientation</a></li><li><a href=\"/ja/docs/Web/CSS/text-overflow\">text-overflow</a></li><li><a href=\"/ja/docs/Web/CSS/text-rendering\">text-rendering</a></li><li><a href=\"/ja/docs/Web/CSS/text-shadow\">text-shadow</a></li><li><a href=\"/ja/docs/Web/CSS/text-size-adjust\">text-size-adjust</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/text-spacing-trim\">text-spacing-trim</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/text-transform\">text-transform</a></li><li><a href=\"/ja/docs/Web/CSS/text-underline-offset\">text-underline-offset</a></li><li><a href=\"/ja/docs/Web/CSS/text-underline-position\">text-underline-position</a></li><li><a href=\"/ja/docs/Web/CSS/text-wrap\">text-wrap</a></li><li><a href=\"/ja/docs/Web/CSS/text-wrap-mode\">text-wrap-mode</a></li><li><a href=\"/ja/docs/Web/CSS/text-wrap-style\">text-wrap-style</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/timeline-scope\">timeline-scope</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/top\">top</a></li><li><a href=\"/ja/docs/Web/CSS/touch-action\">touch-action</a></li><li class=\"toggle\"><details><summary>transform-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/transform\">transform</a></li><li><a href=\"/ja/docs/Web/CSS/transform-box\">transform-box</a></li><li><a href=\"/ja/docs/Web/CSS/transform-origin\">transform-origin</a></li><li><a href=\"/ja/docs/Web/CSS/transform-style\">transform-style</a></li></ol></details></li><li class=\"toggle\"><details><summary>transition-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/transition\">transition</a></li><li><a href=\"/ja/docs/Web/CSS/transition-behavior\">transition-behavior</a></li><li><a href=\"/ja/docs/Web/CSS/transition-delay\">transition-delay</a></li><li><a href=\"/ja/docs/Web/CSS/transition-duration\">transition-duration</a></li><li><a href=\"/ja/docs/Web/CSS/transition-property\">transition-property</a></li><li><a href=\"/ja/docs/Web/CSS/transition-timing-function\">transition-timing-function</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/translate\">translate</a></li><li><a href=\"/ja/docs/Web/CSS/unicode-bidi\">unicode-bidi</a></li><li><a href=\"/ja/docs/Web/CSS/user-modify\">user-modify</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/user-select\">user-select</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/vector-effect\">vector-effect</a></li><li><a href=\"/ja/docs/Web/CSS/vertical-align\">vertical-align</a></li><li class=\"toggle\"><details><summary>view-*</summary><ol><li><a href=\"/ja/docs/Web/CSS/view-timeline\">view-timeline</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/view-timeline-axis\">view-timeline-axis</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/view-timeline-inset\">view-timeline-inset</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/view-timeline-name\">view-timeline-name</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/view-transition-name\">view-transition-name</a></li></ol></details></li><li><a href=\"/ja/docs/Web/CSS/visibility\">visibility</a></li><li><a href=\"/ja/docs/Web/CSS/white-space\">white-space</a></li><li><a href=\"/ja/docs/Web/CSS/white-space-collapse\">white-space-collapse</a></li><li><a href=\"/ja/docs/Web/CSS/widows\">widows</a></li><li><a href=\"/ja/docs/Web/CSS/width\">width</a></li><li><a href=\"/ja/docs/Web/CSS/will-change\">will-change</a></li><li><a href=\"/ja/docs/Web/CSS/word-break\">word-break</a></li><li><a href=\"/ja/docs/Web/CSS/word-spacing\">word-spacing</a></li><li><a href=\"/ja/docs/Web/CSS/writing-mode\">writing-mode</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/x\">x</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/y\">y</a></li><li><a href=\"/ja/docs/Web/CSS/z-index\">z-index</a></li><li><a href=\"/ja/docs/Web/CSS/zoom\">zoom</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Selectors</summary><ol><li><a href=\"/ja/docs/Web/CSS/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Web/CSS/Class_selectors\">クラスセレクター</a></li><li><a href=\"/ja/docs/Web/CSS/ID_selectors\">ID セレクター</a></li><li><a href=\"/ja/docs/Web/CSS/Nesting_selector\">& 入れ子セレクター</a></li><li><a href=\"/ja/docs/Web/CSS/Type_selectors\">要素型セレクター</a></li><li><a href=\"/ja/docs/Web/CSS/Universal_selectors\">全称セレクター</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Combinators</summary><ol><li><a href=\"/ja/docs/Web/CSS/Child_combinator\">子結合子</a></li><li><a href=\"/ja/docs/Web/CSS/Column_combinator\">列結合子</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/Descendant_combinator\">子孫結合子</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/Namespace_separator\">Namespace separator</a></li><li><a href=\"/ja/docs/Web/CSS/Next-sibling_combinator\">次兄弟結合子</a></li><li><a href=\"/ja/docs/Web/CSS/Selector_list\">セレクターリスト</a></li><li><a href=\"/ja/docs/Web/CSS/Subsequent-sibling_combinator\">後続兄弟結合子</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Pseudo-classes</summary><ol><li><a href=\"/ja/docs/Web/CSS/:-moz-broken\">:-moz-broken</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-drag-over\">:-moz-drag-over</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-first-node\">:-moz-first-node</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:-moz-handler-blocked\">:-moz-handler-blocked</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:-moz-handler-crashed\">:-moz-handler-crashed</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:-moz-handler-disabled\">:-moz-handler-disabled</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-last-node\">:-moz-last-node</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-loading\">:-moz-loading</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-locale-dir_ltr\">:-moz-locale-dir(ltr)</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-locale-dir_rtl\">:-moz-locale-dir(rtl)</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-only-whitespace\">:-moz-only-whitespace</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:-moz-submit-invalid\">:-moz-submit-invalid</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:-moz-suppressed\">:-moz-suppressed</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:-moz-user-disabled\">:-moz-user-disabled</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:-moz-window-inactive\">:-moz-window-inactive</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:active\">:active</a></li><li><a href=\"/ja/docs/Web/CSS/:any-link\">:any-link</a></li><li><a href=\"/ja/docs/Web/CSS/:autofill\">:autofill</a></li><li><a href=\"/ja/docs/Web/CSS/:blank\">:blank</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:buffering\">:buffering</a></li><li><a href=\"/ja/docs/Web/CSS/:checked\">:checked</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:current\">:current</a></li><li><a href=\"/ja/docs/Web/CSS/:default\">:default</a></li><li><a href=\"/ja/docs/Web/CSS/:defined\">:defined</a></li><li><a href=\"/ja/docs/Web/CSS/:dir\">:dir()</a></li><li><a href=\"/ja/docs/Web/CSS/:disabled\">:disabled</a></li><li><a href=\"/ja/docs/Web/CSS/:empty\">:empty</a></li><li><a href=\"/ja/docs/Web/CSS/:enabled\">:enabled</a></li><li><a href=\"/ja/docs/Web/CSS/:first\">:first</a></li><li><a href=\"/ja/docs/Web/CSS/:first-child\">:first-child</a></li><li><a href=\"/ja/docs/Web/CSS/:first-of-type\">:first-of-type</a></li><li><a href=\"/ja/docs/Web/CSS/:focus\">:focus</a></li><li><a href=\"/ja/docs/Web/CSS/:focus-visible\">:focus-visible</a></li><li><a href=\"/ja/docs/Web/CSS/:focus-within\">:focus-within</a></li><li><a href=\"/ja/docs/Web/CSS/:fullscreen\">:fullscreen</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:future\">:future</a></li><li><a href=\"/ja/docs/Web/CSS/:has\">:has()</a></li><li><a href=\"/ja/docs/Web/CSS/:host\">:host</a></li><li><a href=\"/ja/docs/Web/CSS/:host-context\">:host-context()</a></li><li><a href=\"/ja/docs/Web/CSS/:host_function\">:host()</a></li><li><a href=\"/ja/docs/Web/CSS/:hover\">:hover</a></li><li><a href=\"/ja/docs/Web/CSS/:in-range\">:in-range</a></li><li><a href=\"/ja/docs/Web/CSS/:indeterminate\">:indeterminate</a></li><li><a href=\"/ja/docs/Web/CSS/:invalid\">:invalid</a></li><li><a href=\"/ja/docs/Web/CSS/:is\">:is()</a></li><li><a href=\"/ja/docs/Web/CSS/:lang\">:lang()</a></li><li><a href=\"/ja/docs/Web/CSS/:last-child\">:last-child</a></li><li><a href=\"/ja/docs/Web/CSS/:last-of-type\">:last-of-type</a></li><li><a href=\"/ja/docs/Web/CSS/:left\">:left</a></li><li><a href=\"/ja/docs/Web/CSS/:link\">:link</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:local-link\">:local-link</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:modal\">:modal</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:muted\">:muted</a></li><li><a href=\"/ja/docs/Web/CSS/:not\">:not()</a></li><li><a href=\"/ja/docs/Web/CSS/:nth-child\">:nth-child()</a></li><li><a href=\"/ja/docs/Web/CSS/:nth-last-child\">:nth-last-child()</a></li><li><a href=\"/ja/docs/Web/CSS/:nth-last-of-type\">:nth-last-of-type()</a></li><li><a href=\"/ja/docs/Web/CSS/:nth-of-type\">:nth-of-type()</a></li><li><a href=\"/ja/docs/Web/CSS/:only-child\">:only-child</a></li><li><a href=\"/ja/docs/Web/CSS/:only-of-type\">:only-of-type</a></li><li><a href=\"/ja/docs/Web/CSS/:optional\">:optional</a></li><li><a href=\"/ja/docs/Web/CSS/:out-of-range\">:out-of-range</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:past\">:past</a></li><li><a href=\"/ja/docs/Web/CSS/:paused\">:paused</a></li><li><a href=\"/ja/docs/Web/CSS/:picture-in-picture\">:picture-in-picture</a></li><li><a href=\"/ja/docs/Web/CSS/:placeholder-shown\">:placeholder-shown</a></li><li><a href=\"/ja/docs/Web/CSS/:playing\">:playing</a></li><li><a href=\"/ja/docs/Web/CSS/:popover-open\">:popover-open</a></li><li><a href=\"/ja/docs/Web/CSS/:read-only\">:read-only</a></li><li><a href=\"/ja/docs/Web/CSS/:read-write\">:read-write</a></li><li><a href=\"/ja/docs/Web/CSS/:required\">:required</a></li><li><a href=\"/ja/docs/Web/CSS/:right\">:right</a></li><li><a href=\"/ja/docs/Web/CSS/:root\">:root</a></li><li><a href=\"/ja/docs/Web/CSS/:scope\">:scope</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:seeking\">:seeking</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:stalled\">:stalled</a></li><li><a href=\"/ja/docs/Web/CSS/:state\">:state()</a></li><li><a href=\"/ja/docs/Web/CSS/:target\">:target</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:target-within\">:target-within</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/:user-invalid\">:user-invalid (:-moz-ui-invalid)</a></li><li><a href=\"/ja/docs/Web/CSS/:user-valid\">:user-valid (:-moz-ui-valid)</a></li><li><a href=\"/ja/docs/Web/CSS/:valid\">:valid</a></li><li><a href=\"/ja/docs/Web/CSS/:visited\">:visited</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/:volume-locked\">:volume-locked</a></li><li><a href=\"/ja/docs/Web/CSS/:where\">:where()</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Pseudo-elements</summary><ol><li><a href=\"/ja/docs/Web/CSS/::-moz-color-swatch\">::-moz-color-swatch</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-moz-focus-inner\">::-moz-focus-inner</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-moz-list-bullet\">::-moz-list-bullet</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-moz-list-number\">::-moz-list-number</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-moz-meter-bar\">::-moz-meter-bar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-moz-progress-bar\">::-moz-progress-bar</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-moz-range-progress\">::-moz-range-progress</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-moz-range-thumb\">::-moz-range-thumb</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-moz-range-track\">::-moz-range-track</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-inner-spin-button\">::-webkit-inner-spin-button</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-meter-bar\">::-webkit-meter-bar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value\">::-webkit-meter-even-less-good-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-meter-inner-element\">::-webkit-meter-inner-element</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-meter-optimum-value\">::-webkit-meter-optimum-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value\">::-webkit-meter-suboptimum-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-progress-bar\">::-webkit-progress-bar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-progress-inner-element\">::-webkit-progress-inner-element</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-webkit-progress-value\">::-webkit-progress-value</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-webkit-scrollbar\">::-webkit-scrollbar</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-search-cancel-button\">::-webkit-search-cancel-button</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::-webkit-search-results-button\">::-webkit-search-results-button</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-webkit-slider-runnable-track\">::-webkit-slider-runnable-track</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::-webkit-slider-thumb\">::-webkit-slider-thumb</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/::after\">::after (:after)</a></li><li><a href=\"/ja/docs/Web/CSS/::backdrop\">::backdrop</a></li><li><a href=\"/ja/docs/Web/CSS/::before\">::before (:before)</a></li><li><a href=\"/ja/docs/Web/CSS/::cue\">::cue</a></li><li><a href=\"/ja/docs/Web/CSS/::file-selector-button\">::file-selector-button</a></li><li><a href=\"/ja/docs/Web/CSS/::first-letter\">::first-letter</a></li><li><a href=\"/ja/docs/Web/CSS/::first-line\">::first-line (:first-line)</a></li><li><a href=\"/ja/docs/Web/CSS/::grammar-error\">::grammar-error</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/::highlight\">::highlight()</a></li><li><a href=\"/ja/docs/Web/CSS/::marker\">::marker</a></li><li><a href=\"/ja/docs/Web/CSS/::part\">::part()</a></li><li><a href=\"/ja/docs/Web/CSS/::placeholder\">::placeholder</a></li><li><a href=\"/ja/docs/Web/CSS/::selection\">::selection</a></li><li><a href=\"/ja/docs/Web/CSS/::slotted\">::slotted()</a></li><li><a href=\"/ja/docs/Web/CSS/::spelling-error\">::spelling-error</a></li><li><a href=\"/ja/docs/Web/CSS/::target-text\">::target-text</a></li><li><a href=\"/ja/docs/Web/CSS/::view-transition\">::view-transition</a></li><li><a href=\"/ja/docs/Web/CSS/::view-transition-group\">::view-transition-group</a></li><li><a href=\"/ja/docs/Web/CSS/::view-transition-image-pair\">::view-transition-image-pair</a></li><li><a href=\"/ja/docs/Web/CSS/::view-transition-new\">::view-transition-new</a></li><li><a href=\"/ja/docs/Web/CSS/::view-transition-old\">::view-transition-old</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>At-rules</summary><ol><li><a href=\"/ja/docs/Web/CSS/@charset\">@charset</a></li><li><a href=\"/ja/docs/Web/CSS/@color-profile\">@color-profile</a></li><li><a href=\"/ja/docs/Web/CSS/@container\">@container</a></li><li><a href=\"/ja/docs/Web/CSS/@counter-style\">@counter-style</a></li><li><a href=\"/ja/docs/Web/CSS/@document\">@document</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/@font-face\">@font-face</a></li><li><a href=\"/ja/docs/Web/CSS/@font-feature-values\">@font-feature-values</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/@font-palette-values\">@font-palette-values</a></li><li><a href=\"/ja/docs/Web/CSS/@import\">@import</a></li><li><a href=\"/ja/docs/Web/CSS/@keyframes\">@keyframes</a></li><li><a href=\"/ja/docs/Web/CSS/@layer\">@layer</a></li><li><a href=\"/ja/docs/Web/CSS/@media\">@media</a></li><li><a href=\"/ja/docs/Web/CSS/@namespace\">@namespace</a></li><li><a href=\"/ja/docs/Web/CSS/@page\">@page</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/@position-try\">@position-try</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/@property\">@property</a></li><li><a href=\"/ja/docs/Web/CSS/@scope\">@scope</a></li><li><a href=\"/ja/docs/Web/CSS/@starting-style\">@starting-style</a></li><li><a href=\"/ja/docs/Web/CSS/@supports\">@supports</a></li><li><a href=\"/ja/docs/Web/CSS/@view-transition\">@view-transition</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Functions</summary><ol><li><a href=\"/ja/docs/Web/CSS/-moz-image-rect\">-moz-image-rect</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/abs\">abs()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/acos\">acos()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/anchor-size\">anchor-size()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/anchor\">anchor()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/asin\">asin()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/atan\">atan()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/atan2\">atan2()</a></li><li><a href=\"/ja/docs/Web/CSS/attr\">attr()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/blur\">blur()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/brightness\">brightness()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/calc-size\">calc-size()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/calc\">calc()</a></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/circle\">circle()</a></li><li><a href=\"/ja/docs/Web/CSS/clamp\">clamp()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/color-contrast\">color-contrast()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/color_value/color-mix\">color-mix()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/color\">color()</a></li><li><a href=\"/ja/docs/Web/CSS/gradient/conic-gradient\">conic-gradient()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/contrast\">contrast()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/cos\">cos()</a></li><li><a href=\"/ja/docs/Web/CSS/counter\">counter()</a></li><li><a href=\"/ja/docs/Web/CSS/counters\">counters()</a></li><li><a href=\"/ja/docs/Web/CSS/cross-fade\">cross-fade()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/device-cmyk\">device-cmyk()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/drop-shadow\">drop-shadow()</a></li><li><a href=\"/ja/docs/Web/CSS/element\">element()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/ellipse\">ellipse()</a></li><li><a href=\"/ja/docs/Web/CSS/env\">env()</a></li><li><a href=\"/ja/docs/Web/CSS/exp\">exp()</a></li><li><a href=\"/ja/docs/Web/CSS/fit-content_function\">fit-content()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/grayscale\">grayscale()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/hsl\">hsl()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/hue-rotate\">hue-rotate()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/hwb\">hwb()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/hypot\">hypot()</a></li><li><a href=\"/ja/docs/Web/CSS/image/image-set\">image-set()</a></li><li><a href=\"/ja/docs/Web/CSS/image/image\">image()</a></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/inset\">inset()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/invert\">invert()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/lab\">lab()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/@import/layer_function\">layer()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/lch\">lch()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/light-dark\">light-dark()</a></li><li><a href=\"/ja/docs/Web/CSS/gradient/linear-gradient\">linear-gradient()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/log\">log()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/matrix\">matrix()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/matrix3d\">matrix3d()</a></li><li><a href=\"/ja/docs/Web/CSS/max\">max()</a></li><li><a href=\"/ja/docs/Web/CSS/min\">min()</a></li><li><a href=\"/ja/docs/Web/CSS/minmax\">minmax()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/mod\">mod()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/oklab\">oklab()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/oklch\">oklch()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/opacity\">opacity()</a></li><li><a href=\"/ja/docs/Web/CSS/image/paint\">paint()</a></li><li><a href=\"/ja/docs/Web/CSS/font-palette/palette-mix\">palette-mix()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/path\">path()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/perspective\">perspective()</a></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/polygon\">polygon()</a></li><li><a href=\"/ja/docs/Web/CSS/pow\">pow()</a></li><li><a href=\"/ja/docs/Web/CSS/gradient/radial-gradient\">radial-gradient()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/ray\">ray()</a></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/rect\">rect()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/rem\">rem()</a></li><li><a href=\"/ja/docs/Web/CSS/repeat\">repeat()</a></li><li><a href=\"/ja/docs/Web/CSS/gradient/repeating-conic-gradient\">repeating-conic-gradient()</a></li><li><a href=\"/ja/docs/Web/CSS/gradient/repeating-linear-gradient\">repeating-linear-gradient()</a></li><li><a href=\"/ja/docs/Web/CSS/gradient/repeating-radial-gradient\">repeating-radial-gradient()</a></li><li><a href=\"/ja/docs/Web/CSS/color_value/rgb\">rgb()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/rotate\">rotate()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/rotate3d\">rotate3d()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/rotateX\">rotateX()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/rotateY\">rotateY()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/rotateZ\">rotateZ()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/round\">round()</a></li><li><a href=\"/ja/docs/Web/CSS/filter-function/saturate\">saturate()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/scale\">scale()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/scale3d\">scale3d()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/scaleX\">scaleX()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/scaleY\">scaleY()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/scaleZ\">scaleZ()</a></li><li><a href=\"/ja/docs/Web/CSS/animation-timeline/scroll\">scroll()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/filter-function/sepia\">sepia()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/basic-shape/shape\">shape()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/sign\">sign()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/sin\">sin()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/skew\">skew()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/skewX\">skewX()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/skewY\">skewY()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/sqrt\">sqrt()</a></li><li><a href=\"/ja/docs/Web/CSS/symbols\">symbols()</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/tan\">tan()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/translate\">translate()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/translate3d\">translate3d()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/translateX\">translateX()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/translateY\">translateY()</a></li><li><a href=\"/ja/docs/Web/CSS/transform-function/translateZ\">translateZ()</a></li><li><a href=\"/ja/docs/Web/CSS/url_function\">url()</a></li><li><a href=\"/ja/docs/Web/CSS/var\">var()</a></li><li><a href=\"/ja/docs/Web/CSS/animation-timeline/view\">view()</a><abbr class=\"icon icon-experimental\" title=\"Experimental. Expect behavior to change in the future.\">\n <span class=\"visually-hidden\">Experimental</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/basic-shape/xywh\">xywh()</a></li></ol></details></li>\n <li class=\"toggle\"><details><summary>Types</summary><ol><li><a href=\"/ja/docs/Web/CSS/absolute-size\"><absolute-size></a></li><li><a href=\"/ja/docs/Web/CSS/alpha-value\"><alpha-value></a></li><li><a href=\"/ja/docs/Web/CSS/angle\"><angle></a></li><li><a href=\"/ja/docs/Web/CSS/angle-percentage\"><angle-percentage></a></li><li><a href=\"/ja/docs/Web/CSS/basic-shape\"><basic-shape></a></li><li><a href=\"/ja/docs/Web/CSS/blend-mode\"><blend-mode></a></li><li><a href=\"/ja/docs/Web/CSS/box-edge\"><box-edge></a></li><li><a href=\"/ja/docs/Web/CSS/calc-keyword\"><calc-keyword></a></li><li><a href=\"/ja/docs/Web/CSS/calc-sum\"><calc-sum></a></li><li><a href=\"/ja/docs/Web/CSS/color-interpolation-method\"><color-interpolation-method></a></li><li><a href=\"/ja/docs/Web/CSS/color_value\"><color></a></li><li><a href=\"/ja/docs/Web/CSS/custom-ident\"><custom-ident></a></li><li><a href=\"/ja/docs/Web/CSS/dashed-ident\"><dashed-ident></a></li><li><a href=\"/ja/docs/Web/CSS/dimension\"><dimension></a></li><li><a href=\"/ja/docs/Web/CSS/display-box\"><display-box></a></li><li><a href=\"/ja/docs/Web/CSS/display-inside\"><display-inside></a></li><li><a href=\"/ja/docs/Web/CSS/display-internal\"><display-internal></a></li><li><a href=\"/ja/docs/Web/CSS/display-legacy\"><display-legacy></a></li><li><a href=\"/ja/docs/Web/CSS/display-listitem\"><display-listitem></a></li><li><a href=\"/ja/docs/Web/CSS/display-outside\"><display-outside></a></li><li><a href=\"/ja/docs/Web/CSS/easing-function\"><easing-function></a></li><li><a href=\"/ja/docs/Web/CSS/filter-function\"><filter-function></a></li><li><a href=\"/ja/docs/Web/CSS/flex_value\"><flex></a></li><li><a href=\"/ja/docs/Web/CSS/frequency\"><frequency></a></li><li><a href=\"/ja/docs/Web/CSS/frequency-percentage\"><frequency-percentage></a></li><li><a href=\"/ja/docs/Web/CSS/generic-family\"><generic-family></a></li><li><a href=\"/ja/docs/Web/CSS/gradient\"><gradient></a></li><li><a href=\"/ja/docs/Web/CSS/hex-color\"><hex-color></a></li><li><a href=\"/ja/docs/Web/CSS/hue\"><hue></a></li><li><a href=\"/ja/docs/Web/CSS/hue-interpolation-method\"><hue-interpolation-method></a></li><li><a href=\"/ja/docs/Web/CSS/ident\"><ident></a></li><li><a href=\"/ja/docs/Web/CSS/image\"><image></a></li><li><a href=\"/ja/docs/Web/CSS/integer\"><integer></a></li><li><a href=\"/ja/docs/Web/CSS/length\"><length></a></li><li><a href=\"/ja/docs/Web/CSS/length-percentage\"><length-percentage></a></li><li><a href=\"/ja/docs/Web/CSS/line-style\"><line-style></a></li><li><a href=\"/ja/docs/Web/CSS/named-color\"><named-color></a></li><li><a href=\"/ja/docs/Web/CSS/number\"><number></a></li><li><a href=\"/ja/docs/Web/CSS/overflow_value\"><overflow></a></li><li><a href=\"/ja/docs/Web/CSS/percentage\"><percentage></a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/position-area_value\"><position-area></a></li><li><a href=\"/ja/docs/Web/CSS/position_value\"><position></a></li><li><a href=\"/ja/docs/Web/CSS/ratio\"><ratio></a></li><li><a href=\"/ja/docs/Web/CSS/relative-size\"><relative-size></a></li><li><a href=\"/ja/docs/Web/CSS/resolution\"><resolution></a></li><li><a href=\"/ja/docs/Web/CSS/shape\"><shape></a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">非推奨</span>\n</abbr></li><li><a href=\"/ja/docs/Web/CSS/string\"><string></a></li><li><a href=\"/ja/docs/Web/CSS/system-color\"><system-color></a></li><li><a href=\"/ja/docs/Web/CSS/time\"><time></a></li><li><a href=\"/ja/docs/Web/CSS/time-percentage\"><time-percentage></a></li><li><a href=\"/ja/docs/Web/CSS/transform-function\"><transform-function></a></li><li><a href=\"/ja/docs/Web/CSS/url_value\"><url></a></li></ol></details></li>\n\n <li class=\"section no-link\">Guides</li>\n <li class=\"toggle\">\n <details>\n <summary>Animations</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations\">Using CSS animations</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Backgrounds and Borders</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds\">Using multiple backgrounds</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images\">Resizing background images</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Box alignment</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables\">Box alignment in block layout</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox\">Box alignment in flexbox</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout\">Box alignment in grid layout</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout\">Box alignment in multi-column layout</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Box model</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model\">Introduction to the CSS basic box model</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing\">Mastering margin collapsing</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Colors</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_colors/Applying_color\">Applying color to HTML elements</a></li>\n <li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/CSS_colors/Color_values\">Color values</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_colors/Relative_colors\">相対色の使用</a></li>\n <li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely\">Using color wisely</a></li>\n <li><a href=\"/ja/docs/Web/Accessibility/Understanding_Colors_and_Luminance\">Accessibility: Understanding colors and luminance</a></li>\n <li><a href=\"/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast\">Accessibility: Color contrast</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Columns</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_multicol_layout/Basic_concepts\">Basic concepts of Multicol</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_multicol_layout/Styling_columns\">Styling columns</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns\">Spanning and balancing</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout\">Handling overflow in Multicol</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout\">Content breaks in Multicol</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Conditional rules</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries\">Using feature queries</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Containment</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_containment/Using_CSS_containment\">CSS 拘束の使用</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_containment/Container_queries\">CSS コンテナークエリー</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_containment/Container_size_and_style_queries\">コンテナーのサイズおよびスタイルクエリーの使用</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>CSSOM view</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSSOM_view/Coordinate_systems\">Coordinate systems</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>フレックスボックス</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox\">Basic concepts of Flexbox</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods\">Comparison with other layout methods</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container\">Aligning items in a flex container</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items\">Ordering flex items</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis\">Controlling flex item ratios</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items\">Mastering wrapping of flex items</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox\">Typical use cases of Flexbox</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Flow layout</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow\">Block and Inline layout in normal flow</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow\">In flow and Out of flow</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts\">Formatting contexts explained</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes\">Flow layout and writing modes</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_overflow\">Flow layout and overflow</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Fonts</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide\">OpenType font features guide</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide\">Variable fonts guide</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details open=\"\">\n <summary>Grid</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout\">Basics concepts of grid layout</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods\">Relationship to other layout methods</a></li>\n <li><em><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" aria-current=\"page\">Line-based placement</a></em></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_template_areas\">Grid template areas</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines\">Layout using named grid lines</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout\">Auto-placement in grid layout</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout\">Box alignment in grid layout</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes\">Grids, logical values and writing modes</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility\">Grid layout and accessibility</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement\">Grid Layout and progressive enhancement</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids\">Realizing common layouts using grids</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Subgrid\">Subgrid</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout\">Masonry layout</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Images</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients\">Using CSS gradients</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Lists and counters</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters\">Using CSS counters</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation\">Consistent list indentation</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Logical properties</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values\">Basic concepts</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning\">Floating and positioning</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding\">Margins, borders and padding</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_logical_properties_and_values/Sizing\">Sizing</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Math functions</summary>\n <ol>\n <li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions\">Using CSS math functions</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Media queries</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries\">Using media queries</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility\">Using media queries for accessibility</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_media_queries/Testing_media_queries\">Testing media queries programmatically</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_media_queries/Printing\">Printing</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Nesting style rules</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting\">Using CSS nesting</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_nesting/Nesting_at-rules\">Nesting at-rules</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_nesting/Nesting_and_specificity\">Nesting and specificity</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>位置指定</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index\">Understanding CSS z-index</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Scroll snap</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_scroll_snap/Basic_concepts\">Basic concepts of scroll snap</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Shapes</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_shapes/Overview_of_shapes\">Overview of shapes</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_shapes/From_box_values\">Shapes from box values</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_shapes/Basic_shapes\">Basic shapes</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_shapes/Shapes_from_images\">Shapes from images</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Text</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_text/Wrapping_breaking_text\">Wrapping and breaking text</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Transforms</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms\">Using transforms</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Transitions</summary>\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions\">Using transitions</a></li>\n </ol>\n </details>\n </li>\n\n <li class=\"section\"><a href=\"/ja/docs/Web/CSS/Layout_cookbook\">Layout cookbook</a></li>\n <li class=\"toggle\">\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Media_objects\">Media objects</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Column_layouts\">Columns</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Center_an_element\">Center an element</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Sticky_footers\">Sticky footers</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Split_Navigation\">Split navigation</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation\">Breadcrumb navigation</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/List_group_with_badges\">List group with badges</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Pagination\">Pagination</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Card\">Card</a></li>\n <li><a href=\"/ja/docs/Web/CSS/Layout_cookbook/Grid_wrapper\">Grid wrapper</a></li>\n </ol>\n </li>\n\n <li class=\"section no-link\">Tools</li>\n <li class=\"toggle\">\n <ol>\n <li><a href=\"/ja/docs/Web/CSS/CSS_colors/Color_picker_tool\">Color picker</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator\">Box shadow generator</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator\">Border image generator</a></li>\n <li><a href=\"/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator\">Border radius generator</a></li>\n </ol>\n </li>\n\n</ol>\n\n","sidebarMacro":"CSSRef","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p><a href=\"/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout\">グリッドレイアウトの基本概念</a>の記事では、線番号を使ってグリッド上にアイテムを配置する方法をご紹介しました。今回は、この仕様の基本的な機能について詳しくご紹介します。</p>\n<p>グリッドレイアウトを使用する際には、常に番号付きの線があるので、番号付きの線からグリッドの探求を始めるのが最も論理的な方法です。グリッドには列と行にそれぞれ番号が振られており、1 から順番に並んでいます。ただし、グリッドは文書の記述方法に応じて番号が振られます。英語のような左書きの言語では、行 1 はグリッドの左側にあります。アラビア語のように右書きの言語では、行 1 はグリッドの右端になります。書字方向とグリッドの相互作用については、後のガイドで詳しく説明します。</p>"}},{"type":"prose","value":{"id":"基本的な例","title":"基本的な例","isH3":true,"content":"<p>非常に簡単な例として、3 本の列トラックと 3 本の行トラックを持つグリッドを考えてみましょう。これにより、各次元に 4 本の線ができます。</p>\n<p>グリッドコンテナーの中には、4 つの子要素があります。これらをグリッドに何も配置しなければ、自動配置ルールに従って、最初の 4 つのセルにそれぞれ 1 つのアイテムが配置されます。<a href=\"https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html\" class=\"external\" target=\"_blank\">Firefox グリッドハイライター</a>を使うと、グリッドの列と行がどのように定義されているかがわかります。</p>\n<p>\n <img src=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement/highlighted_grid.png\" alt=\"開発ツールで強調表示されたグリッド\" width=\"900\" height=\"296\" loading=\"lazy\">\n</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"A basic example sample\" id=\"frame_a_basic_example\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"a_basic_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"線番号によるアイテムの配置","title":"線番号によるアイテムの配置","isH3":false,"content":"<p>これらのアイテムをグリッド上のどこに配置するかは、線ベースの配置を使って制御できます。最初のアイテムは、グリッドの左端から始まり、1 列分のトラックに広がるようにしたいと思います。また、グリッドの一番上にある 1 行目の線から始まり、4 行目の線までの範囲に配置します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 4;\n}\n</code></pre></div>\n<p>一部のアイテムを配置すると、グリッド上の他のアイテムは自動配置ルールで配置され続けます。これがどのように機能するかは後のガイドで詳しく説明しますが、グリッドを操作していると、配置されていないアイテムがグリッドの空いているセルに配置されていくのがわかります。</p>\n<p>それぞれのアイテムを個別に扱うことで、 4 つのアイテムすべてを行と列のトラックにまたがって配置することができます。必要であれば、セルを空のままにすることもできます。グリッドレイアウトのとても良い点の 1 つは、マージンを使って余白を確保しなくても、デザインに余白を確保できることです。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 4;\n}\n.box2 {\n grid-column-start: 3;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n.box3 {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n grid-row-end: 2;\n}\n.box4 {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row-start: 3;\n grid-row-end: 4;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Positioning items by line number sample\" id=\"frame_positioning_items_by_line_number\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"positioning_items_by_line_number\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"grid-column_および_grid-row_の一括指定","title":"<code>grid-column</code> および <code>grid-row</code> の一括指定","isH3":false,"content":"<p>ここでは、各アイテムを配置するためにかなり多くのコードを使用しています。当然ながら一括指定プロパティがあります。<a href=\"/ja/docs/Web/CSS/grid-column-start\"><code>grid-column-start</code></a> と <a href=\"/ja/docs/Web/CSS/grid-column-end\"><code>grid-column-end</code></a> のプロパティは併せて <a href=\"/ja/docs/Web/CSS/grid-column\"><code>grid-column</code></a> となり、<a href=\"/ja/docs/Web/CSS/grid-row-start\"><code>grid-row-start</code></a> と <a href=\"/ja/docs/Web/CSS/grid-row-end\"><code>grid-row-end</code></a> は併せて <a href=\"/ja/docs/Web/CSS/grid-row\"><code>grid-row</code></a> となります。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column: 1 / 2;\n grid-row: 1 / 4;\n}\n.box2 {\n grid-column: 3 / 4;\n grid-row: 1 / 3;\n}\n.box3 {\n grid-column: 2 / 3;\n grid-row: 1 / 2;\n}\n.box4 {\n grid-column: 2 / 4;\n grid-row: 3 / 4;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"The grid-column and grid-row shorthands sample\" id=\"frame_the_grid-column_and_grid-row_shorthands\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"the_grid-column_and_grid-row_shorthands\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"既定のスパン","title":"既定のスパン","isH3":false,"content":"<p>上の例では、プロパティを実演するために、列と行のすべての端点を指定していますが、実際には、アイテムが 1 つのトラックにしか広がらない場合は、 <code>grid-column-end</code> や <code>grid-row-end</code> の値を省略することができます。グリッドの既定では、1 つのトラックにまたがるように設定されています。</p>"}},{"type":"prose","value":{"id":"既定のスパンに個別指定で配置","title":"既定のスパンに個別指定で配置","isH3":true,"content":"<p>つまり、基本的な個別指定で例を表すと次のようになります。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column-start: 1;\n grid-row-start: 1;\n grid-row-end: 4;\n}\n.box2 {\n grid-column-start: 3;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n.box3 {\n grid-column-start: 2;\n grid-row-start: 1;\n}\n.box4 {\n grid-column-start: 2;\n grid-column-end: 4;\n grid-row-start: 3;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Default spans with longhand placement sample\" id=\"frame_default_spans_with_longhand_placement\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"default_spans_with_longhand_placement\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"一括指定の配置における既定のスパン","title":"一括指定の配置における既定のスパン","isH3":true,"content":"<p>一括指定は以下のコードのようになります。スラッシュはなく、2 番目の値は 1 つのトラックにまたがるアイテムのみになります。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column: 1;\n grid-row: 1 / 4;\n}\n.box2 {\n grid-column: 3;\n grid-row: 1 / 3;\n}\n.box3 {\n grid-column: 2;\n grid-row: 1;\n}\n.box4 {\n grid-column: 2 / 4;\n grid-row: 3;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Default spans with shorthand placement sample\" id=\"frame_default_spans_with_shorthand_placement\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"default_spans_with_shorthand_placement\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"grid-area_プロパティ","title":"<code>grid-area</code> プロパティ","isH3":false,"content":"<p>さらに一歩進んで、各領域を単一のプロパティ <a href=\"/ja/docs/Web/CSS/grid-area\"><code>grid-area</code></a> で定義することができます。 grid-area の値の順番は以下の通りです。</p>\n<ul>\n <li>grid-row-start</li>\n <li>grid-column-start</li>\n <li>grid-row-end</li>\n <li>grid-column-end</li>\n</ul>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-area: 1 / 1 / 4 / 2;\n}\n.box2 {\n grid-area: 1 / 3 / 3 / 4;\n}\n.box3 {\n grid-area: 1 / 2 / 2 / 3;\n}\n.box4 {\n grid-area: 3 / 2 / 4 / 4;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"The grid-area property sample\" id=\"frame_the_grid-area_property\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"the_grid-area_property\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>この <code>grid-area</code> の値の順序は、少し奇妙に思えるかもしれません。これは、例えば、マージンやパディングを一括指定として指定するときの順番とは逆です。これは、グリッドが CSS Writing Modes 仕様書で定義されているフローに関連した方向を使用しているためだと理解するとよいでしょう。グリッドと書字方向の連携については後述しますが、ここではフローに関連した方向の概念が 4 つあります。</p>\n<ul>\n <li>block-start</li>\n <li>block-end</li>\n <li>inline-start</li>\n <li>inline-end</li>\n</ul>\n<p>ここでは、左書きの言語である英語で考えてみます。 block-start はグリッドコンテナーの先頭の行の線で、 block-end はコンテナーの末尾の行の線です。inline-start は左の列の線で、inline-start は常に現在の書字方向でテキストが書かれる位置であり、inline-end はグリッドの最終列の線です。</p>\n<p><code>grid-area</code> プロパティを使用してグリッド領域を指定する際には、まず、両方の先頭の線、 <code>block-start</code> と <code>inline-start</code> を定義し、次に両方の末尾の線、 <code>block-end</code> と <code>inline-end</code> を定義します。top、right、bottom、leftという物理的なプロパティに慣れていると、最初は変わっているように見えますが、ウェブサイトが書字方向によって多数の方向があると考えれば、より納得がいきます。</p>"}},{"type":"prose","value":{"id":"逆に数える","title":"逆に数える","isH3":false,"content":"<p>また、グリッドのブロックやインラインの端から逆に数えることもできます。英語の場合は、右の列の線と最後の行の線になります。これらの線は <code>-1</code> として扱われ、そこから逆算することができます。つまり、最後から 2 行目は <code>-2</code> となります。最後の線は、<em>明示的グリッド</em> （<code>grid-template-columns</code> と <code>grid-template-rows</code> で定義されるグリッド）の最後の線であり、その外で追加された<em>暗黙的グリッド</em>である行や列は考慮されないことに注意しましょう。</p>\n<p>次の例では、アイテムを配置する際に、グリッドの右と下から行うことで、それまでのレイアウトを反転させています。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column-start: -1;\n grid-column-end: -2;\n grid-row-start: -1;\n grid-row-end: -4;\n}\n.box2 {\n grid-column-start: -3;\n grid-column-end: -4;\n grid-row-start: -1;\n grid-row-end: -3;\n}\n.box3 {\n grid-column-start: -2;\n grid-column-end: -3;\n grid-row-start: -1;\n grid-row-end: -2;\n}\n.box4 {\n grid-column-start: -2;\n grid-column-end: -4;\n grid-row-start: -3;\n grid-row-end: -4;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Counting backwards sample\" id=\"frame_counting_backwards\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"counting_backwards\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"グリッドをまたがってアイテムを伸ばす","title":"グリッドをまたがってアイテムを伸ばす","isH3":true,"content":"<p>グリッドの先頭と末尾の線を指定することができると、アイテムをグリッド全体に引き伸ばせるので便利です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.item {\n grid-column: 1 / -1;\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"溝または路地","title":"溝または路地","isH3":false,"content":"<p>CSS Grid 仕様書では、<a href=\"/ja/docs/Web/CSS/column-gap\"><code>column-gap</code></a> と <a href=\"/ja/docs/Web/CSS/row-gap\"><code>row-gap</code></a> プロパティを使って、列と行のトラックの間に溝を追加する機能があります。これらは、段組みレイアウトにおける <a href=\"/ja/docs/Web/CSS/column-gap\"><code>column-gap</code></a> プロパティと同様の働きをする間隔を指定します。</p>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> グリッドがブラウザーに初めて搭載されたとき、<a href=\"/ja/docs/Web/CSS/column-gap\"><code>column-gap</code></a>、<a href=\"/ja/docs/Web/CSS/row-gap\"><code>row-gap</code></a>、<a href=\"/ja/docs/Web/CSS/gap\"><code>gap</code></a> プロパティには、それぞれ <code>grid-</code> という接頭辞が付けられ、<code>grid-column-gap</code>、<code>grid-row-gap</code>、<code>grid-gap</code> となっていました。</p>\n <p>ブラウザーのレンダリングエンジンはこの接頭辞を削除するように更新されていますが、接頭辞付きのバージョンは別名として維持されるため、安全に使用することができます。</p>\n</div>\n<p>間隔はグリッドのトラック間にのみ現れ、コンテナーの上下左右に余白を追加することはありません。これらのプロパティをグリッドコンテナーに使用することで、先ほどの例に間隔を追加することができます。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column: 1;\n grid-row: 1 / 4;\n}\n.box2 {\n grid-column: 3;\n grid-row: 1 / 3;\n}\n.box3 {\n grid-column: 2;\n grid-row: 1;\n}\n.box4 {\n grid-column: 2 / 4;\n grid-row: 3;\n}\n.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n column-gap: 20px;\n row-gap: 1em;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Gutters or Alleys sample\" id=\"frame_gutters_or_alleys\" width=\"300\" height=\"350\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"gutters_or_alleys\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"gap_一括指定","title":"gap 一括指定","isH3":true,"content":"<p>この 2 つのプロパティは、 <a href=\"/ja/docs/Web/CSS/gap\"><code>gap</code></a> という省略形で表すこともできます。<code>gap</code> に 1 つの値だけを指定すると、列と行の両方の間隔に適用されます。2 つの値を指定した場合は、1 つ目の値が <code>row-gap</code> に、2 つ目の値が <code>column-gap</code> に使用されます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n gap: 1em 20px;\n}\n</code></pre></div>\n<p>線ベースのアイテムの配置において、間隔はあたかも線の幅が増えたかのように機能します。その線から始まるものは間隔の後に始まり、間隔を処理したり、間隔に何かを配置することはできません。通常のトラックのように動作するガッターが必要な場合は、もちろん、そのためのトラックを定義することができます。</p>"}},{"type":"prose","value":{"id":"span_キーワードの使用","title":"<code>span</code> キーワードの使用","isH3":false,"content":"<p>先頭の線と末尾の線を番号で指定するだけでなく、先頭の線を指定してから領域をまたぐトラックの数を指定することもできます。</p>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>* {\n box-sizing: border-box;\n}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(3, 100px);\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"wrapper\">\n <div class=\"box1\">One</div>\n <div class=\"box2\">Two</div>\n <div class=\"box3\">Three</div>\n <div class=\"box4\">Four</div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column: 1;\n grid-row: 1 / span 3;\n}\n.box2 {\n grid-column: 3;\n grid-row: 1 / span 2;\n}\n.box3 {\n grid-column: 2;\n grid-row: 1;\n}\n.box4 {\n grid-column: 2 / span 2;\n grid-row: 3;\n}\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Using the span keyword sample\" id=\"frame_using_the_span_keyword\" width=\"300\" height=\"330\" src=\"about:blank\" data-live-path=\"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\" data-live-id=\"using_the_span_keyword\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>また、<code>grid-row-start</code>/<code>grid-row-end</code> や <code>grid-column-start</code>/<code>grid-column-end</code> の値に <code>span</code> キーワードを使用することもできます。次の 2 つの例では、同じグリッド領域を作成します。最初の例では、先頭の行の線を設定し、次に末尾の行を設定し、3 本にまたがるようにしたいと説明しています。領域は 1 本目から始まり、3 本目から 4 本目までとなります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column-start: 1;\n grid-row-start: 1;\n grid-row-end: span 3;\n}\n</code></pre></div>\n<p>2 つ目の例では、アイテムを終了させたい末尾の行の線を指定し、先頭の線を <code>span 3</code> と設定しています。これは、アイテムが指定された行の線から上方に広がる必要があることを意味しています。領域は 4 本目から始まり、 1 本目まで 3 本にまたがっています。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box1 {\n grid-column-start: 1;\n grid-row-start: span 3;\n grid-row-end: 4;\n}\n</code></pre></div>\n<p>グリッドにおける線ベースの配置に慣れるために、列数の異なるグリッドにアイテムを配置して、一般的なレイアウトをいくつか作ってみましょう。すべてのアイテムを配置しなくても、残ったアイテムは自動配置のルールに従って配置されることを覚えておいてください。このようにして、思い通りのレイアウトになることもありますが、思いがけないところにアイテムが表示されている場合は、そのアイテムの位置が設定されているかどうかを確認してください。</p>\n<p>また、このように明示的に配置すると、グリッド上のアイテム同士が重なってしまうことがあります。いい効果が得られることもありますが、先頭の線や末尾の線の指定を間違えると、間違って重なってしまうこともあります。<a href=\"https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html\" class=\"external\" target=\"_blank\">Firefox グリッドハイライター</a>は、特にグリッドが非常に複雑な場合、学習の際にとても役立ちます。</p>"}}],"toc":[{"text":"線番号によるアイテムの配置","id":"線番号によるアイテムの配置"},{"text":"<code>grid-column</code> および <code>grid-row</code> の一括指定","id":"grid-column_および_grid-row_の一括指定"},{"text":"既定のスパン","id":"既定のスパン"},{"text":"<code>grid-area</code> プロパティ","id":"grid-area_プロパティ"},{"text":"逆に数える","id":"逆に数える"},{"text":"溝または路地","id":"溝または路地"},{"text":"<code>span</code> キーワードの使用","id":"span_キーワードの使用"}],"summary":"グリッドレイアウトの基本概念の記事では、線番号を使ってグリッド上にアイテムを配置する方法をご紹介しました。今回は、この仕様の基本的な機能について詳しくご紹介します。","popularity":0,"modified":"2024-07-28T12:52:30.000Z","other_translations":[{"locale":"de","title":"Grid-Layout mithilfe von linienbasierter Platzierung","native":"Deutsch"},{"locale":"en-US","title":"Grid layout using line-based placement","native":"English (US)"},{"locale":"fr","title":"Placer les éléments sur les lignes d'une grille CSS","native":"Français"},{"locale":"ko","title":"Line-based placement with CSS Grid","native":"한국어"},{"locale":"ru","title":"Расположение элементов по грид-линиям с помощью CSS Grid","native":"Русский"},{"locale":"zh-CN","title":"CSS 网格中基于线的定位","native":"中文 (简体)"}],"pageType":"unknown","source":{"folder":"ja/web/css/css_grid_layout/grid_layout_using_line-based_placement","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/bdaf9eadc7f695cc5d61e564e1a4d586de4f4675","filename":"index.md"},"short_title":"線に基づく配置を使用したグリッドレイアウト","parents":[{"uri":"/ja/docs/Web","title":"開発者向けのウェブ技術"},{"uri":"/ja/docs/Web/CSS","title":"CSS: カスケーディングスタイルシート"},{"uri":"/ja/docs/Web/CSS/CSS_grid_layout","title":"CSS グリッドレイアウト"},{"uri":"/ja/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement","title":"線に基づく配置を使用したグリッドレイアウト"}],"pageTitle":"線に基づく配置を使用したグリッドレイアウト - CSS: カスケーディングスタイルシート | MDN","noIndexing":false}}</script></body></html>