図の挿入

プログラムソース

インライン

独自CSS/PHP

GCP

インターネット WEB 作成作成基準図の挿入

WEB ページ作成基準図の挿入

WEB ページに図を挿入する方法を示します．

普通の図

普通に図を挿入する場合には，以下のようにします．

<img src="ファイルへのパス" style="width:幅px">

影付きの図は，以下のようにします．

<img src="ファイルへのパス" style="width:幅px; box-shadow:8px 8px 10px 0px rgba(0,0,0,0.7)">

キャプション付きの図

図にキャプションを付ける方法を示します．ここでは，図とキャプションを <table> で配置する方法を説明します．この方法は古い方法で，現在は推奨しません．

普通の図

HTML 文書中に図を配置する方法を以下に示します．図とキャプションは <table> で配置します．こうすると，複数の図をそろえて表示できます．

図とキャプションを配置するときには，それらを <table class="figure"> で囲みます．列の幅は <col> で指定し，列の数だけ記述します．図の配置は <td class="image shadow bottom"> で囲みます．shadow は影付き，bottom は下揃えです．これらのクラス (shadow, bottom) が不要な場合は記述しません．キャプションは <td class="caption center number"> で指定します．center は中央揃え，number は図番号の出力指定です．これらのクラス (center, number) も不要な場合は記述しません．こうすることにより，図がきれいに並び，図番号が自動的に割り付けられます．

図を入れる HTML の書き方．これは，横に二つの図を配置する場合です．

<table class="figure" summary="図の説明(図表を表示しないブラウザ向け)">
  <col width="幅[pixel]"><col width="幅[pixel]">

  <tr>
    <td class="image shadow bottom" id="左図の識別子">
    <a href="クリックしたとき表示する左図のファイル">
    <img src="表示する左図のファイル" width="幅[pixel]" alt="画像の代わりの文字列">
  </a></td>

  <td class="image shadow bottom" id="右図の識別子">
    <a href="クリックしたとき表示する右図のファイル">
    <img src="表示する右図のファイル" width="幅[pixel]" alt="画像の代わりの文字列">
    </a></td>
  </tr>

  <tr>
    <td class="caption center number">左図のキャプション</td>
    <td class="caption center number">右図のキャプション</td>
  </tr>
</table>

SVG の場合

SVG の場合，図の幅は必ず [%] 単位で指定します．[px] 単位で指定すると，Internet Explorer では，図の縦横比がおかしくなります．

SVG フォーマットの図の入れ方

<table class="figure" summary="図の説明(図表を表示しないブラウザ向け)">
  <col width="幅[pixel]">

  <tr>
    <td class="image shadow bottom" id="図の識別子">
    <img src="表示する左図のファイル" style="width:幅%; background-color:white"  alt="画像の代わりの文字列">
    </td>
  </tr>
      
  <tr>
    <td class="caption center number">図のキャプション</td>
  </tr>
</table>

図を出力するクラス (PHP)

図の通し番号を自動で振り，ラベル名でその番号を参照できると便利です．そのようなクラスを PHP プログラム (mk_html.php) で作成しました．このプログラムのクラス Figure を使います．

ヘッダー部の記述

このクラスでは，jQuery の Lightbox を使いますので，ヘッダー部に以下の記載が必要です．

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="パス/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="パス/js/lightbox.min.js"></script>
<link href="パス/css/lightbox.css" rel="stylesheet">

PHP ソースの読み込み/初期化

このクラスを使うためには，HTML で PHP のソース (mk_html.php) を読み込み，図番号を初期化する必要があります．通常は，HTML ソースの <body> のすぐ後付近に，以下を記述します．ただし，パスは環境に合わせて設定する必要があります．

<?php
  include "パス/www_func/mk_html.php";
  $counter_figure = 0;
?>

図の設定

図の様々なパラメーターを設定し，表示するための HTML は以下のとおりです．ソース中の「ArrayName[n]」は，任意の配列名 (ArrayName) と，要素を表す 0 以上の整数 (n) です．同じカテゴリーの複数の図は ArrayName を同一にし，要素番号で分類します．

<?php
  $counter_figure ++;
  $ArrayName[n] = new Figure();
  $ArrayName[n] -> set_number($counter_figure);
  $ArrayName[n] -> set_file("図へのパス");
  $ArrayName[n] -> set_size("図の幅(px単位の数値，または%)");
  $ArrayName[n] -> set_caption_width("キャプション幅(px単位の数値)");
  $ArrayName[n] -> set_caption("図のキャプション");
  $ArrayName[n] -> set_caption_style("キャプションの CSS");
  $ArrayName[n] -> set_style("image の CSS の記述");
  $ArrayName[n] -> set_align_style("図とキャプションを含む div の style の設定");
  $ArrayName[n] -> set_alt("図の alt 属性(図を表示しないときの文字列)");
  $ArrayName[n] -> set_data_title("Lightbox のキャプション");
  $ArrayName[n] -> set_data_lightbox("Lightbox の data-lightbox の属性");
?>

画像を Lightbox でポップアップ表示しない場合は，「<?php $ArrayName[n]->show_fig(); ?>」とします．
図番号を本文中で参照するには，「図<?php $ArrayName[n]->ref(); ?>」とします．
インラインスタイル (CSS) が不要の場合は，「ArrayName[n] -> set_style("...")」を記述しません．図が SVG の場合は，インラインスタイルの先頭に「background-color:white」が自動的に追加されます．そのため，ここで背景色を上書きできます．例えば，「background-color:rgba(200, 100, 0, 0.5)」のように指定します．RGBA の 4 番目の値 (alpha) を 0 にすると透明になります．
図の周囲に余白を付けたい場合は，「$クラス名 -> set_style("padding:20px");」のように padding を設定します．パッディング部分が広がるため，図の周りに白い枠ができます．
set_caption_width() を設定しない場合は，キャプション幅は set_size() で指定した図の幅と同じになります．
キャプションをセンタリングしたい場合は，「set_caption_style("text-align:center")」とします．
キャプションを表示しない場合は，set_caption() と set_caption_style() を記述しません．図番号も不要な場合は，以下も省略できます．
- $counter_figure ++;
- $ArrayName[n] -> set_number($counter_figure);
- $ArrayName[n] -> set_caption_width();
図をフローティングにする場合は，「$ArrayName[n]->set_align_style("float:right; margin-right: 50px; margin-left: 50px");」とします．すると，文章中の右端に図が挿入されます．フローティングを解除する場合は，「<div style="clear: both;"></div>」とします．

複数の図の設定

同じ形式の図をまとめて作成する場合には，図ごとに異なる情報を配列に入れておき，for 文で Figure オブジェクトを作成します．以下の例では，$BACKUP_STEP_DATA の各要素に「画像ファイルへのパス」と「キャプション」を順に書き，そのデータを使って $BACKUP_STEP[$i] を作成しています．

<?php
  $BACKUP_STEP_DATA = array(
    array("figures/Backup/00_open.png", "バックアップ画面"),
    array("figures/Backup/01_add.png", "バックアップの追加"),
    array("figures/Backup/02_select.png", "バックアップ対象"),
    array("figures/Backup/03_drive.png", "ディスク選択"),
    array("figures/Backup/04_select_backup.png", "バックアップ先を選択"),
    array("figures/Backup/05_select_backup_2.png", "バックアップの保存先"),
    array("figures/Backup/06_select_backup_3.png", "保存先確定"),
    array("figures/Backup/07_exec_backup.png", "今すぐバックアップ"),
    array("figures/Backup/08_progress.png", "バックアップ中"),
    array("figures/Backup/09_finish.png", "バックアップ完了")
  );

  for ($i = 0; $i < count($BACKUP_STEP_DATA); $i++) {
    $counter_figure ++;
    $BACKUP_STEP[$i] = new Figure();
    $BACKUP_STEP[$i] -> set_number($counter_figure);
    $BACKUP_STEP[$i] -> set_file($BACKUP_STEP_DATA[$i][0]);
    $BACKUP_STEP[$i] -> set_size("200px");
    $BACKUP_STEP[$i] -> set_caption_width("200px");
    $BACKUP_STEP[$i] -> set_caption($BACKUP_STEP_DATA[$i][1]);
    $BACKUP_STEP[$i] -> set_caption_style("font-size:90%");
    $BACKUP_STEP[$i] -> set_style("");
    $BACKUP_STEP[$i] -> set_alt($BACKUP_STEP_DATA[$i][1]);
    $BACKUP_STEP[$i] -> set_data_title($BACKUP_STEP_DATA[$i][1]);
    $BACKUP_STEP[$i] -> set_data_lightbox("AcronisTrueImageBackup");
  }
?>

このようにすると，図の数が増えても Figure クラスの設定を繰り返し書かずにすみます．画像ファイル名やキャプションを変更したい場合は，$BACKUP_STEP_DATA の内容を変更するだけで，図番号，サイズ，キャプション，Lightbox の設定は同じ規則でまとめて設定されます．中央揃えは，表示時に使う show_figure() の既定設定で行われます．

$BACKUP_STEP_DATA は，図ごとの違いをまとめた配列です．1 行が 1 つの図を表し，[0] に画像ファイルへのパス，[1] にキャプションを記述します．
for 文では，$i を 0 から図の数だけ増やしながら，配列に登録した図を順番に処理します．
$counter_figure ++ は，図を 1 つ作るごとに図番号を進めるための記述です．その番号を set_number() で各図に設定します．
$BACKUP_STEP[$i] = new Figure(); は，$i 番目の図を表す Figure オブジェクトを作成し，$BACKUP_STEP という配列に保存しています．
$BACKUP_STEP_DATA[$i][0] は画像ファイルへのパス，$BACKUP_STEP_DATA[$i][1] はキャプションです．同じ文字列を alt 属性や Lightbox のタイトルにも使うことで，設定の重複を減らしています．
set_size()，set_caption_width()，set_caption_style()，set_style() は，すべての図に共通する設定です．set_style() は画像タグ自体に適用する CSS です．図ごとに変えたい場合は，$BACKUP_STEP_DATA に列を追加して，その値を使って設定します．
set_data_lightbox("AcronisTrueImageBackup") は，これらの図を同じ Lightbox グループとして扱うための設定です．別のグループにしたい場合は，この文字列を別名にします．

作成した図を表示するときは，通常の図と同じように $BACKUP_STEP[0]->show_figure() のように呼び出します．複数の図をまとめて表示する場合は，表示部分でも for 文を使うことができます．横に並べたい場合は，次の「図とキャプションの配置 (推奨)」のように，外側を <div class="flex_align_h"> で囲みます．

<?php
  for ($i = 0; $i < count($BACKUP_STEP); $i++) {
    $BACKUP_STEP[$i] -> show_figure($shadow=False);
  }
?>

図とキャプションの配置 (推奨)

図の表示には，メソッド「show_figure($shadow=False, $center=True, $marginleft=0)」を使います．引数を「$shadow=False」にすると図枠に影がなくなり，「$center=False」とすると左詰めになります．「$marginleft」は，左詰めにした場合の左側のマージン (CSS の margin-left) の値です．

ひとつの図

図がひとつの場合，以下のように記述します．

<?php $クラス名 -> show_figure($shadow=True); ?>

図1 のように図が表示されます．メソッドの引数を「$shadow=False」とすると，影が付きません．左詰めにする場合は，「$center=False, $marginleft=50」のようにします．

図1: 東京の夕焼け

この図を表示する HTML は，以下のとおりです．

<?php $tokyo-> show_figure($shadow=True, $center=False, $marginleft=150); ?>

複数の図

複数の図を並べて表示する場合は，Flexbox 用のクラス「<div class="flex_align_h">」を使います．次のように記述します．

<div class="flex_align_h" style="margin-left:50px">
  <div><?php $ArrayName[0] -> show_figure($shadow=False); ?></div>
  <div><?php $ArrayName[1] -> show_figure($shadow=False); ?></div>
  <div><?php $ArrayName[2] -> show_figure($shadow=False); ?></div>
  <div><?php $ArrayName[3] -> show_figure($shadow=False); ?></div>
  <div><?php $ArrayName[4] -> show_figure($shadow=False); ?></div>
  <div><?php $ArrayName[5] -> show_figure($shadow=False); ?></div>
</div>

以下のように図を並べることができます．

図2: アメショー

図3: キャットウォークから

図4: 首から名札

図5: 何だ?

図6: 母猫と子猫

図7: お昼寝中

この図を表示する HTML は以下のとおりです．配置に必要な処理は，PHP と CSS が行います．

<div class="flex_align_h" style="margin-left:50px">
  <div><?php $cat[0]-> show_figure($shadow=False); ?></div>
  <div><?php $cat[1]-> show_figure($shadow=False); ?></div>
  <div><?php $cat[2]-> show_figure($shadow=False); ?></div>
  <div><?php $cat[3]-> show_figure($shadow=False); ?></div>
  <div><?php $cat[4]-> show_figure($shadow=False); ?></div>
  <div><?php $cat[5]-> show_figure($shadow=False); ?></div>
</div>

図とキャプションの配置 (古い方法)

図とキャプションは，以下の HTML 文で表示できます．ただし，この方法は table を使う古い方法なので，現在は推奨しません．

<table class="figure" summary="サマリーを書く">
  <col width="図の範囲[px]">
      
  <tr>
    <td class="image shadow bottom" id="図の識別子">
    <?php $ArrayName[n]->show_fig_with_LightBox(); ?>
    </td>
  </tr>
      
  <tr>
    <td class="caption center"><?php $ArrayName[n]->show_caption(); ?></td>
  </tr>
</table>

キャプションのクラス指定に number が無いことに注意してください．PHP のメソッド「show_caption()」で図番号が出力されるからです．以上で図が表示されます．また，図をクリックすると Lightbox による画像がポップアップ表示されます．

図を右詰めにする場合には，「<table border="0" style="float:right;margin:0px 0px 0px 10px">」というように記述します．
多段で図を表示するときは，途中に空行を入れると，図とキャプションの関係がわかりやすくなります．空行は，「<tr><td style="height:20px"></td></tr>」とします．
インラインスタイル (CSS) が不要の場合は，「ArrayName[n] -> set_style("...")」を記述しません．図が SVG の場合 (拡張子 svg)，インラインスタイルの先頭に「background-color:white」が自動的に追加されます．そのため，ここで背景色を上書きできます．SVG で背景色を変化させるには，「background-color:rgba(200, 100, 0, 0.5)」のように指定します．RGBA の 4 番目の値 (alpha) を 0 にすると透明になります．

図番号の表示

図番号を参照するには，メソッド ref($pre=NULL, $Lightbox=True, $num=True) を使います．引数 $pre は図番号の前に表示する文字列で，通常は $pre="図" とします．$Lightbox は，図番号をクリックしたときに Lightbox で画像を表示するかどうかを指定します．True にすると，図番号をクリックしたときに画像が表示されます．$num は図番号そのものを表示するかどうかを制御します．以下に具体例を示します．

HTML	出力
<?php $cat[5]->ref(); ?>	7
<?php $cat[5]->ref($pre="図"); ?>	図7
<?php $cat[5]->ref($pre=NULL, $Lightbox=False); ?>	7
<?php $cat[5]->ref($pre="図", $Lightbox=False); ?>	図7
<?php $cat[5]->ref($pre="猫です", $Lightbox=True, $num=False); ?>	猫です

最も一般的な図番号の表示は，「<?php $ArrayName[n]->ref($pre="図"); ?>」とします．

PDF を SVG に変換して表示

HTML で PDF をそのまま表示することはできません．そのため，PDF を何らかの画像フォーマットに変換する必要があります．最も望ましいフォーマットは SVG です．私は pdftocairo を使って，PDF から SVG に変換しています．具体的には，以下のシェルスクリプトを使っています．

回り込み

図の回り込みを使うと，文書をコンパクトにまとめることができます．図の要素を CSS で「float:right」のように指定します．その後に文章を記述すると，その文章が図の周りに回り込みます．回り込みの解除は，「<div style="clear: both;"></div>」とします．ただし，「<col width="幅">」は指定しない方が良いです．指定すると，本文と図の隙間がおかしくなることがあります．

<table class="figure" style="float:right;margin:0px 20px 0px 10px" summary="サマリー">
  <tr>
    <td class="image shadow" style="margin-left:0px" id="図のID">
    <a href="図のパス" data-lightbox="イメージ名" data-title="キャプション"><img src="図のパス" style="width:幅px; background-color:white" alt="図が表示できないときの文字列"></a>
    </td>
  </tr>
      
  <tr>
    <td class="caption center number" style="margin-left:0px">キャプション</td>
  </tr>    
  </table>

<p>ここにいろいろと文章を書く．この文章の右側に図が現れる．</p>

<div style="clear: both;"></div>

Lightbox を設定すると，タグのクリックでリンク先の図がふわっと現れます．例えば，「猫だ」です．Lightbox を使うためには，HTML のヘッダーに以下の記述が必要です．

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="パス/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="パス/js/lightbox.min.js"></script>
<link href="パス/css/lightbox.css" rel="stylesheet">

この Lightbox を使うために，HTML 中では次のように記述します．

<a href="図へのパス" data-lightbox="data-lightbox の属性値" data-title="キャプション"> 文字列 </a>

「図へのパス」，「data-lightbox の属性値」，「キャプション」を指定します．文字列をクリックすると，図がふっと現れます．data-lightbox の属性値は「hoge」のように記述し，同じ属性値を持つ図はグループ化されます．同じグループの図は，Lightbox 内の矢印をクリックすることで切り替えられます．

ページ作成情報

参考資料

MDN: HTML <img> 画像埋め込み要素．画像の挿入，alt 属性，画像形式，CSS でのスタイル設定を確認できます．
MDN: HTML <figure> キャプションが付けられる図要素．図とキャプションを意味的に扱う方法を確認できます．
MDN: フレックスボックス．複数の図を横に並べる Flexbox の基本を確認できます．
MDN: CSS float と MDN: CSS clear．図の回り込みと，その解除方法を確認できます．
MDN: 画像としての SVG．SVG を画像として HTML や CSS から利用する方法を確認できます．
Lightbox2 公式サイト．Lightbox の導入方法，data-lightbox 属性，画像グループの指定方法を確認できます．
PHP マニュアル: クラスとオブジェクト．Figure クラスのような PHP オブジェクトの基本を確認できます．

更新履歴

2020年08月08日

ページを分割し，新規ページに変更．

WEB ページ作成基準図の挿入

目次

普通の図

キャプション付きの図

普通の図

SVG の場合

図を出力するクラス (PHP)

ヘッダー部の記述

PHP ソースの読み込み/初期化

図の設定

複数の図の設定

図とキャプションの配置 (推奨)

ひとつの図

複数の図

図とキャプションの配置 (古い方法)

図番号の表示

PDF を SVG に変換して表示

回り込み

Lightbox

ページ作成情報

参考資料

更新履歴