コピペ ギャラリーの使い方
※このコピペ ギャラリーは，それぞれの項目に書かれたHTMLのコードを丸ごとコピーして，サイトに貼り付けるだけで，それぞれの機能を組み込むことができる便利なギャラリーです。
※それぞれの項目は「表示」「コード」「説明」の3つの部分でできており，「コード」にあるHTMLをそのままコピペ（copy & paste）します。
※コピーする場所は，各ページのHTMLの
<!-- ▼▼▼記事掲載部分▼▼▼ -->
<!-- ▲▲▲記事掲載部分▲▲▲ -->
に，囲まれた間の部分です。
文書の装飾等
| (1)一般的文章の作成 | |
|---|---|
| 表示 |
ここに文章を書きます。 ここに文章を書きます。ここに文章を書きます。 |
| コード |
<p>ここに文章を書きます。</p> <p>ここに文章を書きます。ここに文章を書きます。<br>ここに文章を書きます。ここに文章を書きます。</p> |
| 説明 |
※文章が長くなる時は，改行したい位置に<br>を入れて改行しましょう。 |
| (2)文字の色 | |
|---|---|
| 表示 |
ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。ここに文を書きます。ここに文を書きます。 |
| コード |
<p class="red">ここに文を書きます。</p> <p class="yellow">ここに文を書きます。</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>府中市立国府小学校<span class="new"></span></p> <p>府中市立国府小学校<span class="pdf"></span></p> <p class="blink">府中市立国府小学校</p> |
| 説明 | ※マーカーは，マーキングしたい範囲を<span>と</span>で囲んで，それにつけます。 |
| (6)タイトル専用 | |
|---|---|
| 表示 |
不祥事根絶のための行動計画 |
| コード |
<p class="page_title">不祥事根絶のための行動計画</p> |
| 説明 | ※ページのタイトルとして使います。その時設定している「テーマカラー」で表示されます。 |
| (7)改行 | |
|---|---|
| 表示 |
令和３年度 府中市立国府小学校 不祥事根絶のための行動計画 令和３年度 府中市立国府小学校 令和３年度 府中市立国府小学校 |
| コード |
<p>令和３年度 府中市立国府小学校 不祥事根絶のための行動計画</p> <p>令和３年度 府中市立国府小学校<br> 不祥事根絶のための行動計画</p> <p>令和３年度 府中市立国府小学校<br class="break"> 不祥事根絶のための行動計画</p> |
| 説明 |
※１例目は，長いタイトルの途中に改行を設けないもの。 ※２例目は，長いタイトルの途中に強制的に改行を設けたもの。 ※３例目は，長いタイトルの途中の改行が，スマホサイズのときだけ有効になるもの。ボタン上の長いタイトルに有効です。 ※ボタン上の長いタイトルに 「class="break"」を使った事例 令和３年度 府中市立国府小学校不祥事根絶のための行動計画 ※次の 「class="break"」を使わない事例と比較してみてください。 令和３年度 府中市立国府小学校 不祥事根絶のための行動計画 |
| (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)リンク | |
|---|---|
| 表示 | この文字列がリンクします。 |
| コード |
<a href="リンク先のアドレス">この文字列がリンクします。</a> <a href="リンク先のアドレス" target="_blank">この文字列がリンクします。</a> |
| 説明 |
※リンク先を別窓で開きたい場合は， 「target="_blank"」をつけます。 |
| (2)リンクをリストにする | |
|---|---|
| 表示 |
|
| コード |
<ul id="notice"> <li><a href="">リンクのタイトル1</a></li> <li class="smile"><a href="">リンクのタイトル2</a></li> <li class="video"><a href="">リンクのタイトル3</a></li> <li class="key"><a href="">リンクのタイトル4</a></li> <li class="check"><a href="">リンクのタイトル5</a></li> </ul> |
| 説明 | ※リンクのリストにしたい範囲を<ul id="notice">と</ul>で囲みます。 ※1つ1つの項目を<li>と</li>で囲みます。 ※ <a href="リンク先アドレス">のように，""の間に，とび先のアドレスを書きます。 ※<li>につける「class=""」で，項目の前のマークが変わります。 何もつけないと・・・ class="smile"・・・ class="video"・・・ class="key"・・・ class="check"・・・ |
表組
| (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>で囲みます。 |
|||||||||
| (2)行事予定表 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示 |
|
|||||||||||||||
| コード |
<table class="table" id="6"> <caption class="large">６月の行事予定</caption> <tr> <th style="width:50px; text-align:center;">日</th> <th style="width:25px; text-align:center;">曜</th> <th style="width:auto; text-align:center;">行事予定</th> </tr> <tr> <td class="blue holiday">１日</td> <td class="blue holiday">土</td> <td class="holiday">地域運動会</td> </tr> <tr> <td class="red holiday">２日</td> <td class="red holiday">日</td> <td class="holiday"> </td> </tr> <tr> <td>３日</td> <td>月</td> <td>安全点検</td> </tr> <tr> <td>４日</td> <td>火</td> <td> </td> </tr> ・ <table> |
|||||||||||||||
| 説明 |
現在の月の表示方法 id="6" → 各月の<table>に，その月の数字が付けられています。「月別行事計画」のページが読み込まれると，そのページが表示された後，その月の数字が付いている位置が一番上に自動で表示されます。 土曜，日曜の表示方法 基本 <td class="blue"> → 文字が青色になります。 <td class="red"> → 文字が赤色になります。 <td class="holiday"> → 枠内の背景がピンク色になり休日を表します。 運用 <td class="red holiday"> → 文字は赤くなり，背景がピンクになります。日曜日の日付，曜日に使う。 <td class="blue holiday"> → 文字は青くなり，背景がピンクになります。土曜日の日付，曜日に使う。 行事のない日の表示方法 → 空白の枠にこれが入っています。空白文字を表します。行事がある場合，これを行事に変えます。 |
|||||||||||||||
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> <i class="fa fa-tree yellow"></i> |
| 説明 | ※色は，文字と同じこの４色を用意しています。 |
ボタン
| (1)ボタンの作成 | |
|---|---|
| 表示 | ボタン |
| コード |
<a class="button" href="">ボタン</a> |
| 説明 | ※""内にとび先アドレスを書きます。 |
| (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」の間にくっつけて書きます。 ※「active」とかかれたボタンが，現在表示されているページを表しています。 |
| (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」と変えることで，４列から３列，２列，１列と配列が変換できます。 |
| (5)ボタンの色 | |
|---|---|
|
表示 |
ボタン1 ボタン2 ボタン3 ボタン4 |
| コード |
<a class="button" href="〇〇.html">ボタン1</a> <a class="button red" href="〇〇.html">ボタン2</a> <a class="button blue" href="〇〇.html">ボタン3</a> <a class="button green href="〇〇.html">ボタン4</a> |
| 説明 |
※ボタンの色は，簡単に変えることができます。 |
写真の掲載
| (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 |
鍵付きページ
鍵付きページについての全体説明
１ 「教育研究」の「授業動画」の鍵付きページと，その他の一般的な鍵付きページとによって，設置方法が異なります。
・ 「教育研究」の「授業動画」の鍵付きページ・・・リンクは，「教育研究」の「授業動画」のページに設置され，鍵付きページは，「research_douga」フォルダ内に設置されます。
・ その他の一般的な鍵付きページ・・・リンクやリンクボタンは，サイトの任意のページに設置することができ，鍵付きページは，「keypage-html」フォルダ内に，鍵付きPDFは，「keypage-pdf」フォルダ内に設置します。
２ 「教育研究」の「授業動画」の鍵付きページと，その他の一般的な鍵付きページとによって，アクセス方法が異なります。
・ 「教育研究」の「授業動画」の鍵付きページ・・・リンクは，「教育研究」の「授業動画」のページに設置されたリンクからしかアクセスすることができません。「授業動画」のページのリンクより，パスワードを入力してアクセスできます。
・ その他の一般的な鍵付きページ・・・「ＰＴＡ活動」の「鍵付きページの説明」のページに設置されている「鍵付きページ（緑ボタン）」「鍵付きPDF（青ボタン）」のボタンより，パスワードを入力してアクセスします。
また，下記の方法によって，サイトの任意のページに鍵付きページ，鍵付きPDFのリンク，リンクボタンを設置することもできます。
| (1)「授業動画」の鍵付きリンクの作成 | |
|---|---|
| 表示 | |
| コード |
<ul id="douga"> <li><a onClick="douga()">動画のタイトル</a></li> <li><a onClick="douga()">動画のタイトル</a></li> <li><a onClick="douga()">動画のタイトル</a></li> </ul> |
| 説明 |
※「授業動画」の「鍵付きページ」のリンクは，「教育研究」の「授業動画」のページに設置します。 ※「鍵付きページ」は，ファイル名をパスワードにしたHTMLファイルを「research_douga」フォルダの中に，動画ファイルは，「research_douga」フォルダの中に，さらにパスワードと同じ名前のフォルダを作成してその中に置きます。 ※このHTMLファイルは，「douga.html」をひな型とし，これをコピーして，ファイル名を「パスワード」に書き換えます。 |
| (２)一般的な鍵付きリンクの作成 | |
|---|---|
| 表示 | 鍵付きページのタイトル |
| 鍵付き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ファイル）や「鍵付きPDFファイル」（パスワードを入力して表示するものがPDFファイル）へのリンクやリンクボタンは，サイト内のどこへでもコピーして設置することができます。 ※「鍵付きページ」の場合，HTMLファイルを「keypage-html」フォルダの中に置きます。 ※フォルダの中にある「template.html」をコピーして，ファイル名を「パスワード」に書き換えます。そのページに表示する画像などがある場合は，パスワードと同じ名前のフォルダを作って，その中に入れます。 ※「鍵付きPDFファイル」の場合は，PDFファイルを「keypage-pdf」フォルダの中に置きます。 ※ファイル名を「パスワード」に書き換えます。 |
音声・動画の埋め込み
| (1)音声の埋め込み | |
|---|---|
| 表示 |
再生できないときはこちら |
| コード |
<!-- ▼音声表示ブロック▼ --> <audio controls preload="auto"> <source src="〇〇.mp3"> </audio><br> <a class="underline indent2" href="〇〇.mp3">再生できないときはこちら</a> <!-- ▲音声表示ブロック▲ --> |
| 説明 |
※<source src="〇〇.mp3">に，音声ファイルを指定します。 ※音声ファイルは，「MP3形式」が適当です。ファイル形式を変換したり，サイズを小さくしたりする「オンラインサイト」が多数あります。 ※表示される「コントロール（スタート，ストップなどのインターフェース）」のデザインは，閲覧者のブラウザに依存します。 |
| (2)動画の埋め込み | |
|---|---|
| 表示 |
|
| コード |
<!-- ▼動画表示ブロック▼ --> <div style="max-width:500px; display: block; margin-left: auto; margin-right: auto;"> <video controls preload="auto" poster="〇〇.jpg" style="width:100%;"> <source src="〇〇.mp4"> </video> </div> <!-- ▲動画表示ブロック▲ --> |
| 説明 |
※<source src="〇〇.mp4">に，動画のファイルを指定します。 ※動画ファイルは，「MP4形式」が適当です。一回の動画は，撮影時間を短くする，画像を粗くするなどして，サイズを小さくすることが必要です。画像を変換する「オンラインサイト」が多数あります。 ※表示される「コントロール（スタート，ストップなどのインターフェース）」のデザインは，閲覧者のブラウザに依存します。 |
| (3)YouTubeの埋め込み | |
|---|---|
| 表示 |
|
| コード |
<!-- YouTubeの埋め込みエリア --> <div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/0YLjeiXGoNo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <!-- YouTubeの埋め込みエリア --> |
| 説明 |
※投稿したYouTubeより，埋め込みコード（上記コードの青色部分）を取得して，貼り付けます。 ※スマートフォンに対応させるためには，YouTubeを埋め込むページのヘッダー部分の<style>～</style>内に，次の赤字の部分のスタイルの記述が必要です。記述されていない場合は，次の赤字部分をコピーして貼り付けましょう。 <style> <!-- /* このページに適用されるスタイル */ .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } |
その他
| (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"」のように「../」を書きたしましょう。 |
