<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="Cascading Style Sheets（カスケーディングスタイルシート）機構を扱うために必要な基本知識の解説。" />
<meta name="keywords" content="CSS,Cascading Style Sheets,カスケーディングスタイルシート,解説" />
<title>CSS 前提知識</title>
<link rel="stylesheet" type="text/css" href="http://w3g.jp/style/default" />
<link rel="alternate" type="application/rss+xml" href="http://w3g.jp/index.xml" title="RSS update information" />
<link rel="alternate" type="application/rss+xml" title="SiteMap" href="http://w3g.jp/sitemap.xml" />
<link rel="start" href="http://w3g.jp/" title="World Wide Web Guide" />
<link ref="contents" href="http://w3g.jp/css/" title="CSS" />
<link rev="made" href="mailto:ryo.ueda@gmail.com" />
<script src="/script/jquery" type="text/javascript"></script>
</head>
<body>
<p id="skip"><a href="#information">Go to information</a></p>

<h1>前提知識</h1>
<script type="text/javascript" src="/script/adsense"></script>
<p class="description">Cascading Style Sheets（カスケーディングスタイルシート）機構を扱うために必要な基本知識の解説。</p>
<dl class="items" title="Entries">
<dt><a href="outline">CSS概論</a></dt>
<dd>Cascading Style Sheets（カスケーディングスタイルシート）とは何か・何ができるのかということから、基本的な使い方を説明します。</dd><dt><a href="selector">セレクタ（selector）</a></dt>
<dd>CSS はスタイルを適用する対象であるセレクタ（selector）とスタイル情報を設定する宣言ブロックの2つから成り立ちます。セレクタには全称セレクタ,クラスセレクタ,IDセレクタ,子孫セレクタ,子供セレクタ,隣接セレクタ,属性セレクタなどがあります。</dd><dt><a href="pseudo">疑似クラスと疑似要素</a></dt>
<dd>疑似クラスは要素が特定の状態にある場合にスタイルを指定するもので、疑似要素は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン（:）をつけて用います。</dd><dt><a href="cascading_order">段階化の順序</a></dt>
<dd>Cascading Style Sheets　の Cascade とは順序立てられたリストのスタイルシートという意味から名付けられたもので、スタイルシートが段階的に継承していく働きを表しています。そして、順序立てられたリストの中で記述されている位置やセレクタの違いにより、段階化の順序（スタイル情報が反映される優先順位）は異なります。</dd><dt><a href="target">適用要素</a></dt>
<dd>CSS の各プロパティが適用できる (X)HTML の各要素の要素型（要素タイプ）区分。</dd><dt><a href="at_rule">@規則（アットルール）</a></dt>
<dd>アットルール（@規則）は、セレクタ（selector）とプロパティだけでは指定できない機能を補うために用意されています。</dd><dt><a href="units">CSSの単位</a></dt>
<dd>CSS で使われる単位には長さ, パーセンテージ値, 色, URI などがあります。長さは「絶対単位」と「相対単位」の2種類の単位に大別され、絶対単位には cm, mm, in, pt, pc があり、相対単位には em, ex, px があります。</dd><dt><a href="inheritance">継承（Inheritance）</a></dt>
<dd>継承（Inheritance）とは、(X)HTML文書はすべて樹形図のような構造（木構造）になっていることから、記述するスタイル情報を軽量化し、合理化を図るためにプロパティの値が親要素から子要素へ、子要素から孫要素へと引き継がれていく仕組みのことです。</dd><dt><a href="box_model">ボックスモデル</a></dt>
<dd>各要素が生成する矩形領域の範囲がボックス（Box）のように見立てられることから、この概念をボックスモデル（Box model）と呼びます。</dd><dt><a href="contining_block">包含ブロック</a></dt>
<dd>包含ブロックとは、祖先要素のうち、もっとも近い祖先の要素にあたるブロック要素の内容領域を指します。つまり、当該要素の親要素をさかのぼっていっていってブロック要素があれば、そのブロック要素の内容領域が包含ブロックということになります。</dd><dt><a href="property_pronunciation">プロパティ名 発音ガイド</a></dt>
<dd>CSS2.1 の仕様で定義されているプロパティ名の発音（フリガナ、読み方）について。CSS の各プロパティ名は、単語をあてはめただけの形をとる。</dd>
</dl>
<script type="text/javascript" src="/script/adsense2"></script>
<ul class="link"><li class="gotop"><a href="#skip">Go to top</a></li></ul>
<dl id="information">
<dt>現在位置</dt>
<dd id="location"><ol>
<li class="first"><a href="http://w3g.jp/"><abbr title="World Wide Web Guide">W3G</abbr></a></li>
<li><a href="http://w3g.jp/css/">CSS</a></li>
<li>前提知識</li>

</ol></dd>
<dt>ナビゲーション</dt>
<dd id="nav"><ul><li><a href="/xhtml/">XHTML</a></li><li><a href="/css/" class="selected">CSS</a></li><li><a href="/javascript/">JavaScript</a></li><li><a href="/webstandards/">Web標準</a></li><li><a href="/seo/">SEO</a></li><li><a href="/others/">Others</a></li><li><a href="/blog/">Blog</a></li></ul><address><a href="http://w3g.jp/">World Wide Web Guide</a></address></dd>
<dt class="status">ステータス情報</dt>
<dd><dl>
<dt>作者</dt><dd><a href="/author">上田 遼</a></dd>

<dt><abbr title="Uniform Resource Identifier">URI</abbr></dt><dd><code class="URI">http://w3g.jp/css/guide/</code></dd>
</dl></dd>
<dt>検索</dt>
<dd id="search">
<form action="/srch/msearch.cgi" accept-charset="utf-8"><p>
<input type="text" size="35" name="query" value="" tabindex="1" accesskey="I" />
<kbd>I</kbd>
<input type="submit" value="Search" tabindex="2" accesskey="S" />
<kbd>S</kbd>
<input type="hidden" name="hint" value="ひらがな" />
<input type="hidden" name="index" value="" />
<input type="hidden" name="config" value="" />
</p></form>
</dd>
</dl>
<p class="promotion">直近の制作実績等：<a href="http://www.ohs.ac.jp/">大阪人間科学大学</a> <strong>New!</strong> / <a href="http://www.kun-ei.ac.jp/">大阪薫英女子短期大学</a> <strong>New!</strong> / <a href="https://www.816photo.jp/okuni/">セキスイハイム みんなのお国じまん</a> <strong>New!</strong></p>
<script type="text/javascript" src="/script/count" charset="utf-8"></script>
<script type="text/javascript">
var bid = 3;
var title = 'W3G'
var oid = '13';
var at = 'category';
</script>
<script type="text/javascript" src="http://w3g.jp/tracking.js"></script>
<noscript>
<img src="http://w3g.jp/tracking/access.php?bid=3&amp;oid=13&amp;at=category&amp;title=W3G" width="1" height="1" alt="" />
</noscript>

</body>
</html>