*海外旅行のツアービデオは、「Windows Mediaムービーでホームビデオの公開 」をご覧下さい。
更新日2016/08/28サイトマップ&更新履歴を参照)
BB環境の動画ファンに映画予告,改造ゲーム,お宝ムービー,究極のホームシアターを!
当サイトは、動画の配信・視聴などテクニックの一般向け有効利用を目的に運営しています。
<雑記> について
 
 
 
 =動画視聴時の推奨システム環境=
1) OS&ブラウザ
WindowsXP以降、MacOSX10.4以降:
HTML5ビデオ対応のModern Browser
各ブラウザの問題点は Windows版 又はMacintosh版と該当セクションをご参照下さい。
例えば、Win7のIE9で 左揃え表示に不具合のあるページでは、更新をして下さい・・・解消されます。
2) マシンスペック:
Windows:PentiumIII 900MHzクラス以上
Macintosh:G3 600MHzクラス以上
3) 下り回線速度実測値: 1.5Mbps以上
あなたの回線速度計測は、BNR又はStudio Radishをご利用ください。
4) "JavaScript"と"ActiveXコントロール"又は
"プラグインの実行"を有効にしてご覧下さい。
IEエンジンでは、"ActiveXコントロールのダウンロード"も有効にして下さい。
5) Vista版 IExplorer 7は、以下のコーナーでは"保護モード"を無効にしてご覧下さい。
有効だと、ShockwaveゲームとDivX MediaムービーとIExplorer 7以前では植え込み方式の
WindowsMediaムービーも視聴出来ません!
なお、Vista、Windows 7のIExplorer 8では上記の不都合はほぼ解消されました。

  =動画狂コーナー=

 動画の再生と解析
 ・Windowsの動画再生ソフト
FLV /MPEG-4 AVC /MPEG2-TS
 ・プレイヤー補足説明
 ・メディアプレイヤーのネットワークストリーミング機能
 ・各メディアプレイヤーの字幕表示機能
 ・DXVAを使ったGPU動画再生支援機能
 ・WMPlayer12とffdshowのDXVA機能
 ・MPC HomeCinemaのBD再生機能
 ・VLC Media Playerの番外使用
 ・VLC の Web Pluginを利用した動画配信試験
 ・VLC Streamerで変換した素材でHLS配信
 ・KMPlayerのビデオキャプチャー機能
 ・ホワイトブラウザ:動画管理ソフト
動画/画像管理ソフトの仕様比較
 ・Elecard MPEG Playerコンポーネント
 ・WMPの動画再生補助ツール
ffdshow搭載デコーダの進展
 ・Win7DSFilter Tweakerの有用性
 ・Codec PackでWMPの再生補強
CCCPとK-Lite CodecPack
 ・Windowsの動画解析ツール
MPEG2-TS動画の解析・・・
MPEG-4 AVC/H.264動画の解析
FLVファイルの解析

 ・Windowsストアの動画再生用アプリ
 ・「フォト」アプリを動画閲覧ソフトとして利用

 ・Windowsストアのプレイヤーでネットワーク再生
 ・File Brickでオンラインストレージの動画を視聴
 ・Android用メディアプレイヤーの対応状況
 ・Mediatapでオンラインストレージの動画を再生
 ・iPad用メディアプレイヤーの対応動画形式

 オンラインストレージ/動画共有/動画配信システム
 ・動画をストリーミング再生可能なオンラインストレージ
 ・オンラインストレージ専用アプリの動画プレビュー機能
 ・Androidタブレットでクラウド保存動画の再生
 ・iPadでオンラインストレージ保存動画の再生
 ・
Windowsストアアプリでクラウド保存動画の再生
 ・Jolidriveでオンラインストレージの動画を視聴
 ・写真をスライドショーで再生可能なオンラインストレージ
 ・Dropboxに保存動画を公開してブラウザで視聴
 ・ホームビデオをSkyDriveで公開
 ・OneDrive 保存動画の公開と再生
 ・AndroidでGoogle Drive(ドライブ)の動画を視聴
 ・Googleドライブ内の動画を一般公開
 ・AndroidでPogoplug Cloudの動画を視聴
 ・Box(大容量クラウドストレージ) 保存動画の公開
 ・Copy(新クラウドストレージ)保存動画の再生
 ・SHARED 保存の動画を公開
 ・Flickr 保存の動画を公開したが・・・3分間しか再生
 ・Zoneramaは写真・ビデオ性能無制限無料クラウド
 ・RealPlayer Cloud 保存動画の公開と再生
 ・IDrive 保存動画は H.264/MP4に変換され配信
 ・4shared 保存の動画を公開
 ・Amazon Cloud Drive 保存動画の再生
 ・Bitcasaクラウドサービス保存動画の再生
 ・Hive保存動画のストリーム再生は無料では低画質
 ・iCloud Drive の使い勝手:Windowsユーザ視点
 ・動画共有サービスで公開した動画のウェブ埋め込み
 ・動画を公開するならYouTubeがやはりスゴ~イ
 ・Facebookに投稿した動画をウェブ上で公開
 ・ニコニコ動画に投稿動画を自前のウェブで公開
 ・FC2動画へのホームビデオFull HD素材投稿試験
 ・Dailymotionに投稿動画を自前のウェブで公開
 ・Vimeoに投稿動画を自前のウェブで公開
 ・Veohに投稿動画を自前のウェブで公開
 ・4sharedに投稿動画を自前のウェブで公開
 ・PC内動画の無料オンデマンド動画配信システム
 ・iPad向け動画配信システムの対応動画の比較
 ・メディアサーバーOrb Caster 3.20 の使用経験
 ・Orbストリーミング動画のダウンロード
 ・パーソナルクラウドサーバ Tonidoで動画配信 
 ・Qloud MediaでPC内の動画をストリーミング再生
 ・AirStreamでPC内の動画をストリーミング再生
 ・KMP ConnectでPC内動画の配信
 ・PC内動画を周知のサーバー(WebDAV等)から配信
 ・Winny/BitTorrentによるファイル共有
 ・GetASFStreamでGyaO攻略
 ・Net TransportでBIGLOBE攻略
 ・TV Bank攻略ダウンローダー
 ・Google Videoの簡単ダウンロード
 ・YOMIURI ONLINEのRTMP動画を取得する方策
 ・ストリーム動画の録画
 ・アマレココでストリーミング...キャプチャ
 ・Gregionでストリーミング...キャプチャ

 特定ファイルのウェブ配信・再利用
 ・六大ストリーミングエンコーダ
AzWM9 Script Frontend QuickTimePro
。  , DivX Converter
 ・オンデマンドムービーの作成法
 ・四大ストリーミングエンコーダ
 ・ストリーミング動画でソフトサブを表示
 ・Microsoft Expression Encoder 4
 ・ストリーミング併置字幕ファイルの表示
 ・East RealMedia Producer
 ・Real7ime Converter
 ・RealPlayer 11以降フリー版の不都合
 ・QuickTime及びMP4に変換ソフト
携帯動画変換君, QTConverter
 ・MOV2AVI, Rad Video ToolsとMPEG2AVI
 ・H.264動画ファイルの作成
 ・RipBot264の試用経験
 ・HandBrake Nightly Buildで H.265/HEVC動画へ変換
 ・H.265/HEVC動画の作成と再利用の方法
 ・Strongene HEVC/H.265 EncoderでFLV動画の作成
 ・NSVムービーのWeb配信法
 ・NSV SplitでNSV動画の再利用
 ・Riva FLV EncoderでFLVの作成
 ・FLVのWebストリーミング配信
Flash Video PlayerでFLVをWeb配信
FLVTool2:FLV修復ツール
 ・FLV Web配信ツールはMP4,MOVに対応
 ・Moyea PlayerBoxでプレイリスト付き...作成
 ・ClickBerry Editorでインタラクティブ..
 ・Flash動画の再生ソフト
→Riva FLV Player, MVKFLV, Wimpy FLV Player
。 ....., FLVP, FLV Player
 ・FLV SplitterでFLVの再生
 ・Flash Videoカット編集/変換ソフト
→RichFLV, HugFlash, FLV Extract
 ・DivX ConverterでWeb用Movieの作成
 ・Win版DivXのバージョンアップ
 ・DivX Converter 7でH.264 DivXの作成
 ・DivX Converter 10で作成したDivX/HEVCの配信試験
 ・DivX Plus for Windowsの使い勝手
 ・DivX Plus Web Player 2.1bの試用
 ・H.264圧縮MKVのWeb配信試験
 ・字幕付きH.264圧縮MKVの配信試験
 ・HTML5 ビデオと主要ブラウザの対応状況
 ・プロバイダのHTML5 ビデオへの対応
 ・HTML5ビデオプレイヤーで...字幕表示
 ・HTML5/CSS3対応オーサリングソフト
 ・HTML5ビデオプレイヤーの比較
 ・JW Player 6の使い方と字幕付き配信試験
JW Player 6でHTML5&Flashビデオをプレイリスト表示
JW Player 6でスキップ再生の可否:IEは配信方法で差異
JW Player 6の...変換ソフトで作成したMP4ビデオへの対応
 ・Flowplayer 5を使用してHTML5ビデオを配信
 ・SublimeVideoを利用したH.264ビデオの配信
 ・WebM動画作成(変換)ツール
 ・携帯動画変換君+新FFmpegでWebM変換
 ・Webm動画のHTML5配信と再利用
 ・VP9圧縮WebM動画の作成と配信方法の比較
=======
=Movie鑑賞導入コーナー=
定番の六大ストリーミング動画
 ・六大ネットムービーの帯域比較
 ・六大ネットムービーの画質比較
 ・六大ネットムービーの技術比較
 ・スーパーウーメン・・のネット比較
 ・映画・ビデオ予告編のネット比較
 ・手塚治劇場アニメ予告編
 ・オフィシャルネットムービー
 ・トリノ女子フィギュアスケート
 ・動画編集ガイドムービー
 ・ホームビデオDVD:西安の旅
 ・ホームビデオチャット
 ・増えるビデオアルバム
 ・六大ネットムービーの字幕表示の比較
各種形式の動画をメディアプレイヤーでネット再生
 ・メディアプレイヤーで各種形式の動画を ネット再生
 ・VLC の Web Pluginを利用した動画配信試験
MPEG-4 AVC/H.264動画 [まとめ]
 ・H.264圧縮MOV/MP4動画の配信試験
。 Slingbox配信の録画番組「...」を提示
 ・2D→3D動画変換ソフトによる立体視化
 ・3GP動画は、MP4と同じく配信可能か
 ・H.265圧縮MP4動画のストリーミング配信試験
 ・Flash及びHTML5..対応JW Player 5.4
 ・JW PlayerはHTML5 &Flashビデオ配信プレイヤー
 ・Pogoplug Cloud保存の動画を視聴
 ・ハイカムクラウドの..MP4ムービーの視聴
 ・YouTubeで変換済み3D動画の視聴
 ・YouTubeに投稿した2D動画を字幕付きで公開
Silverlightで受信可能な動画 [まとめ]
 ・SilverlightによるWMVの字幕表示
 ・Silverlightによるプレイリスト表示
 ・シルバーライト用プレーヤーで動画の配信
 ・SkyDriveの動画はSilverlightで配信
HTML5 ビデオ [まとめ]
 ・HTML5 ビデオの配信と画質比較試験
 ・JavaScriptでHTML5のキャプション表示
 ・JW Player 6でHTML5ビデオ.字幕表示
 ・JW Player 6で"トルコ..プレイリスト表示
 ・JW Player 6...MP4変換ソフトの適応性
 ・Leanback Player 0.7.2で..字幕表示
 ・Leanback Player 0.7.2で..プレイリスト
 ・MediaElement.js 2.1.0で...字幕表示
 ・Video.js 4でHTML5ビデオ.字幕表示
 ・Flowplayer 5でHTML5...字幕表示
 ・Flowplayer 5で...プレイリスト表示
 ・SublimeVideoを利用したH.264ビデオの配信
 ・各種プロバイダのHTML5..対応状況
WebM動画
 ・WebM方式動画の配信試験
 ・WebM変換ソフトの画質比較
 ・携帯動画変換君...でWebMの帯域比較
 ・天空の楽園アンコール王朝WebM配信
 ・VP9圧縮WebM動画の作成と配信方法の比較
HTML5 オーディオ
 ・HTML5 オーディオのブラウザ対応試験
定番プレイヤーで独立再生可能な動画
.◇Real Mediaムービー
 ・RealMedia劇場映画予告編
.◇Windows Mediaムービー [まとめ]
 ・Windows Media DVD映画
 ・Windows Media 古都 西安ツアー
 ・Windows Media エジプトツアー旅行
 ・Windows Media 浪漫紀行 北京
 ・Windows Media マチュピチュ遺跡
 ・天空の楽園アンコール王朝...5日間
 ・南イタリアアルベロベッロからナポリへ
。 スマートフォン用にMP4に変換して提供
。 JW Player 6でMP4, WebMをプレイリスト表示
。 ClickBerry Editorでインタラクティブ..
。 Moyea PlayerBoxでプレイリスト付き..
 ・トルコ周遊:エーゲ海沿岸遺跡からイスタンブールヘ
。 スマートフォン用にMP4に変換して提供
。 JW Player 6でMP4, WebMをプレイリスト表示
 ・パリから行く小さな旅 8日間:セーヌ川から...
。 スマートフォン用にMP4に変換して提供
。 JW Player 6でMP4, WebMをプレイリスト表示
。 Flowplayer 5で...プレイリスト表示

。 SublimeVideoで...プレイリスト表示

 ・こだわりのイタリア周遊 ローマからミラノへ 10日間
。 DivX/HEVCで「こだわりのイタリア周遊」を配信
。 JW Player 6でMP4, WebMをプレイリスト表示
 ・歴史と芸術に煌めくスペインの夢 8日間
。 JW Player 6でMP4をプレイリスト表示
。 
AmazingSliderの jQueryスライダーでプレイリスト表示
。 Dailymotionに投稿して提示

。 Vimeoに投稿して提示
。 Vimeo投稿動画をWOW Sliderdwで提示
。 次世代映像H.265とVP9動画に変換...
.◇QuickTimeムービー
 ・QuickTime(パノラマ)ムービー
 ・QTアニマトリックス予告編
 ・H.264movムービ:圧縮法の違い 
.◇NSV(Nullsoft Streaming Video)ムービー
 ・NSV Movie:Gyao映画(R18指定)全編
Flash Playerで受信可能な動画 [まとめ]
 ・FlashVideo:圧縮法の違い
 ・H.264圧縮型FlashVideoの比較試験
 ・multiAVCHD...メニューをFLVで提示
 ・JW FLV Media Playerで字幕付MP4
 ・JW FLV Media Playerでプレイリスト
Dropboxから配信されるFlashビデオ
 ・HDC-SD9撮影MPEG2-TS動画の配信
Googleドライブから配信されるFlashビデオ
 ・西安ツアー..Googleドライブから配信
 ・Googleドライブ内...3D映像M2TSの配信
 ・ビデオカメラで撮影したホームビデオの配信
 ・トルコ..をGoogleドライブから一般公開
 ・BDビデオのリップ動画を字幕付きで配信
Facebookから配信されるFlashビデオ
 ・Xacti DMX-HD1000で撮影したMP4の配信
ニコニコ動画から配信されるFlashビデオ
 ・MP4ないしWMVを投稿して公開
FC2動画から配信されるFlashビデオ
 ・MP4, FLVを投稿して公開
 ・MPEG2, FLVを視聴限定で投稿
DivX Plus Web Playerで受信可能な動画 [まとめ]
 ・DivX MediaのWeb配信試験
 ・DivX Media劇場映画予告編
 ・H.264圧縮MKVの比較試験
 ・DivX/HEVCビデオのストリーミング配信試験
 ・DivX Plus Web PlayerでHTML5...試験
番外ストリーミング動画
 ・Java&Flash家族アルバムムービー
 ・Java&Flash孫のアルバムムービー
 ・FlashをHTML5へ変換して配信
 ・Shockwaveスクリーンセーバ
 ・ShockwaveムービーCD作成

 ・360度全天球パノラマ写真(敷地内ストリートビュー)
スマートフォン用ストリーミング動画の配信
TS動画のHTTP Live Streaming(HLS)配信
JW Player 6.8でHLS Streamingの配信
無料オンラインストレージの動画を公開

=自宅特選動画サーバー=
自宅特選動画サーバー
▽一般コーナー
 ・劇場映画特選入り予告編
 ・Real Media劇場映画予告編
 ・Windows Media劇場映画予告編
 ・推薦DVD映画予告編2
 ・バイオレンス映画予告編
▽会員/R18鍵コーナー
 ・センシャル邦画DVD予告編
 ・アルバトロスDVD予告編
 TV-CM三大ムービー比較
 
ED治療:シルデナフィル  
 ・
リトル/ボックスDVDClub映画予告編
 
Honeyピックムービー  
 Excit秘蔵ムービー
 SSL暗号部屋
 ・ネットワークカメラの導入
 インターネットライブ

=Flashゲームコーナー=
Flashゲームコーナー
 ・おじゃるの射的ゲーム
 ・トーマスのジグソーパズル
 ・ガオのクレイ射撃 
 ・イチロー野茂のゲーム対戦
 ・リス次郎の好物取り
 ・こじゃるの兵士撃破
 ・ポケモンの怪獣退治
 ・バイキンのUFO割り
 ・Flashゲーム使用上の注意・参考

=Shockwaveゲームコーナー=
Shockwaveゲームコーナー
 ・3D-UFO撃墜ゲーム
 ・3D迷路ゲーム
 ・バスケットゲーム
 ・迷路ゲーム
 ・キー合わせゲーム
 ・Shockwaveゲーム使用方法・注意

=ネット動画紹介リンク=
=番外タイトル=
HTML5&CSS3
 ・HTML5/CSS3対応オーサリングソフト
 ・無料のWYSIWYG型 HTMLエディターの選別
 ・ブラウザのHTML5+CSS3表示能力
 ・CSS3の作成方法と閲覧上の注意
 ・CSS3 PIEでIE8でもCSS3機能を表現
 ・IETesterで歴代IExplorerの..を検証
 ・HTML5表示...配信サイトの不具合
 ・プロバイダのHTML5 ビデオへの対応=スマフォ=
 ・HTML5 Audioの設定方法と各ブラウザの対応状況
 ・FlashをHTML5へ変換可能なツール
 ・HTML5へ変換したFlash表示をスマートフォンで検証
Virtual Machine(仮想マシン)
 ・Vista対応「仮想マシン」ソフトの比較
 ・Virtual PC 2007の使用経験
 ・VMware Server,VMware Player 2
 ・VMware Player 3.0の性能
 ・VMware PlayerへMac OS X Yosemiteを導入
 ・VirtualBoxの使い勝手
 ・QEMU on Windows 0.9.0は・・・
 ・Mac版VirtualBoxの使い勝手
 ・SheepShaver:Classic Macエミュレータ
Vitual Private Network/Virtual Network Computing
 ・Hamachiでファイル共有
 ・TinyVPNで仮想LANの利用
 ・SoftEther/SoftEther VPN 2.0の使用
 ・VPN+UltraVNCでPC遠隔操作
 ・インターネット経由WOLの設定
 ・PaketiX Desktop VPNでPC遠隔操作
 ・VNCによるPC遠隔操作
 ・PCのパーソナルクラウド化ソフトで動画配信
スマートフォン/タブレット
 ・Androidで無料オンラインストレージの動画を視聴
 ・ハイカムでAndroid撮影動画を簡単編集して公開
 ・Android用動画配信システムの対応動画の比較
 ・NAVER Nドライブで動画をストリーミング再生
 ・BdriveでPC内の動画をストリーミング再生
 ・Air VideoでPC内の動画をストリーミング再生
 ・Androidの動画をWiFi経由でPCへ直接転送
 ・iOS版Photo Sphere Cameraでパノラマ写真の作成
 ・Android端末の静止画面をキャプチャする方法
 ・Battery DefenderでAndroidの電池消費を節約
 ・既存のPC用サイトをスマートフォン用に適応化
 ・jQuery Mobileで当サイトをスマートフォン用に構築
 ・自動切換えバナーとバルーンポップアップの設置
 ・WOW SliderでjQueryを使ったスライドショーを作成
 ・iOS Simulatorの導入とiPhoneシミュレータ
 ・ドコモ dtab 01使用上つまずいた箇所をメモ
 ・Bluetooth File Transferをドコモ dtab 01で使用
その他
 ・Quad Q6600のオーバークロック
 ・FileXCで動画ファイルのP2P送信
 ・SSLサーバによる暗号化通信
 ・WebDAVファイルサーバー
 ・MacでX11環境の導入・・・



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




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

    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.