※ このページは,このサイトで使用できる部品の一覧を紹介しています。


文書の装飾等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>


写真右寄せ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

学校名 福山市立城北中学校
校長名 岡野 英俊
所在地 〒720-0082
広島県福山市木之庄町4丁目1番1号
電話番号 084-923-0668

<table class="table">

<tr>

<th>学校名</th>

<td>福山市立城北中学校</td>

</tr>

<tr>

<th>校長名</th>

<td>岡野 英俊</td>

</tr>

<tr>

<th>所在地</th>

<td>〒720-0082
広島県福山市木之庄町4丁目1番1号
</td>

</tr>

<tr>

<th>電話番号</th>

<td>084-923-0668</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#breadcrumb" class="menu_button select">メニュー1</a></li>

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

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

</ul>



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

<div class="single">

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

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

<a class="button green" href="page3.html#breadcrumb>ページボタン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>



写真ギャラリーGallery

写真横3列→2列→1列(class="triple")

写真の説明
写真の説明
写真の説明
写真の説明
写真の説明
写真の説明

<div class="triple">

<figure>

<img src="image1.jpg">

<figcaption>写真の説明</figcaption>

</figure>


<figure>

<img src="image2.jpg">

<figcaption>写真の説明</figcaption>

</figure>



<figure>

<img src="image6.jpg">

<figcaption>写真の説明</figcaption>

</figure>

</div>


写真横2列→1列(class="double")

写真の説明
写真の説明
写真の説明
写真の説明
写真の説明
写真の説明


横1列写真(class="single")

写真の説明
pagetop