文書の装飾等
文書の装飾等を 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="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="large">広島県公立中学校長会</p>
⑫ スマホ画面の時だけ，指定箇所で改行する
広島県
公立中学校長会
<p>広島県<br class="break">公立中学校長会</p>
⑬ 後ろに【NEW】マークを付ける
広島県公立中学校長会
<p class="new">広島県公立中学校長会</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>
写真寄せ
写真の右または左に，文書を流し込んで表示させることができます。
<img src="sample1.jpg" class="alignright frame">
class="alignright"は，写真を右寄せし，文書を写真の左側に流し込みます。
class="frame"は，写真のまわりに枠線表示します。
class="alignright frame"とすると，同時にその両方を適用します。
<img src="images/sample2.jpg" class="alignleft frame">とした場合は，写真を左寄せし，写真のまわりに枠線表示し，文書を写真の右側に流し込みます。
表
| 組織名 | 広島県公立中学校長会 |
|---|---|
| 会長名 | 北崎 俊司 |
| 事務局所在地 | 〒732-0052 広島市東区光町1-11-5 地産ビル1003号 |
| 電話番号 | 082-263-6382 |
<table class="table">
<tr>
<th>組織名</th>
<td>広島県公立中学校長会</td>
</tr>
<tr>
<th>会長名</th>
<td>北崎 俊司</td>
</tr>
<tr>
<th>事務局所在地</th>
<td>〒732-0052
広島市東区光町1-11-5 地産ビル1003号</td>
</tr>
<tr>
<th>電話番号</th>
<td>082-263-6382</td>
</tr>
</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 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)スマートフォンの時，タイトルがボタンからはみ出す例
平成２９年度広島県公立中学校長会不祥事根絶のための行動計画<a class="button">平成２９年度広島県公立中学校長会不祥事根絶のための行動計画</a>
(2)適当な所で強制的に改行して，スマートフォンでのはみ出しを防いだ例
平成２９年度広島県公立中学校長会不祥事根絶のための行動計画
<a class="button">平成２９年度広島県公立中学校長会<br>不祥事根絶のための行動計画</a>
(3)スマートフォンの時だけ改行するよう，調整を加えた例
平成２９年度広島県公立中学校長会不祥事根絶のための行動計画
<a class="button">平成２９年度広島県公立中学校長会<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文書を横幅1000ｐｘ～1500px程度のサイズの画像（jpg）に加工して利用する。
※ PDFから画像に変換するのは，「Print Screen」で行うか，次のサイトの「オンラインソフト」を利用すると便利である。
※ img タグに「class="width-full"」を設定して，文書を横幅ぴったりにする。
<img class="width-full" src="siteinfo/sample_document.jpg" alt="">
