サイト情報Site Info

このサイトで使用できる部品一覧

文書の装飾等

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


<p>尾道市立向島中学校</p>  これを基本形として

尾道市立向島中学校

この文書に装飾等を設定します。


① 文字色を赤くする

尾道市立向島中学校

<p class="red">尾道市立向島中学校</p>


② 文字色を黄色くする

尾道市立向島中学校

<p class="yellow">尾道市立向島中学校</p>


③ 文字色を緑にする

尾道市立向島中学校

<p class="green">尾道市立向島中学校</p>


④ 文字色をその時適用されているテーマカラーにする

尾道市立向島中学校

<p class="color2">尾道市立向島中学校</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="blink">尾道市立向島中学校</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>




枠線


あるエリアを枠線で囲みたい場合

尾道市立向島中学校は,これからの社会に必要とされる資質・能力を育成します。

尾道市立向島中学校は,これからの社会に必要とされる資質・能力を育成します。

尾道市立向島中学校は,これからの社会に必要とされる資質・能力を育成します。


<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」の4種類のタグで作られています。

タイトル1 タイトル2 タイトル3
セル1行1列 セル1行2列 セル1行3列
セル2行1列 セル2行2列 セル2行3列
セル3行1列 セル3行2列 セル3行3列

<table class="table">

<tr>

<th>タイトル1</th>

<th>タイトル2</th>

<th>タイトル3</th>

</tr>

<tr>

<td>セル1行1列</td>

<td>セル1行2列</td>

<td>セル1行3列</td>

</tr>

<tr>

<td>セル2行1列</td>

<td>セル2行2列</td>

<td>セル2行3列</td>

</tr>

<table>



 表組の作成方法

 まず,表組全体を,<table>と<table>で囲みます。次に,表の各行は,それぞれ<tr>と </tr>で囲みます。そして,それぞれのセルは,<td>と</td>で囲むという構造になっています。

 セルの中でも,タイトルは,<td>と</td>の代わりに<th>と</th>を使います。

 <table>にclass="table"を付けると,表組に,その時適用されているテーマカラーで,いい感じに線がついたり,色が付いたりします。




Webアイコン

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

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


「Font Awesome 4.7」のサイト


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



※これらに対応する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>

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

平成30年度尾道市立向島中学校不祥事根絶のための行動計画

<a class="button">平成30年度尾道市立向島中学校不祥事根絶のための行動計画</a>



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

平成30年度尾道市立向島中学校
不祥事根絶のための行動計画

<a class="button">平成30年度尾道市立向島中学校<br>不祥事根絶のための行動計画</a>



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

平成30年度尾道市立向島中学校
不祥事根絶のための行動計画

<a class="button">平成30年度尾道市立向島中学校<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文書を横幅1500px程度のサイズの画像(jpg)に加工して利用する。

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


「Small PDF」のサイト


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


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




pagetop