コピペギャラリー
コピペギャラリーの使い方 ※最初にお読みください。
※このコピペギャラリーは，それぞれの項目に書かれたHTMLのコードを丸ごとコピーして，サイトに貼り付けるだけで，それぞれの機能を組み込むことができる便利なギャラリーです。
※それぞれの項目は「表示」「コード」「説明」の3つの部分でできており，「コード」にあるHTMLをそのままコピペ（copy & paste）します。
※コピーする場所は，各ページのHTMLの
<!-- ▼➐▼▼記事内容▼▼▼ -->
<!-- ▲➐▲▲記事内容▲▲▲ -->
に，囲まれた間の部分です。
文書の装飾等
| (1)一般的文章の作成 | |
|---|---|
| 表示 |
ここに文章を書きます。 ここに文章を書きます。ここに文章を書きます。 |
| コード |
<p>ここに文章を書きます。</p> <p>ここに文章を書きます。ここに文章を書きます。<br>ここに文章を書きます。ここに文章を書きます。</p> |
| 説明 |
※基本的に文章は，<p>と</p>（pタグ）で囲みます。文章が長くなる時は，改行したい位置に<br>を入れて改行しましょう。 |
| (2)文字の色 | |
|---|---|
| 表示 |
ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。 ここに文を書きます。ここに文を書きます。ここに文を書きます。 |
| コード |
<p class="red">ここに文を書きます。</p> <p class="blue">ここに文を書きます。</p> <p class="green">ここに文を書きます。</p> <p class="color1">ここに文を書きます。</p> <p class="color2">ここに文を書きます。</p> <p>ここに文を書きます。<span class="red">ここに文を書きます。</span>ここに文を書きます。</p> |
| 説明 |
※pタグに「class="●●"」という属性値をつけると，pタグ内の文字に，あらかじめ設定された属性を付け加えることができます。 ※「class="red"」は，文字列を赤色に，「class="blue"」は青色に，「class="blue"」は緑色にというように，文字列の色を変更する属性値です。 ※「class="color1"」と「class="color2"」は，その時適用しているテーマカラーの文字色（基調色とポイントカラー）になります。 ※今後，このコピペギャラリーは，「class="●●"」のような属性値が，どのような属性を付け加えるかの説明になります。 ※文字列の一部分の色を変える場合は，変えたい部分を<span>と</span>で囲んで，それに属性値をつけます。 |
| (3)センタリング・左寄せ・ 右寄せ・アンダーライン | |
|---|---|
| 表示 |
世羅高等学校広島校友会 世羅高等学校広島校友会 世羅高等学校広島校友会 世羅高等学校広島校友会 |
| コード |
<p class="center">世羅高等学校広島校友会</p> <p class="left">世羅高等学校広島校友会</p> <p class="right">世羅高等学校広島校友会</p> <p class="underline">世羅高等学校広島校友会</p> |
| 説明 |
※「class="center"」「class="left"」「class="right"」「class="underline"」は，それぞれセンタリング，左寄せ，右寄せ，アンダーラインを引く属性値です。 |
| (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">広島校友会学校</p> <p class="new">世羅高等学校広島校友会</p> <p class="pdf">世羅高等学校広島校友会</p> <p class="blink">世羅高等学校広島校友会</p> |
| 説明 | ※「class="mark"」は，文字列にマーキングする属性値です。マーキングしたい範囲を<span>と</span>で囲んで，それにつけます。 |
| (6)タイトル専用 | |
|---|---|
| 表示 |
世羅高等学校広島校友会設立総会 |
| コード |
<p class="page_title">世羅高等学校広島校友会設立総会</p> |
| 説明 | ※ページのタイトルとして使います。その時設定している「テーマカラー」で表示されます。 |
| (7)改行 | |
|---|---|
| 表示 |
世羅高等学校広島校友会 設立総会 世羅高等学校広島校友会 世羅高等学校広島校友会 |
| コード |
<p>世羅高等学校広島校友会 設立総会</p> <p>世羅高等学校広島校友会<br> 設立総会</p> <p>世羅高等学校広島校友会<br class="break"> 設立総会</p> |
| 説明 |
※「<br>」は，文字列をその位置で改行するタグです。 ※ brタグに，属性値「<br class="break">」を付けると，画面の幅の広いときは改行は武功となり，画面が狭いとき有効となります。つまり，スマホのような狭い画面に時だけ改行されます。 ※「<br class="break">」は，たとえば，次のようなボタン上の長い文字列の時，効果を発揮します。画面の幅を動かして確認してみてください。 ※１例目は，長いタイトルの途中に改行を設けないもの。 世羅高等学校広島校友会 設立総会※２例目は，長いタイトルの途中に強制的に改行を設けたもの。 世羅高等学校広島校友会設立総会 ※３例目は，長いタイトルの途中の改行が，スマホサイズのときだけ有効になるもの。ボタン上の長いタイトルに有効です。 世羅高等学校広島校友会設立総会 |
| (8)コメントの記入 | |
|---|---|
| 表示 | （何も表示されません。） |
| コード | <!--ここにコメントを書きます。--> |
| 説明 |
※「<!--」と「-->」（コメントタグ）で囲まれた部分は，ブラウザに表示されません。そのため，HTML内にコメントを書くときに利用します。 ※また，HTMLの一部を，コメントアウト（無効化）するときにも使います。例えば，ボタンを表示する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> |
| 説明 | ※背景色があるとき，囲んだエリア内の背景が白くなります。背景が白の場所では，その効果がわかりません。 |
リンク
| リンク | |
|---|---|
| 表示 | この文字列がリンクします。 |
| コード |
<a href="リンク先のアドレス">この文字列がリンクします。</a> <a href="リンク先のアドレス" target="_blank">この文字列がリンクします。</a> |
| 説明 |
※リンク先を別窓で開きたい場合は， 「target="_blank"」をつけます。 |
| (2)リンクをリストにする | |
|---|---|
| 表示 | |
| コード |
<ul id="notice"> <li><a href="">リンクのタイトル１</a></li> <li class="smile"><a href="">リンクのタイトル２</a></li> <li class="book"><a href="">リンクのタイトル３</a></li> <li class="clip"><a href="">リンクのタイトル４</a></li> <li class="circle"><a href="">リンクのタイトル５</a></li> <li class="video"><a href="">リンクのタイトル６</a></li> <li class="key"><a href="">リンクのタイトル７</a></li> <li class="check"><a href="">リンクのタイトル８</a></li> <li class="youtube"><a href="">リンクのタイトル９</a></li> </ul> |
| 説明 | ※リンクのリストにしたい範囲を<ul id="notice">と</ul>で囲みます。 ※1つ1つの項目を<li>と</li>で囲みます。 ※ <a href="リンク先アドレス">のように，""の間に，とび先のアドレスを書きます。 ※<li>につける「class=""」で，項目の前のマークが変わります。 何もつけないと・・・ class="smile"・・・ class="book"・・・ class="clip"・・・ class="circle"・・・ class="video"・・・ class="key"・・・ class="check"・・・ class="youtube"・・・ |
表組
| (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」と変えることで，４列から３列，２列，１列と配列が変換できます。 |
| (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 |
鍵付きページ
| (1)鍵付きリンクの作成 | |
|---|---|
| 表示 | 鍵付きページのタイトル |
| 鍵付きPDFのタイトル | |
| 鍵付きページのタイトル | |
| 鍵付きPDFのタイトル | |
| コード |
<a class="key" href="secret-page.html">鍵付きページのタイトル</a> |
|
<a class="key" href="secret-pdf.html" target="_blank">鍵付きPDFのタイトル<span class="pdf"></span></a> | |
|
<a class="key button" href="secret-page.html">鍵付きページのタイトル</a> | |
|
<a class="key button" href="secret-pdf.html" target="_blank">鍵付きPDFのタイトル<span class="pdf"></span></a> | |
| 説明 |
※鍵付きページ（パスワードを入力して表示するものがHTMLファイル）の場合，HTMLファイルを「keypage-html」フォルダの中に置きます。 ※鍵付きPDFファイル（パスワードを入力して表示するものが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 poster="〇〇.jpg" style="width:100%;"> <source src="〇〇.mp4"> </video> </div> <!-- ▲ビデオ表示ブロック▲ --> |
| 説明 |
※<source src="〇〇.mp4">に，動画のファイルを指定します。 ※動画ファイルは，「MP4形式」が適当です。一回の動画は，撮影時間を短くする，画像を粗くするなどして，サイズを小さくすることが必要です。画像を変換する「オンラインサイト」が多数あります。 オンラインサイトの一例 ①動画の形式を「MP4形式」に変換 オンラインビデオコンバーター（Online Video Comverter） https://www.videotoconvert.com/ ※「Convert Video To MP4」を選択 ②動画のサイズを小さくする Video Smaller https://www.videosmaller.com/jp/ ※「横幅 640 へ圧縮する」を選択。 ※ 条件にもよりますが，1/10 程度に小さくなることがあります。 |
| (3)YouTubeの埋め込み | |
|---|---|
| 表示 |
|
| コード |
<!-- YouTubeの埋め込みエリア --> <div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/XIF14wCmizA" 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=""> <!-- イラスト出典 https://azukichi.net/ojigi/ojigi036.html --> <!-- 工事中表示ブロック --> |
| 説明 |
※フォルダの中にあるHTMLファイルの場合，「<img src="images/under_construction.gif"」の部分に，「<img src="../images/under_construction.gif"」のように「../」を書きたしましょう。 |
