サイト情報Site Info


文書の装飾等

文書の装飾等を 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>  これを基本形として

広島県公立中学校長会




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>




写真寄せ

写真の右または左に,文書を流し込んで表示させることができます。



<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 をコピペして利用する方法です。


「Font Awesome」のサイト


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



※これらに対応するHTMLは,それぞれ次のとおりです。


<i class="fa fa-tree"></i>
<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"></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>
<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はこちら

<i class="fa fa-file-pdf-o red"> PDFはこちら</i>


ボタン

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

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

「css3-patterned-buttons」のサイト

単独ボタン

ボタン 赤ボタン 青ボタン 緑ボタン

<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">メニュー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>


※ activeは,現在表示されているページを表します。


ボタンの配置

※ 複数のボタンを体裁よく配置し,画面のサイズの変化により,再配置することができます。

横1列ボタン(class="single")

※ 次の「single」の部分を「double」「triple」に変えると・・・


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

<a class="button yellow" href="page4.html#breadcrumb>ページボタン4</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)スマートフォンの時,タイトルがボタンからはみ出す例

平成29年度広島県公立中学校長会不祥事根絶のための行動計画

<a class="button">平成29年度広島県公立中学校長会不祥事根絶のための行動計画</a>



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

平成29年度広島県公立中学校長会
不祥事根絶のための行動計画

<a class="button">平成29年度広島県公立中学校長会<br>不祥事根絶のための行動計画</a>



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

平成29年度広島県公立中学校長会
不祥事根絶のための行動計画

<a class="button">平成29年度広島県公立中学校長会<br class="break">不祥事根絶のための行動計画</a>





写真ギャラリー


※ 通常の写真の掲載は,次のようにします。



<img src="gallery1.jpg" alt="">



※ 複数の写真を体裁よく配置し,画面サイズの変化により,再配置させることができます。

写真横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文書を横幅1000px~1500px程度のサイズの画像(jpg)に加工して利用する。

※ PDFから画像に変換するのは,「Print Screen」で行うか,次のサイトの「オンラインソフト」を利用すると便利である。


「Small PDF」のサイト


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


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




pagetop