Revision 488079 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" title="XHTML">XHTML</a>・<a href="/ja/docs/SVG" title="SVG">SVG</a>などを含む）で記述された文書の体裁や見栄えを表現するために用いられる<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語です。CSSは、構造化された要素が画面上で（あるいは紙や音声といった別のメディア上で）どのように表現されるのかを定義します。</p>
<p>CSS は<em>オープン ウェブ</em>の核となる言語の 1 つで、&nbsp; W3C 標準の仕様が定められています。CSSの開発は複数のバージョンに分けて進められており、 CSS1 が既に廃止、CSS2.1 が勧告の段階、CSS3 が（より小さなモジュールに分割された上で）標準化の手続中というステータスになっています。</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="/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/DOM/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="Community" id="Community" name="Community">コミュニティ</h2>
    <ul>
     <li>Mozilla フォーラムを見る...</li>
     <li>{{DiscussionList("dev-tech-css", "mozilla.dev.tech.css")}}</li>
    </ul>
    <ul>
     <li><a class="link-irc" href="irc://irc.mozilla.org/css">#css IRC channel</a></li>
     <li><a href="https://www.css-discuss.org/">CSS-Discuss site and list</a></li>
    </ul>
    <h2 class="Tools" id="Tools" name="Tools">ツール</h2>
    <ul>
     <li><a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/1843">Firebug 拡張機能</a></li>
     <li><a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/60">Web Developer 拡張機能</a></li>
     <li><a class="link-https" href="https://addons.mozilla.org/ja/docs/firefox/addon/179">EditCSS 拡張機能</a></li>
     <li><a href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a></li>
    </ul>
    <p><span class="alllinks"><a href="/ja/docs/tag/CSS:Tools" title="tag/CSS:Tools">すべて見る...</a></span></p>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連項目</h2>
    <ul>
     <li><a href="/ja/docs/Extensions" title="Extensions">拡張機能</a> 、 <a href="/ja/docs/HTML" title="HTML">HTML</a> 、 <a href="/ja/docs/Themes" title="Themes">Themes</a> 、 <a href="/ja/docs/XHTML" title="XHTML">XHTML</a> 、 <a href="/ja/docs/XML" title="XML">XML</a> 、 <a href="/ja/docs/XUL" title="XUL">XUL</a></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>
<p>&nbsp;</p>