このサイトで使用できる部品一覧
文書の装飾等
文書の装飾等を class を使って指定します。
<p>福山市立長浜小学校</p> これを基本形として
福山市立長浜小学校
この文書に装飾等を設定します。
① 文字色を赤くする
福山市立長浜小学校
<p class="red">福山市立長浜小学校</p>
② 文字色を青色くする
福山市立長浜小学校
<p class="blue">福山市立長浜小学校</p>
③ 文字色を緑にする
福山市立長浜小学校
<p class="green">福山市立長浜小学校</p>
④ 文字サイズを大きくする
福山市立長浜小学校
<p class="big">福山市立長浜小学校</p>
福山市立長浜小学校
<p class="big-x">福山市立長浜小学校</p>
⑤ 文字サイズを小さくする
福山市立長浜小学校
<p class="small">福山市立長浜小学校</p>
⑥ 文字を太字にする
福山市立長浜小学校
<p class="bold">福山市立長浜小学校</p>
⑦ アンダーラインを引く
福山市立長浜小学校
<p class="underline">福山市立長浜小学校</p>
⑧ 文書をセンタリングする
福山市立長浜小学校
<p class="center">福山市立長浜小学校</p>
⑨ 文書を右寄せする
福山市立長浜小学校
<p class="right">福山市立長浜小学校</p>
⑩ ①～⑨を合せて指定することもできます。例えば緑色で，大きな文字で，太字で，センタリングし，アンダーラインを引く場合。
福山市立長浜小学校
<p class="green big-x bold center underline">福山市立長浜小学校</p>
⑪ 文書の一部分を装飾する場合。装飾する範囲を<span>と</span>で囲って指定します。
福山市立長浜小学校
<p>福山市立<span class="blue big bold">長浜小</span>学校</p>
⑫ ページタイトル用に特別に用意された装飾
福山市立長浜小学校
<p class="page_title">福山市立長浜小学校</p>
⑬ スマホ画面の時だけ，指定箇所で改行する
福山市立
長浜小学校
<p>福山市立<br class="break">長浜小学校</p>
⑭ 文字列の一部に黄色のマーカーをする
福山市立長浜小学校
<p>福山市立<span class="mark">長浜小</span>学校</p>
⑮ 後ろに【NEW】マークを付ける
福山市立長浜小学校
<p class="new">福山市立長浜小学校</p>
⑯ 後ろにマークを付ける
福山市立長浜小学校
<p class="pdf">福山市立長浜小学校</p>
⑰ 文字列を点滅させる
福山市立長浜小学校
<p class="blink">福山市立長浜小学校</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>
枠線
あるエリアを枠線で囲みたい場合
豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。
豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。
豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。
<div class="border">
<p>豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。</p>
<p>豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。</p>
<p>豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。</p>
</div>
枠線内の背景を白くしたい場合
豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。
豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。
豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。
<div class="border-w">
<p>豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。</p>
<p>豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。</p>
<p>豊かに確かに伸びていく子。福山市立長浜小学校は，チェンジ，そしてチャレンジする児童を育成します。</p>
</div>
写真寄せ
写真の右または左に，文書を流し込んで表示させることができます。
<img src="sample1.jpg" class="alignright frame">
class="alignright"は，写真を右寄せし，文書を写真の左側に流し込みます。
class="frame"は，写真のまわりに枠線表示します。
class="alignright frame"とすると，同時にその両方を適用します。
<img src="images/sample2.jpg" class="alignleft frame">とした場合は，写真を左寄せし，写真のまわりに枠線表示し，文書を写真の右側に流し込みます。
表組
※ 表は，「table」「tr」「th」「td」の４種類のタグで作られています。
| タイトル１ | タイトル２ | タイトル３ |
|---|---|---|
| セル１行１列 | セル１行２列 | セル１行３列 |
| セル２行１列 | セル２行２列 | セル２行３列 |
| セル３行１列 | セル３行２列 | セル３行３列 |
<table class="table">
<tr>
<th>タイトル１</th>
<th>タイトル２</th>
<th>タイトル３</th>
</tr>
<tr>
<td>セル１行１列</td>
<td>セル１行２列</td>
<td>セル１行３列</td>
</tr>
<tr>
<td>セル２行１列</td>
<td>セル２行２列</td>
<td>セル２行３列</td>
</tr>
</table>
表組の作成方法
まず，表組全体を，<table>と<table>で囲みます。次に，表の各行は，それぞれ<tr>と </tr>で囲みます。そして，それぞれのセルは，<td>と</td>で囲むという構造になっています。
セルの中でも，タイトルは，<td>と</td>の代わりに<th>と</th>を使います。
<table>にclass="table"を付けると，表組に，その時適用されているテーマカラーで，いい感じに線がついたり，色が付いたりします。
Webアイコン
絵柄のフォントを簡単に組み込めます。
※アイコンを使うために一番簡単な方法は，次のFont Awesome のサイトで使いたいアイコンをクリックして，その先のページで表示される HTML をコピペして利用する方法です。
※例えば，次のようなアイコンがあります。
※これらに対応するＨＴＭＬは，それぞれ次のとおりです。
<i class="fa fa-book"></i>
<i class="fa fa-star"></i>
<i class="fa fa-music"></i>
<i class="fa fa-leaf"></i>
<i class="fa fa-car"></i>
<i class="fa fa-camera"></i>
<i class="fa fa-bell"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-flag"></i>
<i class="fa fa-child"></i>
<i class="fa fa-refresh fa-spin "></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 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はこちら
ボタン
ボタンを簡単に設置できる仕組みが組み込まれています。
単独ボタン
ボタン 赤ボタン 青ボタン 緑ボタン<a href="#breadcrumb" class="button">ボタン</a>
<a href="#breadcrumb" class="button red">赤ボタン</a>
<a href="#breadcrumb" class="button blue">青ボタン</a>
<a href="#breadcrumb" class="button green">緑ボタン</a>
連結メニューボタン
<ul class="button-group">
<li><a href="menu1.html#breadcrumb" class="menu_button active">メニュー１</a></li>
<li><a href="menu2.html#breadcrumb" class="menu_button">メニュー２</a></li>
<li><a href="menu3.html#breadcrumb" class="menu_button">メニュー３</a></li>
</ul>
※ activeは，現在表示されているページを表します。
ボタンの配置
※ 複数のボタンを体裁よく配置し，画面のサイズの変化により，再配置することができます。
横1列ボタン（class="single"）
※ 次の「single」の部分を「double」「triple」に変えると・・・
<div class="single">
<a class="button" href="page1.html#breadcrumb">ページボタン１</a>
<a class="button red" href="page2.html#breadcrumb>ページボタン２</a>
<a class="button blue" href="page3.html#breadcrumb>ページボタン３</a>
<a class="button green" href="page4.html#breadcrumb>ページボタン４</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>
ボタン上のタイトルの折り返し
※ ボタン上の長いタイトルは，スマートフォンで見たとき，ボタンからはみ出してしまいます。
(1)スマートフォンの時，タイトルがボタンからはみ出す例
2019年度福山市立長浜小学校不祥事防止のための行動計画<a class="button">2019年度福山市立長浜小学校不祥事防止のための行動計画</a>
(2)適当な所で強制的に改行して，スマートフォンでのはみ出しを防いだ例
2019年度福山市立長浜小学校不祥事防止のための行動計画
<a class="button">2019年度福山市立長浜小学校<br>不祥事防止のための行動計画</a>
(3)スマートフォンの時だけ改行するよう，調整を加えた例
2019年度福山市立長浜小学校不祥事防止のための行動計画
<a class="button">2019年度福山市立長浜小学校<br class="break">不祥事防止のための行動計画</a>
写真ギャラリー
※ 通常の写真の掲載は，次のようにします。
※ 写真に枠線をつけるのは，次のようにします。
※ 複数の写真を体裁よく配置し，画面サイズの変化により，再配置させることができます。
写真横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"）
文書の掲載
Word等の文書を画像に変換して掲載することができます。
※ WordやExcelの文書をそのままの形で掲載する場合は，予め，PDF保存し，そのPDF文書を横幅1500px程度のサイズの画像（jpg）に加工して利用する。
※ PDFから画像に変換するのは，次のサイトの「オンラインソフト」を利用すると便利である。
※ img タグに「class="width-full"」を設定して，文書を横幅ぴったりにする。
<img class="width-full" src="sample_document.jpg" alt="">
