*海外旅行のツアービデオは、「Windows Mediaムービーでホームビデオの公開 」をご覧下さい。
更新日2017/10/13サイトマップ&更新履歴を参照)
BB環境の動画ファンに 360度動画のバーチャルツアー、究極のホームシアターを!
当サイトは、動画の配信・視聴などテクニックの一般向け有効利用を目的に運営しています。
<Link> ┓下図バーをクリック
モバイルは画面をタップして動画再生 スタンドアロンへ)
自宅ホームシアターの360度パノラマ表示へ
 
Panotour Pro 2 でオーサリングしたバーチャルパノラマツアー( 360度全方位再生可能)
 

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



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

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

    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(http://ark.under.jp/le-arche/html5/image/p_ya-gray.gif) no-repeat;
    }
    a.link01:hover {
    background:url(http://ark.under.jp/le-arche/html5/image/p_ya-gray_hv.gif) no-repeat;
    color:#000000;
    }

    .link02{
    padding:0 0 0 15px;
    background:url(http://ark.under.jp/le-arche/html5/image/p_ya-gray2.gif) no-repeat;
    }
    a.link02:hover {
    background:url(http://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(http://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(http://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の挿入方法ページ表示
     



  kenのムービー計画バナー copyright '11 Ken's Movie.AllRightReserved. AbuSimbel