Yamamoto's Laboratory
トップ
 
ファイルの先頭
ヘッド・サイド
ページの先頭
見出し
パラグラフ
文字・文字列
レイアウト
リスト (箇条書き)
表の作成
図の挿入
ファイル内容表示
コマンド表示
プログラムソース
インライン
独自CSS/PHP
GCP
JavaScript
インラインフレーム
ページ作成情報
フッター
 
 
 
 
 
 
インターネット WEB 作成 作成基準 インラインフレーム

WEB ページ作成基準インラインフレーム

WEB ページでのインラインフレームの作成方法を示します．

目次

インラインフレーム (Inline Frame) とは

インラインフレームを使うと，WEB ページに枠 (フレーム) を作成し，その中に別の WEB ページを表示させることができます．その HTML は，「<iframe src="htmlへのパス"></iframe>」です．たったこれだけで，外部の HTML を表示させることができます．これは，とても便利です．

他のページを表示

インラインフレームを使うと，他のページを表示することができます．

<iframe src="htmlへのパス"
      style="width:幅(px); height:高さ(px); margin-left:左マージン">
      インラインフレームが表示されないブラウザ向け．
</iframe>

具体例を以下に示します．

境界は，CSS で記述できます．例えば，style 中に「border:1px #000000 solid」とすれば，境界は線幅:1pxの黒い実線になります．

ポップアップ (説明分)

JQuary の fancyBox のインラインフレームを使うと， WEB サイトをクールに仕上げられます．

簡単な説明文を付けるときにインラインフレームは大変便利です．以下に従い html ファイル(example.html)を作成します．これを，「<a class="iframe" data-fancybox-type="iframe" href="パス/example.html">クリックする文や図</a>」で呼び出します．

説明文に向いたインラインフレームの書き方

<!DOCTYPE html>

  <html>
    <head>
    <title>タイトル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="cssへのパス/inline_frame.css" type="text/css">
    <meta name="description" content="ページの説明">
    </head>
  
  <body>
    <h1>ページタイトル</h1>

      本文

  </body>
</html>

ポップアップ (プログラムソース)

プログラムを表示するときも，fancyBox を使ったインラインフレームは大変便利です．狭いスペースでプログラムの説明ができます．以下に従い php ファイル(example.php)を作成します．これを，「<a class="iframe" data-fancybox-type="iframe" href="パス/example.php">クリックする文や図</a>」で呼び出します．

Google Code Prettify (GCP) を使う

最もお勧めの方法です．GCP でコードを表示し，黒い背景に緑色の文字で実行結果を示します． 以下に，テンプレートを示します．

コードの表示は GCP，結果は黒地に緑文字．

<!DOCTYPE html>

<html>
	<head>
		<title>タイトル</title>
		<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
		<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
		<link rel="stylesheet" href="cssへのパス/css/inline_frame.css" type="text/css">
		<meta name="description" content="ページの説明">
	</head>

	<body>
		<?php include "cssへのパス/www_func/mk_html.php";?>
		<h1>ページタイトル</h1>
		<p>XXXのプログラム例と実行結果を示します．</p>
	  
		<h2>プログラム例</h2>
		<p>プログラム例を以下に示します．</p>
		<pre class="prettyprint linenums my_gcp" style="height:auto; width:500px; line-height:150%"><?php source2html_raw("ソードコードへのパス", 4); ?></pre>

		<h2>実行結果</h2>
		<p>実行結果は，以下のとおりです．</p>
		<pre class="terminal_screen mono_space" style="height:300px; width:500px"><span class="prompt">プロンプト</span> コマンド <span class="obj">目的語</span>

<?php source2html_raw("実行結果ファイルへのパス", 4); ?></pre>
	  
	</body>
</html>

プログラムはファイルに記述し，それを mk_html.php の関数: source2html_raw() で呼び出します．結果を記述したファイルは，関数: source2html() で呼び出します．具体的なソースリストとその実行結果は，ソースリストと結果をクリックすると表示されます．

実行結果を表示する <pre class="terminal_screen"> には，以下の <span class="クラス"> を使い，コマンドを美しく表示することが可能です．

クラス 記述すべき内容
prompt プロンプト ($, #, >など)
sudo sudo
op オプション (--help)
arg 引数
obj 目的語
obj2 目的語2
emph 強調
comment コメント

これらのオプションを使うと，以下のように表示されます.

$ sudo command  --option  引数  目的語  目的語2  強調 コメント

「<span class="command mono_space">」とすると，等幅フォントになります．また，複数個のコマンドを複数行に記述できます．

単純な書き方

ほとんど装飾のないインラインフレームです．白地に黒文字でコードを表示します．コメント文は緑色です．

プログラムのソースリスト表示に向いたインラインフレーム

<!DOCTYPE html>

  <html>
    <head>
    <title>タイトル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="cssへのパス/css/inline_frame.css" type="text/css">
    <meta name="description" content="ページの説明">
    </head>
  
  <body>
    <?php include "phpプログラムへのパス/www_func/mk_html.php"; ?>
    <h1>ページタイトル</h1>

       <pre style="line-height:110%; font-size:110%"><?php source2html("ソースコードのパス", "コメント文字列", 行番号表示フラグ, 行番号桁数, <pre>表示フラグ, タブの空白変換); ?></pre>

  </body>
</html>

以下に実際の例を示します．

<!DOCTYPE html>

<html>
  <head>
    <title>numpy の正規分布 (numpy.random.normal)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="../../../../../../css/inline_frame.css" type="text/css">
    <meta name="description" content="numpy.random.normal の例">
  </head>
  
  <body>
    <?php include "../../../../../../www_func/mk_html.php"; ?>
    <h1>正規分布 (numpy.random.normal)</h1>
    <h2>プログラム例</h2>

    <pre style="line-height:110%; font-size:110%"><?php source2html("normal.py", "#", 0, 3, 0, 4); ?></pre>

    <h2>実行結果</h2>

    <img src="normal.svg" style="width:300px">

  </body>
</html>

この実行結果は，インラインフレームで表示することができます．

背景付き，手動

プログラムの動作をもう少し詳しく説明する場合は，プログラムのソースや実行結果に背景をつけます．そのほうがわかりやすいです．そのために，「<div> — </div>」で囲み，背景などの設定を行います．具体的には，以下のようにします．

<div style="padding:1px 2px 2px 10px; margin-left:30px; background-color:#dddddd">
	ソースコードあるいは結果を記載．
</div>

具体例を以下に示します．このインラインフレーム表示例です．

インラインフレームでソースコードを実行結果を示す HTML の例

<!DOCTYPE html>

<html>
  <head>
    <title>インラインフレームを使ったプログラム表示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="../../../../../../css/inline_frame.css" type="text/css">
    <meta name="description" content="インラインフレームの例．「エラトステネスのふるい」を使っい，素数を求める Python のプログラムです．">
  </head>
  
  <body>
    <?php include "../../../../../../www_func/mk_html.php"; ?>
    <h1>インラインフレームを使ったプログラム表示例</h1>

    <h2>プログラム</h2>
    <p>100までの素数を出力付すプログラムです．素数を求めるアルゴリズムは「エラトステネスのふるい」です．整数の列があり，その中から素数の2以上の整数倍を消します．残ったものが素数になります．</p>

    <div style="padding:1px 2px 2px 10px; margin-left:30px; background-color:#dddddd">
      <pre style="line-height:110%; font-size:110%"><?php source2html("prime.py", "#", 0, 0, 0, 4, array()); ?></pre></div>

    <h2>実行結果</h2>
    <p>以下に実行結果を示します．</p>

    <div style="padding:1px 2px 2px 10px; margin-left:30px; background-color:#dddddd">
    <pre style="line-height:110%; font-size:110%">
2   3   5   7   11  13  17  19
23  29  31  37  41  43  47  53
59  61  67  71  73  79  83  89
97</pre></div>
    <br/>
    
  </body>
</html>

背景付き，自動

先の例はいろいろと設定は可能ですが，HTMLが長く面倒です．クラスを使い，記述を簡単にしました．フォントサイズの変更は「<pre class="program_source" style="font-size:100%">」のようにします．

<!DOCTYPE html>

<html>
  <head>
    <title>タイトル</title>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
    <link rel="stylesheet" href="相対パス/css/inline_frame.css" type="text/css">
    <meta name="description" content="内容の説明">
  </head>
	
  <body>
    <?php include "相対パス/www_func/mk_html.php"; ?>
	  
    <h1>os.path.commonpath()</h1>
    <p>説明文の作成</p>
	  
    <h2>プログラム例</h2>
    <div class="program_source">
      <pre class="program_source"><?php source2html("ソースファイル", "コメント",行番号, 行番号桁数, <pre>, タブ空白変換, array(強調行)); ?></pre>
   </div>
	  
   <h2>実行結果</h2>
   <div class="program_result">
      <pre class="program_result"><?php source2html("ソースファイル", "コメント",行番号, 行番号桁数, <pre>, タブ空白変換, array(強調行)); ?></pre>
   </div>
	  
  </body>
</html>

具体な表示例 (php のソース) を示します．

ページ作成情報

参考資料

更新履歴

2020年08月08日 ページを分割し，新規ページに変更．
2020年08月13日 Google Code Prettify (GCP) を使ったプログラム表示方法を追記．

no counter

last update:2022/08/13 15:33:00