「かしこい子，やさしい子，つよい子」の育成

文書の装飾等

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

<p>府中市立旭小学校</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"とすると，同時にその両方を適用します。

行事予定表

※　行事予定表は，「表(table)」の仕組みを使って作られています。

Webアイコン

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

※アイコンを使うために一番簡単な方法は，次のFont Awesome のサイトで使いたいアイコンをクリックして，その先のページで表示される HTML をコピペして利用する方法です。

「Font Awesome」のサイト

※例えば，次のようなアイコンがあります。

※これらに対応するＨＴＭＬは，それぞれ次のとおりです。

※文字のように，サイズを変えたり，色を付けたりすることができます。

ボタン

ボタンを簡単に設置できる仕組みが組み込まれています。

※　ボタンに関する情報は，次のサイトを参考にしてください。

「css3-patterned-buttons」のサイト

単独ボタン

連結メニューボタン

• メニュー１
• メニュー２
• メニュー３

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

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

ボタン上のタイトルの折り返し

※　ボタン上の長いタイトルは，スマートフォンで見たとき，ボタンからはみ出してしまいます。

(1)スマートフォンの時，タイトルがボタンからはみ出す例

<a class="button">平成29年度府中市立旭小学校不祥事根絶のための行動計画</a>

(2)適当な所で強制的に改行して，スマートフォンでのはみ出しを防いだ例

<a class="button">平成29年度府中市立旭小学校<br>不祥事根絶のための行動計画</a>

(3)スマートフォンの時だけ改行するよう，調整を加えた例

<a class="button">平成29年度府中市立旭小学校<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から画像に変換するのは，「Print Screen」で行うか，次のサイトの「オンラインソフト」を利用すると便利である。

「Small PDF」のサイト

※　img タグに「class="width-full"」を設定して，文書を横幅ぴったりにする。