動画ヘッダーの実装方法とコンテンツの重なりを解消する方法について

前へ 次へ
このQ&Aのポイント
  • 動画ヘッダーの実装方法とコンテンツの重なりを解消する方法について教えてください。
  • フルスクリーンでの動画ヘッダーの場合、positionをfixにして全体まで広げる方法もありますが、positionをabsoluteにしてスクロールした際に流れるヘッダーにしたい場合、その実装方法やコンテンツの重なりを解消する方法について教えてください。
  • ビデオの上にdiv要素を作成して高さを合わせる方法も試しましたが、拡大や縮小した際にコンテンツが重なったり表示が崩れたりします。この問題を解決するための方法について教えてください。
回答を見る
  • ベストアンサー

動画ヘッダーについて

有識者の皆様、教えていただけませんでしょうか。 コーディング初歩レベルです。 動画ヘッダーにする際に、よくわからないことがあります。 フルスクリーンでの動画ヘッダーの場合ですとpositionをfixにして 全体まで広げてあげれば良いと思うのですが、 positionをabsoluteにして、スクロールした際に流れてゆくヘッダーに したいと考えています。 高さはビデオサイズに従うような形で横幅は100％という感じにしたいのですが、 その際にヘッダーより下のコンテンツ（コンテンツ部分に設置したバナーやテキスト） などがビデオの上に来てしまいます。 これを避けるためにビデオの上にdiv要素をつくりキャッチコピーなどをつけて heightで高さを合わせることもやってみたのですが、 拡大や縮小した際に、やっぱりコンテンツ部分が重なってきてしまったり 表示がくずれてしまったりします。 これらはどのように解決したらよろしいのでしょうか。 topからざっくりですが100px幅くらいの高さにロゴとグローバルメニュー、 その下に動画を配置、その下からコンテンツとなりバナーが3つとなります。 以下、実装方法の解説をして頂いているサイトさんから引用させて いただきました。 【HTML】 <body> <video preload autoplay muted loop class="background-video"> <source src="/video/video.mp4"> <source src="/video/video.ogv"> </video> <div class="wrapper"> <h1>テキスト</h1> <p>Lorem Ipsum</p> </div> </body> 【CSS】 .background-video { position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } .wrapper { position: absolute; top: 50%; left: 0; width: 100%; z-index: 1; } 実装方法までは良いかと思ったのですが、 実際にやってみるとどうしてもコンテンツの部分が上に来てしまうため、 いろいろなサイトを参考にしてみましたが、 思ったようにうまくできません。 今までにも何度か挑戦してこの問題があって挫折してきているだけに、 今後のためにも解決しておきたいと考えております。 普段皆さまがやっている方法や上のコードの場合だとこうなるなど、 どちらでも大丈夫です。 ご教示頂く上で皆様が普段されていらっしゃることから学ばせていただくことで、 生きた知識の習得と現場力を高めたいと考え質問させていただきました。 お手数かとは思いますが、何卒よろしくお願い致します。

  • CSS
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

js使うと記載した後考えましたが、それposition;absoluteである必要がないと思います。 普通に ビデオ メニュー とボックスを並べればいいと思います それでメニューにマイナスマージンとれば完成じゃないでしょうか？

queschoooon
質問者

お礼

本当にありがとうございます。

queschoooon
質問者

補足

muuming2001　様 いろいろとご考察くださいまして、誠にありがとうございます。 引き続きご指摘の点も含めてトライしていきたいと思います。

その他の回答 (2)

回答No.2

私ならjavascript使います。やったことはないのでcssだけで実現可能かもしれませんが・・ ブラウザの幅によってビデオの縦幅は可変なので、初回表示時とwindowサイズ変更時にvideoの縦幅を取得し必要数マージンかパディングを取る。

queschoooon
質問者

お礼

真摯ご対応くださいまして、 誠にありがとうございました。

回答No.1

もう少し　質問をピンポイントにされたほうが良いと思います。 「思ったようにうまくできません。うまくいく方法教えてください。」 だと、質問者さんの頭のなかでどうやりたいかの正解像を把握するという余計な労力が必要です。 どこがうまくいかないのか単純化したうえで質問されたほうが良いと思います。 このままでも答えてくれる優しい人も居るでしょうが…

queschoooon
質問者

お礼

muuming2001　様 なんとか解決できました。 ありがとうございました。

queschoooon
質問者

補足

muuming2001　様 ご指摘いただきまして、誠にありがとうございます。 ご指摘をいただきまして、自分のやりたいことを再考してみましたところ、 動画にabsoluteを指定した場合、コンテンツが動画に被さらないように 改善したい。ということがしたいと見えてまいりました。 こちらのサイトが非常にイメージに近いものとなります。 http://www.foodconnection.jp/recruit2017/ http://dena.com/jp/recruit/students/ お手数ですが、引き続きまして、何卒よろしくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 1カラムのリキッドレイアウトについて。

    １カラムのサイトを作っています。 背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。 【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div> 　→これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。 文章などのコンテンツがないため、背景画像が全画面で表示されないのです。 どのようにしたら意図する表示が可能でしょうか？ できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。

    • 締切済み
    • CSS
  • ヘッダー・フッター固定HTMLに関して

    ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0;　padding:0;　overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0;　height: 100%;　width: 100%;} body > #flashcontents {height:100％;　position: absolute;} #contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。

    • 締切済み
    • CSS
  • ヘッダーのみ固定について

    ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ 　　margin: 0px; 　　padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>

    • ベストアンサー
    • HTML
  • footerを{position:absolute;bottom:0p

    footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 　　　　　　　　　　 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。

  • footerの背景が切れて、背景画像が見えてしまう

    かなりハマってしまいまして、ご相談させて下さい。 添付画像の上の図になる形で下記コードにてhtml/cssを記載しました。 青のimg.bgはウィンドウ幅によって比率を保ったまま横100%で可変します。 containerの縦幅は決まっていて、img.bgがウィンドウ幅が横に広がっても、 container、contents、footerはz-indexで上に乗せ、あくまでもcontainerの 高さ600pxのみが表示できるようにしています。 通常のウィンドウサイズや縦にウィンドウを伸ばした場合は問題ないのですが ウィンドウを横一杯に伸ばした時に（添付画像の下の図）footerの下から img.bgが見えてしまいます。 wrapperで縦横100%の値にしていて、footerの背景画像もimg.bgを 隠せる十分な長さのものを用意しているのですが、最後のcopyrightを 入れた所から切れてしまいます。 横一杯に伸ばした際に、img.bgの長さに合わせてfooterで隠すには どのようにしたら良いでしょうか？ ご指導の程、どうぞ宜しくお願い致します。 下記、不要部分は省いたcss/html記載いたします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ html,body{ width:100%; height:100%; position:relative; } #wrapper{ width:100%; min-height:100%; height:100%; background-color:red: position:relative; } body > #wrapper{ height:auto; } img.bg { /* Set rules to fill background */ min-width:1000px; min-height:586px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: absolute; top:0; left:0; z-index: 0; } #container { width:95%; height:500px; position: relative; overflow: hidden; z-index: 4; } #contents{ width:100%; background-color: green; position: relative; z-index: 2; } #footer{ width:100%; background: url(../img/footer_black.jpg) left top repeat-x; background-color: black; position: relative; z-index: 3; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ HTML ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head>...略...</head> <body> <div id="wrapper"> <img class="bg" src="img/blue_BG_pic.jpg" alt="" /> <div id="container">...略...</div> <div id="contents">...略...</div> <div id="footer">...略...</div> </div><!--/wrapper--> </body> </html>

    • 締切済み
    • CSS
  • CSSに追加した、footer記述が不完全か　

    footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。 どうかご教示のほどお願いします。 （例題を参考にして記述したものです。） html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px;　　（例題は、 left: ０; であるが、大幅に左にずれる。） bottom: 0; width: 960px; （例題は、width: 100%;　であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。） height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }

    • ベストアンサー
    • CSS
  • ヘッダー画像を幅一杯にすると高さが縮小されてしまう

    ホームページを作成しています。ヘッダー用に用意した写真をブラウザの横幅いっぱいに表示し、高さも指定したもので表示したいのですが、思うようにできません。ヘッダーの画像サイズはwidth:1800px　height:483pxです。今の状況は横幅は表示サイズをどう変更しても枠いっぱいに表示されてはいるのですが、どういうわけか高さが縮小されて表示されてしまっていて、メイン項目との間が大きく開いてしまっています。 <html> <head> </head> <body> <div class="headbg"><img src="head_bg.jpg" width="100%" border="0" alt=""></div> </div> <div class="main">/* ここからメイン項目が入ります*/ </div> </body> </html> /* CSSは抜粋してこのような状態です*/ html,body { height:100%; } .headbg { /* ヘッダーを幅いっぱいにする為のボックス*/ width: 100%; height:483px; border:0px solid #F00; position:absolute; margin:0px; top:0; left:0; overflow:hidden; } .main { /* メインボックス*/ height:960px; width: 900px; min-width:900px; background color:#FFF; padding: 20px 0px 0px 0px; margin-left:auto; margin-right:auto; text-algn:left; margin-top:290px; border:0px solid #999; } どなた様かどうかご教授頂けませんでしょうか？ どうぞ宜しくお願い致します。

  • onClickで画像を消し、下の部分を選択する方法

    javascript超初心者です。 どなたか、解決法を教えて頂けないでしょうか？ ●解決したい事 onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。 IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。 IEでは出来るので、他のブラウザでも出来るのではないかと思ってしまいます。 何を変えればいいのでしょうか？ どうか宜しくお願いします。 ソース抜粋 <body> <span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span> <div id="wrapper" style="position:absolute; top:0px" width="1080" height="1500"> コンテンツ </div> </body> 上記のソースのwrapper下側700px部分しか選択できないのです。 どうか宜しくお願いします！ 　

  • CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

    CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>

  • フッター固定時のdivの背景について

    フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する