かしこく　やさしく　たくましく

①　文字色を赤くする

尾道市立西藤小学校

<p class="red">尾道市立西藤小学校</p>

②　文字色を青くする

尾道市立西藤小学校

<p class="blue">尾道市立西藤小学校</p>

③　文字色を緑にする

尾道市立西藤小学校

<p class="green">尾道市立西藤小学校</p>

④　文字サイズを少し大きくする

尾道市立西藤小学校

<p class="big">尾道市立西藤小学校</p>

⑤　文字を太字にする

尾道市立西藤小学校

<p class="bold">尾道市立西藤小学校</p>

⑥　アンダーラインを引く

尾道市立西藤小学校

<p class="underline">尾道市立西藤小学校</p>

⑦　文書をセンタリングする

尾道市立西藤小学校

<p class="center">尾道市立西藤小学校</p>

⑧　文書を右寄せする

尾道市立西藤小学校

<p class="right">尾道市立西藤小学校</p>

⑨　①～⑧を合せて指定することもできます。例えば緑色で，少し大きな文字で，太字で，センタリングし，アンダーラインを引く場合。

尾道市立西藤小学校

<p class="green big bold center underline">尾道市立西藤小学校</p>

⑪　文書の一部分を装飾する場合。装飾する範囲を<span>と</span>で囲って指定します。

尾道市立西藤小学校

<p>尾道市立<span class="blue big bold">西藤</span>小学校</p>

⑫　ページタイトル用に特別に用意された装飾

尾道市立西藤小学校

<p class="large">尾道市立西藤小学校</p>

<p>尾道市立西藤小学校</p>  これを基本形として

尾道市立西藤小学校

１文字ずつ右寄せされます。

尾道市立西藤小学校

<p class="indent1">尾道市立西藤小学校</p>

尾道市立西藤小学校

<p class="indent2">尾道市立西藤小学校</p>

尾道市立西藤小学校

<p class="indent3">尾道市立西藤小学校</p>

尾道市立西藤小学校

<p class="indent4">尾道市立西藤小学校</p>

尾道市立西藤小学校

<p class="indent5">尾道市立西藤小学校</p>

箇条書きスタイルで1文字ずつ右寄せされます。
リスト項目の最初の記号（〇，ア，イ，１，２，Ａ，Ｂなど）は，１文字前に出るように調整されます。

〇　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

〇　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

<p class="list1">〇尾道市立西藤小学校は，・・・・</p>

<p class="list1">〇尾道市立西藤小学校は，・・・・</p>

ア　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

イ　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

<p class="list2">ア　尾道市立西藤小学校は，・・・・</p>

<p class="list2">イ　尾道市立西藤小学校は，・・・・</p>

１　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

２　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

<p class="list3">１　尾道市立西藤小学校は，・・・・</p>

<p class="list3">２　尾道市立西藤小学校は，・・・・</p>

Ａ　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

Ｂ　尾道市立西藤小学校は「確かな学力と豊かな心をもち，たくましく生きる子供」を育成します。

<p class="list4">Ａ　尾道市立西藤小学校は，・・・・</p>

<p class="list4">Ｂ　尾道市立西藤小学校は，・・・・</p>