見出し(h要素)について
h要素は文書構造上「見出し」に相当し、重要度順にh1~h6まで用意されています。各h要素の基本の見た目は以下になります。黒い背景のコードを記載すると、その下の見出しの見た目で表示されます。
<h1>見出し h1</h1>
見出し h1
<h1 class="h_type2">見出し h1 class="h_type2"</h1>
見出し h1 class=”h_type2″
<h2>見出し h2</h2>
見出し h2
<h3>見出し h3</h3>
見出し h3
<h4>見出し h4</h4>
見出し h4
<h5>見出し h5</h5>
見出し h5
<h6>見出し h6</h6>
見出し h6
文字に色をつける
文字に色を付ける際は、あらかじめ用意されている7色を利用できます。その他の色を設定したいときは、要素に「style」属性を付与し、「color」プロパティを設定することで自由に色を設定することができます。(CSSのカラー設定については、http://www.colordic.org/を参照してください。)
<p class="color-red">p要素を赤色にする。</p>
p要素を赤色にする。
<p class="color-blue">p要素を青色にする。</p>
p要素を青色にする。
<p class="color-yellow">p要素を黄色にする。</p>
p要素を黄色にする。
<p class="color-green">p要素を緑色にする。</p>
p要素を緑色にする。
<p class="color-black">p要素を黒色にする。</p>
p要素を黒色にする。
<p class="color-white">p要素を白色にする。</p>
p要素を白色にする。
<p class="color-gray">p要素を灰色にする。</p>
p要素を灰色にする。
文字組みについて
文字のサイズを大きくしたり、小さくしたり、先頭に1文字字下げしたり、段落から次の段落の間に空白を取りたいなど、通常の文章の見た目の調整は、p要素やdiv要素にclass属性を付与し、そのclass属性に任意の名前をつけることで対応するスタイルがあてがわれます(※これをclassセレクタと言います)。
以下のスタイルは一部例外を除き、p要素以外(例えばdiv要素など)でも適用されます。またセレクタは半角スペースで区切ることで複数適用することができるため、以下のような見た目も実現できます
<div class="indent larger5">1文字字下げして、5段階大きくしたdiv要素の見た目</div>
文字サイズを大きく
<p>通常のp要素の見た目</p>
通常のp要素の見た目
<p class="larger1">1段階大きくしたときのp要素の見た目</p>
1段階大きくしたときのp要素の見た目
<p class="larger2">2段階大きくしたときのp要素の見た目</p>
2段階大きくしたときのp要素の見た目
<p class="larger3">3段階大きくしたときのp要素の見た目</p>
3段階大きくしたときのp要素の見た目
<p class="larger4">4段階大きくしたときのp要素の見た目</p>
4段階大きくしたときのp要素の見た目
<p class="larger5">5段階大きくしたときのp要素の見た目</p>
5段階大きくしたときのp要素の見た目
<p class="larger6">6段階大きくしたときのp要素の見た目</p>
6段階大きくしたときのp要素の見た目
文字サイズを小さく
<p>通常のp要素の見た目</p>
通常のp要素の見た目
<p class="smaller1">1段階小さくしたときのp要素の見た目</p>
1段階小さくしたときのp要素の見た目
<p class="smaller2">2段階小さくしたときのp要素の見た目</p>
2段階小さくしたときのp要素の見た目
<p class="smaller3">3段階小さくしたときのp要素の見た目</p>
3段階小さくしたときのp要素の見た目
1文字字下げ(インデント)する
<p class="indent">1文字分字下げ(インデント)したときの見た目</p>
1文字分字下げ(インデント)したときの見た目
段落の下に余白を設定する
文章の段落の間や、画像の後に続く文章の間に空白を設けたいときにセレクタ名「gap」を使うことができます。1~6までの6段階です。
<p class="gap1">次の段落との間に1文字分の空白を設定。</p> <p>次の段落はここから始まります。</p>
次の段落との間に1文字分の空白を設定。
次の段落はここから始まります。
<p class="gap2">次の段落との間に2文字分の空白を設定。</p> <p>次の段落はここから始まります。</p>
次の段落との間に2文字分の空白を設定。
次の段落はここから始まります。
<p class="gap3">次の段落との間に3文字分の空白を設定。</p> <p>次の段落はここから始まります。</p>
次の段落との間に3文字分の空白を設定。
次の段落はここから始まります。