更新日2024/11/02(サイトマップ&更新履歴を参照)
動画ファンに 360度動画のバーチャルツアー、究極のホームシアターを!

スマートフォン用ページへ 端末用へ  jQuery Mobile版へ jQuery M版へ

当サイトは、動画の配信・視聴などテクニックの一般向け有効利用を目的に運営しています。
(コードは「QRのススメ」で作成)
下動画は、PTP2で作成した 「日本散策360度アルバム5(令和6年度)」のダイジェストムービー(16秒)の連続ショーです
注意:画面上をタップして動画の再生を開始して下さい!
360度全天球動画のムービーショー スタンドアロン
 
PTP2(Panotour Pro 2 )でオーサリングしたバーチャルパノラマツアーは、360度ビューが可能
jQuery Mobile版へ 「日本散策360度アルバム5」へ 
 
デスクトップPC もスマホ・タブレットと同様に、画面をタップして動画の再生を開始してご覧下さい
 

=新しい記事と更新履歴 (ページ表示はこちら



=動画視聴時の推奨システム環境=
 説明 展開
 
1) ブラウザ
WebGL 又は CSS3D対応の HTML5ブラウザ
各ブラウザの問題点は Windows版 又はMacintosh版と該当セクションをご参照下さい。
 
2) マシンスペック:
Windows:PentiumIII 900MHzクラス以上
Macintosh:G3 600MHzクラス以上
 
3) 下り回線速度実測値: 1.5Mbps以上
 
4) "JavaScript"と"ActiveXコントロール"又は"プラグインの実行"を有効にしてご覧下さい。
IEエンジンでは、"ActiveXコントロールのダウンロード"も有効にして下さい。
 
5) Vista版 IExplorer 7は、以下のコーナーでは"保護モード"を無効にしてご覧下さい。
有効だと、ShockwaveゲームとDivX MediaムービーとIExplorer 7以前では植え込み方式の
WindowsMediaムービーも視聴出来ません!
なお、Vista、Windows 7のIExplorer 8以降では上記の不都合はほぼ解消されました。
 回線速度計測は、「BNRスピードテスト(HTML5版)」をご利用ください。

及び で表示したトップページ

このページの作成方法と閲覧上の注意

 解説 展開
I. HTML5+CSS3の記述
  Le Archeさんのサンプルページから丸々借用して、CSS3ファイルを以下の如く少々カスタマイズした(詳細は、こちらを参照)。
  ・background-imageを自前の画像に変更して調整  ・レイアウト等のwidthを調整 
・ナビゲーション及びリンクのカラーを変更 ・ボックスプロパティの陰影を強調
 

  =CSSファイルの記述内容とカスタマイズ=

 
common.cssの記述内容とカスタマイズ
@charset "Shift_JIS";   ⇒ ページ表示 へ移動

/*共通部分のスタイルシート

■目次:

・共通指定
・配置
・全体レイアウト
・ヘッダー
・グローバルナビゲーション
・フッター
・前のページへ戻る
・ページの先頭へ戻る
・パン屑リンク

*/

*{
margin: 0;
padding: 0;
}

body {
font-size: 80%;
color: #333333;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
background-image: url(../image/back.png), url(../image/logo.png), url(../image/bg_blue.png), url(../image/bg_vio.png);
background-repeat: repeat, no-repeat, repeat-x, repeat-x;
background-position:left top, right bottom, left top, right bottom;
background-attachment:fixed;
}

/*---------------共通指定---------------*/

img {
border: 0;
}

p {
line-height: 1.4;
}
p::selection {
background: #21659b; /* for WebKit & Opera */
color:#FFFFFF;
}
p::-moz-selection {
background: #21659b; /* for Firefox */
color:#FFFFFF;
}


/*---------------全体レイアウト---------------*/
#content {
width: 750px;
clear: both;
margin: 20px auto;
padding: 0px;
background-color:#FFF;
opacity:0.8;
border:1px #FFF solid;
/*角丸*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
/*ドロップシャドウ*/
-webkit-box-shadow: #6979a8 0px 0px 8px;
-moz-box-shadow: #6979a8 0px 0px 8px;
box-shadow: #6979a8 0px 0px 8px;
}

/*---------------ヘッダー---------------*/

#header {
padding: 0px;
margin: 0px;
display: block;
}
#sitetitle {
font-size:1.4em;
color:#2b71ad;
text-shadow:1px 1px 0px #fff;
text-align: center;
margin: 15px auto;
padding: 30px 0px 5px;
background-image: url(../image/bg_title-t.png), url(../image/bg_title-r.png), url(../image/bg_title-l.png);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center top, left bottom, right bottom;
display:block;
width:300px;
}

/*---------------グローバルナビゲーション---------------*/

nav#globalnavi {
padding:5px 0;
display:block;
width: 595px;
margin: 0px auto;
border-top: 2px solid #2b71ad;
border-bottom: 2px solid #2b71ad;
}
nav#globalnavi ul {
margin: 0px;
padding: 2px 0;
}
nav#globalnavi li{
float:left;
display: block;
width:195px;
}
nav#globalnavi li a{
display: block;
margin:1px 8px;
padding:5px;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0px #fff;
font-weight:bold;
color:#143C5F;
/*角丸*/
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
/*グラデ*/
background-image: -moz-linear-gradient(top, #ffffff, #97CBFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #97CBFF),color-stop(1, #ffffff)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#97CBFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#97CBFF')"; /* IE8 */
}
nav#globalnavi li a:hover{
color:#FF3300;
/*グラデ*/
background-image: -moz-linear-gradient(top, #F3E8DC, #D8AF87); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D8AF87),color-stop(1, #F3E8DC)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3E8DC', endColorstr='#D8AF87'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3E8DC', endColorstr='#D8AF87')"; /* IE8 */
}

/*---------------本文---------------*/

#pagetitle{
}

#main {
width: 665px;
margin: 10px auto;
padding:10px 0 15px;
-webkit-column-count: 1;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #d6d6d6;
-moz-column-count: 1;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #d6d6d6;
column-count: 1;
column-gap: 20px;
column-rule: 1px solid #d6d6d6;
clear:both;
}
#main-2nd {
padding: 0px 23px;
}

/*---------------フッター---------------*/

footer {
display:block;
width: 665px;
clear: both;
margin: 20px auto;
padding: 0px;
background-color:#FFF;
opacity:0.8;
border:1px #FFF solid;
/*角丸*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
/*ドロップシャドウ*/
-webkit-box-shadow: #6979a8 0px 0px 8px;
-moz-box-shadow: #6979a8 0px 0px 8px;
box-shadow: #6979a8 0px 0px 8px;
}
footer section {
width:665px;
padding:20px 0;
float:left;
}
footer section h2{
margin: 0 0 0 25px;
padding: 0px 0px 0px 6px;
border-left: 4px solid #2b71ad;
font-size: 1.2em;
}

footer section ul{
margin: 10px 0 0 25px;
list-style-type: none;
}
footer section ul li{
padding: 0px 0px 5px 12px;
margin:2px 0 0 0;
}
footer section ul li a{
}
footer section p {
margin: 10px 0 0 25px;
padding: 2px 0px 5px 12px;
}
address {
clear: both;
text-align: center;
padding: 15px 10px;
margin:0 15px;
border-top:1px dotted #2b71ad;
display:block;
font-style: normal;
}

/*---------------ページの先頭へ戻る---------------*/

#pagetop {
clear: both;
text-align: right;
padding: 13px 10px 0;
margin:10px 18px 0;
border-top: 1px dotted #999999;
}

/*---------------パン屑リンク---------------*/

#topicpath {
}

/* clearfix */
.clearfix{
min-height:1%;
}
.clearfix:after{
content:".";
height:0px;
clear:both;
display: block;
visibility:hidden;
}
* html .clearfix{
/*\*/height:1%;/*display WinIE*/
display:inline-table;/*display MacIE*/





textcolor.cssの記述内容とカスタマイズ
@charset "Shift_JIS";    ⇒ページ表示へ移動

/*テキスト、カラー他装飾関連の定義のスタイルシート

※bodyのカラーはcommon.cssで設定します。

■目次:

・リンクカラーの設定
・テキストカラーの設定
・テキストサイズの設定
・テキストの配置
・リンク時装飾
・リスト装飾
・表組
・フォーム
・装飾box

*/


/*---------------icon設定---------------*/

.icon {
vertical-align:middle;
}

/*---------------リンクカラーの設定---------------*/

a:link {
color: #0066FF;
text-decoration: underline;
}

a:visited {
color: #0066FF;
text-decoration: underline;
}

a:hover {
color:#FF0000;
text-decoration: underline;
}

a:active {
color: #333333;
text-decoration: underline;
}
#hnavi a{
text-decoration:none;
}

/*---------------テキストカラーの設定---------------*/

.txt-attention {
color: #FF0000;
}
.attention {
color: #FF0000;
font-weight:bold;
}

.txt-emphasis {
color: #FF6600;
}
.txt-form_att {
color: #0066CB;
}


/*---------------テキストサイズの設定---------------*/

.txt-large {
font-size: 1.2em;
}

.txt-small {
font-size: 0.85em;
}

/*---------------テキストの配置---------------*/

.txt-center {
text-align: center;
}

.txt-right {
text-align: right;
}

/*---------------リンク時装飾---------------*/
.link01{
padding:0 0 0 15px;
background:url(https://ark.under.jp/le-arche/html5/image/p_ya-gray.gif) no-repeat;
}
a.link01:hover {
background:url(https://ark.under.jp/le-arche/html5/image/p_ya-gray_hv.gif) no-repeat;
color:#000000;
}

.link02{
padding:0 0 0 15px;
background:url(https://ark.under.jp/le-arche/html5/image/p_ya-gray2.gif) no-repeat;
}
a.link02:hover {
background:url(https://ark.under.jp/le-arche/html5/image/p_ya-gray2_hv.gif) no-repeat;
color:#000000;
}


/*---------------リスト装飾---------------*/

ul, ul li{
margin:0;
padding:0;
list-style:none;
}

/* 白丸 */
ul.common-ul-circle {
margin:5px 0 8px;
padding:0;
}
ul.common-ul-circle li{
background: url(https://ark.under.jp/le-arche/html5/image/p_circle.jpg) no-repeat left top;
padding: 0px 0px 3px 20px;
line-height:1.4;
}
/* 黒丸 */
ul.common-ul-disc {
margin:5px 0 8px;
padding:0;
}
ul.common-ul-disc li{
background: url(https://ark.under.jp/le-arche/html5/image/p_disc.gif) no-repeat left top;
padding: 0px 0px 3px 20px;
line-height:1.4;
}
/* インデント */
ul.common-ul-indent {
margin:5px 0 8px;
padding:0;
}
ul.common-ul-indent li{
padding: 0px 0px 3px 20px;
line-height:1.4;
}

/* 算用数字 */
ol.common-ol-decimal {
margin:5px 0 8px;
padding:0;
list-style-type:decimal;
list-style-position: outside;
}
ol.common-ol-decimal li{
padding:0 0 3px;
margin:0 0 0 1.5em;
line-height:1.4;
}

/* アルファベット */
ol.common-ol-alpha {
margin:5px 0 8px ;
padding:0;
list-style-type:lower-alpha;
list-style-position: outside;
}
ol.common-ol-alpha li {
padding:0 0 3px;
margin:0 0 0 1.5em;
line-height:1.4;
}

/* アルファベット(大) */
ol.common-ol-alpha_up {
margin:5px 0 8px ;
padding:0;
list-style-type:upper-alpha;
list-style-position: outside;
}
ol.common-ol-alpha_up li {
padding:0 0 3px;
margin:0 0 0 1.5em;
line-height:1.4;
}

/* liのIE6-7対策 */
*:first-child+html ol.common-ol-decimal li, *:first-child+html ol.common-ol-alpha li,
*:first-child+html ol.common-ol-alpha_up li {
margin:0 0 0 2em;
}

* html ol.common-ol-decimal li, * html ol.common-ol-alpha li,
* html ol.common-ol-alpha_up li {
margin:0 0 0 2em;
}

/* リスト内のリスト */
ol.common-ol-decimal li ol.common-ol-alpha,
ol.common-ol-decimal li ol.common-ol-alpha_up,
ol.common-ol-decimal li ul.common-ul-indent {
margin:3px 0 0px ;
}

/* 横並びリスト */
ul.common-ul-float {
margin:5px 10px 8px;
padding:0;
}
ul.common-ul-float li{
padding: 0px 8px 3px;
margin:0;
line-height:1.4;
float:left;
}
/* liのIE6対策 */
* html ul.common-ul-float li{
padding: 0px 4px 3px;
}

#main-2nd ol.sidemgn, #main-2nd ul.sidemgn {
margin-left:15px;
}


/* 定義リスト */

.common-dl, .common-dl-list {
margin: 0px 10px;
}
.common-dl dt{
padding: 5px 0px 3px;
clear: both;
float:none;
line-height:1.4;
}
.common-dl dd{
padding-left: 8px;
padding-bottom: 5px;
line-height:1.4;
clear: both;
float:none;
}
.common-dl dl {
width:770px;
}
.common-dl dl dt, .common-dl-list dt{
font-weight: normal;
padding: 2px 0px;
width: 70px;
float: left;
clear: none;
}
.common-dl dl dd, .common-dl-list dd{
width: 690px;
float: right;
padding: 2px 0px;
clear: none;
}

.common-dl-list dt{
font-weight: normal;
padding: 2px 0px;
width: 50px;
float: left;
clear: none;
text-align:right;
line-height:1.4;
}
.common-dl-list dd{
width: 720px;
float: right;
padding: 2px 0px;
clear: none;
line-height:1.4;
}
.common-dl dl dd.f-clear, .common-dl-list dd.f-clear {
width:770px;
line-height:0;
height:1px;
margin:0;
padding:0;
font-size:1px;
float:none;
clear:both;
}

.common-dl .common-dl-list2 dt{
font-weight: normal;
padding: 2px 0px;
width: 20px;
float: left;
clear: none;
text-align:right;
line-height:1.4;
}
.common-dl .common-dl-list2 dd{
width: 730px;
float: right;
padding: 2px 0px;
clear: none;
line-height:1.4;
}
.common-dl .common-dl-list2 dd.f-clear {
width:750px;
line-height:0;
height:1px;
margin:0;
padding:0;
float:none;
clear:both;
font-size:1px;
}

.common-dl .common-dl-list2 dd dl.common-dl2 {
width: 720px;
}
.common-dl .common-dl-list2 dd dl.common-dl2 dt{
width: 700px;
float: none;
clear: both;
text-align:left;
padding: 0;
margin:5px 0 0;
}
.common-dl .common-dl-list2 dd dl.common-dl2 dd{
width: 700px;
padding: 0;
margin:0 0 0 1em;
float: none;
clear: both;
}

.common-dl .common-dl-list2 dd dl.common-dl-list3 {
width: 720px;
}
.common-dl .common-dl-list2 dd dl.common-dl-list3 dt {
width: 30px;
}
.common-dl .common-dl-list2 dd dl.common-dl-list3 dd {
width: 680px;
}
.common-dl .common-dl-list2 dd dl.common-dl-list3 dd.f-clear {
width:720px;
}


/*---------------表組---------------*/

table.table-normal {
margin: 8px 5px;
width: 790px;
border: 1px solid #DEDEDE;
padding: 0;
border-collapse:collapse;
}

.table-normal caption, .table-normal2 caption, .table-normal3 caption, .table-form caption {
text-align: left;
padding: 0 0 3px 5px;
}
.table-normal th, .table-normal2 th, .table-normal3 th, .table-form th {
background: #EDEDED;
border: 1px solid #DDDDDD;
padding: 5px 8px;
line-height:1.4;
}

.table-normal td, .table-normal2 td, .table-normal3 td, .table-form td {
border: 1px solid #DDDDDD;
padding: 5px 8px;
line-height:1.4;
}
table.table-normal2 {
margin: 8px 5px;
border: 1px solid #DEDEDE;
padding: 0;
border-collapse:collapse;
width: 380px;
}
table.table-normal3 {
margin: 8px 5px;
border: 1px solid #DEDEDE;
padding: 0;
border-collapse:collapse;
width: 170px;
}
.table-normal th.th-large, .table-normal2 th.th-large, .table-normal3 th.th-large {
background: #666666;
color: #FFFFFF;
}

table.table-form {
margin: 8px auto;
width: 600px;
border: 1px solid #DEDEDE;
padding: 0;
border-collapse:collapse;
}

/* 表組内のリスト */
table ul {
margin:0;
padding:0;
}
table ul li{
padding:1px 0;
margin:2px 0 2px 1.5em;
line-height:1.4;
list-style-type:disc;
list-style-position: outside;
}

/* liのIE6-7対策 */
*:first-child+html table ul li {
margin:0 0 0 2em;
}

* html table ul li {
margin:0 0 0 2em;
}

table dl {
margin:1px 0 0;
}
table dl dt {
font-weight: normal;
padding: 2px 0px;
width: 60px;
float: left;
clear: none;
}
table dl dd {
padding: 2px 0px;
clear: none;
line-height:1.4;
}
table dl dd.f-clear {
line-height:0;
height:1px;
margin:0;
padding:0;
font-size:1px;
float:none;
clear:both;
}

table.table-form ol {
list-style-type:none;
}
table.table-form ul.radio_select {
list-style-type:none;
}
table.table-form ul.radio_select li{
list-style-type:none;
width:5em;
float:left;
padding:0;
margin:0 1em 0 0;
}

/*---------------フォーム---------------*/

/*入力フォーム*/

input {
margin: 3px 0;
}
table.table-form .input1 {
width: 200px;
}
table.table-form .input2 {
width: 320px;
}
table.table-form .input3 {
width: 80px;
}
table.table-form .input4 {
width: 150px;
}
input.indent{
margin:5px 0 5px 1.5em;
}
table.table-form textarea {
width: 400px;
margin: 5px 0;
padding:5px;
font-size:1em;
}

/*---------------装飾box---------------*/

/*デザイン1*/




  別途、タイトル部にtext-shadowを、サブタイトル「当ページの作成方法...」にborder-imageを設定した。 又、「CSS3 PIE」を用いてIExplorer 8でもCSS3を実現出来るように設定した。

II. HTML5対応ブラウザのCSS3表示能力(詳細は、こちらを参照)。
  1) border-radius, box-shadow, border-image, text-shadow及び navボタン等の表示
・Chrome(10), Firefox(4)とSafari(5)は、問題なく表示可能。
*IE 8+Chrome Frameでも問題なく表示可能(当ページは<meta http-equiv="X-UA-Compatible"
content="chrome=1"> を記述して配信した)。
Opera(11)は角丸表現とボックス・文字陰影の表示は可能だが、navボタンの表示不可 (>_<、)
IExplorer 9はnavボタンの表示は可能だが、ボタンの角丸表現と文字陰影を表示出来ない。
しかも、ボーダー枠に画像を表示する事も出来ない!
 
 
 
  補足(2013.10.20):IExplorer 9, 10, 11 で、当ページ表示上の問題点
Chrome, Firefox, Safari では問題なく、下図の如く表示される。


以下、Windows7環境における 各バージョンの IExplorerの違いを提示する。
A) IExplorer 9 は、文字陰影の表示不可。ボックス内navボタンの表示は可能だが、角丸で表現出来ない。そして、ボーダー枠に画像を表示する事が出来ない。


B) IExplorer10 は、文字陰影の表示は可能となったが、navボタンの表示不可。ボーダー枠に画像を表示出来ない。
しかも、HTTPDで構築した自宅サーバの配信では HTML5 ビデオをマトモに視聴出来ない不具合が多発してしまった(こちらを参照)。


C) IExplorer 11(Release Preview) は、文字陰影の表示は可能だが、やはりnavボタンの表示不可。一方、ボーダー枠の画像表示が可能となった。
そして、HTTPD構築自宅サーバのHTML5 ビデオ配信でみられたIExplorer10の不具合は解消した。


   
 
2) background-imageの複数表示
・Opera(11)以外はHTML5対応ブラウザなら問題なく背景画像 4個の表示が可能。
Opera(11)は、何故か?筆者が主に利用するこのKATCHサーバ配信では上手く背景画像を表示出来ない不都合がある (>_<、)
なお、 自宅サーバ .MaciDiskSo-Net は背景画像の表示可能だが、MOMOMICS はKATCHと同じく最初の画像しか表示出来ない ?(゜_。)?  ⇒ Opera 11.60でこの不具合は解消した ヾ(^-^)/
 
III. IExplorer 8でもCSS3機能を「CSS3 PIE」で実現可能か ⇒別のページで検討
  CSS3 PIEは、IExplorer6~8でもCSS3が実現出来るようにスタイルシート内でJavaScriptを呼び出す為のビヘイビアだが、すんなりと実現出来るか?を検討した。


IV. SpryWidgetの挿入方法ページ表示
 

  2015.02.25以来 kenのムービー計画バナー copyright '11 Ken's Movie.AllRightReserved. 「管理人のページ