Kenのムービー計画：HTML5+CSS3

Time 2020-07-25 23:02:04

Web Name: Kenのムービー計画：HTML5+CSS3

WebSite: http://kakonacl.xsrv.jp

ID:34713

Keywords:

計画,Ken,

Description:

FancyZoom 1.1（ここから入手）は、画像をスムーズに拡大ポップアップしてくれる JavaScript zipファイル解凍後、2つのフォルダjs-globalとimages-globalをサーバの任意の場所 にアップロード ＝HTMLの記述方法＝ head /head の間に以下を追記 script src= /js-global/FancyZoom.js type= text/javascript /script script src= /js-global/FancyZoomHTML.js type= text/javascript /script ＊アップロードしたJavaScriptファイルの場所を相対パス（例えば、../../js-global/...） で指定 body タグ部分に以下を追記 body id= whatever onload= setupZoom() 画像を貼り付けるタグの記述 a href= image.jpg title= 説明文 img src= image-thumbnail.jpg / /a ＊拡大させたくない場合 a rel= nozoom href= image.jpg img src= image-thumbnail.jpg / /a ＝FancyZoom.jsの改変＝ FancyZoom.jsの44行目のコードを、アップロードするZoomフォルダへ絶対パスを通 すように改変 例えば、var zoomImagesURI = 'http://www.katch.ne.jp/~kakonacl/js-global/images -global/zoom/'; // Location of the zoom and shadow images なお、Javascript onloadが他にも複数ある場合の対処方法は、こちらのHpを参照。 スマホ・タブレットの場合は、画面をタップして動画の再生を開始してからご覧下さい。 （デスクトップ版 Chrome, Opera, Safariは、何故か？ 最初の動画のみ自動再生出来ない） インラインフレームで表示されない br Netscape4.xをご使用の方は、 a href="~kakonacl/rireki.html" target="_blank" ここをクリック /a してご覧ください。 WebGL 又は CSS3D対応の HTML5ブラウザ 各ブラウザの問題点は Windows版 又はMacintosh版と該当セクションをご参照下さい。 3) 下り回線速度実測値： 1.5Mbps以上 回線速度計測は、「BNRスピードテスト（Flash非対応版）」をご利用ください。 4) JavaScript と ActiveXコントロール 又は プラグインの実行 を有効にしてご覧下さい。 IEエンジンでは、 ActiveXコントロールのダウンロード も有効にして下さい。 5) Vista版 IExplorer 7は、以下のコーナーでは 保護モード を無効にしてご覧下さい。 有効だと、ShockwaveゲームとDivX MediaムービーとIExplorer 7以前では植え込み方式の WindowsMediaムービーも視聴出来ません！ なお、Vista、Windows 7のIExplorer 8以降では上記の不都合はほぼ解消されました。 Le Archeさんのサンプルページから丸々借用して、CSS3ファイルを以下の如く少々カスタマイズした（詳細は、こちらを参照）。 @charset "Shift_JIS"; ⇒ ページ表示 へ移動 /*共通部分のスタイルシート ■目次： ・共通指定 ・配置 ・全体レイアウト ・ヘッダー ・グローバルナビゲーション ・フッター ・前のページへ戻る ・ページの先頭へ戻る ・パン屑リンク */ *{ margin: 0; padding: 0; } body { font-size: 80%; color: #333333; font-family: "ＭＳ Ｐゴシック", 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*/ @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を実現出来るように設定した。 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ボタンの表示は可能だが、ボタンの角丸表現と文字陰影を表示出来ない。 しかも、ボーダー枠に画像を表示する事も出来ない！ A) IExplorer 9 は、文字陰影の表示不可。ボックス内navボタンの表示は可能だが、角丸で表現出来ない。そして、ボーダー枠に画像を表示する事が出来ない。 B) IExplorer10 は、文字陰影の表示は可能となったが、navボタンの表示不可。ボーダー枠に画像を表示出来ない。 しかも、HTTPDで構築した自宅サーバの配信では HTML5 ビデオをマトモに視聴出来ない不具合が多発してしまった（こちらを参照)。 11（Release Preview) は、文字陰影の表示は可能だが、やはりnavボタンの表示不可。一方、ボーダー枠の画像表示が可能となった。 そして、HTTPD構築自宅サーバのHTML5 ビデオ配信でみられたIExplorer10の不具合は解消した。 ・Opera(11)以外はHTML5対応ブラウザなら問題なく背景画像 4個の表示が可能。 ・Opera(11)は、何故か？筆者が主に利用するこのKATCHサーバ配信では上手く背景画像を表示出来ない不都合がある ( _ 、) なお、 自宅サーバ と .MaciDisk 、So-Net は背景画像の表示可能だが、MOMO と MICS はKATCHと同じく最初の画像しか表示出来ない ?(゜_。)? ⇒ Opera 11.60でこの不具合は解消した ヾ(^-^)/ III. IExplorer 8でもCSS3機能を「CSS3 PIE」で実現可能か ⇒別のページで検討。 CSS3 PIEは、IExplorer6～8でもCSS3が実現出来るようにスタイルシート内でJavaScriptを呼び出す為のビヘイビアだが、すんなりと実現出来るか？を検討した。 インラインフレームで表示されない br Netscape4.xをご使用の方は、 a href="~kakonacl/sprywidget.html" target="_blank" ここをクリック /a してご覧ください。

TAGS:計画 Ken 

<<< Thank you for your visit >>>

ブロードバンド環境の動画ファンに映画予告、改造ゲーム、お宝ムービー、究極のホームシアターを！

Hot Websites