文書の装飾等
文書の装飾等を class を使って指定します。
<p>尾道市立因島南中学校</p> これを基本形として
尾道市立因島南中学校
この文書に装飾等を設定します。
① 文字色を赤くする
尾道市立因島南中学校
<p class="red">尾道市立因島南中学校</p>
② 文字色を青くする
尾道市立因島南中学校
<p class="blue">尾道市立因島南中学校</p>
③ 文字色を緑にする
尾道市立因島南中学校
<p class="green">尾道市立因島南中学校</p>
④ 文字色をサイトのテーマカラーにする
尾道市立因島南中学校
<p class="color1">尾道市立因島南中学校</p>
⑤ 文字サイズを大きくする
尾道市立因島南中学校
<p class="big">尾道市立因島南中学校</p>
尾道市立因島南中学校
<p class="big-x">尾道市立因島南中学校</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>
⑭ 後ろに【NEW】マークを付ける
尾道市立因島南中学校
<p class="new">尾道市立因島南中学校</p>
⑮ 後ろに マークを付ける
尾道市立因島南中学校
<p class="pdf">尾道市立因島南中学校</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>
<tr>
<td>セル３行１列</td>
<td>セル３行２列</td>
<td>セル３行３列</td>
</tr>
<table>
表組の作成方法
まず，表組全体を，<table>と<table>で囲みます。次に，表の各行は，それぞれ<tr>と </tr>で囲みます。そして，それぞれのセルは，<td>と</td>で囲むという構造になっています。
セルの中でも，タイトルは，<td>と</td>の代わりに<th>と</th>を使います。
Webアイコン
絵柄のフォントを簡単に組み込めます。
※アイコンを使うために一番簡単な方法は，次のFont Awesome のサイトで使いたいアイコンをクリックして，その先のページで表示される HTML をコピペして利用する方法です。
※例えば，次のようなアイコンがあります。
※これらに対応するＨＴＭＬは，それぞれ次のとおりです。
<i class="fas fa-book"></i>
<i class="fas fa-star"></i>
<i class="fas fa-music"></i>
<i class="fas fa-leaf"></i>
<i class="fas fa-car"></i>
<i class="fas fa-camera"></i>
<i class="fas fa-bell"></i>
<i class="fas fa-cloud"></i>
<i class="fas fa-flag"></i>
<i class="fas fa-child"></i>
<i class="fas fa-sync-alt fa-spin "></i>
※文字のように，サイズを変えたり，色を付けたりすることができます。
<i class="fas fa-flag fa-lg"></i>
<i class="fas fa-flag fa-2x"></i>
<i class="fas fa-flag fa-3x"></i>
<i class="fas fa-flag fa-4x"></i>
<i class="fas fa-flag fa-5x"></i>
<i class="far fa-star fa-2x"></i>
<i class="far fa-star fa-3x red"></i>
<i class="far fa-star fa-4x blue"></i>
<i class="far 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>
<a href="#breadcrumb" class="button yellow">黄色ボタン</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 red" href="page1.html#breadcrumb">ページボタン１</a>
<a class="button blue" href="page2.html#breadcrumb>ページボタン２</a>
<a class="button green" href="page3.html#breadcrumb>ページボタン３</a>
<a class="button yellow" 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)スマートフォンの時，タイトルがボタンからはみ出す例
平成30年度尾道市立因島南中学校不祥事根絶のための行動計画<a class="button">平成30年度尾道市立因島南中学校不祥事根絶のための行動計画</a>
(2)適当な所で強制的に改行して，スマートフォンでのはみ出しを防いだ例
平成30年度尾道市立因島南中学校不祥事根絶のための行動計画
<a class="button">平成30年度尾道市立因島南中学校<br>不祥事根絶のための行動計画</a>
(3)スマートフォンの時だけ改行するよう，調整を加えた例
平成30年度尾道市立因島南中学校不祥事根絶のための行動計画
<a class="button">平成30年度尾道市立因島南中学校<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="">
