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


文書の装飾等Text Decoration

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


<p>尾道市立因北中学校</p>

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


① 文字色を赤くする

尾道市立因北中学校

<p class="red">尾道市立因北中学校</p>


② 文字色を青くする

尾道市立因北中学校

<p class="blue">尾道市立因北中学校</p>


③ 文字色を緑にする

尾道市立因北中学校

<p class="green">尾道市立因北中学校</p>


③ 文字色を黄色にする

尾道市立因北中学校

<p class="yellow">尾道市立因北中学校</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="red 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>


写真寄せAlign



<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-2211
広島県尾道市因島中庄町4405-1
電話番号 0845-24-0029

<table class="table">

<tr>

<th>学校名</th>

<td>尾道市立因北中学校</td>

</tr>

<tr>

<th>校長名</th>

<td>濱本 かよみ</td>

</tr>

<tr>

<th>所在地</th>

<td>〒722-2211
広島県尾道市因島中庄町4405-1</td>

</tr>

<tr>

<th>電話番号</th>

<td>0845-24-0029</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")

写真の説明

文書の掲載Document



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


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


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


pagetop