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>古いレイアウト方法 - ウェブ開発の学習 | MDN</title><link rel="alternate" title="Legacy layout methods" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="en"/><link rel="alternate" title="Veraltete Layoutmethoden" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="de"/><link rel="alternate" title="Méthodes de mises en page traditionnelles" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="fr"/><link rel="alternate" title="레거시 레이아웃 메서드" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="ko"/><link rel="alternate" title="传统的布局方法" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" hrefLang="zh"/><link rel="alternate" title="古いレイアウト方法" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" 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="グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ボックスや他のレイアウト機能を使用して実装される傾向がありました。レイアウトをいくつかの列（例えば 4、6、12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせてみてください。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods"/><meta property="og:title" content="古いレイアウト方法 - ウェブ開発の学習 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ボックスや他のレイアウト機能を使用して実装される傾向がありました。レイアウトをいくつかの列（例えば 4、6、12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせてみてください。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。"/><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/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods"/><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.f565372a.js"></script><link href="/static/css/main.3d9e7a02.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 "><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=" "><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">Build web projects usable for all</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 active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/ja/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn_web_development" 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_web_development" 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_web_development/Core/Structuring_content" 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_web_development/Core/Styling_basics" 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_web_development/Core/Scripting" 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/Learn_web_development/Core/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%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods" 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/Learn_web_development" 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/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">コア学習モジュール</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Core/CSS_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/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" 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="en-US" href="/en-US/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" 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="fr" href="/fr/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods" 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"><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="#css_グリッドレイアウト以前のレイアウトとグリッドシステム">CSS グリッドレイアウト以前のレイアウトとグリッドシステム</a></li><li class="document-toc-item "><a class="document-toc-link" href="#2_段組みレイアウト">2 段組みレイアウト</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="#サードパーティのグリッドシステム">サードパーティのグリッドシステム</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/ja/docs/Learn_web_development/Getting_started">Getting started modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup">Environment setup</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">基本的なソフトウェアのインストール</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">ウェブの閲覧</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">コードエディター</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">ファイルの扱い</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">コマンドライン短期集中講座</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website">Your first website</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: コンテンツの作成</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: コンテンツのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: 操作の追加</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">ウェブサイトの公開</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards">Web standards</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">ウェブのしくみ</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">ウェブ標準モデル</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills">Soft skills</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">調査と学習</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">共同作業とチームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">ワークフローとプロセス</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">面接で成功するために</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn_web_development/Core">Core modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">基本的な HTML の構文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML の見出しと段落</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">強調と重要性</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Lists">リスト</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">高度なテキスト装飾</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links">リンクの作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">課題: 手紙のマークアップ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">課題: コンテンツのページの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML の画像</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表のアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">課題: 惑星データの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms">HTML におけるフォームとボタン</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML のデバッグ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS とは何か</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started">CSS 入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">課題: 経歴ページのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">基本的な CSS セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">擬似クラスと擬似要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Combinators">結合子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Box_model">ボックスモデル</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">競合の処理</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS の値と単位</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Sizing">CSS におけるアイテムのサイズ設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景と境界線</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Overflow">コンテンツのオーバーフロー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">画像、メディア、フォーム要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Tables">表のスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">CSS のデバッグ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">課題: 基本的な CSS の理解</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">課題: かっこいいボックス</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本的なテキストとフォントのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists">リストのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_links">リンクのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts">ウェブフォント</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/CSS_layout">CSS レイアウト</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Introduction">CSS レイアウト入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Floats">浮動ボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Positioning">位置指定</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox">フレックスボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Grids">CSS グリッドレイアウト</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries">メディアクエリーの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Scripting">Dynamic scripting with JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">JavaScript とは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript の最初の一歩</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Variables">必要な情報を保管する — 変数</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Math">JavaScript での基本演算 — 数値と演算子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Strings">テキストの扱い — JavaScript での文字列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods">便利な文字列メソッド</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Arrays">配列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator">課題: バカ話ジェネレーター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Conditionals">コードでの意思決定 — 条件文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Loops">ループするコード</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Functions">関数 — 再利用可能なコードブロック</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function">独自の関数を作る</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Return_values">関数の返値</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Events">イベント入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling">イベントのバブリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Image_gallery">課題: イメージギャラリー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript オブジェクトの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM スクリプティング入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Network_requests">ネットワークリクエストを JavaScript で作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/JSON">JSON の操作</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript frameworks and libraries</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">クライアントサイドフレームワークの概要</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">フレームワークの主な機能</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React を始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">React で ToDo リストを始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components">React アプリのコンポーネント化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React での操作の実装: イベントと状態</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">React でのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React のリソース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Accessibility">Accessibility</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">アクセシビリティとは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Tooling">アクセシビリティツールと支援技術</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/HTML">HTML: アクセシビリティの良き基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Mobile">モバイルのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Core/Design_for_developers">Design for developers</a></li><li><a href="/ja/docs/Learn_web_development/Core/Version_control">Version control</a></li><li class="section"><a href="/ja/docs/Learn_web_development/Extensions">Extension modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">オブジェクトのプロトタイプ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">オブジェクト指向プログラミング</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript のクラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">オブジェクト構築の練習</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs">クライアントサイド Web API</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">動画と音声の API</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">グラフィックの描画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">クライアント側ストレージ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">サードパーティ API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Async_JS">非同期 JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing">非同期 JavaScript 入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Promises">プロミスの使い方</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">プロミスベースの API の実装方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">ワーカー入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Forms">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form">初めてのフォーム</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 の入力型</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls">その他のフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">ウェブフォームへのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 擬似クラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation">クライアント側のフォーム検証</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools">Understanding client-side tools</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview">クライアントサイドツールの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">パッケージ管理の基本</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">完全なツールチェーンの導入</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">アプリのデプロイ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side">Server-side websites</a></summary><ol><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps">Server-side first steps</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">クライアント・サーバーの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Django 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models" class="only-in-en-us">Django Tutorial Part 3: Using models</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site" class="only-in-en-us">Django Tutorial Part 4: Django admin site</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page" class="only-in-en-us">Django Tutorial Part 5: Creating our home page</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views" class="only-in-en-us">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions" class="only-in-en-us">Django Tutorial Part 7: Sessions framework</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication" class="only-in-en-us">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms" class="only-in-en-us">Django Tutorial Part 9: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing" class="only-in-en-us">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment" class="only-in-en-us">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security" class="only-in-en-us">Django web application security</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog" class="only-in-en-us">Assessment: DIY Django mini blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web framework (Node.js)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes" class="only-in-en-us">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="only-in-en-us">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Performance">Web performance</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance">知覚的パフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance">パフォーマンスの測定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Multimedia">マルチメディア: 画像</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/video">マルチメディア: 動画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript のパフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/HTML">HTML のパフォーマンス機能</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/CSS">CSS のパフォーマンス最適化</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Testing">Testing</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Introduction">はじめてのブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies">テスト実行のための戦略</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">一般的な HTML と CSS の問題への対処</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection">機能検出の実装</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing">自動化テストの紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">テスト自動化環境のセットアップ</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Extensions/Transform_animate">Transform and animate CSS</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Security_privacy">Security and privacy</a></li><li class="section">その他のリソース</li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Howto">How to solve common problems</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Howto/Solve_HTML_problems">HTML を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_CSS_problems">CSS を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems">JavaScript のコードのよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Web_mechanics">ウェブの仕組み</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Tools_and_setup">ツールとセットアップ</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Design_and_accessibility">デザインとアクセシビリティ</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">About</a></li><li><a href="/ja/docs/Learn_web_development/Educators">Resources for educators</a></li><li><a href="/ja/docs/Learn_web_development/Changelog">Changelog</a></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="#css_グリッドレイアウト以前のレイアウトとグリッドシステム">CSS グリッドレイアウト以前のレイアウトとグリッドシステム</a></li><li class="document-toc-item "><a class="document-toc-link" href="#2_段組みレイアウト">2 段組みレイアウト</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="#サードパーティのグリッドシステム">サードパーティのグリッドシステム</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</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>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ボックスや他のレイアウト機能を使用して実装される傾向がありました。レイアウトをいくつかの列（例えば 4、6、12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせてみてください。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提知識:</th> <td> HTML の基礎（<a href="/ja/docs/Learn_web_development/Core/Structuring_content">HTML 入門</a>で学習）、 CSS の動作の考え方（ <a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS によるスタイル設定の基本</a>で学習） </td> </tr> <tr> <th scope="row">目的:</th> <td> CSS グリッドレイアウトがブラウザーで利用可能になる前に使用されていたグリッドレイアウトシステムの背後にある基本概念を理解すること。 </td> </tr> </tbody> </table></figure></div><section aria-labelledby="css_グリッドレイアウト以前のレイアウトとグリッドシステム"><h2 id="css_グリッドレイアウト以前のレイアウトとグリッドシステム"><a href="#css_グリッドレイアウト以前のレイアウトとグリッドシステム">CSS グリッドレイアウト以前のレイアウトとグリッドシステム</a></h2><div class="section-content"><p>CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。今これらを「古い」方法と呼んでいます。</p> <p>新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の 1 つ以上の最新のレイアウト方法と組み合わせて使用して、任意のレイアウトの基礎とします。しかし、時々、これらの古い方法を使用している「グリッドシステム」に遭遇するでしょう。それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。</p> <p>このレッスンでは、浮動ボックスとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう。この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。</p> <p>これらのシステムを検討する際には、それらのどれも実際には CSS グリッドレイアウトがグリッドを作成する方法でグリッドを作成しないことに、留意する価値があります。それらは項目にサイズを与え、グリッドのように<em>見える</em>ように一列に並べることによって機能します。</p></div></section><section aria-labelledby="2_段組みレイアウト"><h2 id="2_段組みレイアウト"><a href="#2_段組みレイアウト">2 段組みレイアウト</a></h2><div class="section-content"><p>最も簡単な例として、2 段組みのレイアウトから始めましょう。コンピューター上に新しい <code>index.html</code> ファイルを作成し、それを<a href="https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html" class="external" target="_blank">単純な HTML テンプレート</a>で埋め、適切な場所に以下のコードを挿入することで、従うことができます。このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。</p> <p>まず最初に、列に入れるためにいくつかのコンテンツが必要です。次のもので <code>body</code> の中に現在あるものはすべて置き換えます。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><h1>2 段組みレイアウトの例</h1> <div> <h2>1 段目</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> </div> <div> <h2>2 段目</h2> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </div> </code></pre></div> <p>それぞれの列はそのコンテンツを含むために外側の要素が必要です。この例では <a href="/ja/docs/Web/HTML/Element/div"><code><div></code></a> を選択しましたが、<a href="/ja/docs/Web/HTML/Element/article"><code><article></code></a>、<a href="/ja/docs/Web/HTML/Element/section"><code><section></code></a>、<a href="/ja/docs/Web/HTML/Element/aside"><code><aside></code></a> など、より意味論的に適切なものを選択することもできます。</p> <p>今 CSS に対して、まず最初に、HTML に従うため、いくつかの基本的な設定を提供するために次を適用します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 90%; max-width: 900px; margin: 0 auto; } </code></pre></div> <p><code>body</code> の幅が 900px になるまで、<code>body</code> はビューポートの幅の 90% になります。この場合、<code>body</code> はこの幅に固定され、ビューポートの中央に配置されます。デフォルトでは、その子（<a href="/ja/docs/Web/HTML/Element/Heading_Elements">h1</a> と 2 つの <a href="/ja/docs/Web/HTML/Element/div"><code><div></code></a>）は <code>body</code> の幅の 100% にわたります。 2 つの <a href="/ja/docs/Web/HTML/Element/div"><code><div></code></a> を互いに並べて浮動させたい場合は、それらの幅の合計をその親要素の幅の 100% 以下に設定して、互いに並んで収まるようにする必要があります。 CSS の最後に次を追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; } </code></pre></div> <p>ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2 列の間の溝のために 4% の空きを残し、コンテンツに余裕を持たせることができます。さらに次のようにして、列を浮動ボックスにする必要があります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } </code></pre></div> <p>これらすべてをまとめると、次のような結果が得られます。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="A two column layout sample" id="frame_a_two_column_layout" width="100%" height="520" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/" data-live-id="a_two_column_layout" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>ここでは、すべての幅にパーセントを使用していることに気付くでしょう。これは、さまざまな画面サイズに合わせて調整し、小さい画面サイズで列幅に同じ比率を維持する、<strong>リキッドレイアウト</strong>（liquid layout）を作成するため、非常に良い戦略です。ブラウザーウィンドウの幅を調整して確認してください。これはレスポンシブウェブデザインのための貴重なツールです。</p> <div class="notecard note"> <p><strong>メモ:</strong> この例は <a href="https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html" class="external" target="_blank">0_two-column-layout.html</a> で実行できます（<a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html" class="external" target="_blank">ソースコード</a>も見る）。</p> </div></div></section><section aria-labelledby="単純な古いグリッドフレームワークを作成する"><h2 id="単純な古いグリッドフレームワークを作成する"><a href="#単純な古いグリッドフレームワークを作成する">単純な古いグリッドフレームワークを作成する</a></h2><div class="section-content"><p>古いフレームワークの大部分は、グリッドのように見えるものを作成するために、<a href="/ja/docs/Web/CSS/float"><code>float</code></a> プロパティのふるまいを使用して、ある列を別の列の隣に浮動します。浮動ボックスによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、<a href="/ja/docs/Learn_web_development/Core/CSS_layout/Floats">浮動ボックスとクリア</a>のレッスンで学んだことを基にしてさらに高度な概念を紹介します。</p> <p>作成する最も簡単な種類のグリッドフレームワークは固定幅のものです — デザインに必要な合計幅、列数、および溝幅と列幅を求める必要があります。ブラウザーの幅に合わせて増減する列を含むグリッドにデザインをレイアウトすることにした場合は、列とそれらの間の溝に対してパーセント幅を計算する必要があります。</p> <p>次のセクションでは、両方を作成する方法を見ていきます。 12 列のグリッドを作成します — 12 が 6、4、3、および 2 で割り切れることを考えると、さまざまな状況に非常に適応できると見られる非常に一般的な選択です。</p></div></section><section aria-labelledby="単純な固定幅グリッド"><h3 id="単純な固定幅グリッド"><a href="#単純な固定幅グリッド">単純な固定幅グリッド</a></h3><div class="section-content"><p>最初に固定幅の列を使用するグリッドシステムを作成しましょう。</p> <p>サンプルの <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid.html" class="external" target="_blank">simple-grid.html</a> ファイルのローカルコピーを作成することから始めます。このファイルには、<code>body</code> に次のマークアップが含まれています。</p> <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="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col span1">13</div> <div class="col span6">14</div> <div class="col span3">15</div> <div class="col span2">16</div> </div> </div> </code></pre></div> <p>目的は、これを 12 列 2 行のグリッドのデモ用グリッドに変換することです — 一番上の行は個々の列のサイズを示し、2 番目の行はグリッド上のいくつかの異なるサイズの領域です。</p> <p><img src="/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/simple-grid-finished.png" alt="CSS グリッドで 16 個のグリッドアイテムが 12 列と 2 行にまたがる様子。一番上の行には、 12 列の同じ幅のグリッドアイテムがあります。 2 つ目には、異なるサイズのグリッドアイテムがあります。項目 13 は 1 列、項目 14 は 6 列、項目 15 は 3 列、項目 16 は 2 列にわたります。" width="952" height="50" loading="lazy"></p> <p><a href="/ja/docs/Web/HTML/Element/style"><code><style></code></a> 要素に、次のコードを追加します。これにより、<code>wrapper</code> コンテナーの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。これにより、列幅と溝幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で <a href="/ja/docs/Web/CSS/box-sizing"><code>box-sizing</code></a> を <code>border-box</code> に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、<a href="/ja/docs/Learn_web_development/Core/Styling_basics/Box_model#css_代替ボックスモデル">CSS 代替ボックスモデル</a>を参照）。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>* { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .wrapper { padding-right: 20px; } </code></pre></div> <p>次に、グリッドの各行を囲む <code>row</code> コンテナーを使用して、ある行を別の行からクリアします。前のルールの下に次のルールを追加します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.row { clear: both; } </code></pre></div> <p>このクリアを適用すると、各行を 12 列の要素で完全に埋める必要がなくなります。行は分離されたままになり、互いに干渉しません。</p> <p>列の間の溝は 20 ピクセル幅です。最初の列を含め、各列の左側にマージンとしてこれらの溝を作成して、コンテナーの右側にある 20 ピクセルのパディングとのバランスを取ります。だから全部で 12 の溝を持っています — 12 x 20 = 240。</p> <p>これを 960 ピクセルの合計幅から差し引いて、列に 720 ピクセルを与える必要があります。これを 12 で割ると、各列の幅は 60 ピクセルになるはずです。</p> <p>次のステップは、<code>.col</code> クラスのルールを作成し、それを左に浮動して、溝を形成する 20 ピクセルの <a href="/ja/docs/Web/CSS/margin-left"><code>margin-left</code></a> と、60 ピクセルの <a href="/ja/docs/Web/CSS/width"><code>width</code></a> を与えることです。 CSS の最後に次のルールを追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col { float: left; margin-left: 20px; width: 60px; background: rgb(255 150 150); } </code></pre></div> <p>これで、一番上の単一列の行がグリッドとしてきちんとレイアウトされます。</p> <div class="notecard note"> <p><strong>メモ:</strong> また、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。</p> </div> <p>複数列にまたがるコンテナーのレイアウトには、必要な列数（足す、その間の溝）に合わせて <a href="/ja/docs/Web/CSS/width"><code>width</code></a> の値を調整するための特別なクラスを指定する必要があります。コンテナーが 2〜12 列にまたがるようにするために、追加のクラスを作成する必要があります。それぞれの幅は、その列数の列幅に溝幅を加えた結果です。溝幅は常に列数より 1 つ少なくなります。</p> <p>CSS の最後に次を追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* Two column widths (120px) plus one gutter width (20px) */ .col.span2 { width: 140px; } /* Three column widths (180px) plus two gutter widths (40px) */ .col.span3 { width: 220px; } /* And so on… */ .col.span4 { width: 300px; } .col.span5 { width: 380px; } .col.span6 { width: 460px; } .col.span7 { width: 540px; } .col.span8 { width: 620px; } .col.span9 { width: 700px; } .col.span10 { width: 780px; } .col.span11 { width: 860px; } .col.span12 { width: 940px; } </code></pre></div> <p>これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。効果を確認するには、ページを保存してブラウザーで読み込みます。</p> <div class="notecard note"> <p><strong>メモ:</strong> 上記の例がうまくいかない場合は、GitHub の<a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html" class="external" target="_blank">完成版</a>と比較してみてください（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html" class="external" target="_blank">ライブでも見られます</a>）。</p> </div> <p>要素のクラスを変更したり、コンテナーを追加したり削除したりして、レイアウトの変更方法を確認してください。例えば、2 行目を次のようにすることができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="row"> <div class="col span8">13</div> <div class="col span4">14</div> </div> </code></pre></div> <p>これで、グリッドシステムが機能したので、単純に行と各行の列数を定義してから、各コンテナーに必要なコンテンツを埋めるだけです。すばらしいです！</p></div></section><section aria-labelledby="フルードグリッドを作成する"><h3 id="フルードグリッドを作成する"><a href="#フルードグリッドを作成する">フルードグリッドを作成する</a></h3><div class="section-content"><p>私たちのグリッドはうまく機能しますが、幅は固定されています。ブラウザーの<a href="/ja/docs/Glossary/Viewport">ビューポート</a>で利用可能なスペースに応じて拡大縮小する柔軟な（フルード（fluid、流動的な））グリッドが本当に必要です。これを実現するために、参照するピクセル幅をパーセントに変えることができます。</p> <p>固定幅を柔軟なパーセントベースのものに変換する式は次のとおりです。</p> <pre class="brush: plain notranslate">target / context = result </pre> <p>列幅については、目標の幅（<strong>target width</strong>）は 60 ピクセル、コンテキスト（<strong>context</strong>）は 960 ピクセルの <code>wrapper</code> です。パーセントを計算するために次のようにします。</p> <pre class="brush: plain notranslate">60 / 960 = 0.0625 </pre> <p>次に小数点を 2 桁移動して、6.25% のパーセントを得ます。したがって、私たちの CSS では、60 ピクセルの列幅を 6.25% に置き換えることができます。</p> <p>溝幅についても次のように同じことをする必要があります。</p> <pre class="brush: plain notranslate">20 / 960 = 0.02083333333 </pre> <p>そのため、<code>.col</code> ルールの 20 ピクセルの <a href="/ja/docs/Web/CSS/margin-left"><code>margin-left</code></a> と、<code>.wrapper</code> ルールの 20 ピクセルの <a href="/ja/docs/Web/CSS/padding-right"><code>padding-right</code></a> を 2.08333333% に置き換える必要があります。</p> <h4 id="グリッドを更新する">グリッドを更新する</h4> <p>このセクションで始めるには、前のサンプルページの新しいコピーを作成するか、または出発点として使用するために <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html" class="external" target="_blank">simple-grid-finished.html</a> コードのローカルコピーを作成してください。</p> <p>次のように（<code>.wrapper</code> セレクターの）2 番目の CSS ルールを更新します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } </code></pre></div> <p>パーセント値の <a href="/ja/docs/Web/CSS/width"><code>width</code></a> を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために <a href="/ja/docs/Web/CSS/max-width"><code>max-width</code></a> プロパティも追加しました。</p> <p>次に、（<code>.col</code> セレクターの）4 番目の CSS ルールを次のように更新します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255 150 150); } </code></pre></div> <p>もう少し面倒な部分があります。ピクセル幅ではなくパーセントを使用するようにすべての <code>.col.span</code> ルールを更新する必要があります。これは電卓で少し時間がかかります。あなたの努力を節約するために、それを下に用意しました。</p> <p>次のように CSS ルールの一番下のブロックを更新します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3 { width: 22.91666666%; } /* And so on… */ .col.span4 { width: 31.24999999%; } .col.span5 { width: 39.58333332%; } .col.span6 { width: 47.91666665%; } .col.span7 { width: 56.24999998%; } .col.span8 { width: 64.58333331%; } .col.span9 { width: 72.91666664%; } .col.span10 { width: 81.24999997%; } .col.span11 { width: 89.5833333%; } .col.span12 { width: 97.91666663%; } </code></pre></div> <p>コードを保存してブラウザーに読み込み、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。</p> <div class="notecard note"> <p><strong>メモ:</strong> 上記の例がうまくいかない場合は、<a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html" class="external" target="_blank">GitHub の完成版</a>と比較してみてください（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html" class="external" target="_blank">ライブでも見られます</a>）。</p> </div></div></section><section aria-labelledby="calc_関数を使ったより簡単な計算"><h3 id="calc_関数を使ったより簡単な計算"><a href="#calc_関数を使ったより簡単な計算">calc() 関数を使ったより簡単な計算</a></h3><div class="section-content"><p>CSS のすぐ内側で <a href="/ja/docs/Web/CSS/calc"><code>calc()</code></a> 関数を使って数学を行うことができます — これは CSS の値に簡単な数学の方程式を挿入して、値が何であるべきかを計算することを可能にします。複雑な計算が必要な場合に特に便利です。例えば、「この要素の高さは、常に親の高さの 100% から 50px を引いた値です」など、さまざまな単位を使用した計算も計算できます。 <a href="/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#calc_で、機器の高さに関係なく、インターフェイスをビューポートに制限">MediaStream 収録 API のチュートリアルからこの例</a>を参照してください。</p> <p>とにかく、私たちのグリッドに戻りましょう！グリッドの複数の列にまたがる列は、合計幅が 6.25% x またがる列の数 + 2.08333333% x 溝の数（常に列の数 - 1）になります。 <code>calc()</code> 関数を使用すると、<code>width</code> の値の内側でこの計算を実行できます。そのため、例えば、4 列にまたがる項目であれば、次のようにします。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col.span4 { width: calc((6.25% * 4) + (2.08333333% * 3)); } </code></pre></div> <p>ルールの一番下のブロックを次のように置き換えてから、ブラウザーに読み込んで、同じ結果になるかどうかを確認します。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.col.span2 { width: calc((6.25% * 2) + 2.08333333%); } .col.span3 { width: calc((6.25% * 3) + (2.08333333% * 2)); } .col.span4 { width: calc((6.25% * 4) + (2.08333333% * 3)); } .col.span5 { width: calc((6.25% * 5) + (2.08333333% * 4)); } .col.span6 { width: calc((6.25% * 6) + (2.08333333% * 5)); } .col.span7 { width: calc((6.25% * 7) + (2.08333333% * 6)); } .col.span8 { width: calc((6.25% * 8) + (2.08333333% * 7)); } .col.span9 { width: calc((6.25% * 9) + (2.08333333% * 8)); } .col.span10 { width: calc((6.25% * 10) + (2.08333333% * 9)); } .col.span11 { width: calc((6.25% * 11) + (2.08333333% * 10)); } .col.span12 { width: calc((6.25% * 12) + (2.08333333% * 11)); } </code></pre></div> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html" class="external" target="_blank">fluid-grid-calc.html</a> で完成版を見ることができます（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html" class="external" target="_blank">ライブでも見られます</a>）。</p> </div></div></section><section aria-labelledby="意味論的グリッドシステム対「意味論的でない」グリッドシステム"><h3 id="意味論的グリッドシステム対「意味論的でない」グリッドシステム"><a href="#意味論的グリッドシステム対「意味論的でない」グリッドシステム">意味論的グリッドシステム対「意味論的でない」グリッドシステム</a></h3><div class="section-content"><p>マークアップにクラスを追加してレイアウトを定義するということは、コンテンツとマークアップが視覚的表現に結び付くことを意味します。この CSS クラスの使い方は、コンテンツを説明するクラスの意味論的な使い方ではなく、「意味論的でない」（コンテンツがどのように見えるかを説明する）ものとして説明されることがあります。これは、<code>span2</code>、<code>span3</code> などのクラスの場合です。</p> <p>これらが唯一のアプローチではありません。代わりにグリッドを決定してから、サイズ情報を既存の意味論的クラスのルールに追加することができます。例えば、8 列にまたがる <code>content</code> のクラスが <a href="/ja/docs/Web/HTML/Element/div"><code><div></code></a> にある場合は、<code>span8</code> のクラスから <code>width</code> をコピーして、次のようなルールを指定できます。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.content { width: calc((6.25% * 8) + (2.08333333% * 7)); } </code></pre></div> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://sass-lang.com/" class="external" target="_blank">Sass</a> などのプリプロセッサーを使用する場合は、単純な mixin を作成してその値を挿入することができます。</p> </div></div></section><section aria-labelledby="グリッドでオフセットしたコンテナーを使えるようにする"><h3 id="グリッドでオフセットしたコンテナーを使えるようにする"><a href="#グリッドでオフセットしたコンテナーを使えるようにする">グリッドでオフセットしたコンテナーを使えるようにする</a></h3><div class="section-content"><p>作成したグリッドは、すべてのコンテナーをグリッドの左側から始めてぴったり重ねる限り、うまく機能します。最初のコンテナーの前（または、コンテナー間）に空の列スペースを残したい場合は、視覚的にグリッドを横切って押すための左マージンを追加するためのオフセットクラスを作成する必要があります。もっと数学！</p> <p>これを試してみましょう。</p> <p>以前のコードから始めるか、出発点として <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html" class="external" target="_blank">fluid-grid.html</a> ファイルを使用してください。</p> <p>CSS でコンテナー要素を 1 列幅だけオフセットするクラスを作成しましょう。 CSS の最後に次を追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.offset-by-one { margin-left: calc(6.25% + (2.08333333% * 2)); } </code></pre></div> <p>パーセント値を自分で計算したい場合は、こちらを使用してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.offset-by-one { margin-left: 10.41666666%; } </code></pre></div> <p>これで、このクラスを左側に 1 列幅の空きスペースに残したいコンテナーに追加できます。例えば、HTML に次のものがあるとします。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="col span6">14</div> </code></pre></div> <p>これを次に置き換えてみてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="col span5 offset-by-one">14</div> </code></pre></div> <div class="notecard note"> <p><strong>メモ:</strong> オフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！</p> </div> <p>違いを確認するには、ロードとリフレッシュを試してみるか、<a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-offset.html" class="external" target="_blank">fluid-grid-offset.html</a> の例を確認してください（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html" class="external" target="_blank">ライブでも見られます</a>）。完成した例は次のようになります。</p> <p><img src="/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/offset-grid-finished.png" alt="グリッドには 2 つの行があります。 1 行目には同じ幅の 12 個の項目があり、 2 行目には幅の異なる 4 個の項目があります。項目 13 は 1 列、項目 14 は 5 列、項目 15 は 3 列、項目 16 は 2 列にわたります。アイテム 14 は 'offset-by-one' クラスが適用されており、 2 つ目ではなく 3 つ目の列から始まり、 2 行目の 2 つ目の列に 1 列分の幅の空き空間が残ります。" width="944" height="47" loading="lazy"></p> <div class="notecard note"> <p><strong>メモ:</strong> 特別な演習として、<code>offset-by-two</code> クラスを実装できますか？</p> </div></div></section><section aria-labelledby="浮動ボックスのグリッドの制限"><h3 id="浮動ボックスのグリッドの制限"><a href="#浮動ボックスのグリッドの制限">浮動ボックスのグリッドの制限</a></h3><div class="section-content"><p>このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。浮動ボックスの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。</p> <p>また、要素のコンテンツがそれらが占める行よりも広くなると、オーバーフローしてだらしなく見えることも覚えておいてください。</p> <p>このシステムの最大の制限は、それが本質的に一次元であるということです。私たちは列を扱っていて、要素は列にまたがっていますが、行には及んでいません。これらの古いレイアウト方法では、高さを明示的に設定せずに要素の高さを制御することは非常に困難で、これも非常に柔軟性のない方法です — コンテンツが一定の高さになることを保証できる場合にのみ機能します。</p></div></section><section aria-labelledby="フレックスボックスのグリッド？"><h2 id="フレックスボックスのグリッド？"><a href="#フレックスボックスのグリッド？">フレックスボックスのグリッド？</a></h2><div class="section-content"><p>以前の<a href="/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox">フレックスボックス</a>に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。</p> <p>ただし、フレックスボックスはグリッドシステムとして設計されたことはなく、その 1 つとして使用すると新しい一連の問題が発生します。この簡単な例として、上記で使用したのと同じマークアップ例を使用し、次の CSS を使用して <code>wrapper</code>、<code>row</code>、<code>col</code> クラスをスタイルすることができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { width: 90%; max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } .row { display: flex; } .col { margin-left: 2.08333333%; margin-bottom: 1em; width: 6.25%; flex: 1 1 auto; background: rgb(255 150 150); } </code></pre></div> <p>あなた自身の例でこれらの置き換えをすることを試みるか、または <a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/flexbox-grid.html" class="external" target="_blank">flexbox-grid.html</a> の例のコードを見ることができます（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html" class="external" target="_blank">ライブでも見られます</a>）。</p> <p>ここで各行をフレックスコンテナーに変えています。フレックスボックスベースのグリッドでは、合計が 100% 未満の要素を持つことができるようにするために、まだ行が必要です。そのコンテナーを <code>display: flex</code> に設定します。</p> <p><code>.col</code> では、<a href="/ja/docs/Web/CSS/flex"><code>flex</code></a> プロパティの最初の値（<a href="/ja/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>）を 1 に設定して項目を大きくできるようにし、2 番目の値（<a href="/ja/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>）を 1 にして項目を縮小できるようにし、3 番目の値（<a href="/ja/docs/Web/CSS/flex-basis"><code>flex-basis</code></a>）を <code>auto</code> に設定します。この要素には <a href="/ja/docs/Web/CSS/width"><code>width</code></a> が設定されているので、<code>auto</code> はその幅を <code>flex-basis</code> の値として使用します。</p> <p>一番上のラインでは、グリッド上に 12 個のきちんとしたボックスが表示され、ビューポートの幅を変更すると、それらは均等に拡大および縮小されます。しかし、次のラインでは、4 つの項目しかなく、これらも基本の 60px から増減しています。それらのうちの 4 つだけで、それらは上の行の項目よりもはるかに大きく成長することができ、その結果、それらはすべて 2 番目の行で同じ幅を占めます。</p> <p><img src="/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/flexbox-grid-incomplete.png" alt="グリッドには 2 つの行があります。それぞれの行はフレックスコンテナーです。 1 行目には 12 個の等幅フレックスアイテムがあります。 2 つ目には 4 つの等幅フレックスアイテムがあります。" width="944" height="71" loading="lazy"></p> <p>これを修正するには、その要素に対して <code>flex-basis</code> によって使用される値を置き換える幅を提供するために、<code>span</code> クラスを含める必要があります。</p> <p>それらは、直上の項目について何も知らないので、直上の項目によって使用されるグリッドを尊重もしません。</p> <p>フレックスボックスは設計上<strong>一次元</strong>です。それは単一の次元、つまり行または列の次元を扱います。列と行に厳密なグリッドを作成することはできません。つまり、グリッドにフレックスボックスを使用する場合でも、浮動ボックスのレイアウトの場合と同様にパーセントを計算する必要があります。</p> <p>プロジェクトでは、フレックスボックスが浮動ボックスを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。</p></div></section><section aria-labelledby="サードパーティのグリッドシステム"><h2 id="サードパーティのグリッドシステム"><a href="#サードパーティのグリッドシステム">サードパーティのグリッドシステム</a></h2><div class="section-content"><p>グリッド計算の背後にある数学を理解したので、一般的に使用されているサードパーティのグリッドシステムのいくつかを検討するのに適した状況です。ウェブ上で「CSS Grid framework」を検索すると、膨大な選択肢のリストが見つかるでしょう。 <a href="http://getbootstrap.com/" class="external" target="_blank">Bootstrap</a> や <a href="http://foundation.zurb.com/" class="external" target="_blank">Foundation</a> などの人気のあるフレームワークには、グリッドシステムが含まれています。 CSS やプリプロセッサーを使用して開発されたスタンドアロンのグリッドシステムもあります。</p> <p>グリッドフレームワークを扱うための一般的なテクニックを説明しているので、これらのスタンドアロンシステムの 1 つを見てみましょう。これから使用するグリッドは、単純な CSS フレームワークである Skeleton の一部です。</p> <p>はじめに <a href="http://getskeleton.com/" class="external" target="_blank">Skeleton のウェブサイト</a>にアクセスし、「Download」を選択して ZIP ファイルをダウンロードします。これを解凍し、<code>skeleton.css</code> ファイルと <code>normalize.css</code> ファイルを新しいディレクトリーにコピーします。</p> <p><a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton.html" class="external" target="_blank">html-skeleton.html</a> ファイルのコピーを作成し、それを <code>skeleton.css</code> と <code>normalize.css</code> と同じディレクトリーに保存します。</p> <p>その <code>head</code> に次を追加することによって、<code>skeleton.css</code> と <code>normalize.css</code> を HTML ページに含めます。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><link href="normalize.css" rel="stylesheet" /> <link href="skeleton.css" rel="stylesheet" /> </code></pre></div> <p>Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。</p> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://necolas.github.io/normalize.css/" class="external" target="_blank">Normalize</a> は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリーです。これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。</p> </div> <p>前の例と同様の HTML を使用します。 HTML の <code>body</code> に次を追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col">13</div> <div class="col">14</div> <div class="col">15</div> <div class="col">16</div> </div> </div> </code></pre></div> <p>Skeleton を使い始めるためには、ラッパーの <a href="/ja/docs/Web/HTML/Element/div"><code><div></code></a> に <code>container</code> クラスを与える必要があります — これは既に HTML に含まれています。これにより、最大幅 960 ピクセルのコンテンツが中央に配置されます。ボックスが 960 ピクセルよりも広くならないことがわかります。</p> <p>このクラスを適用するときに使用される CSS を見るために <code>skeleton.css</code> ファイルを見ることができます。 <code><div></code> は <code>auto</code> の左右のマージンで中央に配置され、左右に 20 ピクセルのパディングが適用されます。 Skeleton はまた、先ほど行ったように <a href="/ja/docs/Web/CSS/box-sizing"><code>box-sizing</code></a> プロパティを <code>border-box</code> に設定するので、この要素のパディングとボーダーは合計幅に含まれます。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } </code></pre></div> <p>要素が行内にある場合にのみ要素をグリッドの一部にすることができます。前の例と同様に、<code>content</code> <code><div></code> と実際のコンテンツコンテナーの <code><div></code> の間にネストした <code>row</code> クラスを持つ追加の <code><div></code> またはその他の要素が必要です。これも既に行ってあります。</p> <p>それではコンテナーボックスをレイアウトしましょう。 Skeleton は 12 列グリッドに基づいています。一番上のラインのボックスはすべて、1 列にまたがるようにするために <code>one column</code> クラスが必要です。</p> <p>次のスニペットに示すように、これらを追加します。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="container"> <div class="row"> <div class="one column">1</div> <div class="one column">2</div> <div class="one column">3</div> /* and so on */ </div> </div> </code></pre></div> <p>次に、2 番目の <code>row</code> クラスのコンテナーに、それらがまたがるべき列数を説明します。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><div class="row"> <div class="one column">13</div> <div class="six columns">14</div> <div class="three columns">15</div> <div class="two columns">16</div> </div> </code></pre></div> <p>HTML ファイルを保存してブラウザーに読み込んで、効果を確認してください。</p> <div class="notecard note"> <p><strong>メモ:</strong> この例がうまく動作しない場合は、使用するウィンドウを広げてみてください（ウィンドウが狭すぎると、ここで記述されているようにグリッドが表示されません）。この例がうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html" class="external" target="_blank">html-skeleton-finished.html</a> ファイルと比較してみてください（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html" class="external" target="_blank">ライブでも見られます</a>）。</p> </div> <p><code>skeleton.css</code> ファイルを見ると、これがどのように機能するかがわかります。例えば、Skeleton には、 "three columns" クラスを追加して要素をスタイルするための次の定義があります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.three.columns { width: 22%; } </code></pre></div> <p>Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。これらのパーセントを自分で計算する作業を行ったのとまったく同じです。</p> <p>ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。マークアップにクラスを追加すると、すべての浮動ボックスが処理されます。グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。</p></div></section><section aria-labelledby="まとめ"><h2 id="まとめ"><a href="#まとめ">まとめ</a></h2><div class="section-content"><p>これで、さまざまなグリッドシステムの作成方法が理解できました。これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。</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="2025-01-03T13:37:48.000Z">2025年1月3日</time> by <a href="/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/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/learn_web_development/core/css_layout/legacy_layout_methods/index.md?plain=1" title="Folder: ja/learn_web_development/core/css_layout/legacy_layout_methods (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%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods&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%2Flearn_web_development%2Fcore%2Fcss_layout%2Flegacy_layout_methods%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FCore%2FCSS_layout%2FLegacy_Layout_Methods%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn_web_development%2Fcore%2Fcss_layout%2Flegacy_layout_methods%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F375f97e6c1e6eb0f86b75021917187911d0b586d%0A*+Document+last+modified%3A+2025-01-03T13%3A37%3A48.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://mastodon.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 xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></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–2025 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/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ボックスや他のレイアウト機能を使用して実装される傾向がありました。レイアウトをいくつかの列（例えば 4、6、12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせてみてください。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提知識:</th>\n <td>\n HTML の基礎（<a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">HTML 入門</a>で学習）、 CSS の動作の考え方（\n <a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS によるスタイル設定の基本</a>で学習）\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目的:</th>\n <td>\n CSS グリッドレイアウトがブラウザーで利用可能になる前に使用されていたグリッドレイアウトシステムの背後にある基本概念を理解すること。\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"css_グリッドレイアウト以前のレイアウトとグリッドシステム","title":"CSS グリッドレイアウト以前のレイアウトとグリッドシステム","isH3":false,"content":"<p>CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。今これらを「古い」方法と呼んでいます。</p>\n<p>新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の 1 つ以上の最新のレイアウト方法と組み合わせて使用して、任意のレイアウトの基礎とします。しかし、時々、これらの古い方法を使用している「グリッドシステム」に遭遇するでしょう。それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。</p>\n<p>このレッスンでは、浮動ボックスとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう。この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。</p>\n<p>これらのシステムを検討する際には、それらのどれも実際には CSS グリッドレイアウトがグリッドを作成する方法でグリッドを作成しないことに、留意する価値があります。それらは項目にサイズを与え、グリッドのように<em>見える</em>ように一列に並べることによって機能します。</p>"}},{"type":"prose","value":{"id":"2_段組みレイアウト","title":"2 段組みレイアウト","isH3":false,"content":"<p>最も簡単な例として、2 段組みのレイアウトから始めましょう。コンピューター上に新しい <code>index.html</code> ファイルを作成し、それを<a href=\"https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html\" class=\"external\" target=\"_blank\">単純な HTML テンプレート</a>で埋め、適切な場所に以下のコードを挿入することで、従うことができます。このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。</p>\n<p>まず最初に、列に入れるためにいくつかのコンテンツが必要です。次のもので <code>body</code> の中に現在あるものはすべて置き換えます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><h1>2 段組みレイアウトの例</h1>\n<div>\n <h2>1 段目</h2>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus\n aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,\n pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at\n ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer\n ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur\n vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.\n Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus\n sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.\n Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,\n eget fermentum sapien.\n </p>\n</div>\n\n<div>\n <h2>2 段目</h2>\n <p>\n Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada\n ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed\n est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus\n tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies\n lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis\n vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n </p>\n</div>\n</code></pre></div>\n<p>それぞれの列はそのコンテンツを含むために外側の要素が必要です。この例では <a href=\"/ja/docs/Web/HTML/Element/div\"><code><div></code></a> を選択しましたが、<a href=\"/ja/docs/Web/HTML/Element/article\"><code><article></code></a>、<a href=\"/ja/docs/Web/HTML/Element/section\"><code><section></code></a>、<a href=\"/ja/docs/Web/HTML/Element/aside\"><code><aside></code></a> など、より意味論的に適切なものを選択することもできます。</p>\n<p>今 CSS に対して、まず最初に、HTML に従うため、いくつかの基本的な設定を提供するために次を適用します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 90%;\n max-width: 900px;\n margin: 0 auto;\n}\n</code></pre></div>\n<p><code>body</code> の幅が 900px になるまで、<code>body</code> はビューポートの幅の 90% になります。この場合、<code>body</code> はこの幅に固定され、ビューポートの中央に配置されます。デフォルトでは、その子（<a href=\"/ja/docs/Web/HTML/Element/Heading_Elements\">h1</a> と 2 つの <a href=\"/ja/docs/Web/HTML/Element/div\"><code><div></code></a>）は <code>body</code> の幅の 100% にわたります。 2 つの <a href=\"/ja/docs/Web/HTML/Element/div\"><code><div></code></a> を互いに並べて浮動させたい場合は、それらの幅の合計をその親要素の幅の 100% 以下に設定して、互いに並んで収まるようにする必要があります。 CSS の最後に次を追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div:nth-of-type(1) {\n width: 48%;\n}\n\ndiv:nth-of-type(2) {\n width: 48%;\n}\n</code></pre></div>\n<p>ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2 列の間の溝のために 4% の空きを残し、コンテンツに余裕を持たせることができます。さらに次のようにして、列を浮動ボックスにする必要があります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div:nth-of-type(1) {\n width: 48%;\n float: left;\n}\n\ndiv:nth-of-type(2) {\n width: 48%;\n float: right;\n}\n</code></pre></div>\n<p>これらすべてをまとめると、次のような結果が得られます。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"A two column layout sample\" id=\"frame_a_two_column_layout\" width=\"100%\" height=\"520\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/\" data-live-id=\"a_two_column_layout\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>ここでは、すべての幅にパーセントを使用していることに気付くでしょう。これは、さまざまな画面サイズに合わせて調整し、小さい画面サイズで列幅に同じ比率を維持する、<strong>リキッドレイアウト</strong>（liquid layout）を作成するため、非常に良い戦略です。ブラウザーウィンドウの幅を調整して確認してください。これはレスポンシブウェブデザインのための貴重なツールです。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nこの例は <a href=\"https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html\" class=\"external\" target=\"_blank\">0_two-column-layout.html</a> で実行できます（<a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html\" class=\"external\" target=\"_blank\">ソースコード</a>も見る）。</p>\n</div>"}},{"type":"prose","value":{"id":"単純な古いグリッドフレームワークを作成する","title":"単純な古いグリッドフレームワークを作成する","isH3":false,"content":"<p>古いフレームワークの大部分は、グリッドのように見えるものを作成するために、<a href=\"/ja/docs/Web/CSS/float\"><code>float</code></a> プロパティのふるまいを使用して、ある列を別の列の隣に浮動します。浮動ボックスによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、<a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Floats\">浮動ボックスとクリア</a>のレッスンで学んだことを基にしてさらに高度な概念を紹介します。</p>\n<p>作成する最も簡単な種類のグリッドフレームワークは固定幅のものです — デザインに必要な合計幅、列数、および溝幅と列幅を求める必要があります。ブラウザーの幅に合わせて増減する列を含むグリッドにデザインをレイアウトすることにした場合は、列とそれらの間の溝に対してパーセント幅を計算する必要があります。</p>\n<p>次のセクションでは、両方を作成する方法を見ていきます。 12 列のグリッドを作成します — 12 が 6、4、3、および 2 で割り切れることを考えると、さまざまな状況に非常に適応できると見られる非常に一般的な選択です。</p>"}},{"type":"prose","value":{"id":"単純な固定幅グリッド","title":"単純な固定幅グリッド","isH3":true,"content":"<p>最初に固定幅の列を使用するグリッドシステムを作成しましょう。</p>\n<p>サンプルの <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid.html\" class=\"external\" target=\"_blank\">simple-grid.html</a> ファイルのローカルコピーを作成することから始めます。このファイルには、<code>body</code> に次のマークアップが含まれています。</p>\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=\"row\">\n <div class=\"col\">1</div>\n <div class=\"col\">2</div>\n <div class=\"col\">3</div>\n <div class=\"col\">4</div>\n <div class=\"col\">5</div>\n <div class=\"col\">6</div>\n <div class=\"col\">7</div>\n <div class=\"col\">8</div>\n <div class=\"col\">9</div>\n <div class=\"col\">10</div>\n <div class=\"col\">11</div>\n <div class=\"col\">12</div>\n </div>\n <div class=\"row\">\n <div class=\"col span1\">13</div>\n <div class=\"col span6\">14</div>\n <div class=\"col span3\">15</div>\n <div class=\"col span2\">16</div>\n </div>\n</div>\n</code></pre></div>\n<p>目的は、これを 12 列 2 行のグリッドのデモ用グリッドに変換することです — 一番上の行は個々の列のサイズを示し、2 番目の行はグリッド上のいくつかの異なるサイズの領域です。</p>\n<p><img src=\"/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/simple-grid-finished.png\" alt=\"CSS グリッドで 16 個のグリッドアイテムが 12 列と 2 行にまたがる様子。一番上の行には、 12 列の同じ幅のグリッドアイテムがあります。 2 つ目には、異なるサイズのグリッドアイテムがあります。項目 13 は 1 列、項目 14 は 6 列、項目 15 は 3 列、項目 16 は 2 列にわたります。\" width=\"952\" height=\"50\" loading=\"lazy\"></p>\n<p><a href=\"/ja/docs/Web/HTML/Element/style\"><code><style></code></a> 要素に、次のコードを追加します。これにより、<code>wrapper</code> コンテナーの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。これにより、列幅と溝幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で <a href=\"/ja/docs/Web/CSS/box-sizing\"><code>box-sizing</code></a> を <code>border-box</code> に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、<a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Box_model#css_代替ボックスモデル\">CSS 代替ボックスモデル</a>を参照）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>* {\n box-sizing: border-box;\n}\n\nbody {\n width: 980px;\n margin: 0 auto;\n}\n\n.wrapper {\n padding-right: 20px;\n}\n</code></pre></div>\n<p>次に、グリッドの各行を囲む <code>row</code> コンテナーを使用して、ある行を別の行からクリアします。前のルールの下に次のルールを追加します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.row {\n clear: both;\n}\n</code></pre></div>\n<p>このクリアを適用すると、各行を 12 列の要素で完全に埋める必要がなくなります。行は分離されたままになり、互いに干渉しません。</p>\n<p>列の間の溝は 20 ピクセル幅です。最初の列を含め、各列の左側にマージンとしてこれらの溝を作成して、コンテナーの右側にある 20 ピクセルのパディングとのバランスを取ります。だから全部で 12 の溝を持っています — 12 x 20 = 240。</p>\n<p>これを 960 ピクセルの合計幅から差し引いて、列に 720 ピクセルを与える必要があります。これを 12 で割ると、各列の幅は 60 ピクセルになるはずです。</p>\n<p>次のステップは、<code>.col</code> クラスのルールを作成し、それを左に浮動して、溝を形成する 20 ピクセルの <a href=\"/ja/docs/Web/CSS/margin-left\"><code>margin-left</code></a> と、60 ピクセルの <a href=\"/ja/docs/Web/CSS/width\"><code>width</code></a> を与えることです。 CSS の最後に次のルールを追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col {\n float: left;\n margin-left: 20px;\n width: 60px;\n background: rgb(255 150 150);\n}\n</code></pre></div>\n<p>これで、一番上の単一列の行がグリッドとしてきちんとレイアウトされます。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nまた、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。</p>\n</div>\n<p>複数列にまたがるコンテナーのレイアウトには、必要な列数（足す、その間の溝）に合わせて <a href=\"/ja/docs/Web/CSS/width\"><code>width</code></a> の値を調整するための特別なクラスを指定する必要があります。コンテナーが 2〜12 列にまたがるようにするために、追加のクラスを作成する必要があります。それぞれの幅は、その列数の列幅に溝幅を加えた結果です。溝幅は常に列数より 1 つ少なくなります。</p>\n<p>CSS の最後に次を追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* Two column widths (120px) plus one gutter width (20px) */\n.col.span2 {\n width: 140px;\n}\n/* Three column widths (180px) plus two gutter widths (40px) */\n.col.span3 {\n width: 220px;\n}\n/* And so on… */\n.col.span4 {\n width: 300px;\n}\n.col.span5 {\n width: 380px;\n}\n.col.span6 {\n width: 460px;\n}\n.col.span7 {\n width: 540px;\n}\n.col.span8 {\n width: 620px;\n}\n.col.span9 {\n width: 700px;\n}\n.col.span10 {\n width: 780px;\n}\n.col.span11 {\n width: 860px;\n}\n.col.span12 {\n width: 940px;\n}\n</code></pre></div>\n<p>これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。効果を確認するには、ページを保存してブラウザーで読み込みます。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n上記の例がうまくいかない場合は、GitHub の<a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html\" class=\"external\" target=\"_blank\">完成版</a>と比較してみてください（<a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html\" class=\"external\" target=\"_blank\">ライブでも見られます</a>）。</p>\n</div>\n<p>要素のクラスを変更したり、コンテナーを追加したり削除したりして、レイアウトの変更方法を確認してください。例えば、2 行目を次のようにすることができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"row\">\n <div class=\"col span8\">13</div>\n <div class=\"col span4\">14</div>\n</div>\n</code></pre></div>\n<p>これで、グリッドシステムが機能したので、単純に行と各行の列数を定義してから、各コンテナーに必要なコンテンツを埋めるだけです。すばらしいです！</p>"}},{"type":"prose","value":{"id":"フルードグリッドを作成する","title":"フルードグリッドを作成する","isH3":true,"content":"<p>私たちのグリッドはうまく機能しますが、幅は固定されています。ブラウザーの<a href=\"/ja/docs/Glossary/Viewport\">ビューポート</a>で利用可能なスペースに応じて拡大縮小する柔軟な（フルード（fluid、流動的な））グリッドが本当に必要です。これを実現するために、参照するピクセル幅をパーセントに変えることができます。</p>\n<p>固定幅を柔軟なパーセントベースのものに変換する式は次のとおりです。</p>\n<pre class=\"brush: plain notranslate\">target / context = result\n</pre>\n<p>列幅については、目標の幅（<strong>target width</strong>）は 60 ピクセル、コンテキスト（<strong>context</strong>）は 960 ピクセルの <code>wrapper</code> です。パーセントを計算するために次のようにします。</p>\n<pre class=\"brush: plain notranslate\">60 / 960 = 0.0625\n</pre>\n<p>次に小数点を 2 桁移動して、6.25% のパーセントを得ます。したがって、私たちの CSS では、60 ピクセルの列幅を 6.25% に置き換えることができます。</p>\n<p>溝幅についても次のように同じことをする必要があります。</p>\n<pre class=\"brush: plain notranslate\">20 / 960 = 0.02083333333\n</pre>\n<p>そのため、<code>.col</code> ルールの 20 ピクセルの <a href=\"/ja/docs/Web/CSS/margin-left\"><code>margin-left</code></a> と、<code>.wrapper</code> ルールの 20 ピクセルの <a href=\"/ja/docs/Web/CSS/padding-right\"><code>padding-right</code></a> を 2.08333333% に置き換える必要があります。</p>\n<h4 id=\"グリッドを更新する\">グリッドを更新する</h4>\n<p>このセクションで始めるには、前のサンプルページの新しいコピーを作成するか、または出発点として使用するために <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/simple-grid-finished.html\" class=\"external\" target=\"_blank\">simple-grid-finished.html</a> コードのローカルコピーを作成してください。</p>\n<p>次のように（<code>.wrapper</code> セレクターの）2 番目の CSS ルールを更新します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 90%;\n max-width: 980px;\n margin: 0 auto;\n}\n\n.wrapper {\n padding-right: 2.08333333%;\n}\n</code></pre></div>\n<p>パーセント値の <a href=\"/ja/docs/Web/CSS/width\"><code>width</code></a> を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために <a href=\"/ja/docs/Web/CSS/max-width\"><code>max-width</code></a> プロパティも追加しました。</p>\n<p>次に、（<code>.col</code> セレクターの）4 番目の CSS ルールを次のように更新します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col {\n float: left;\n margin-left: 2.08333333%;\n width: 6.25%;\n background: rgb(255 150 150);\n}\n</code></pre></div>\n<p>もう少し面倒な部分があります。ピクセル幅ではなくパーセントを使用するようにすべての <code>.col.span</code> ルールを更新する必要があります。これは電卓で少し時間がかかります。あなたの努力を節約するために、それを下に用意しました。</p>\n<p>次のように CSS ルールの一番下のブロックを更新します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* Two column widths (12.5%) plus one gutter width (2.08333333%) */\n.col.span2 {\n width: 14.58333333%;\n}\n/* Three column widths (18.75%) plus two gutter widths (4.1666666) */\n.col.span3 {\n width: 22.91666666%;\n}\n/* And so on… */\n.col.span4 {\n width: 31.24999999%;\n}\n.col.span5 {\n width: 39.58333332%;\n}\n.col.span6 {\n width: 47.91666665%;\n}\n.col.span7 {\n width: 56.24999998%;\n}\n.col.span8 {\n width: 64.58333331%;\n}\n.col.span9 {\n width: 72.91666664%;\n}\n.col.span10 {\n width: 81.24999997%;\n}\n.col.span11 {\n width: 89.5833333%;\n}\n.col.span12 {\n width: 97.91666663%;\n}\n</code></pre></div>\n<p>コードを保存してブラウザーに読み込み、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n上記の例がうまくいかない場合は、<a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html\" class=\"external\" target=\"_blank\">GitHub の完成版</a>と比較してみてください（<a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html\" class=\"external\" target=\"_blank\">ライブでも見られます</a>）。</p>\n</div>"}},{"type":"prose","value":{"id":"calc_関数を使ったより簡単な計算","title":"calc() 関数を使ったより簡単な計算","isH3":true,"content":"<p>CSS のすぐ内側で <a href=\"/ja/docs/Web/CSS/calc\"><code>calc()</code></a> 関数を使って数学を行うことができます — これは CSS の値に簡単な数学の方程式を挿入して、値が何であるべきかを計算することを可能にします。複雑な計算が必要な場合に特に便利です。例えば、「この要素の高さは、常に親の高さの 100% から 50px を引いた値です」など、さまざまな単位を使用した計算も計算できます。 <a href=\"/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#calc_で、機器の高さに関係なく、インターフェイスをビューポートに制限\">MediaStream 収録 API のチュートリアルからこの例</a>を参照してください。</p>\n<p>とにかく、私たちのグリッドに戻りましょう！グリッドの複数の列にまたがる列は、合計幅が 6.25% x またがる列の数 + 2.08333333% x 溝の数（常に列の数 - 1）になります。 <code>calc()</code> 関数を使用すると、<code>width</code> の値の内側でこの計算を実行できます。そのため、例えば、4 列にまたがる項目であれば、次のようにします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col.span4 {\n width: calc((6.25% * 4) + (2.08333333% * 3));\n}\n</code></pre></div>\n<p>ルールの一番下のブロックを次のように置き換えてから、ブラウザーに読み込んで、同じ結果になるかどうかを確認します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.col.span2 {\n width: calc((6.25% * 2) + 2.08333333%);\n}\n.col.span3 {\n width: calc((6.25% * 3) + (2.08333333% * 2));\n}\n.col.span4 {\n width: calc((6.25% * 4) + (2.08333333% * 3));\n}\n.col.span5 {\n width: calc((6.25% * 5) + (2.08333333% * 4));\n}\n.col.span6 {\n width: calc((6.25% * 6) + (2.08333333% * 5));\n}\n.col.span7 {\n width: calc((6.25% * 7) + (2.08333333% * 6));\n}\n.col.span8 {\n width: calc((6.25% * 8) + (2.08333333% * 7));\n}\n.col.span9 {\n width: calc((6.25% * 9) + (2.08333333% * 8));\n}\n.col.span10 {\n width: calc((6.25% * 10) + (2.08333333% * 9));\n}\n.col.span11 {\n width: calc((6.25% * 11) + (2.08333333% * 10));\n}\n.col.span12 {\n width: calc((6.25% * 12) + (2.08333333% * 11));\n}\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-calc.html\" class=\"external\" target=\"_blank\">fluid-grid-calc.html</a> で完成版を見ることができます（<a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html\" class=\"external\" target=\"_blank\">ライブでも見られます</a>）。</p>\n</div>"}},{"type":"prose","value":{"id":"意味論的グリッドシステム対「意味論的でない」グリッドシステム","title":"意味論的グリッドシステム対「意味論的でない」グリッドシステム","isH3":true,"content":"<p>マークアップにクラスを追加してレイアウトを定義するということは、コンテンツとマークアップが視覚的表現に結び付くことを意味します。この CSS クラスの使い方は、コンテンツを説明するクラスの意味論的な使い方ではなく、「意味論的でない」（コンテンツがどのように見えるかを説明する）ものとして説明されることがあります。これは、<code>span2</code>、<code>span3</code> などのクラスの場合です。</p>\n<p>これらが唯一のアプローチではありません。代わりにグリッドを決定してから、サイズ情報を既存の意味論的クラスのルールに追加することができます。例えば、8 列にまたがる <code>content</code> のクラスが <a href=\"/ja/docs/Web/HTML/Element/div\"><code><div></code></a> にある場合は、<code>span8</code> のクラスから <code>width</code> をコピーして、次のようなルールを指定できます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.content {\n width: calc((6.25% * 8) + (2.08333333% * 7));\n}\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <a href=\"https://sass-lang.com/\" class=\"external\" target=\"_blank\">Sass</a> などのプリプロセッサーを使用する場合は、単純な mixin を作成してその値を挿入することができます。</p>\n</div>"}},{"type":"prose","value":{"id":"グリッドでオフセットしたコンテナーを使えるようにする","title":"グリッドでオフセットしたコンテナーを使えるようにする","isH3":true,"content":"<p>作成したグリッドは、すべてのコンテナーをグリッドの左側から始めてぴったり重ねる限り、うまく機能します。最初のコンテナーの前（または、コンテナー間）に空の列スペースを残したい場合は、視覚的にグリッドを横切って押すための左マージンを追加するためのオフセットクラスを作成する必要があります。もっと数学！</p>\n<p>これを試してみましょう。</p>\n<p>以前のコードから始めるか、出発点として <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid.html\" class=\"external\" target=\"_blank\">fluid-grid.html</a> ファイルを使用してください。</p>\n<p>CSS でコンテナー要素を 1 列幅だけオフセットするクラスを作成しましょう。 CSS の最後に次を追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.offset-by-one {\n margin-left: calc(6.25% + (2.08333333% * 2));\n}\n</code></pre></div>\n<p>パーセント値を自分で計算したい場合は、こちらを使用してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.offset-by-one {\n margin-left: 10.41666666%;\n}\n</code></pre></div>\n<p>これで、このクラスを左側に 1 列幅の空きスペースに残したいコンテナーに追加できます。例えば、HTML に次のものがあるとします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"col span6\">14</div>\n</code></pre></div>\n<p>これを次に置き換えてみてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"col span5 offset-by-one\">14</div>\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nオフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！</p>\n</div>\n<p>違いを確認するには、ロードとリフレッシュを試してみるか、<a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/fluid-grid-offset.html\" class=\"external\" target=\"_blank\">fluid-grid-offset.html</a> の例を確認してください（<a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html\" class=\"external\" target=\"_blank\">ライブでも見られます</a>）。完成した例は次のようになります。</p>\n<p><img src=\"/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/offset-grid-finished.png\" alt=\"グリッドには 2 つの行があります。 1 行目には同じ幅の 12 個の項目があり、 2 行目には幅の異なる 4 個の項目があります。項目 13 は 1 列、項目 14 は 5 列、項目 15 は 3 列、項目 16 は 2 列にわたります。アイテム 14 は 'offset-by-one' クラスが適用されており、 2 つ目ではなく 3 つ目の列から始まり、 2 行目の 2 つ目の列に 1 列分の幅の空き空間が残ります。\" width=\"944\" height=\"47\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n特別な演習として、<code>offset-by-two</code> クラスを実装できますか？</p>\n</div>"}},{"type":"prose","value":{"id":"浮動ボックスのグリッドの制限","title":"浮動ボックスのグリッドの制限","isH3":true,"content":"<p>このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。浮動ボックスの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。</p>\n<p>また、要素のコンテンツがそれらが占める行よりも広くなると、オーバーフローしてだらしなく見えることも覚えておいてください。</p>\n<p>このシステムの最大の制限は、それが本質的に一次元であるということです。私たちは列を扱っていて、要素は列にまたがっていますが、行には及んでいません。これらの古いレイアウト方法では、高さを明示的に設定せずに要素の高さを制御することは非常に困難で、これも非常に柔軟性のない方法です — コンテンツが一定の高さになることを保証できる場合にのみ機能します。</p>"}},{"type":"prose","value":{"id":"フレックスボックスのグリッド？","title":"フレックスボックスのグリッド？","isH3":false,"content":"<p>以前の<a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox\">フレックスボックス</a>に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。</p>\n<p>ただし、フレックスボックスはグリッドシステムとして設計されたことはなく、その 1 つとして使用すると新しい一連の問題が発生します。この簡単な例として、上記で使用したのと同じマークアップ例を使用し、次の CSS を使用して <code>wrapper</code>、<code>row</code>、<code>col</code> クラスをスタイルすることができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body {\n width: 90%;\n max-width: 980px;\n margin: 0 auto;\n}\n\n.wrapper {\n padding-right: 2.08333333%;\n}\n\n.row {\n display: flex;\n}\n\n.col {\n margin-left: 2.08333333%;\n margin-bottom: 1em;\n width: 6.25%;\n flex: 1 1 auto;\n background: rgb(255 150 150);\n}\n</code></pre></div>\n<p>あなた自身の例でこれらの置き換えをすることを試みるか、または <a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/flexbox-grid.html\" class=\"external\" target=\"_blank\">flexbox-grid.html</a> の例のコードを見ることができます（<a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html\" class=\"external\" target=\"_blank\">ライブでも見られます</a>）。</p>\n<p>ここで各行をフレックスコンテナーに変えています。フレックスボックスベースのグリッドでは、合計が 100% 未満の要素を持つことができるようにするために、まだ行が必要です。そのコンテナーを <code>display: flex</code> に設定します。</p>\n<p><code>.col</code> では、<a href=\"/ja/docs/Web/CSS/flex\"><code>flex</code></a> プロパティの最初の値（<a href=\"/ja/docs/Web/CSS/flex-grow\"><code>flex-grow</code></a>）を 1 に設定して項目を大きくできるようにし、2 番目の値（<a href=\"/ja/docs/Web/CSS/flex-shrink\"><code>flex-shrink</code></a>）を 1 にして項目を縮小できるようにし、3 番目の値（<a href=\"/ja/docs/Web/CSS/flex-basis\"><code>flex-basis</code></a>）を <code>auto</code> に設定します。この要素には <a href=\"/ja/docs/Web/CSS/width\"><code>width</code></a> が設定されているので、<code>auto</code> はその幅を <code>flex-basis</code> の値として使用します。</p>\n<p>一番上のラインでは、グリッド上に 12 個のきちんとしたボックスが表示され、ビューポートの幅を変更すると、それらは均等に拡大および縮小されます。しかし、次のラインでは、4 つの項目しかなく、これらも基本の 60px から増減しています。それらのうちの 4 つだけで、それらは上の行の項目よりもはるかに大きく成長することができ、その結果、それらはすべて 2 番目の行で同じ幅を占めます。</p>\n<p><img src=\"/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods/flexbox-grid-incomplete.png\" alt=\"グリッドには 2 つの行があります。それぞれの行はフレックスコンテナーです。 1 行目には 12 個の等幅フレックスアイテムがあります。 2 つ目には 4 つの等幅フレックスアイテムがあります。\" width=\"944\" height=\"71\" loading=\"lazy\"></p>\n<p>これを修正するには、その要素に対して <code>flex-basis</code> によって使用される値を置き換える幅を提供するために、<code>span</code> クラスを含める必要があります。</p>\n<p>それらは、直上の項目について何も知らないので、直上の項目によって使用されるグリッドを尊重もしません。</p>\n<p>フレックスボックスは設計上<strong>一次元</strong>です。それは単一の次元、つまり行または列の次元を扱います。列と行に厳密なグリッドを作成することはできません。つまり、グリッドにフレックスボックスを使用する場合でも、浮動ボックスのレイアウトの場合と同様にパーセントを計算する必要があります。</p>\n<p>プロジェクトでは、フレックスボックスが浮動ボックスを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。</p>"}},{"type":"prose","value":{"id":"サードパーティのグリッドシステム","title":"サードパーティのグリッドシステム","isH3":false,"content":"<p>グリッド計算の背後にある数学を理解したので、一般的に使用されているサードパーティのグリッドシステムのいくつかを検討するのに適した状況です。ウェブ上で「CSS Grid framework」を検索すると、膨大な選択肢のリストが見つかるでしょう。 <a href=\"http://getbootstrap.com/\" class=\"external\" target=\"_blank\">Bootstrap</a> や <a href=\"http://foundation.zurb.com/\" class=\"external\" target=\"_blank\">Foundation</a> などの人気のあるフレームワークには、グリッドシステムが含まれています。 CSS やプリプロセッサーを使用して開発されたスタンドアロンのグリッドシステムもあります。</p>\n<p>グリッドフレームワークを扱うための一般的なテクニックを説明しているので、これらのスタンドアロンシステムの 1 つを見てみましょう。これから使用するグリッドは、単純な CSS フレームワークである Skeleton の一部です。</p>\n<p>はじめに <a href=\"http://getskeleton.com/\" class=\"external\" target=\"_blank\">Skeleton のウェブサイト</a>にアクセスし、「Download」を選択して ZIP ファイルをダウンロードします。これを解凍し、<code>skeleton.css</code> ファイルと <code>normalize.css</code> ファイルを新しいディレクトリーにコピーします。</p>\n<p><a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton.html\" class=\"external\" target=\"_blank\">html-skeleton.html</a> ファイルのコピーを作成し、それを <code>skeleton.css</code> と <code>normalize.css</code> と同じディレクトリーに保存します。</p>\n<p>その <code>head</code> に次を追加することによって、<code>skeleton.css</code> と <code>normalize.css</code> を HTML ページに含めます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><link href=\"normalize.css\" rel=\"stylesheet\" />\n<link href=\"skeleton.css\" rel=\"stylesheet\" />\n</code></pre></div>\n<p>Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <a href=\"https://necolas.github.io/normalize.css/\" class=\"external\" target=\"_blank\">Normalize</a> は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリーです。これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。</p>\n</div>\n<p>前の例と同様の HTML を使用します。 HTML の <code>body</code> に次を追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"container\">\n <div class=\"row\">\n <div class=\"col\">1</div>\n <div class=\"col\">2</div>\n <div class=\"col\">3</div>\n <div class=\"col\">4</div>\n <div class=\"col\">5</div>\n <div class=\"col\">6</div>\n <div class=\"col\">7</div>\n <div class=\"col\">8</div>\n <div class=\"col\">9</div>\n <div class=\"col\">10</div>\n <div class=\"col\">11</div>\n <div class=\"col\">12</div>\n </div>\n <div class=\"row\">\n <div class=\"col\">13</div>\n <div class=\"col\">14</div>\n <div class=\"col\">15</div>\n <div class=\"col\">16</div>\n </div>\n</div>\n</code></pre></div>\n<p>Skeleton を使い始めるためには、ラッパーの <a href=\"/ja/docs/Web/HTML/Element/div\"><code><div></code></a> に <code>container</code> クラスを与える必要があります — これは既に HTML に含まれています。これにより、最大幅 960 ピクセルのコンテンツが中央に配置されます。ボックスが 960 ピクセルよりも広くならないことがわかります。</p>\n<p>このクラスを適用するときに使用される CSS を見るために <code>skeleton.css</code> ファイルを見ることができます。 <code><div></code> は <code>auto</code> の左右のマージンで中央に配置され、左右に 20 ピクセルのパディングが適用されます。 Skeleton はまた、先ほど行ったように <a href=\"/ja/docs/Web/CSS/box-sizing\"><code>box-sizing</code></a> プロパティを <code>border-box</code> に設定するので、この要素のパディングとボーダーは合計幅に含まれます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.container {\n position: relative;\n width: 100%;\n max-width: 960px;\n margin: 0 auto;\n padding: 0 20px;\n box-sizing: border-box;\n}\n</code></pre></div>\n<p>要素が行内にある場合にのみ要素をグリッドの一部にすることができます。前の例と同様に、<code>content</code> <code><div></code> と実際のコンテンツコンテナーの <code><div></code> の間にネストした <code>row</code> クラスを持つ追加の <code><div></code> またはその他の要素が必要です。これも既に行ってあります。</p>\n<p>それではコンテナーボックスをレイアウトしましょう。 Skeleton は 12 列グリッドに基づいています。一番上のラインのボックスはすべて、1 列にまたがるようにするために <code>one column</code> クラスが必要です。</p>\n<p>次のスニペットに示すように、これらを追加します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"container\">\n <div class=\"row\">\n <div class=\"one column\">1</div>\n <div class=\"one column\">2</div>\n <div class=\"one column\">3</div>\n /* and so on */\n </div>\n</div>\n</code></pre></div>\n<p>次に、2 番目の <code>row</code> クラスのコンテナーに、それらがまたがるべき列数を説明します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div class=\"row\">\n <div class=\"one column\">13</div>\n <div class=\"six columns\">14</div>\n <div class=\"three columns\">15</div>\n <div class=\"two columns\">16</div>\n</div>\n</code></pre></div>\n<p>HTML ファイルを保存してブラウザーに読み込んで、効果を確認してください。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nこの例がうまく動作しない場合は、使用するウィンドウを広げてみてください（ウィンドウが狭すぎると、ここで記述されているようにグリッドが表示されません）。この例がうまく動作しない場合は、<a href=\"https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/html-skeleton-finished.html\" class=\"external\" target=\"_blank\">html-skeleton-finished.html</a> ファイルと比較してみてください（<a href=\"https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html\" class=\"external\" target=\"_blank\">ライブでも見られます</a>）。</p>\n</div>\n<p><code>skeleton.css</code> ファイルを見ると、これがどのように機能するかがわかります。例えば、Skeleton には、 \"three columns\" クラスを追加して要素をスタイルするための次の定義があります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.three.columns {\n width: 22%;\n}\n</code></pre></div>\n<p>Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。これらのパーセントを自分で計算する作業を行ったのとまったく同じです。</p>\n<p>ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。マークアップにクラスを追加すると、すべての浮動ボックスが処理されます。グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。</p>"}},{"type":"prose","value":{"id":"まとめ","title":"まとめ","isH3":false,"content":"<p>これで、さまざまなグリッドシステムの作成方法が理解できました。これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。</p>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ja","mdn_url":"/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods","modified":"2025-01-03T13:37:48.000Z","native":"日本語","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Legacy layout methods","native":"English (US)"},{"locale":"de","title":"Veraltete Layoutmethoden","native":"Deutsch"},{"locale":"fr","title":"Méthodes de mises en page traditionnelles","native":"Français"},{"locale":"ko","title":"레거시 레이아웃 메서드","native":"한국어"},{"locale":"zh-CN","title":"传统的布局方法","native":"中文 (简体)"}],"pageTitle":"古いレイアウト方法 - ウェブ開発の学習 | MDN","parents":[{"uri":"/ja/docs/Learn_web_development","title":"ウェブ開発の学習"},{"uri":"/ja/docs/Learn_web_development/Core","title":"コア学習モジュール"},{"uri":"/ja/docs/Learn_web_development/Core/CSS_layout","title":"CSS のレイアウト"},{"uri":"/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods","title":"古いレイアウト方法"}],"popularity":null,"short_title":"古いレイアウト方法","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">基本的なソフトウェアのインストール</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">ウェブの閲覧</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">コードエディター</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">ファイルの扱い</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">コマンドライン短期集中講座</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">ウェブサイトをどんな外見にするか</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: コンテンツの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: コンテンツのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: 操作の追加</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">ウェブサイトの公開</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">ウェブのしくみ</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">ウェブ標準モデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">調査と学習</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">共同作業とチームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">ワークフローとプロセス</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">面接で成功するために</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">基本的な HTML の構文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML の見出しと段落</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">強調と重要性</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Lists\">リスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">高度なテキスト装飾</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links\">リンクの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">課題: 手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">課題: コンテンツのページの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表のアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">課題: 惑星データの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">HTML におけるフォームとボタン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML のデバッグ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS とは何か</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started\">CSS 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">課題: 経歴ページのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">基本的な CSS セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">擬似クラスと擬似要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Combinators\">結合子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Box_model\">ボックスモデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">競合の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS の値と単位</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Sizing\">CSS におけるアイテムのサイズ設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景と境界線</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Overflow\">コンテンツのオーバーフロー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">画像、メディア、フォーム要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Tables\">表のスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">CSS のデバッグ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">課題: 基本的な CSS の理解</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">課題: かっこいいボックス</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本的なテキストとフォントのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists\">リストのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_links\">リンクのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts\">ウェブフォント</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout\">CSS レイアウト</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Introduction\">CSS レイアウト入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Floats\">浮動ボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Positioning\">位置指定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox\">フレックスボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS グリッドレイアウト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries\">メディアクエリーの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">JavaScript とは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript の最初の一歩</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong\">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Variables\">必要な情報を保管する — 変数</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Math\">JavaScript での基本演算 — 数値と演算子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Strings\">テキストの扱い — JavaScript での文字列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">便利な文字列メソッド</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Arrays\">配列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">課題: バカ話ジェネレーター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Conditionals\">コードでの意思決定 — 条件文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Loops\">ループするコード</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Functions\">関数 — 再利用可能なコードブロック</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">独自の関数を作る</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Return_values\">関数の返値</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Events\">イベント入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling\">イベントのバブリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Image_gallery\">課題: イメージギャラリー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript オブジェクトの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM スクリプティング入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Network_requests\">ネットワークリクエストを JavaScript で作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/JSON\">JSON の操作</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">クライアントサイドフレームワークの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">フレームワークの主な機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React を始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">React で ToDo リストを始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">React アプリのコンポーネント化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React での操作の実装: イベントと状態</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">React でのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React のリソース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">アクセシビリティとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Tooling\">アクセシビリティツールと支援技術</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: アクセシビリティの良き基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Multimedia\">アクセシブルなマルチメディア</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Mobile\">モバイルのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">オブジェクトのプロトタイプ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">オブジェクト指向プログラミング</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript のクラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">オブジェクト構築の練習</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs\">クライアントサイド Web API</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">動画と音声の API</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">グラフィックの描画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">クライアント側ストレージ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">サードパーティ API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS\">非同期 JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing\">非同期 JavaScript 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Promises\">プロミスの使い方</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">プロミスベースの API の実装方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">ワーカー入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Forms\">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form\">初めてのフォーム</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">フォームの構築方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">基本的なネイティブフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 の入力型</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">その他のフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">ウェブフォームへのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">フォームへの高度なスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 擬似クラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation\">クライアント側のフォーム検証</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">フォームデータの送信</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">クライアントサイドツールの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">パッケージ管理の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">完全なツールチェーンの導入</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">アプリのデプロイ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">サーバーサイドの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">クライアント・サーバーの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">サーバーサイドウェブフレームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">ウェブサイトのセキュリティ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django\">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Django 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\" class=\"only-in-en-us\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\" class=\"only-in-en-us\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\" class=\"only-in-en-us\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\" class=\"only-in-en-us\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\" class=\"only-in-en-us\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\" class=\"only-in-en-us\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\" class=\"only-in-en-us\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\" class=\"only-in-en-us\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\" class=\"only-in-en-us\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\" class=\"only-in-en-us\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\" class=\"only-in-en-us\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Node 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\" class=\"only-in-en-us\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express チュートリアル Part 6: フォームの操作</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\" class=\"only-in-en-us\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance\">ウェブパフォーマンスの「なぜ」</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">ウェブパフォーマンスとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">知覚的パフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">パフォーマンスの測定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Multimedia\">マルチメディア: 画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/video\">マルチメディア: 動画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript のパフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/HTML\">HTML のパフォーマンス機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/CSS\">CSS のパフォーマンス最適化</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Introduction\">はじめてのブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">テスト実行のための戦略</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">一般的な HTML と CSS の問題への対処</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection\">機能検出の実装</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自動化テストの紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">テスト自動化環境のセットアップ</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">その他のリソース</li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_HTML_problems\">HTML を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_CSS_problems\">CSS を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">JavaScript のコードのよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Web_mechanics\">ウェブの仕組み</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Tools_and_setup\">ツールとセットアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Design_and_accessibility\">デザインとアクセシビリティ</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">About</a></li><li><a href=\"/ja/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/ja/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"ja/learn_web_development/core/css_layout/legacy_layout_methods","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/core/css_layout/legacy_layout_methods/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/375f97e6c1e6eb0f86b75021917187911d0b586d","filename":"index.md"},"summary":"グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ボックスや他のレイアウト機能を使用して実装される傾向がありました。レイアウトをいくつかの列（例えば 4、6、12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせてみてください。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。","title":"古いレイアウト方法","toc":[{"text":"CSS グリッドレイアウト以前のレイアウトとグリッドシステム","id":"css_グリッドレイアウト以前のレイアウトとグリッドシステム"},{"text":"2 段組みレイアウト","id":"2_段組みレイアウト"},{"text":"単純な古いグリッドフレームワークを作成する","id":"単純な古いグリッドフレームワークを作成する"},{"text":"フレックスボックスのグリッド？","id":"フレックスボックスのグリッド？"},{"text":"サードパーティのグリッドシステム","id":"サードパーティのグリッドシステム"},{"text":"まとめ","id":"まとめ"}],"pageType":"learn-module-chapter"}}</script></body></html>