実演生物学 研究会「Topシート」へ

＜E. 実演生物学「Webレイアウト」の概要＞

テキスト形式・図一覧形式・拡大スライド形式
の使い方/操作法

この文字サイズはスマフォ対応です。PCの場合はブラウザの表示縮小を用いて下さい

レイアウト形式/４種について：図説/操作法

・・「操作トレーニング」へ移動・・

（魚類マクロ組織の顕微鏡観察法も：ココ）
＜はじめに：要約＞
    1. ここ/このシートでは、本編「Web実演生物学」で使用する表示レイアウト/Web表示形式の概要を説明します。
    2. PCとスマフォ(SMP)画面の別なくデジタル学習を可能とするレイアウト構成を図りたいと思っています。
    3. 基本とする表示形式/レイアウトは、テキスト・図一覧・拡大スライドの３形式です（下図を参照：スマフォ用の拡大スライドは「4. SMPスライド」です）。
    4. その他としてスマフォ自主学習に向けた上下「２画面シート」形式も設定しました。
    5. レイアウト操作を自主トレーニングとして行う場合は「ココをクリック」で移動し操作トレーニングの解説に従い実際に試してください。

＜レイアウト４形式とその繋がりについて＞

このシートは下図に示す「1. テキスト形式」です。下図の中の文字列「2〜４.レイアウト形式」の上をタップでリンク先/そのレイアウト形式へ移動します。戻る時は「目次へ」などをタップして下さい。

（操作トレーニングへはココをタップ）

（下図の説明は図の下に記述しました）

上図の解説（初めての方へ）

  1. 文章/解説文を通読するには、このシート「1. テキスト形式」が適していますが、
  2. 小画像でセットした挿入図や、図説画像セットとして構成した模式図/構造図などをモニター画面全体に拡大し参照する場合は、スライド形式/連続スライドでの表示（3. 拡大スライド形式）が適しています。
  3. 但し、3. 拡大スライドでは縦長スマフォ画面からはみ出しが生じるので、スマフォで参照の時は「4. SMP：スライド形式」を用います。
  4. 参照した模式図/概念図/構造図を素早く再確認する/探すには「2. 図一覧形式」で表示/検索し、そのサムネール小画面をクリック、改めて拡大参照すると便利です。
  5. なお、表示４形式のそれぞれには「目次へ」や「テキスト形式へ」などのリンク付き文字列やボタンが付設されているので、目次設定シート/テキスト形式への移動します。前後のスライドへ移動にはボタン「NEXT/BACK」を用い行います。
  6. なお、「培養細胞の形態や運動性」などを扱う実験観察の部では拡大スライドをNextボタンで連続的にクリックで「タイムラプス」画像として機能します。
  7. その他の表示レイアウトには、主画像（話題図）の意味意義をその関連画像から段階的に考察する/補完する「４画面スライド表示」形式や、インターネット地図のように拡大縮小や観察部位の移動が自由自在な「バーチャル画像観察」形式なども含まれます。
  8. それら特殊なレイアウトを扱う項目では、その都度、レイアウト解説を与えています。
  9. 本編は、以上のようなWebレイアウトで構成した/組み合わせによるWeb資料集/デジタル学習帳です。しかし、その難点は肌感覚が希薄なWebテキスト/サイト（闇雲にクリック/リンク移動を繰り返すと「迷子/迷路状態」になってしまうかも）。
  10. それでこのシートでは、下欄には〔A. レイアウト操作の自主トレーニング〕も設定しました。Web レイアウトの基本構成とその繋がりを実際に試してください（操作法の確認です）。
  11. なお、会員制サイトでは利用者のリクエスト（例えば、実践学習の場に適したレイアウト構成）、などに応じて対応する予定です。

＜先頭行へ移動＞
＜レイアウト操作の自主トレーニング＞

下表の下線付き文字列をクリックでリンク先へ移動します。本編の使用法/留意点として「ブックマーク」などを付設し「迷子防止策を図る」は重要です。
A 基本レイアウトの確認と操作：練習

では、下記/箇条書きの「文字列をクリック」で移動し、そのレイアウトを参照の後、ここへ戻ってください。このシートへ戻る時は「テキスト形式あるいは目次」などの文字列やボタンを利用してください。

  1. このシートの表示は「A.テキスト形式」です。
  2. このシート/本項で用いた図を一覧で参照や検索したい時は「B. 図一覧形式」、
  3. 任意の図を拡大表示し連続的に参照の場合は「C. 拡大スライド形式」を用います。　
  4. なお、スマフォ形式の拡大スライドは「D. SMPスライド」をクリック）。　
  5. 更に、スマフォ図説学習に向け、縦長「E. ２画面シート」の利用も可能です。
B 特殊レイアウト１（下図を参照）
立体構造の観察/確認：魚類頭蓋の骨パズル

このレイアウトでは、下図/事例のように、主パネルの脇/下に設置した「操作ボタン」で扱います。段階的に操作するFig.13, 14, 15のようにイメージが変化します。その目的は複雑なことも「構造：要素の配置とその繋がり」として容易にイメージ可能であり、更に「用語は後追いする」を確認するためと思っています。ココをクリック、あるいは、下図の上をクリックで実践サイトへ移動します（スマフォ対応のレイアウトへ移動します）。試して下さい。
2 2 2
Fig.13 Fig.14 Fig.15
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞
C

特殊レイアウト２.（下図を参照）
４画面レイアウト：魚類組織の顕微鏡観察

このレイアウトの解説では、下図のような顕微鏡標本のデジタル観察の場合を事例として説明します。つまり、主画面の詳細を段階的に観察倍率をあげて確かめる方法です。

その実践サイト「魚類マクロ組織の顕微鏡観察」へはココをクリックで移動します。
D

その他のレイアウト３.
　構造解析レイアウト（Fig. ＊〜）

　準備中です

＜先頭行へ移動＞

この下に配置した「３列の挿入図」はテキスト形式で用いる/文章の適所に挿入予定の雛形「サムネール式の模式図/小画面」です。図一覧形式に用いる画像とはFig.番号が同じなので「テキストと図一覧/拡大スライド」 の移動がスムーズになっているはずです。

下表のFig＃をクリックでこのシート/テキスト形式の下部に位置する挿入図へ移動します（試してください：戻る時はブラウザのリターンか文字列「目次」を使います）。
Fig. 0 Fig. 1 Fig. 5 Fig.10 Fig.15 Fig.20 Fig.25 Fig.30
Fig.35 Fig.40 Fig.45 Fig.50 Fig.55 Fig.60 Fig.65 Fig.70
Fig.75 Fig.80 Fig.85 Fig.90 Fig.95 Fig.100 Fig.105 Fig.110
Fig.115 Fig.120 Fig.125 Fig.130 Fig.135 Fig.140 Fig.145 Fig.150
Fig.155 Fig.160 Fig.165 Fig.170 Fig.175 Fig.180 Fig.185 Fig.190
Fig.195 Fig.200            
２画面スマフォ対応レイアウトで参照の場合
は「ココ」をクリック

＜Fig.0ーFig,0000 ＞

2 2
上図が「Fig.0」 上図が「Fig.00」
2 2
上図が「Fig.000」 上図が「Fig.0000」
Fig. 0, 00, 000, 0000 は、本編のイメージ・目次です。
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞
＜テキスト形式：Fig.1-Fig.3の事例＞
2 2 2
Fig.1 Fig.2 Fig.3
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞
＜テキスト形式：Fig.4-Fig.6の事例＞
2 2 2
Fig.4 Fig.5 Fig.6
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜テキスト形式：Fig.7-Fig.9の事例＞

2 2 2
Fig.7 Fig.8 Fig.9
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜テキスト形式：Fig.10-Fig.12の事例＞

2 2 2
Fig.10 Fig.11 Fig.12
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.13 Fig.14 Fig.15
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.16 Fig.17 Fig.18
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.19 Fig.20 Fig.21
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.22 Fig.23 Fig.24
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.25 Fig.26 Fig.27
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.28 Fig.29 Fig.30
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.31 Fig.32 Fig.33
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.34 Fig.35 Fig.36
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.37 Fig.38 Fig.39
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.40 Fig.41 Fig.42
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.43 Fig.44 Fig.45
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.46 Fig.47 Fig.48
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.49 Fig.50 Fig.51
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.52 Fig.53 Fig.54
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.55 Fig.56 Fig.57
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.58 Fig.59 Fig.60
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

Fig.61 Fig.62 Fig.63
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.64 Fig.65 Fig.66
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.67 Fig.68 Fig.69
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.70 Fig.71 Fig.72
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.73 Fig.74 Fig.75
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.76 Fig.77 Fig.78
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.79 Fig.80 Fig.81
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.82 Fig.83 Fig.84
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.85 Fig.86 Fig.87
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.88 Fig.89 Fig.90
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.91 Fig.92 Fig.93
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.94 Fig.95 Fig.96
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.97 Fig.98 Fig.99
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.10 Fig.101 Fig.102
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.103 Fig.104 Fig.105
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.106 Fig.107 Fig.108
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.109 Fig.100 Fig.111
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.112 Fig.113 Fig.114
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.115 Fig.116 Fig.117
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.118 Fig.119 Fig.120
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.121 Fig.122 Fig.123
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.124 Fig.125 Fig.126
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.127 Fig.128 Fig.129
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.130 Fig.131 Fig.132
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.133 Fig.134 Fig.135
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.136 Fig.137 Fig.138
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.139 Fig.140 Fig.141
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.142 Fig.143 Fig.144
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.145 Fig.146 Fig.147
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.148 Fig.149 Fig.150
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.151 Fig.152 Fig.153
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.154 Fig.155 Fig.156
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.157 Fig.158 Fig.159
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.160 Fig.161 Fig.162
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.163 Fig.164 Fig.165
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.166 Fig.167 Fig.168
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.169 Fig.170 Fig.171
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.172 Fig.173 Fig.174
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.175 Fig.176 Fig.177
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.178 Fig.179 Fig.180
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.181 Fig.182 Fig.183
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.184 Fig.185 Fig.186
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.187 Fig.188 Fig.189
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.190 Fig.191 Fig.192
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.10 Fig.195 Fig.195
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 2
Fig.196 Fig.197 Fig.198
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜＊-＊＞

2 2 ・・・・・・・・
本編の図は
以上で
終わり
・・・・・・・・
Fig.199 Fig.200  
（上図をクリックで拡大表示・ここに戻る時は「テキスト形式」をクリック）
＜先頭行へ移動＞・＜リストへ戻る＞

＜本編の終わり：END＞

＜先頭行へ移動＞ ・ ＜リストへ戻る＞・＜実演生物学のTopPageへ＞