Revision 1108695 of CSS

<p><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>)とは、<a href="/ja/docs/HTML" title="HTML">HTML</a> や <a href="/ja/docs/XML" title="XML">XML </a>（<a href="/ja/docs/XHTML">XHTML</a>・<a href="/ja/docs/SVG">SVG</a>などを含む）で記述された文書の体裁や見栄えを表現するために用いられる<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語です。CSSは、要素が画面上で（あるいは紙や音声といった別のメディア上で）どのように表現されるのかを定義します。</p>

<p>CSS は<em>オープン ウェブ</em>の核となる言語の 1 つで、&nbsp; <a class="external" href="https://w3.org/Style/CSS/#specs">W3C 標準仕様</a>が定められています。仕様の策定はバージョンに分けて進められており、 CSS1 が既に廃止、CSS2.1 が勧告の段階、<a href="/ja/docs/CSS/CSS3">CSS3 </a>が（より小さなモジュールに分割された上で）標準化の手続中のステータスにあります。</p>

<div style="margin:auto;text-align:center;">
<div class="callout-box action-driven">
<div><a href="/ja/docs/CSS/CSS_Reference">CSS リファレンス</a></div>

<p><u>ベテランWeb 開発者向け</u>の<a href="/ja/docs/CSS/CSS_Reference" title="CSS/CSS_Reference">網羅的なリファレンス</a>。CSS のあらゆるプロパティと概念を解説します。</p>
</div>

<div class="callout-box action-driven">
<div><a href="/ja/docs/CSS/Getting_Started">CSS チュートリアル</a></div>

<p><u>完全な初心者向け</u>の<a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting_Started">イントロダクション</a>。必要な基礎をステップ・バイ・ステップで説明します。</p>
</div>

<div class="callout-box action-driven">
<div><a href="/ja/demos/tag/tech:css3">CSS3 デモ</a></div>

<p><u>最新の CSS 技術</u>を用いた、創造性をかきたてる<a href="/ja/demos/tag/tech:css3" title="demos/tag/tech:css3">デモの一覧</a>です。</p>
</div>
</div>

<table class="topicpage-table">
 <tbody>
  <tr>
   <td>
    <h2 class="Documentation" id="Documentation" name="Documentation">ドキュメントとチュートリアル</h2>

    <dl>
     <dt>CSS の主要な概念</dt>
     <dd><a href="/ja/docs/CSS/Syntax" title="CSS/Syntax">言語の構文</a>の説明や、<a href="/ja/docs/CSS/Specificity" title="CSS/Specificity">詳細度</a>と<a href="/ja/docs/CSS/inheritance" title="CSS/inheritance">継承</a>、<a href="/ja/docs/CSS/box_model" title="CSS/box_model">ボックスモデル</a>と<a href="/ja/docs/CSS/margin_collapsing" title="CSS/margin_collapsing">マージンの相殺</a>、<a href="/ja/docs/CSS/Understanding_z-index/The_stacking_context" title="CSS/Understanding_z-index/The_stacking_cont">スタック文脈</a>と<a href="/ja/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">ブロック整形文脈</a>、または<a href="/ja/docs/CSS/initial_value" title="CSS/initial_value">初期値</a>、<a href="/ja/docs/CSS/computed_value" title="CSS/computed_value">計算値</a>、<a href="/ja/docs/CSS/used_value" title="CSS/used_value">使用値</a>、<a href="/ja/docs/CSS/actual_value" title="CSS/actual_value">実効値</a>といった原理の案内。<a href="/ja/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">簡略プロパティ</a>のような実体も定義されています。</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS 開発者ガイド</a></dt>
     <dd>HTML のスタイリングの基礎から、コンテンツを輝かせる CSS テクニックの詰め合わせまで、すべてを学ぶ助けとなる記事です。</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions">CSS についてのよくある質問</a></dt>
     <dd>CSS についての、よくある質問の答え。</dd>
    </dl>
   </td>
   <td>
    <h2 class="Tools" id="Tools" name="Tools">CSS開発のためのツール</h2>

    <ul>
     <li><a class="external external-icon" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> は CSS が有効かどうか判定します。<a href="https://www.onlinewebcheck.com/">OnlineWebCheck.com</a> のサービスも同じように働きます。ともにデバッグのために重宝するツールです。</li>
     <li><a href="https://developer.mozilla.org/ja/docs/Tools">Firefox Developer Tools</a> は<a href="https://developer.mozilla.org/ja/docs/Tools/Page_Inspector">インスペクタ</a>と<a href="https://developer.mozilla.org/ja/docs/Tools/Style_Editor">スタイルエディタ</a>ツールを通じて、ページの生きた CSS の閲覧及び編集を可能とします。</li>
     <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/1843">Firebug 拡張機能</a> は 広く使われている拡張機能であり、表示しているサイトの CSS をその場で変更することができます。この拡張機能はより多くのことをしていますが、いくつかの変更を試すにはとても実用的です。</li>
     <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/60">Web Developer 拡張機能</a>&nbsp;もまた、表示しているサイトの CSS をその場で変更することができます。Firebug ほど強力ではありませんが、よりシンプルです。</li>
     <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/Tools">いろいろな CSS のためのツール</a></li>
    </ul>

    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連項目</h2>

    <ul>
     <li>Mozilla の <a href="https://developer.mozilla.org/en-US/Learn/CSS">Learning CSS セクション</a></li>
     <li>CSS がよく適用される Web 言語。<a href="https://developer.mozilla.org/ja/docs/HTML">HTML</a>、<a href="https://developer.mozilla.org/ja/docs/SVG">SVG</a>、<a href="https://developer.mozilla.org/ja/docs/XHTML">XHTML</a>&nbsp;と&nbsp;<a href="https://developer.mozilla.org/ja/docs/XML">XML</a>。</li>
     <li>CSS を広範囲に利用する&nbsp;Mozilla のテクノロジ。&nbsp;<a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL">XUL</a>、&nbsp;<a href="https://developer.mozilla.org/ja/Firefox">Firefox</a>、&nbsp;<a href="https://developer.mozilla.org/ja/docs/Mozilla/Thunderbird">Thunderbird</a>、<a href="https://developer.mozilla.org/ja/docs/Extensions">拡張機能</a>、<a href="https://developer.mozilla.org/ja/Add-ons/Themes">テーマ</a>。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>{{CommunityBox("ウェブのレイアウト", "dev-tech-layout", "mozilla.dev.tech.layout", "", "Stack Overflow|https://stackoverflow.com/questions/tagged/css|CSS についてのトピック|Visit Stack Overflow, a collaboratively built and maintained Q&amp;A site. あなたの疑問に対する答えが見つかるか探してみてください。なければ、質問することができます。||CSS-Discuss|https://www.css-discuss.org/|CSS-Discuss メーリングリスト|css-discuss メーリングリストに参加してください。CSS の実際の使用について話し合うためのメーリングリストです。")}}</p>