よく使用されるCSSプロパティ(属性)

CSSソースコード:

strong  {
        color:#f00;
}

XHTMLソースコード

<p>strongタグはem(emphasis)タグよりも<strong>より強い強調</strong>を表します。</p>

CSSソースコード:

.align-left {
        text-align:left;
}
.align-center   {
        text-align:center;
}
.align-right    {
        text-align:right;

XHTMLソースコード:

<p class="align-left">この段落は左揃え</p>
<p class="align-center">この段落は中央揃え</p>
<p class="align-right">この段落は右揃え</p>

CSSソースコード:

.indent1em      {
        text-indent:1em;
}

XHTMLソースコード:

<p class="indent1em">XHTMLのp(段落)タグでは上下に余白が出来ますが、
日本語で書かれた文章のように先頭に一文字分の余白が入りません。
この余白を全角スペースで作っているケースがありますが、
下記のようなCSSを適用すると一文字分の字下げが行われます。</p>

CSSソースコード:

.letterspace    {
        letter-spacing:0.3em
}

XHTMLソースコード:

<p class="letterspace">文字の間隔を指定する場合は、
letter-spacingプロパティを指定します。</p>
<p class="letterspace">スペースで間隔を調整すると、
スクリーンリーダーが誤読しますので、CSSのletter-spacingを使用して調整します。</p>

CSSソースコード:

h1.title        {
        font-family:mikachan-P,cursive;
        font-size:1em;
        text-align:center;
}

XHTMLソースコード:

<h1 class="title">DAISY2.02対応XHTML/CSSガイドライン</h1>
<h2>XHTML編</h2>
<ul>
<li><a href="./xhtml/index.html">XHTMLに関するレイアウトとアクセシビリティ</a></li>
<li><a href="./xhtml/tag.html">XHTMLタグ解説</a></li>
<ul>
<li><a href="./xhtml/tag.html#block">ブロックレベル要素</a></li>
<li><a href="./xhtml/tag.html#inline">インラインレベル要素</a></li>
<li><a href="./xhtml/tag.html#others">その他</a></li>
</ul>
<li><a href="./xhtml/ruby.html">ふりがな(ルビ)を振る</a></li>
</ul>

CSSソースコード:

.background-r   {
        background:#f00;
}

XHTMLソースコード:

<p>この例では背景色の指定をしたいところを<code>span</code>タグで括っています。
InternetExplorer等の視覚エージェントでは背景が<span class="background-r">赤く</span>見えますが、
<code>span</code>タグそのものに意味はありませんのでlynx等のテキスト型エージェントでは、
赤くなっている意味が伝わりません。</p>
<p>強調を表したいのであれば、<code>em</code>や<code>strong</code>タグを使用し、
そのタグに対して背景色を指定します。</p>

CSSソースコード:

table   {
        border-collapse:collapse;
        border:1px solid #000;
        margin-left:auto;
        margin-right:auto;
        width:auto;
}
 
th      {
        border:1px solid #000;
        padding:0.3em;
        font-weight:normal;
        font-size:75%;
        background:#cfc;
        text-align:center;
}
td      {
        border:1px solid #000;
        padding:0.5em;
        font-size:75%;
        text-align:center;
}

XHTMLソースコード:

<table summary="点数表">
<caption>期末テスト集計(60点満点)</caption>
<tbody>
<tr>
<th>名前</th>
<th>国語</th>
<th>算数</th>
<th>理科</th>
<th>社会</th>
<th>英語</th>
<th>合計</th>
<th>平均</th>
</tr>
<tr>
<td>まさふみ</td>
<td>40</td>
<td>39</td>
<td>50</td>
<td>35</td>
<td>38</td>
<td>202</td>
<td>40.4</td>
</tr>
<tr>
<td>のりこ</td>
<td>48</td>
<td>35</td>
<td>46</td>
<td>50</td>
<td>45</td>
<td>224</td>
<td>44.8</td>
</tr>
<td>みき</td>
<td>28</td>
<td>48</td>
<td>46</td>
<td>34</td>
<td>60</td>
<td>216</td>
<td>43.2</td>
</tr>
</tbody>
</table>

CSSソースコード:

img.margin      {
        margin:0 3em;
}

XHTMLソースコード:

<p><img src="hoge.png" class="margin" alt="ほげほげ" width="75" height="42" />
ほげほげ画像の左右に3em分のマージンが確保されました。</p>

CSSソースコード:

h1 a,.page-normal       {
        display:none;
}

XHTMLソースコード:

<h3><a href="tekitou.smil#text_0001">３　情報バリアフリー</a></h3>
<p><span class="page-normal">65</span></p>

CSSソースコード:

p img      {
        float:left;
        margin:0 1em;
}

XHTMLソースコード:

<p><img src="hoge.png" class="float" alt="ほげほげ" width="75" height="42" /></p>
<p>このほげほげ画像はgimpという画像操作プログラムで作成されました。<br />
gimpは無償で使用できます。<br />
フォトレタッチ、画像合成、画像オーサリングなどの機能を持っています。<br />
また、様々なOSとたくさんの言語で動作するのも大きな特徴です。</p>

CSSソースコード:

p.clear {
        clear:both;
}

XHTMLソースコード:

<p><img src="hoge.png" class="float" alt="ほげほげ" width="75" height="42" /></p>
<p>このほげほげ画像はgimpという画像操作プログラムで作成されました。</p>
<p class="clear">gimpは無償で使用できます。<br />
フォトレタッチ、画像合成、画像オーサリングなどの機能を持っています。<br />
また、様々なOSとたくさんの言語で動作するのも大きな特徴です。</p>