Revision 1064880 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>Articles to help you learn everything from the basics of styling HTML to assorted CSS techniques to make your content shine.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions">CSS についてのよくある質問</a></dt>
     <dd>CSS についての、よくある質問の答え</dd>
     <dt><a href="/ja/docs/CSS/Writing_Efficient_CSS">効率的な CSS の書き方</a></dt>
     <dd>スタイルシートエンジンがどのようにセレクタのマッチングを実行しているかを説明し、より効率的な CSS を書くためのルールを述べます。</dd>
     <dt><a href="/ja/docs/CSS/Using_CSS_transforms">CSS トランスフォーム</a></dt>
     <dd>回転させたり、傾けたり、移動させたりするために、 どの要素にも適用され得る 2D の操作を示します。</dd>
     <dt><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a></dt>
     <dd>始まりから終わりの状態の間でなめらかなアニメーションを使い、どのように要素の外観を変化させるかを説明します。</dd>
     <dt><a href="/ja/docs/CSS/Using_CSS_animations">CSS アニメーション</a></dt>
     <dd>要素にアニメーションを定義する方法だけでなく、 JavaScript でブラウザがそれをサポートしているかどうかを<a href="/ja/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="CSS/CSS_animations/Detecting_CSS_animation_support">検出する方法</a>を説明します。</dd>
     <dt><a href="/ja/docs/CSS/Using_CSS_gradients">CSS グラデーション</a></dt>
     <dd>なめらかな色の変化からなるグラデーションの定義の方法の説明。</dd>
     <dt><a href="/ja/docs/CSS/Using_CSS_multi-column_layouts">CSS マルチカラムレイアウト</a></dt>
     <dd>CSS 3 のマルチカラムレイアウトを使って、どのようにマルチカラムのページ設定を行うかの説明。</dd>
     <dt><a href="/ja/docs/CSS/Multiple_backgrounds">CSS の多重背景</a></dt>
     <dd>同じ要素に複数の背景を定義する方法の説明。</dd>
     <dt><a href="/ja/docs/CSS/Scaling_background_images">背景画像の拡大縮小</a></dt>
     <dd>背景画像がそのコンテナのサイズにぴったり合っていない場合に、その背景画像の挙動をコントロールする方法を示します。</dd>
     <dt><a href="/ja/docs/CSS/Media_queries">メディアクエリ</a></dt>
     <dd>表示領域のサイズや解像度、タッチスクリーンの有無などの、レンダリングデバイスの詳細に基づいてスタイルシートを選択する方法の説明。</dd>
     <dt><a href="/ja/docs/CSS/Counters">CSS のカウンタ</a></dt>
     <dd>本質的にはリストのカウンタとして使われる、自動的なカウンタやナンバリングを使用する方法の説明。</dd>
     <dt>フォントとタイポグラフィ</dt>
     <dd>{{cssxref("@font-face")}} を使った<a href="/ja/docs/CSS/font" title="CSS/font">フォント</a>の管理と <a href="/ja/docs/WOFF" title="WOFF">WOFF フォント</a>フォーマットについての情報。</dd>
     <dt><a href="/ja/docs/CSS/Using_CSS_flexible_boxes">CSS フレキシブルボックス</a></dt>
     <dd>レイアウトを設計するためのフレキシブルボックスを使用する方法の説明。</dd>
     <dt><a href="/ja/docs/Consistent_List_Indentation">一貫性のあるリストの字下げ</a></dt>
     <dd>CSS を用いてリストの字下げを変更することは、見た目より裏技的です。しかし、標準準拠のCSSをサポートするブラウザでは、既定のものから変更する別の方法があります。このすべてについて解説します。</dd>
     <dt><a href="/ja/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a></dt>
     <dd>DOM を通じてスタイルの情報を得、操作する方法。</dd>
    </dl>

    <p><span class="alllinks"><a href="/ja/docs/tag/CSS" title="tag/CSS">すべて見る...</a></span></p>
   </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> は allow viewing and editing live CSS of a page via the <a href="https://developer.mozilla.org/ja/docs/Tools/Page_Inspector">インスペクタ</a> と <a href="https://developer.mozilla.org/ja/docs/Tools/Style_Editor">スタイルエディタ</a> ツール.</li>
     <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/1843">Firebug 拡張機能</a> は 広く使われている拡張機能であり、表示しているサイトの CSS をその場で変更することができます。 Very practical to test some changes, though this extension does much more.</li>
     <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/60">Web Developer 拡張機能</a> は also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.</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>Web languages CSS is often applied to: <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> and <a href="https://developer.mozilla.org/ja/docs/XML">XML</a>.</li>
     <li>Mozilla technologies which make extensive use of CSS: <a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL">XUL</a>, <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>