サイト情報Siteinfo

このサイト使用できる部品一覧

※ このページは,更新作業の参考とするため設置しています。


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


⑫ 後ろに【NEW】マークを付ける

尾道市立久保小学校

<p class="new">尾道市立久保小学校</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>




写真寄せAlign



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


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



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

Table

学校名 尾道市立久保小学校
校長名 村上 みどり
所在地 〒722-0043
広島県尾道市東久保町13-19
電話番号 0848-37-3901

<table class="table">

<tr>

<th>学校名</th>

<td>尾道市立久保小学校</td>

</tr>

<tr>

<th>校長名</th>

<td>村上 みどり</td>

</tr>

<tr>

<th>所在地</th>

<td>〒722-0043
広島県尾道市東久保町13-1
</td>

</tr>

<tr>

<th>電話番号</th>

<td>0848-37-3901</td>

</tr>

</table>



Web フォントFont Awesome

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

Font Awesome サイト

<i class="fa fa-flag"></i>
<i class="fa fa-flag fa-lg"></i>
<i class="fa fa-flag fa-2x"></i>
<i class="fa fa-flag fa-3x"></i>
<i class="fa fa-flag fa-4x"></i>
<i class="fa fa-flag fa-5x"></i>
<i class="fa fa-star>
<i class="fa fa-star fa-2x"></i>
<i class="fa fa-star fa-3x red"></i>
<i class="fa fa-star fa-4x blue"></i>
<i class="fa fa-star 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 active">メニュー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")

※ 次の「single」の部分を「double」「triple」に変えると・・・


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



 PDFはこちら

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





写真ギャラリーGallery

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

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

※ 次の「triple」の部分を「double」「single」に変えると・・・


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

写真の説明


文書の掲載Document


※次のような文書の掲載は,予め,Word文書やExcel文書をPDF保存し,そのPDF文書を「Print Screen」で,横幅700px~800px程度のサイズの画像にして利用する。





<img class="width-full" src="sample_document.jpg" alt="">


※ class="width-full" 文書を横幅にぴったりさせる


pagetop