図の挿入

プログラムソース

インライン

独自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)">

キャプション付きの図

普通の図

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の場合，図の幅は必ず [%]単位で指定します．[pix]単位で指定すると，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]」は，適当な配列名(ArrayNama)と要素を表す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の属性");
?>

画像のポップアップが不要の場合は，「<?php $ArrayName[n]->show_fig(); ?>」とします．
図番号を参照するためには，「図<?php $ArrayName[n]->ref(); ?>」とします．
インラインのスタイル (CSS) が不要の場合は，「ArrayName[n] -> set_style("xxxx")」を記述しません．図が SVG ならば(拡張子 svg)，インラインスタイルに「background-color:white」が自動的にインライン css の先頭に追加されます．したがって，ここでの設定で上書き可能です．svg で背景色を変化させるには，「background-color:rgba(200, 100, 0, 0.5)」のようにします．a をゼロにすると，透明になります．
図枠のサイズを変化させたい場合は，「$クラス名 -> set_style("padding:20px");」のように padding を設定します．パッディング部分が拡がるため，図の周りに白い枠ができます．
キャプション幅: set_caption_width() を設定しない場合は，図の幅: set_size() と同じ値になります．
キャプションをセンタリングしたい場合は，「set_caption_style("text-align:center")」とします．
キャプションが不要な場合は，以下を削除します．

$counter_figure ++;
$ArrayName[n] -> set_number($counter_figure);
$ArrayName[n] -> set_caption_width();
$ArrayName[n] -> set_caption();
$ArrayName[n] -> set_caption_style("");

図をフローティングにする場合，「$ArrayName[n]->set_align_style("float:right; margin-right: 50px; margin-left: 50px");」とします．すると，文章中の右端に図が挿入されます．フローティングを終わる場合には，「<div style="clear: both"></div>」とします．

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

図の表示には，関数「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="図の範囲[pix]">
      
  <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("xxxx")」を記述しません．図が Svg ならば(拡張子 svg)，インラインスタイルに「background-color:white」が自動的にインライン css の先頭に追加されます．したがって，ここでの設定で上書き可能です．svg で背景色を変化させるには，「background-color:rgba(200, 100, 0, 0.5)」のようにします．a をゼロにすると，透明になります．

図番号の表示

図番号を参照には，メソッド ref($pre=NULL, $Lightbox=True, $num=True) を使います．このメソッドの引数 $pre は文字番号の前に表示される文字列で，通常は $pre="図" とします．$Lightbox はライトボックスという図画がふぁっと表示される設定です．これを True にすると，図番号をクリックすると画像が現れます．$num は図番号の表示を制御します．以下に具体例を示します．

httml	出力
<?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:left」で指定します．その後に文章を記述すると，その文章が図の周りに回り込みます．回り込みの解除は，「<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 の表示のクラスは，「mk_html.php」に書かれています．これは，私の WEB サイトでは必ず読み込まれるので，あえて設定する必要はないです．そのクラスの設定は，次のとおりです．

<?php
    $ArrayName[n] = new LightBox();
    $ArrayName[n] -> set_file("図へのパス");
    $ArrayName[n] -> set_tag("タグ");
    $ArrayName[n] -> set_caption("Lightbox のキャプション");
    $ArrayName[n] -> set_member("Lightbox の data-lightboxの属性");
?>

Lightbox で図を表示するためには，メソッド show_lightbox() を使います．Lightbox の適用は，「<?php $ArrayName[n]->show_lightbox(); ?>」とします．

ページ作成情報

参考資料

更新履歴

2020年08月08日

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

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

目次

普通の図

キャプション付きの図

普通の図

SVGの場合

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

ヘッダー部の記述

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

図の設定

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

ひとつの図

複数の図

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

図番号の表示

PDF を SVG に変換して表示

回り込み

Lightbox

ページ作成情報

参考資料

更新履歴