至誠一貫(自尊・自恃・自制)

文書の装飾等Text Decoration

文書の装飾を class="~" を使って指定します。


<p>広島県立尾道北高等学校</p>

この文書に装飾を施します。


① 文字色を赤くする

広島県立尾道北高等学校

<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>


インデントIndent

<p>広島県立尾道北高等学校</p>  これを基本形として

広島県立尾道北高等学校


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

広島県立尾道北高等学校

<p class="indent1">広島県立尾道北高等学校</p>


広島県立尾道北高等学校

<p class="indent2">広島県立尾道北高等学校</p>


広島県立尾道北高等学校

<p class="indent3">広島県立尾道北高等学校</p>


広島県立尾道北高等学校

<p class="indent4">広島県立尾道北高等学校</p>


広島県立尾道北高等学校

<p class="indent5">広島県立尾道北高等学校</p>


箇条書きスタイルで1文字ずつ右寄せされます。
リスト項目の最初の記号(〇,ア,イ,1,2,A,Bなど)は,1文字前に出るように調整されます。

〇 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

〇 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

<p class="list1">〇広島県立尾道北高等学校は,・・・・</p>

<p class="list1">〇広島県立尾道北高等学校は,・・・・</p>


ア 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

イ 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

<p class="list2">ア 広島県立尾道北高等学校は,・・・・</p>

<p class="list2">イ 広島県立尾道北高等学校は,・・・・</p>


1 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

2 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

<p class="list3">1 広島県立尾道北高等学校は,・・・・</p>

<p class="list3">2 広島県立尾道北高等学校は,・・・・</p>


A 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

B 広島県立尾道北高等学校は,「至誠一貫」の校是のもと,広く知性を涵養し,豊かな心と高い志を育むことによって,新しい時代を拓く人材の育成を図ります。

<p class="list4">A 広島県立尾道北高等学校は,・・・・</p>

<p class="list4">B 広島県立尾道北高等学校は,・・・・</p>


写真右寄せAlignright


<img src="images/sample1.jpg" class="alignright frame">


class="alignright"は,写真を右寄せし,文書を写真の左側に流し込みます。
class="frame"は,写真のまわりに枠線表示します。
class="alignright frame"とすると,同時にその両方を適用します。

<img src="images/sample1.jpg" class="alignleft frame">とした場合は,写真を左寄せし,写真のまわりに枠線表示し,文書を写真の右側に流し込みます。

Table

学校名 広島県立尾道北高等学校
校長名 好村 孝則
所在地 〒722-0046 広島県尾道市長江3丁目7-1
電話番号 0848-37-6106

<table class="table">

<tr>

<th>学校名</th>

<td>広島県立尾道北高等学校</td>

</tr>

<tr>

<th>校長名</th>

<td>好村 孝則</td>

</tr>

<tr>

<th>所在地</th>

<td>〒722-0046
広島県尾道市長江3丁目7-1
</td>

</tr>

<tr>

<th>電話番号</th>

<td>0848-37-6106</td>

</tr>

</table>

Web フォントFont Awesome

絵柄のフォントを簡単に組み込めます。

Font Awesome サイト

<i class="fa fa-star"></i>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-2x"></i>
<i class="fa fa-star fa-3x"></i>
<i class="fa fa-star fa-4x"></i>
<i class="fa fa-star fa-5x"></i>
<i class="fa fa-music"></i>
<i class="fa fa-music fa-lg"></i>
<i class="fa fa-music fa-2x"></i>
<i class="fa fa-music fa-3x red"></i>
<i class="fa fa-music fa-4x blue"></i>
<i class="fa fa-music fa-5x green"></i>

PDFはこちら

<i class="fa fa-file-pdf-o red"> PDFはこちら</i>

ボタンButtons

ボタンを簡単に設置できる仕組みが組み込まれています。

css3-patterned-buttons サイト

メニューボタン


<ul class="button-group">

<li><a href="menu1.html#topnav" class="menu_button select">メニュー1</a></li>

<li><a href="menu2.html#topnav" class="menu_button">メニュー2</a></li>

<li><a href="menu3.html#topnav" class="menu_button">メニュー3</a></li>

</ul>



横1列ボタン(class="single")

<div class="single">

<a class="button red" href="page1.html#topnav">ページボタン1</a>

<a class="button blue" href="page2.html#topnav>ページボタン2</a>

<a class="button green" href="page3.html#topnav>ページボタン3</a>

</div>

横2列ボタン(class="double")

横3列ボタン(class="triple")



 FDFはこちら

<a class="button" href="#" target="_blank" style="width:120px;"><i class="fa fa-file-pdf-o red"></i> FDFはこちら</a>



pagetop