CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>CSS 入門 - ウェブ開発の学習 | MDN</title><link rel="alternate" title="Getting started with CSS" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="en"/><link rel="alternate" title="Erste Schritte mit CSS" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="de"/><link rel="alternate" title="Empezar con CSS" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="es"/><link rel="alternate" title="Démarrer avec CSS" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="fr"/><link rel="alternate" title="CSS 로 시작하기" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="ko"/><link rel="alternate" title="Como CSS é estruturado" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="pt"/><link rel="alternate" title="Начало работы с CSS" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="ru"/><link rel="alternate" title="让我们开始 CSS 的学习之旅" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="zh"/><link rel="alternate" title="開始使用 CSS" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Styling_basics/Getting_started" hrefLang="zh-Hant"/><link rel="alternate" title="CSS 入門" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started" 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="この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started"/><meta property="og:title" content="CSS 入門 - ウェブ開発の学習 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。"/><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/Styling_basics/Getting_started"/><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.8413e54d.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%2FStyling_basics%2FGetting_started" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FGetting_started" 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/Styling_basics" 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/Styling_basics/Getting_started" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">CSS 入門</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/Styling_basics/Getting_started" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started" 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="es" href="/es/docs/Learn_web_development/Core/Styling_basics/Getting_started" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Styling_basics/Getting_started" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Styling_basics/Getting_started" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Styling_basics/Getting_started" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Styling_basics/Getting_started" 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="#html_からはじめよう">HTML からはじめよう</a></li><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="#よくあるセレクターの使用">よくあるセレクターの使用</a></li><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="#まとめ">まとめ</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 open=""><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><em><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started" aria-current="page">CSS 入門</a></em></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="#html_からはじめよう">HTML からはじめよう</a></li><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="#よくあるセレクターの使用">よくあるセレクターの使用</a></li><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="#まとめ">まとめ</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>CSS 入門</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Styling_basics"><span class="button-wrap"> Overview: CSS によるスタイル設定の基本</span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page"><span class="button-wrap"> 次のページ </span></a></li></ul> <p>この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提条件:</th> <td> <a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">ソフトウェアのインストール</a>、 <a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">ファイルの扱い</a>についての基本的な知識、 HTML の基本（ <a href="/ja/docs/Learn_web_development/Core/Structuring_content">HTML 入門</a>を学んでいること）。 </td> </tr> <tr> <th scope="row">学習成果:</th> <td> <ul> <li>CSS を HTML 文書に適用すること。</li> <li>基本的な CSS を書く実践的な経験。</li> <li>基本的なセレクター型と結合子の操作の知識。</li> <li>CSS に適用される状態の概念。</li> <li>その他の CSS 構文機能（アットルール、関数、一括指定プロパティ、ホワイトスペースなど）に慣れること。</li> <ul> </ul></ul></td> </tr> </tbody> </table></figure></div><section aria-labelledby="html_からはじめよう"><h2 id="html_からはじめよう"><a href="#html_からはじめよう">HTML からはじめよう</a></h2><div class="section-content"><p>HTML 文書から始めましょう。下記からコードをコピーして、自分のコンピューターで作業することができます。下記のコードを、自分のコンピューター上のフォルダー内に、 <code>index.html</code> として保存してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___unstyled notranslate"><code><!doctype html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>CSS 入門</title> </head> <body> <h1>これは見出し 1 です</h1> <p> これはテキストの段落です。このテキストには <span>span 要素</span>と<a href="https://example.com" >リンク</a>があります。 </p> <p> これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。 </p> <ul> <li>1 つ目のアイテム</li> <li>2 つ目のアイテム</li> <li><em>3 つ目</em>のアイテム</li> </ul> </body> </html> </code></pre></div> <p>これは次のように表示されます。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="unstyled sample" id="frame_unstyled" height="240px" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/" data-live-id="unstyled" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>メモ:</strong> もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。上記のライブサンプルの "Play" ボタンをクリックすると、 MDN Playground で開きます。そこでは、下部に記載されている指示に従って CSS と HTML コードを編集し、結合された結果をライブで確認することができます。</p> </div></div></section><section aria-labelledby="文書に_css_を追加"><h2 id="文書に_css_を追加"><a href="#文書に_css_を追加">文書に CSS を追加</a></h2><div class="section-content"><p>一番最初にしなければならないことは、 HTML 文書に使用したい CSS ルールがあることを指示することです。 HTML 文書に CSS を適用するためによく使われる方法は、外部スタイルシート、内部スタイルシート、インラインスタイルの 3 つがあります。これらを見てみましょう。</p></div></section><section aria-labelledby="外部スタイルシート"><h3 id="外部スタイルシート"><a href="#外部スタイルシート">外部スタイルシート</a></h3><div class="section-content"><p>外部スタイルシートは、拡張子が <code>.css</code> の独立したファイルに CSS を格納します。これは、 CSS を文書に適用する最も一般的で便利な方法です。単一の CSS ファイルを複数のウェブページにリンクすると、すべて同じ CSS スタイルシートでスタイルを適用することができます。</p> <p>HTML 文書と同じフォルダーにファイルをつくり、 <code>styles.css</code> として保存してください。</p> <p><code>styles.css</code> を <code>index.html</code> にリンクさせるには、HTML 文書にある <a href="/ja/docs/Web/HTML/Element/head"><code><head></code></a> 要素の中に次のコードを追記してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><link rel="stylesheet" href="styles.css" /> </code></pre></div> <p><a href="/ja/docs/Web/HTML/Element/link"><code><link></code></a> 要素はブラウザーに、スタイルシートがあることを <code>rel</code> 属性で伝え、 <code>href</code> 属性の値でスタイルシートのある場所を伝えます。 <code>styles.css</code> に以下のルールを記述すれば、CSS が動作するかテストできます。使っているコードエディターで次ののコードを CSS ファイルに追記してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>h1 { color: red; } </code></pre></div> <p>HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。 CSS の HTML への適用が成功です。もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。</p> <h4 id="異なる場所へのスタイルシートの配置">異なる場所へのスタイルシートの配置</h4> <p>上記の例では、 CSS ファイルは HTML 文書と同じフォルダー内にありますが、別の場所に配置してパスを調整することも可能です（<a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML の画像</a>と同様）。以下に 3 つの例を示します。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code> <link rel="stylesheet" href="styles/style.css" />  <link rel="stylesheet" href="styles/general/style.css" />  <link rel="stylesheet" href="../styles/style.css" /> </code></pre></div></div></section><section aria-labelledby="内部スタイルシート"><h3 id="内部スタイルシート"><a href="#内部スタイルシート">内部スタイルシート</a></h3><div class="section-content"><p>内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の <a href="/ja/docs/Web/HTML/Element/head"><code><head></code></a> の中にある <a href="/ja/docs/Web/HTML/Element/style"><code><style></code></a> 要素の中に入れてください。</p> <p>HTML 文書内の <code><head></code> および <code></head></code> タグの間に、次のスニペットを追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><style> p { color: purple; } </style> </code></pre></div> <p>保存して再読み込みすると、すべての段落が紫色に変わります。</p> <p>状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。</p> <p>しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。</p> <p>次に行く前に、 HTML の例から <code><style></code> 要素とその中身を除去しておきましょう。</p></div></section><section aria-labelledby="インラインスタイル"><h3 id="インラインスタイル"><a href="#インラインスタイル">インラインスタイル</a></h3><div class="section-content"><p>インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 <code>style</code> 属性の中に記述します。ここで実装してみましょう。</p> <p><code>style</code> 属性を HTML の <a href="/ja/docs/Web/HTML/Element/span"><code><span></code></a> 要素に追加すると、次のような形になります。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><span style="color: purple; font-weight: bold">span 要素</span> </code></pre></div> <p>保存して再読み込みすると、 <code><span></code> 内のテキストだけが紫色で太字になります。 <code>style</code> 属性内に（セミコロンで区切って）さらに宣言を追加したり、他の要素にも <code>style</code> 属性を追加したりしてみてください。</p> <p>試してみた後は、すべての <code>style</code> 属性を除去しておきましょう。</p> <p><strong>この方法での CSS の使用は、可能な限り避けてください。</strong> まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。</p> <p>インラインスタイルが一般的な状況はいくつかあります。作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 CMS では HTML の本文しか編集できない場合があります。また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。 JavaScript で動的にスタイルを適用する際にインラインスタイルを設定することも一般的です。</p></div></section><section aria-labelledby="よくあるセレクターの使用"><h2 id="よくあるセレクターの使用"><a href="#よくあるセレクターの使用">よくあるセレクターの使用</a></h2><div class="section-content"><p>この節では、よく見かけるセレクターのいくつかを簡単に紹介していきます。</p></div></section><section aria-labelledby="html_要素の選択"><h3 id="html_要素の選択"><a href="#html_要素の選択">HTML 要素の選択</a></h3><div class="section-content"><p>見出しを赤くすることで、 HTML 要素を対象としたスタイル設定を試しました。<strong>要素セレクター</strong>（または<strong>型セレクター</strong>）を対象としたのです。これは、 HTML 要素名を直接照合するセレクターです。文書内のすべての段落に焦点をあてるなら、セレクターとして <code>p</code> を使うことができます。すべての段落を緑色にするために次を使います。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>p { color: green; } </code></pre></div> <p>セレクターをカンマで区切ることによって、同時に複数のセレクターを対象にすることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>p, li { color: green; } </code></pre></div> <p>以下の例を（"Play" をクリックして）試してみるか、またはローカルコピーで試してみてください。</p> <div class="code-example"><pre class="brush: html hidden live-sample___started-types notranslate"><code><h1>これは見出し 1 です</h1> <p> これはテキストの段落です。このテキストには <span>span 要素</span>と<a href="http://example.com">リンク</a>もあります。 </p> <p>これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。</p> <ul> <li>1 つ目のアイテム</li> <li>2 つ目のアイテム</li> <li><em>3 つ目</em>のアイテム</li> </ul> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___started-types notranslate"><code>h1 { color: red; } p, li { } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="started-types sample" id="frame_started-types" height="240px" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/" data-live-id="started-types" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="クラスの追加"><h3 id="クラスの追加"><a href="#クラスの追加">クラスの追加</a></h3><div class="section-content"><p>ここまで、HTML 要素名をもとにしたスタイル設定をしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。</p> <ol> <li> <p>HTML 文書内で、 <a href="/ja/docs/Web/HTML/Global_attributes/class">class 属性</a>をリストの 2 番目のアイテムへ、こんな風に加えてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><ul> <li>1 つ目のアイテム</li> <li class="special">2 つ目のアイテム</li> <li><em>3 つ目</em>のアイテム</li> </ul> </code></pre></div> </li> <li> <p>ピリオドから始まるセレクターを作ることで、<code>special</code> クラスを対象にすることができます。以下のものを CSS に加えてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.special { color: orange; font-weight: bold; } </code></pre></div> </li> </ol> <p>保存してからブラウザーを再読み込みし結果を見てみましょう。</p> <p>ページ上でおなじ見た目にしたいリストアイテムに対して <code>special</code> クラスを適用できます。たとえば、段落内にある<code><span></code> 要素にも同じく、オレンジの太字にしたいかもしれません。これにも <code>class</code> 属性の値として <code>special</code> を加えてみてください。</p></div></section><section aria-labelledby="文書内の場所に基づくスタイル設定"><h3 id="文書内の場所に基づくスタイル設定"><a href="#文書内の場所に基づくスタイル設定">文書内の場所に基づくスタイル設定</a></h3><div class="section-content"><p>文書のどこにあるかで外見を変えたい時があります。それを助けるセレクターはいくつかありますが、いまは 2 種類だけ見てみましょう。HTML 文書には 2 つの <code><em></code> 要素があります。ひとつは段落の中に、もうひとつはリストアイテムの中に、です。<code><li></code> 要素の中にある <code><em></code> だけを選びたいとき、<strong>子孫結合子</strong>と呼ばれるセレクターを使うことができます。これは 2 つの異なるセレクターを空白で区切ることで設置できます。</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>li em { color: rebeccapurple; } </code></pre></div> <p>このセレクターは <code><li></code> 要素の中にある <code><em></code> 要素を選択します。よって HTML 文書の中で、3 番目のリストアイテム内にある <code><em></code> 要素は紫に変わっていますが、段落内にある <code><em></code> 要素は変更されていません。</p> <p>HTML 文書内で、見出しの直後に来る段落を見出しと同じ階層レベルにしたいと思うことがあるかもしれません。このときはセレクター同士の間に <code>+</code> を入れます（<strong>次兄弟結合子</strong>）。</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>h1 + p { font-size: 200%; } </code></pre></div> <p>次のライブサンプルには、上に挙げた 2 つのルールセットが含まれています。ここに、段落内にある <code>span</code> 要素を赤くするルールセットを追加してください。正しくできれば第 1 段落の <code>span</code> 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。</p> <div class="code-example"><pre class="brush: html hidden live-sample___started-combinators notranslate"><code><h1>これは見出し 1 です</h1> <p> これはテキストの段落です。このテキストには <span>span 要素</span>と<a href="http://example.com">リンク</a>もあります。 </p> <p>これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。</p> <ul> <li>1 つ目のアイテム</li> <li>2 つ目のアイテム</li> <li><em>3 つ目</em>のアイテム</li> </ul> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___started-combinators notranslate"><code>li em { color: rebeccapurple; } h1 + p { font-size: 200%; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="started-combinators sample" id="frame_started-combinators" height="340px" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/" data-live-id="started-combinators" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>メモ:</strong> ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。このコースでは、これらのセレクターやその他多くのセレクターについて、後ほどすべて順を追って見ていきます。</p> </div></div></section><section aria-labelledby="状態に基づくスタイル設定"><h3 id="状態に基づくスタイル設定"><a href="#状態に基づくスタイル設定">状態に基づくスタイル設定</a></h3><div class="section-content"><p>最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイル設定です。リンクをスタイル設定するとき、 <a href="/ja/docs/Web/HTML/Element/a"><code><a></code></a> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印をかざしたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>a:link { color: pink; } a:visited { color: green; } </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>a:hover { text-decoration: none; } </code></pre></div> <p>下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？</p> <div class="code-example"><pre class="brush: html hidden live-sample___started-states notranslate"><code><h1>これは見出し 1 です</h1> <p> これはテキストの段落です。このテキストには <span>span 要素</span>と<a href="http://example.com">リンク</a>もあります。 </p> <p>これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。</p> <ul> <li>1 つ目のアイテム</li> <li>2 つ目のアイテム</li> <li><em>3 つ目</em>のアイテム</li> </ul> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___started-states notranslate"><code>a:link { color: pink; } a:visited { color: green; } a:hover { text-decoration: none; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="started-states sample" id="frame_started-states" height="240px" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/" data-live-id="started-states" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>私たちは、リンクの上にカーソルを置いた際に表示される下線を除去しました。リンクのすべての状態から下線を除去することができます。ただし、実際のサイトでは、リンクがリンクであることを訪問者に確実に認識させることが重要であることを覚えておく価値があります。下線を付けたままにしておくことは、段落内のテキストがクリックできることを認識する上で、人々にとって重要な手がかりとなる可能性があります。これは、人々が使用することに慣れている動作です。 CSS のすべてにおいて、変更することで文書内のアクセシビリティが低下する可能性があるため、注意すべき場所で都度強調するようにしたいと思います。</p> <div class="notecard note"> <p><strong>メモ:</strong> MDN の記事で、<a href="/ja/docs/Learn_web_development/Core/Accessibility">アクセシビリティ</a>についての注意をたびたび目にするでしょう。アクセシビリティについて語る際、私たちは、マウスやトラックパッド付きのコンピューター、タッチスクリーン付きの携帯電話、キーボードのみを使用して操作する人、あるいは文書内のコンテンツを読み上げるスクリーンリーダーを操作する人など、誰もが理解でき、利用できるウェブページの必要性を意味しています。</p> </div></div></section><section aria-labelledby="セレクターと結合子の組み合わせ"><h3 id="セレクターと結合子の組み合わせ"><a href="#セレクターと結合子の組み合わせ">セレクターと結合子の組み合わせ</a></h3><div class="section-content"><p>次のように、複数のセレクターと結合子を組み合わせることができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */ article p span { } /* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */ h1 + ul + p { } </code></pre></div> <p>複数の形のセレクターも組み合わせられます。以下のコードを CSS に追加してみてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>h1 + p .special { color: yellow; background-color: black; padding: 5px; } </code></pre></div> <p>これは <code><body></code> 要素の中にある <code><h1></code> 要素の直後に来た <code><p></code> 要素の中にある <code>special</code> クラスの要素をスタイル設定します。このコードのうち、スタイルが適用されるのは <code><span class="special"></code> のみです。</p> <p>現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。</p></div></section><section aria-labelledby="その他の_css_の構文機能"><h2 id="その他の_css_の構文機能"><a href="#その他の_css_の構文機能">その他の CSS の構文機能</a></h2><div class="section-content"><p>これでいくつかの CSS 機能について学んだので、このコースの間に遭遇するであろう、他にもいくつかある CSS 構文機能について、概要を説明します。これらの詳細についてさらに調べたい場合は、このページの上部にある検索フィールドに機能の名前を入力するか、MDN の <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>を参照してください。</p> <p>それぞれのケースでコードスニペットを試してみる場合は、例えば、これまでやってきたもののように、ローカルの例や MDN Playground に提供された HTML と CSS を追加してみてください。</p></div></section><section aria-labelledby="関数"><h3 id="関数"><a href="#関数">関数</a></h3><div class="section-content"><p>ほとんどの値は比較的単純なキーワードまたは数値ですが、値の中には関数の形を取るものもあります。</p> <h4 id="calc_関数">calc() 関数</h4> <p>この例には、 CSS 内で簡単な計算を実行できる <code>calc()</code> 関数があります。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___the_calc_function notranslate"><code><div class="outer"><div class="box">内部のボックスは 90% - 30px です。</div></div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___the_calc_function notranslate"><code>.outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } </code></pre></div> <p>表示結果は次の通りです。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="The calc function sample" id="frame_the_calc_function" width="100%" height="200" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/" data-live-id="the_calc_function" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>関数は関数名と、関数の値を囲む括弧で構成されます。上記の <code>calc()</code> の例の場合、値は包含ブロック幅の90%から30ピクセルを引いた値をボックスの幅として定義します。</p> <h4 id="座標変換関数">座標変換関数</h4> <p>さまざまな値のもう一つの例は、 <a href="/ja/docs/Web/CSS/transform"><code>transform</code></a> プロパティのもので、 <code>rotate()</code> などです。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___transform_functions notranslate"><code><div class="box"></div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___transform_functions notranslate"><code>.box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn); } </code></pre></div> <p>上記のコードの出力結果は次のようになります。</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Transform functions sample" id="frame_transform_functions" width="100%" height="200" src="about:blank" data-live-path="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/" data-live-id="transform_functions" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>以下の一覧にあるプロパティのさまざまな値を調べてください。次の関数を使用して、さまざまな HTML 要素にスタイルを適用する CSS ルールを書いてみてください。</p> <ul> <li><a href="/ja/docs/Web/CSS/transform"><code>transform</code></a></li> <li><a href="/ja/docs/Web/CSS/background-image"><code>background-image</code></a>（特にグラデーション値）</li> <li><a href="/ja/docs/Web/CSS/color"><code>color</code></a>（特に rgb と hsl 値）</li> </ul></div></section><section aria-labelledby="アットルール"><h3 id="アットルール"><a href="#アットルール">アットルール</a></h3><div class="section-content"><p>CSS のアットルール (@rule) は、 CSS の動作方法を指定して提供します。よく見かける一般的なアットルールの 1 つに <code>@media</code> があります。これは、<a href="/ja/docs/Web/CSS/CSS_media_queries">メディアクエリー</a>を作成する際に使用します。メディアクエリーは、 CSS スタイル設定を適用するための条件を示す論理式を使用します。</p> <p>次の例では、スタイルシートで <code><body></code> 要素に既定ではピンク色の背景を定義しています。しかし、その次のメディアクエリーでは、ブラウザーのビューポートが 30em より大きい場合、 <code><body></code> 要素に青色の背景を設定しています。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { background-color: pink; } @media (min-width: 30em) { body { background-color: blue; } } </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/Web/CSS/font"><code>font</code></a>、<a href="/ja/docs/Web/CSS/background"><code>background</code></a>、<a href="/ja/docs/Web/CSS/padding"><code>padding</code></a>、<a href="/ja/docs/Web/CSS/border"><code>border</code></a>、<a href="/ja/docs/Web/CSS/margin"><code>margin</code></a> などは<strong>一括指定プロパティ</strong>と呼ばれています。これは、一括指定プロパティがいくつかの値を 1 行で設定するからです。</p> <p>例えば、この 1 行のコードを見てください。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* padding や margin などの 4 値の一括指定では、値は上、右、下、左（上から時計回りに）の順に適用されます。他の一括指定の型もあります。例えば、 2 値の一括指定では、 padding/margin は上/下、次に左/右に設定します。 */ padding: 10px 15px 15px 5px; </code></pre></div> <p>これは次の 4 行のコードと同等です。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; </code></pre></div> <p>この 1 行は、</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>background: red url(bg-graphic.png) 10px 10px repeat-x fixed; </code></pre></div> <p>次の 5 行と同等です。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed; </code></pre></div> <p>このコースの後半では、他にも多くの一括指定プロパティの例に遭遇するでしょう。今のところは、上記（または他にも知っているもの）の宣言を自分自身でコードに適用してみて、やり方に慣れてください。</p></div></section><section aria-labelledby="css_のコメント"><h3 id="css_のコメント"><a href="#css_のコメント">CSS のコメント</a></h3><div class="section-content"><p>コーディング作業全般に言えることですが、 CSS にコメントを書くことは良い習慣です。これにより、後で修正や拡張を行う際に、コードがどのように動作するのかを思い出すことができます。また、他にも、コードを理解する手助けとなります。</p> <p>CSS コメントは <code>/*</code> で始まり、<code>*/</code> で終わります。例えば下記では、コメントがコードの異なる節の始まりを示しています。コードベースが大きくなるにつれ、移動が容易にできます。このようなコメントが存在することで、コードエディターでコメントを検索することが、コードの節を効率的に見つける方法となります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* 基本的な要素のスタイル設定の扱い */ /* ---------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* 読みやすくなるように、大きな画面やウィンドウではグローバルフォントサイズを大きくする。 */ body { font-size: 130%; } } h1 { font-size: 1.5em; } /* DOM に含まれる特定の要素を扱う */ div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } </code></pre></div> <p>コードを「コメントアウト」することは、検査のためにコードの一部分を一時的に無効にするのに便利です。例えば、下記では <code>.special</code> のルールがコードの「コメントアウト」により無効になっています。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/*.special { color: red; }*/ p { color: blue; } </code></pre></div> <p>自分の CSS にコメントを追加してみてください。</p></div></section><section aria-labelledby="css_におけるホワイトスペース"><h3 id="css_におけるホワイトスペース"><a href="#css_におけるホワイトスペース">CSS におけるホワイトスペース</a></h3><div class="section-content"><p>ホワイトスペースとは、実際の空白、タブ、改行を意味します。ブラウザーは HTML 内の余分なホワイトスペースを無視しますが、 CSS 内の余分なホワイトスペースも同様に無視します。ホワイトスペースの利点は、コードを読みやすくすることです。</p> <p>例えば下記では、各宣言（および、ルールの先頭/末尾）がそれぞれ別の行に記述されています。これは CSS を記述する上で良い方法であると言えます。 CSS を保守したり理解したりしやすくなります。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } </code></pre></div> <p>次の例では、同じ CSS をより圧縮された形式で示しており、余分なホワイトスペースをすべて除去したものです。 2 つの例は同じように作業しますが、下記の方が読みにくくなっています。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>body{font:1em/150% Helvetica,Arial,sans-serif;padding:1em;margin:0 auto;max-width:33em;} @media(min-width:70em){body{font-size:130%;}} h1{font-size:1.5em;} </code></pre></div> <p>ホワイトスペースを削除するとエラーが発生する場合があることに留意してください。プロパティ名にはホワイトスペースは含まれませんが、値と値の間にホワイトスペースを想定しているプロパティ値では、その空白が削除されると値が不正なものとなります。例えば、以下の宣言は有効な CSS です。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>margin: 0 auto; padding-left: 10px; </code></pre></div> <p>しかし、以下の宣言は不正です。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css example-bad notranslate"><code>margin: 0auto; padding- left: 10px; </code></pre></div> <p>空白の使い方の間違いがわかりますか？最初の <code>0auto</code> は <code>margin</code> プロパティの有効な値として認識されません。項目 <code>0auto</code> は、<code>0</code> と <code>auto</code> という 2 つの別々の値という意味です。 2 つ目として、ブラウザーは <code>padding-</code> を有効なプロパティとして認識しません。正しいプロパティ名 (<code>padding-left</code>) には空白が挿入されています。</p> <p>複数の値が別個の値であることが分かるように、少なくとも 1 つの空白で区切るようにしてください。プロパティ名とプロパティ値は、単一の連続した文字列として一緒にしておきます。</p> <p>空白が CSS をどのように壊すかを確かめるには、検査用の CSS 内の空白をいろいろと試してみてください。</p></div></section><section aria-labelledby="まとめ"><h2 id="まとめ"><a href="#まとめ">まとめ</a></h2><div class="section-content"><p>この記事では、CSS による文書のスタイル設定の仕方をいくつか見てきました。この知識は、残りのレッスンに移動した際に深堀りする予定です。しかし、これで、文書内の要素のさまざまな対象方法に基づいてテキストにスタイル設定を行い、 CSS を適用するのに十分な知識を得ることができました。</p> <p>次に、皆さんに新しい知識を試すための課題を出しましょう。</p> <ul class="prev-next"><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Styling_basics"><span class="button-wrap"> Overview: CSS によるスタイル設定の基本</span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page"><span class="button-wrap"> 次のページ </span></a></li></ul></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-02T14:42:07.000Z">2025年1月2日</time> by <a href="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/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/styling_basics/getting_started/index.md?plain=1" title="Folder: ja/learn_web_development/core/styling_basics/getting_started (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%2FStyling_basics%2FGetting_started&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%2Fstyling_basics%2Fgetting_started%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FGetting_started%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fgetting_started%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F7fee388bbd83c61bed43be6f88a8cf688d0c211c%0A*+Document+last+modified%3A+2025-01-02T14%3A42%3A07.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/Styling_basics/Getting_started","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Styling_basics\"><span class=\"button-wrap\"> Overview: CSS によるスタイル設定の基本</span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\"><span class=\"button-wrap\"> 次のページ </span></a></li></ul>\n<p>この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提条件:</th>\n <td>\n <a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">ソフトウェアのインストール</a>、\n <a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">ファイルの扱い</a>についての基本的な知識、 HTML の基本（\n <a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">HTML 入門</a>を学んでいること）。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">学習成果:</th>\n <td>\n <ul>\n <li>CSS を HTML 文書に適用すること。</li>\n <li>基本的な CSS を書く実践的な経験。</li>\n <li>基本的なセレクター型と結合子の操作の知識。</li>\n <li>CSS に適用される状態の概念。</li>\n <li>その他の CSS 構文機能（アットルール、関数、一括指定プロパティ、ホワイトスペースなど）に慣れること。</li>\n <ul>\n </ul></ul></td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"html_からはじめよう","title":"HTML からはじめよう","isH3":false,"content":"<p>HTML 文書から始めましょう。下記からコードをコピーして、自分のコンピューターで作業することができます。下記のコードを、自分のコンピューター上のフォルダー内に、 <code>index.html</code> として保存してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___unstyled notranslate\"><code><!doctype html>\n<html lang=\"ja\">\n <head>\n <meta charset=\"utf-8\" />\n <title>CSS 入門</title>\n </head>\n\n <body>\n <h1>これは見出し 1 です</h1>\n\n <p>\n これはテキストの段落です。このテキストには\n <span>span 要素</span>と<a href=\"https://example.com\"\n >リンク</a>があります。\n </p>\n\n <p>\n これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。\n </p>\n\n <ul>\n <li>1 つ目のアイテム</li>\n <li>2 つ目のアイテム</li>\n <li><em>3 つ目</em>のアイテム</li>\n </ul>\n </body>\n</html>\n</code></pre></div>\n<p>これは次のように表示されます。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"unstyled sample\" id=\"frame_unstyled\" height=\"240px\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/\" data-live-id=\"unstyled\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nもし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。上記のライブサンプルの \"Play\" ボタンをクリックすると、 MDN Playground で開きます。そこでは、下部に記載されている指示に従って CSS と HTML コードを編集し、結合された結果をライブで確認することができます。</p>\n</div>"}},{"type":"prose","value":{"id":"文書に_css_を追加","title":"文書に CSS を追加","isH3":false,"content":"<p>一番最初にしなければならないことは、 HTML 文書に使用したい CSS ルールがあることを指示することです。 HTML 文書に CSS を適用するためによく使われる方法は、外部スタイルシート、内部スタイルシート、インラインスタイルの 3 つがあります。これらを見てみましょう。</p>"}},{"type":"prose","value":{"id":"外部スタイルシート","title":"外部スタイルシート","isH3":true,"content":"<p>外部スタイルシートは、拡張子が <code>.css</code> の独立したファイルに CSS を格納します。これは、 CSS を文書に適用する最も一般的で便利な方法です。単一の CSS ファイルを複数のウェブページにリンクすると、すべて同じ CSS スタイルシートでスタイルを適用することができます。</p>\n<p>HTML 文書と同じフォルダーにファイルをつくり、 <code>styles.css</code> として保存してください。</p>\n<p><code>styles.css</code> を <code>index.html</code> にリンクさせるには、HTML 文書にある <a href=\"/ja/docs/Web/HTML/Element/head\"><code><head></code></a> 要素の中に次のコードを追記してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><link rel=\"stylesheet\" href=\"styles.css\" />\n</code></pre></div>\n<p><a href=\"/ja/docs/Web/HTML/Element/link\"><code><link></code></a> 要素はブラウザーに、スタイルシートがあることを <code>rel</code> 属性で伝え、 <code>href</code> 属性の値でスタイルシートのある場所を伝えます。 <code>styles.css</code> に以下のルールを記述すれば、CSS が動作するかテストできます。使っているコードエディターで次ののコードを CSS ファイルに追記してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>h1 {\n color: red;\n}\n</code></pre></div>\n<p>HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。 CSS の HTML への適用が成功です。もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。</p>\n<h4 id=\"異なる場所へのスタイルシートの配置\">異なる場所へのスタイルシートの配置</h4>\n<p>上記の例では、 CSS ファイルは HTML 文書と同じフォルダー内にありますが、別の場所に配置してパスを調整することも可能です（<a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML の画像</a>と同様）。以下に 3 つの例を示します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code>\n<link rel=\"stylesheet\" href=\"styles/style.css\" />\n\n\n<link rel=\"stylesheet\" href=\"styles/general/style.css\" />\n\n\n<link rel=\"stylesheet\" href=\"../styles/style.css\" />\n</code></pre></div>"}},{"type":"prose","value":{"id":"内部スタイルシート","title":"内部スタイルシート","isH3":true,"content":"<p>内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の <a href=\"/ja/docs/Web/HTML/Element/head\"><code><head></code></a> の中にある <a href=\"/ja/docs/Web/HTML/Element/style\"><code><style></code></a> 要素の中に入れてください。</p>\n<p>HTML 文書内の <code><head></code> および <code></head></code> タグの間に、次のスニペットを追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><style>\n p {\n color: purple;\n }\n</style>\n</code></pre></div>\n<p>保存して再読み込みすると、すべての段落が紫色に変わります。</p>\n<p>状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。</p>\n<p>しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。</p>\n<p>次に行く前に、 HTML の例から <code><style></code> 要素とその中身を除去しておきましょう。</p>"}},{"type":"prose","value":{"id":"インラインスタイル","title":"インラインスタイル","isH3":true,"content":"<p>インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 <code>style</code> 属性の中に記述します。ここで実装してみましょう。</p>\n<p><code>style</code> 属性を HTML の <a href=\"/ja/docs/Web/HTML/Element/span\"><code><span></code></a> 要素に追加すると、次のような形になります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><span style=\"color: purple; font-weight: bold\">span 要素</span>\n</code></pre></div>\n<p>保存して再読み込みすると、 <code><span></code> 内のテキストだけが紫色で太字になります。 <code>style</code> 属性内に（セミコロンで区切って）さらに宣言を追加したり、他の要素にも <code>style</code> 属性を追加したりしてみてください。</p>\n<p>試してみた後は、すべての <code>style</code> 属性を除去しておきましょう。</p>\n<p><strong>この方法での CSS の使用は、可能な限り避けてください。</strong> まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。</p>\n<p>インラインスタイルが一般的な状況はいくつかあります。作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 CMS では HTML の本文しか編集できない場合があります。また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。 JavaScript で動的にスタイルを適用する際にインラインスタイルを設定することも一般的です。</p>"}},{"type":"prose","value":{"id":"よくあるセレクターの使用","title":"よくあるセレクターの使用","isH3":false,"content":"<p>この節では、よく見かけるセレクターのいくつかを簡単に紹介していきます。</p>"}},{"type":"prose","value":{"id":"html_要素の選択","title":"HTML 要素の選択","isH3":true,"content":"<p>見出しを赤くすることで、 HTML 要素を対象としたスタイル設定を試しました。<strong>要素セレクター</strong>（または<strong>型セレクター</strong>）を対象としたのです。これは、 HTML 要素名を直接照合するセレクターです。文書内のすべての段落に焦点をあてるなら、セレクターとして <code>p</code> を使うことができます。すべての段落を緑色にするために次を使います。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>p {\n color: green;\n}\n</code></pre></div>\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>p,\nli {\n color: green;\n}\n</code></pre></div>\n<p>以下の例を（\"Play\" をクリックして）試してみるか、またはローカルコピーで試してみてください。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden live-sample___started-types notranslate\"><code><h1>これは見出し 1 です</h1>\n\n<p>\n これはテキストの段落です。このテキストには <span>span 要素</span>と<a href=\"http://example.com\">リンク</a>もあります。\n</p>\n\n<p>これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。</p>\n\n<ul>\n <li>1 つ目のアイテム</li>\n <li>2 つ目のアイテム</li>\n <li><em>3 つ目</em>のアイテム</li>\n</ul>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___started-types notranslate\"><code>h1 {\n color: red;\n}\n\np,\nli {\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"started-types sample\" id=\"frame_started-types\" height=\"240px\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/\" data-live-id=\"started-types\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"クラスの追加","title":"クラスの追加","isH3":true,"content":"<p>ここまで、HTML 要素名をもとにしたスタイル設定をしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。</p>\n<ol>\n<li>\n<p>HTML 文書内で、 <a href=\"/ja/docs/Web/HTML/Global_attributes/class\">class 属性</a>をリストの 2 番目のアイテムへ、こんな風に加えてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><ul>\n <li>1 つ目のアイテム</li>\n <li class=\"special\">2 つ目のアイテム</li>\n <li><em>3 つ目</em>のアイテム</li>\n</ul>\n</code></pre></div>\n</li>\n<li>\n<p>ピリオドから始まるセレクターを作ることで、<code>special</code> クラスを対象にすることができます。以下のものを CSS に加えてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.special {\n color: orange;\n font-weight: bold;\n}\n</code></pre></div>\n</li>\n</ol>\n<p>保存してからブラウザーを再読み込みし結果を見てみましょう。</p>\n<p>ページ上でおなじ見た目にしたいリストアイテムに対して <code>special</code> クラスを適用できます。たとえば、段落内にある<code><span></code> 要素にも同じく、オレンジの太字にしたいかもしれません。これにも <code>class</code> 属性の値として <code>special</code> を加えてみてください。</p>"}},{"type":"prose","value":{"id":"文書内の場所に基づくスタイル設定","title":"文書内の場所に基づくスタイル設定","isH3":true,"content":"<p>文書のどこにあるかで外見を変えたい時があります。それを助けるセレクターはいくつかありますが、いまは 2 種類だけ見てみましょう。HTML 文書には 2 つの <code><em></code> 要素があります。ひとつは段落の中に、もうひとつはリストアイテムの中に、です。<code><li></code> 要素の中にある <code><em></code> だけを選びたいとき、<strong>子孫結合子</strong>と呼ばれるセレクターを使うことができます。これは 2 つの異なるセレクターを空白で区切ることで設置できます。</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>li em {\n color: rebeccapurple;\n}\n</code></pre></div>\n<p>このセレクターは <code><li></code> 要素の中にある <code><em></code> 要素を選択します。よって HTML 文書の中で、3 番目のリストアイテム内にある <code><em></code> 要素は紫に変わっていますが、段落内にある <code><em></code> 要素は変更されていません。</p>\n<p>HTML 文書内で、見出しの直後に来る段落を見出しと同じ階層レベルにしたいと思うことがあるかもしれません。このときはセレクター同士の間に <code>+</code> を入れます（<strong>次兄弟結合子</strong>）。</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>h1 + p {\n font-size: 200%;\n}\n</code></pre></div>\n<p>次のライブサンプルには、上に挙げた 2 つのルールセットが含まれています。ここに、段落内にある <code>span</code> 要素を赤くするルールセットを追加してください。正しくできれば第 1 段落の <code>span</code> 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden live-sample___started-combinators notranslate\"><code><h1>これは見出し 1 です</h1>\n\n<p>\n これはテキストの段落です。このテキストには <span>span 要素</span>と<a href=\"http://example.com\">リンク</a>もあります。\n</p>\n\n<p>これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。</p>\n\n<ul>\n <li>1 つ目のアイテム</li>\n <li>2 つ目のアイテム</li>\n <li><em>3 つ目</em>のアイテム</li>\n</ul>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___started-combinators notranslate\"><code>li em {\n color: rebeccapurple;\n}\n\nh1 + p {\n font-size: 200%;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"started-combinators sample\" id=\"frame_started-combinators\" height=\"340px\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/\" data-live-id=\"started-combinators\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。このコースでは、これらのセレクターやその他多くのセレクターについて、後ほどすべて順を追って見ていきます。</p>\n</div>"}},{"type":"prose","value":{"id":"状態に基づくスタイル設定","title":"状態に基づくスタイル設定","isH3":true,"content":"<p>最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイル設定です。リンクをスタイル設定するとき、 <a href=\"/ja/docs/Web/HTML/Element/a\"><code><a></code></a> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印をかざしたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>a:link {\n color: pink;\n}\n\na:visited {\n color: green;\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>a:hover {\n text-decoration: none;\n}\n</code></pre></div>\n<p>下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden live-sample___started-states notranslate\"><code><h1>これは見出し 1 です</h1>\n\n<p>\n これはテキストの段落です。このテキストには <span>span 要素</span>と<a href=\"http://example.com\">リンク</a>もあります。\n</p>\n\n<p>これは 2 つ目の段落です。ここには<em>強調された</em>要素があります。</p>\n\n<ul>\n <li>1 つ目のアイテム</li>\n <li>2 つ目のアイテム</li>\n <li><em>3 つ目</em>のアイテム</li>\n</ul>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___started-states notranslate\"><code>a:link {\n color: pink;\n}\n\na:visited {\n color: green;\n}\n\na:hover {\n text-decoration: none;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"started-states sample\" id=\"frame_started-states\" height=\"240px\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/\" data-live-id=\"started-states\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>私たちは、リンクの上にカーソルを置いた際に表示される下線を除去しました。リンクのすべての状態から下線を除去することができます。ただし、実際のサイトでは、リンクがリンクであることを訪問者に確実に認識させることが重要であることを覚えておく価値があります。下線を付けたままにしておくことは、段落内のテキストがクリックできることを認識する上で、人々にとって重要な手がかりとなる可能性があります。これは、人々が使用することに慣れている動作です。 CSS のすべてにおいて、変更することで文書内のアクセシビリティが低下する可能性があるため、注意すべき場所で都度強調するようにしたいと思います。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nMDN の記事で、<a href=\"/ja/docs/Learn_web_development/Core/Accessibility\">アクセシビリティ</a>についての注意をたびたび目にするでしょう。アクセシビリティについて語る際、私たちは、マウスやトラックパッド付きのコンピューター、タッチスクリーン付きの携帯電話、キーボードのみを使用して操作する人、あるいは文書内のコンテンツを読み上げるスクリーンリーダーを操作する人など、誰もが理解でき、利用できるウェブページの必要性を意味しています。</p>\n</div>"}},{"type":"prose","value":{"id":"セレクターと結合子の組み合わせ","title":"セレクターと結合子の組み合わせ","isH3":true,"content":"<p>次のように、複数のセレクターと結合子を組み合わせることができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */\narticle p span {\n}\n\n/* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */\nh1 + ul + p {\n}\n</code></pre></div>\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>h1 + p .special {\n color: yellow;\n background-color: black;\n padding: 5px;\n}\n</code></pre></div>\n<p>これは <code><body></code> 要素の中にある <code><h1></code> 要素の直後に来た <code><p></code> 要素の中にある <code>special</code> クラスの要素をスタイル設定します。このコードのうち、スタイルが適用されるのは <code><span class=\"special\"></code> のみです。</p>\n<p>現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。</p>"}},{"type":"prose","value":{"id":"その他の_css_の構文機能","title":"その他の CSS の構文機能","isH3":false,"content":"<p>これでいくつかの CSS 機能について学んだので、このコースの間に遭遇するであろう、他にもいくつかある CSS 構文機能について、概要を説明します。これらの詳細についてさらに調べたい場合は、このページの上部にある検索フィールドに機能の名前を入力するか、MDN の <a href=\"/ja/docs/Web/CSS/Reference\">CSS リファレンス</a>を参照してください。</p>\n<p>それぞれのケースでコードスニペットを試してみる場合は、例えば、これまでやってきたもののように、ローカルの例や MDN Playground に提供された HTML と CSS を追加してみてください。</p>"}},{"type":"prose","value":{"id":"関数","title":"関数","isH3":true,"content":"<p>ほとんどの値は比較的単純なキーワードまたは数値ですが、値の中には関数の形を取るものもあります。</p>\n<h4 id=\"calc_関数\">calc() 関数</h4>\n<p>この例には、 CSS 内で簡単な計算を実行できる <code>calc()</code> 関数があります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___the_calc_function notranslate\"><code><div class=\"outer\"><div class=\"box\">内部のボックスは 90% - 30px です。</div></div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___the_calc_function notranslate\"><code>.outer {\n border: 5px solid black;\n}\n\n.box {\n padding: 10px;\n width: calc(90% - 30px);\n background-color: rebeccapurple;\n color: white;\n}\n</code></pre></div>\n<p>表示結果は次の通りです。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"The calc function sample\" id=\"frame_the_calc_function\" width=\"100%\" height=\"200\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/\" data-live-id=\"the_calc_function\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>関数は関数名と、関数の値を囲む括弧で構成されます。上記の <code>calc()</code> の例の場合、値は包含ブロック幅の90%から30ピクセルを引いた値をボックスの幅として定義します。</p>\n<h4 id=\"座標変換関数\">座標変換関数</h4>\n<p>さまざまな値のもう一つの例は、 <a href=\"/ja/docs/Web/CSS/transform\"><code>transform</code></a> プロパティのもので、 <code>rotate()</code> などです。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___transform_functions notranslate\"><code><div class=\"box\"></div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___transform_functions notranslate\"><code>.box {\n margin: 30px;\n width: 100px;\n height: 100px;\n background-color: rebeccapurple;\n transform: rotate(0.8turn);\n}\n</code></pre></div>\n<p>上記のコードの出力結果は次のようになります。</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Transform functions sample\" id=\"frame_transform_functions\" width=\"100%\" height=\"200\" src=\"about:blank\" data-live-path=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started/\" data-live-id=\"transform_functions\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>以下の一覧にあるプロパティのさまざまな値を調べてください。次の関数を使用して、さまざまな HTML 要素にスタイルを適用する CSS ルールを書いてみてください。</p>\n<ul>\n<li><a href=\"/ja/docs/Web/CSS/transform\"><code>transform</code></a></li>\n<li><a href=\"/ja/docs/Web/CSS/background-image\"><code>background-image</code></a>（特にグラデーション値）</li>\n<li><a href=\"/ja/docs/Web/CSS/color\"><code>color</code></a>（特に rgb と hsl 値）</li>\n</ul>"}},{"type":"prose","value":{"id":"アットルール","title":"アットルール","isH3":true,"content":"<p>CSS のアットルール (@rule) は、 CSS の動作方法を指定して提供します。よく見かける一般的なアットルールの 1 つに <code>@media</code> があります。これは、<a href=\"/ja/docs/Web/CSS/CSS_media_queries\">メディアクエリー</a>を作成する際に使用します。メディアクエリーは、 CSS スタイル設定を適用するための条件を示す論理式を使用します。</p>\n<p>次の例では、スタイルシートで <code><body></code> 要素に既定ではピンク色の背景を定義しています。しかし、その次のメディアクエリーでは、ブラウザーのビューポートが 30em より大きい場合、 <code><body></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 background-color: pink;\n}\n\n@media (min-width: 30em) {\n body {\n background-color: blue;\n }\n}\n</code></pre></div>\n<p>このコースの学習を進めていく中で、他のアットルールにも遭遇することでしょう。</p>"}},{"type":"prose","value":{"id":"一括指定プロパティ","title":"一括指定プロパティ","isH3":true,"content":"<p>一部のプロパティ、例えば <a href=\"/ja/docs/Web/CSS/font\"><code>font</code></a>、<a href=\"/ja/docs/Web/CSS/background\"><code>background</code></a>、<a href=\"/ja/docs/Web/CSS/padding\"><code>padding</code></a>、<a href=\"/ja/docs/Web/CSS/border\"><code>border</code></a>、<a href=\"/ja/docs/Web/CSS/margin\"><code>margin</code></a> などは<strong>一括指定プロパティ</strong>と呼ばれています。これは、一括指定プロパティがいくつかの値を 1 行で設定するからです。</p>\n<p>例えば、この 1 行のコードを見てください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* padding や margin などの 4 値の一括指定では、値は上、右、下、左\n （上から時計回りに）の順に適用されます。他の一括指定の型もあります。\n 例えば、 2 値の一括指定では、 padding/margin は上/下、\n 次に左/右に設定します。 */\npadding: 10px 15px 15px 5px;\n</code></pre></div>\n<p>これは次の 4 行のコードと同等です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>padding-top: 10px;\npadding-right: 15px;\npadding-bottom: 15px;\npadding-left: 5px;\n</code></pre></div>\n<p>この 1 行は、</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>background: red url(bg-graphic.png) 10px 10px repeat-x fixed;\n</code></pre></div>\n<p>次の 5 行と同等です。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>background-color: red;\nbackground-image: url(bg-graphic.png);\nbackground-position: 10px 10px;\nbackground-repeat: repeat-x;\nbackground-attachment: fixed;\n</code></pre></div>\n<p>このコースの後半では、他にも多くの一括指定プロパティの例に遭遇するでしょう。今のところは、上記（または他にも知っているもの）の宣言を自分自身でコードに適用してみて、やり方に慣れてください。</p>"}},{"type":"prose","value":{"id":"css_のコメント","title":"CSS のコメント","isH3":true,"content":"<p>コーディング作業全般に言えることですが、 CSS にコメントを書くことは良い習慣です。これにより、後で修正や拡張を行う際に、コードがどのように動作するのかを思い出すことができます。また、他にも、コードを理解する手助けとなります。</p>\n<p>CSS コメントは <code>/*</code> で始まり、<code>*/</code> で終わります。例えば下記では、コメントがコードの異なる節の始まりを示しています。コードベースが大きくなるにつれ、移動が容易にできます。このようなコメントが存在することで、コードエディターでコメントを検索することが、コードの節を効率的に見つける方法となります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/* 基本的な要素のスタイル設定の扱い */\n/* ---------------------------- */\nbody {\n font:\n 1em/150% Helvetica,\n Arial,\n sans-serif;\n padding: 1em;\n margin: 0 auto;\n max-width: 33em;\n}\n\n@media (min-width: 70em) {\n /* 読みやすくなるように、大きな画面やウィンドウでは\n グローバルフォントサイズを大きくする。 */\n body {\n font-size: 130%;\n }\n}\n\nh1 {\n font-size: 1.5em;\n}\n\n/* DOM に含まれる特定の要素を扱う */\ndiv p,\n#id:first-line {\n background-color: red;\n border-radius: 3px;\n}\n\ndiv p {\n margin: 0;\n padding: 1em;\n}\n\ndiv p + p {\n padding-top: 0;\n}\n</code></pre></div>\n<p>コードを「コメントアウト」することは、検査のためにコードの一部分を一時的に無効にするのに便利です。例えば、下記では <code>.special</code> のルールがコードの「コメントアウト」により無効になっています。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>/*.special {\n color: red;\n}*/\n\np {\n color: blue;\n}\n</code></pre></div>\n<p>自分の CSS にコメントを追加してみてください。</p>"}},{"type":"prose","value":{"id":"css_におけるホワイトスペース","title":"CSS におけるホワイトスペース","isH3":true,"content":"<p>ホワイトスペースとは、実際の空白、タブ、改行を意味します。ブラウザーは HTML 内の余分なホワイトスペースを無視しますが、 CSS 内の余分なホワイトスペースも同様に無視します。ホワイトスペースの利点は、コードを読みやすくすることです。</p>\n<p>例えば下記では、各宣言（および、ルールの先頭/末尾）がそれぞれ別の行に記述されています。これは CSS を記述する上で良い方法であると言えます。 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 font:\n 1em/150% Helvetica,\n Arial,\n sans-serif;\n padding: 1em;\n margin: 0 auto;\n max-width: 33em;\n}\n\n@media (min-width: 70em) {\n body {\n font-size: 130%;\n }\n}\n\nh1 {\n font-size: 1.5em;\n}\n</code></pre></div>\n<p>次の例では、同じ CSS をより圧縮された形式で示しており、余分なホワイトスペースをすべて除去したものです。 2 つの例は同じように作業しますが、下記の方が読みにくくなっています。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>body{font:1em/150% Helvetica,Arial,sans-serif;padding:1em;margin:0 auto;max-width:33em;}\n@media(min-width:70em){body{font-size:130%;}}\nh1{font-size:1.5em;}\n</code></pre></div>\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>margin: 0 auto;\npadding-left: 10px;\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 example-bad notranslate\"><code>margin: 0auto;\npadding- left: 10px;\n</code></pre></div>\n<p>空白の使い方の間違いがわかりますか？最初の <code>0auto</code> は <code>margin</code> プロパティの有効な値として認識されません。項目 <code>0auto</code> は、<code>0</code> と <code>auto</code> という 2 つの別々の値という意味です。 2 つ目として、ブラウザーは <code>padding-</code> を有効なプロパティとして認識しません。正しいプロパティ名 (<code>padding-left</code>) には空白が挿入されています。</p>\n<p>複数の値が別個の値であることが分かるように、少なくとも 1 つの空白で区切るようにしてください。プロパティ名とプロパティ値は、単一の連続した文字列として一緒にしておきます。</p>\n<p>空白が CSS をどのように壊すかを確かめるには、検査用の CSS 内の空白をいろいろと試してみてください。</p>"}},{"type":"prose","value":{"id":"まとめ","title":"まとめ","isH3":false,"content":"<p>この記事では、CSS による文書のスタイル設定の仕方をいくつか見てきました。この知識は、残りのレッスンに移動した際に深堀りする予定です。しかし、これで、文書内の要素のさまざまな対象方法に基づいてテキストにスタイル設定を行い、 CSS を適用するのに十分な知識を得ることができました。</p>\n<p>次に、皆さんに新しい知識を試すための課題を出しましょう。</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Styling_basics\"><span class=\"button-wrap\"> Overview: CSS によるスタイル設定の基本</span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\"><span class=\"button-wrap\"> 次のページ </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ja","mdn_url":"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started","modified":"2025-01-02T14:42:07.000Z","native":"日本語","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Getting started with CSS","native":"English (US)"},{"locale":"de","title":"Erste Schritte mit CSS","native":"Deutsch"},{"locale":"es","title":"Empezar con CSS","native":"Español"},{"locale":"fr","title":"Démarrer avec CSS","native":"Français"},{"locale":"ko","title":"CSS 로 시작하기","native":"한국어"},{"locale":"pt-BR","title":"Como CSS é estruturado","native":"Português (do Brasil)"},{"locale":"ru","title":"Начало работы с CSS","native":"Русский"},{"locale":"zh-CN","title":"让我们开始 CSS 的学习之旅","native":"中文 (简体)"},{"locale":"zh-TW","title":"開始使用 CSS","native":"正體中文 (繁體)"}],"pageTitle":"CSS 入門 - ウェブ開発の学習 | MDN","parents":[{"uri":"/ja/docs/Learn_web_development","title":"ウェブ開発の学習"},{"uri":"/ja/docs/Learn_web_development/Core","title":"コア学習モジュール"},{"uri":"/ja/docs/Learn_web_development/Core/Styling_basics","title":"CSS によるスタイル設定の基本"},{"uri":"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started","title":"CSS 入門"}],"popularity":null,"short_title":"CSS 入門","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 open=\"\"><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><em><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started\" aria-current=\"page\">CSS 入門</a></em></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/styling_basics/getting_started","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/core/styling_basics/getting_started/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/7fee388bbd83c61bed43be6f88a8cf688d0c211c","filename":"index.md"},"summary":"この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。","title":"CSS 入門","toc":[{"text":"HTML からはじめよう","id":"html_からはじめよう"},{"text":"文書に CSS を追加","id":"文書に_css_を追加"},{"text":"よくあるセレクターの使用","id":"よくあるセレクターの使用"},{"text":"その他の CSS の構文機能","id":"その他の_css_の構文機能"},{"text":"まとめ","id":"まとめ"}],"pageType":"learn-module-chapter"}}</script></body></html>