コピペギャラリーの使い方
※このコピペギャラリーは，それぞれの項目に書かれたHTMLのコードを丸ごとコピーして，サイトに貼り付けるだけで，それぞれの機能を組み込むことができる便利なギャラリーです。
※それぞれの項目は「表示」「コード」「説明」の3つの部分でできており，「コード」にあるHTMLをそのままコピペ（copy & paste）します。
※コピーする場所は，各ページのHTMLの
<!-- ▼▼▼記事内容▼▼▼ -->
<!-- ▲▲▲記事内容▲▲▲ -->
に，囲まれた間の部分です。
文書の装飾等
| (1)一般的文章の作成 | |
|---|---|
| 表示 |
ここに文章を書きます。 ここに文章を書きます。ここに文章を書きます。 |
| コード |
<p>ここに文章を書きます。</p> <p>ここに文章を書きます。ここに文章を書きます。<br>ここに文章を書きます。ここに文章を書きます。</p> |
| 説明 |
※文章が長くなる時は，改行したい位置に<br>を入れて改行しましょう。 |
| (2)文字の色 | |
|---|---|
| 表示 |
ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。ここに文を書きます。ここに文を書きます。 |
| コード |
<p class="red">ここに文を書きます。</p> <p class="blue">ここに文を書きます。</p> <p class="green">ここに文を書きます。</p> <p>ここに文を書きます。<span class="red">ここに文を書きます。</span>ここに文を書きます。</p> |
| 説明 |
※文の一部分の色を変える場合は，変えたい部分を<span>と</span>で囲んで，それにつけます。 |
| (3)センタリング・左寄せ・右寄せ・アンダーライン | |
|---|---|
| 表示 |
福山市立金江小学校 福山市立金江小学校 福山市立金江小学校 福山市立金江小学校 |
| コード |
<p class="center">福山市立金江小学校</p> <p class="left">福山市立金江小学校</p> <p class="right">福山市立金江小学校</p> <p class="underline">福山市立金江小学校</p> |
| (4)文字の「太字」及び「拡大」・「縮小」 | |
|---|---|
| 表示 |
福山市立金江小学校 福山市立金江小学校 福山市立金江小学校 福山市立金江小学校 |
| コード |
<p class="bold">福山市立金江小学校</p> <p class="big">福山市立金江小学校</p> <p class="big-x">福山市立金江小学校</p> <p class="small">福山市立金江小学校</p> |
| (5)マーカー，NEWマーク，PDFマーク，点滅 | |
|---|---|
| 表示 |
福山市立金江小学校 福山市立金江小学校 福山市立金江小学校 福山市立金江小学校 |
| コード |
<p>福山市立<span class="mark">金江小</span>学校</p> <p class="new">福山市立金江小学校</p> <p class="pdf">福山市立金江小学校</p> <p class="blink">福山市立金江小学校</p> |
| 説明 | ※マーカーは，マーキングしたい範囲を<span>と</span>で囲んで，それにつけます。 |
| (6)タイトル専用 | |
|---|---|
| 表示 |
不祥事根絶のための行動計画 |
| コード |
<p class="page_title">不祥事根絶のための行動計画</p> |
| 説明 | ※ページのタイトルとして使います。その時設定している「テーマカラー」で表示されます。 |
| (7)改行 | |
|---|---|
| 表示 |
2020年度 福山市立金江小学校 不祥事根絶のための行動計画 2020年度 福山市立金江小学校 2020年度 福山市立金江小学校 |
| コード |
<p>2020年度 福山市立金江小学校 不祥事根絶のための行動計画</p> <p>2020年度 福山市立金江小学校<br> 不祥事根絶のための行動計画</p> <p>2020年度 福山市立金江小学校<br class="break"> 不祥事根絶のための行動計画</p> |
| 説明 |
※１例目は，長いタイトルの途中に改行を設けないもの。 ※２例目は，長いタイトルの途中に強制的に改行を設けたもの。 ※３例目は，長いタイトルの途中の改行が，スマホサイズのときだけ有効になるもの。ボタン上の長いタイトルに有効です。 |
| (8)コメントの記入 | |
|---|---|
| 表示 | （何も表示されません。） |
| コード | <!--ここにコメントを書きます。--> |
| 説明 | ※HTMLの一部を，非表示にするときにも使います。 |
インデント・箇条書きリスト
| (1)インデント | |
|---|---|
| 表示 |
福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 |
| コード |
<p class="indent1">福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="indent2">福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="indent3">福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="indent4">福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="indent5">福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> |
| 説明 | ※文を構造的に表現するとき有効です。 |
| (2)箇条書きリスト | |
|---|---|
| 表示 |
〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 |
| コード |
<p class="list1">〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="list2">〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="list3">〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="list4">〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> <p class="list5">〇福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> |
| 説明 | ※箇条書きのマーカーが左にでて，分かりやすくなります。 |
枠線
| (1)枠線 | |
|---|---|
| 表示 |
福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 |
| コード |
<div class="border"> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。</p> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。</p> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。</p> </div> |
| 説明 | ※囲みたいエリアを<div class="border">と</div>で囲みます。 |
| (2)枠線 | |
|---|---|
| 表示 |
福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 |
| コード |
<div class="border-w"> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。</p> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。</p> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。</p> </div> |
| 説明 | ※背景色があるとき，囲んだエリア内の背景が白くなります。背景が白の場所では，その効果がわかりません。 |
表組
| (1)表組 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 表示 |
| |||||||||
| コード |
<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> </table> | |||||||||
| 説明 | ※まず，表組全体を，<table>と</table>で囲みます。 |
|||||||||
Webアイコン
| (1)Webアイコンの種類 | |
|---|---|
| 表示 及び コード |
<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-home"></i> <i class="fa fa-refresh fa-spin"></i> |
| 説明 | ※その他，多数のWebアイコンがあります。詳細は，Font Awesome 4.7のサイトをご覧ください。 |
| (2)Webアイコンの大きさ | |
|---|---|
| 表示 及び コード |
<i class="fa fa-tree"></i>
<i class="fa fa-tree fa-lg"></i> <i class="fa fa-tree fa-2x"></i> <i class="fa fa-tree fa-3x"></i> <i class="fa fa-tree fa-4x"></i> <i class="fa fa-tree fa-5x"></i> |
| 説明 | ※「fa-lg」は，文章内で使ったとき，おおむね文字と同じ大きさになります。 |
| (3)Webアイコンの色 | |
|---|---|
| 表示 及び コード |
<i class="fa fa-tree red"></i>
<i class="fa fa-tree blue"></i> <i class="fa fa-tree green"></i> |
| 説明 | ※色は，文字と同じこの３色を用意しています。 |
ボタン
| (1)ボタンの作成 | |
|---|---|
| 表示 | ボタン |
| コード |
<a class="button" href="">ボタン</a> |
| 説明 | ※""内にとび先アドレスを書く。 ※「active」とかかれたボタンが，現在表示されているページを表しています。 |
| (2)PDF表示ボタンの作成 | |
|---|---|
| 表示 | PDFはこちら |
| コード |
<!-- PDF表示ブロック --> <a class="button" href="〇〇.pdf" target="_blank" style="width:140px;"><span> class="pdf"></span>PDFはこちら><a> <!-- PDF表示ブロック --> |
| 説明 | ※""内にとび先アドレスを書きます。 |
| (3)ボタングループの作成 | |
|---|---|
| 表示 | |
| コード |
<!-- ボタングループ --> <ul class="button-group"> <li><a href="〇〇.html#breadcrumb" class="menu_button active">ボタン1</a></li> <li><a href="〇〇.html#breadcrumb" class="menu_button">ボタン2</a></li> <li><a href="〇〇.html#breadcrumb" class="menu_button">ボタン3</a></li> </ul> <!-- ボタングループ --> |
| 説明 | ※とび先アドレスは，「"」と「#breadcrumb」の間くっつけてに書きます。 |
| (4)ボタンの配列 | |
|---|---|
|
表示 |
|
| コード |
<div class="quad"> <a class="button" href="〇〇.html">ボタン1</a> <a class="button" href="〇〇.html">ボタン2</a> <a class="button" href="〇〇.html">ボタン3</a> <a class="button" href="〇〇.html">ボタン4</a> </div> |
| 説明 |
※「quad」の部分を「triple」「double」「single」と変えることで，４列から３列，２列，１列と配列が変換できます。 |
写真の掲載
| (1)写真の表示 | |
|---|---|
| 表示 |
|
| コード |
<img class="frame" src="〇〇.jpg" alt=""></p> |
| 説明 |
※「class="frame"」で，写真のまわりに枠が表示されます。 |
| (2)写真の左寄せ・右寄せ | |
|---|---|
| 表示 |
福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。 |
| コード |
<img class="alignleft frame" src="〇〇.jpg" alt=""> <p>福山市立金江小学校は「共に高まる，たくましい子の育成」を目指します。・・・</p> |
| 説明 |
※「class="alignleft frame"」で，文章が写真の右側にまわり込み，写真に枠が表示されます。 ※「class="alignright frame"」にすると，今度は文章が写真の左側にまわり込み，写真に枠が表示されます。 |
| (3)写真の配列 | |
|---|---|
| 表示 |
|
| コード |
<div class="quad"> <figure> <img src="〇〇.jpg" alt=""> <figcaption>写真の説明</figcaption> </figure> <figure> <img src="〇〇.jpg" alt=""> <figcaption>写真の説明</figcaption> </figure> <figure> <img src="〇〇.jpg" alt=""> <figcaption>写真の説明</figcaption> </figure> </div> |
| 説明 |
※「quad"」の部分を「triple"」「double"」「single"」と変えることで，４列から３列，２列，１列と配列が変換されます。 |
文書の掲載
| (1)文書の掲載 | |
|---|---|
| 表示 |
|
| コード |
<img class="width-full" src="〇〇.jpg" alt=""> |
| 説明 |
※「class="width-full"」を指定すると，画像が画面の横幅にぴったりフィットします。 ※Wordなどで作成した文書を画像にする場合，素材となる画像は，横幅1000px～1500pxが適当です。文字がつぶれて読めなくならないよう，大きめの画像にします。 ※Word等の文書ファイルを画像（JPG）にする方法は， ①Word文書をPDF保存します。 ②PDFを「オンラインソフト」で画像にします。 ③PDFを「オンラインソフト」にアップロードして画像にします。 ④「オンラインソフト」からダウンロードした画像を，ペイントなどを使って周りの余白をトリミングしたり，画像の横幅を横幅1000px～1500pxに縮小したりして保存します。 SmallPDF https://smallpdf.com/jp/pdf-to-jpg |
鍵付きページ
| (1)鍵付きリンクの作成 | |
|---|---|
| 表示 | 鍵付きページのタイトル |
| 鍵付きPDFのタイトル | |
| 鍵付きページのタイトル | |
| 鍵付きPDFのタイトル | |
| コード |
<a class="key" onClick="pass_html()">鍵付きページのタイトル</a> |
|
<a class="key" onClick="pass_pdf()">鍵付きPDFのタイトル<span class="pdf"></a> | |
|
<a class="key button" onClick="pass_html()">鍵付きページのタイトル</a> | |
|
<a class="key button" onClick="pass_pdf()">鍵付きPDFのタイトル<span class="pdf"></a> | |
| 説明 |
※鍵付きページ（パスワードを入力して表示するものがHTMLファイル）の場合，HTMLファイルを「pta_keypage-html」フォルダの中に置きます。 ※鍵付きPDFファイル（パスワードを入力して表示するものがPDFファイル）の場合は，PDFファイルを「pta_keypage-pdf」フォルダの中に置きます。 ※それぞれのファイル名が「パスワード」になります。 |
動画掲載
| (1)動画掲載 | |
|---|---|
| 表示 |
|
| コード |
<!-- ▼ビデオ表示ブロック▼ --> <div style="max-width:500px; display: block; margin-left: auto; margin-right: auto;"> <video controls preload poster="〇〇.jpg" style="width:100%;"> <source src="〇〇.mp4"> </video> </div> <!-- ▲ビデオ表示ブロック▲ --> |
| 説明 |
※<source src="〇〇.mp4">に，動画のファイルを指定します。 ※動画ファイルは，「MP4形式」が適当です。一回の動画は，撮影時間を短くする，画像を粗くするなどして，サイズを小さくすることが必要です。画像を変換する「オンラインサイト」が多数あります。 |
その他
| (1)工事中表示 | |
|---|---|
| 表示 |
|
| コード |
<!-- 工事中表示ブロック --> <img src="images/under_construction.gif" style="display:block; margin:50px auto;" alt=""> <!-- 工事中表示ブロック --> |
| 説明 |
※各種たよりのようなフォルダの中にあるHTMLファイルの場合，「<img src="images/under_construction.gif"」の部分に，「<img src="../images/under_construction.gif"」のように「../」を書きたしましょう。 |
