質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

IEにてズームするアニメーションがナビバーと大きく重なる

削除済ユーザー
削除済ユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

954閲覧

投稿2020/05/17 10:48

ズームして画像が切り替わるアニメーションを実装しましたが、IEのみ画像の上部分が大きく重なって(最初から拡大されている?)しまいます。
その他ブラウザは元の大きさから始まります。
heightの指定など変えてみましたが原因わかりませんでした。
修正方法わかる方お力添えよろしくお願いいたします。

HTML

コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- ファーストビューのズームフェード --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> <!-- fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" /> <title>SHOP</title> <link rel="stylesheet" href="css/style.css" /> </head> <body data-spy="scroll" data-target="#navbarResponsive"> <!--スクロールした所がアクティブになる--> <!-- navimenu --> <nav class="navbar navbar-expand-md navbar-light bg-white sticky-top"> <div class="container-fluid"> <!--左右に余白なし--> <div class="logo-wrapper"> <a href="#" class="logo anchorlink"> <img src="img/ロゴ" class="logo-img" alt="logo" /> </a> <div class="logo-text"> RECRUIT </div> <!-- /.logo-text --> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a href="#" class="nav-link">TOP</a> </li> <li class="nav-item"> <a href="#service" class="nav-link anchorlink">SERIVCE</a> </li> <li class="nav-item"> <a href="#service" class="nav-link anchorlink">SERIVCE</a> </li> <li class="nav-item"> <a href="#service" class="nav-link anchorlink">SERIVCE</a> </li> <li class="nav-item"> <a href="#service" class="nav-link anchorlink">SERIVCE</a> </li> <li class="nav-item"> <a href="#service" class="nav-link anchorlink">SERIVCE</a> </li> <li class="nav-item sns-menu"> <a class="nav-link">LINK</a> <ul class="sns"> <li> <a href="#" target="_blank" class="twitter" ><i class="fab fa-twitter"></i ></a> </li> <!-- /.twitter --> <li> <a href="#" target="_blank" class="facebook" ><i class="fab fa-facebook-square"></i ></a> </li> <!-- /.facebook --> <li> <a href="#" target="_blank" class="instagram" ><i class="fab fa-instagram"></i ></a> </li> <!-- /.instagram --> </ul> </li> </ul> </div> </div> </nav> <header class="header"> <!-- image slider --> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 背景画像1 --> <div class="swiper-slide"> <div class="slide-img" style="background-image: url('img/画像1');" ></div> </div> <!-- 背景画像2 --> <div class="swiper-slide"> <div class="slide-img" style=" background-image: url('img/画像2'); " ></div> </div> <div class="top-title-content"> <h1 class="top-title"> テキスト </h1> <!-- /.top-title --> <h2 class="top-sub1">テキスト</h2> <h2 class="top-sub2">テキスト</h2> </div> </div> </div> </header> <!-- Javascript --> <script src="js/script.js"></script> </body> </html>

SCSS

コード $green: #8bfac3; $blue: #7eacf5; *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { /* ルートのフォントサイズを10pxに設定しておく */ font-size: 62.5%; } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: #fff; color: #333; font-size: 1.6em; /* ルートのフォントサイズを1.6em(16pxと同等のサイズ)に設定 */ font-weight: 500; line-height: 1.6; overflow-x: hidden; } h1 { font-size: 36px; font-weight: bold; } h2 { font-size: 24px; } article, aside, footer, header, nav, section, main { display: block; } ul, li, img{ border: 0; margin: 0; padding: 0; } a { color: inherit; outline: none; transition: all 0.6s ease; text-decoration: none; &:hover { text-decoration: none; color: inherit; } } a:hover { transition: all 0.6s ease; } img { border: none; height: auto; max-width: 100%; vertical-align: top; } ul, li { list-style: none; } .content-wrapper { width: 100%; margin: 0 auto; max-width: 1500px; } .inner { max-width: 1100px; margin: 0 auto; } .title { text-align: center; } .subtitle { text-align: center; font-size: 3.6rem; margin-top: 16px; font-weight: bold; } .title-green { background-color: $green; padding-top: 30px; padding-bottom: 30px; } .title-blue { background-color: $blue; padding-top: 30px; padding-bottom: 30px; } /*========================== NAVBAR ============================*/ .container-fluid { padding: 0; } nav { height: 80px; } .navbar { padding-right: 0; padding-left: 0; } .nav-link { margin-right: 30px; } .navbar-toggler-icon { width: 30px; height: 30px; } .logo-wrapper { text-align: center; margin-left: 5%; } .logo-text { font-size: 1.4rem; letter-spacing: 9.8px; } .sns-menu { position: relative; cursor: pointer; } .sns { position: absolute; top: 56px; background-color: #fff; display: none; } .fab { font-size: 3rem; margin-top: 10px; margin-left: 10px; margin-right: 10px; } .fa-twitter { color: #55acee; } .fa-facebook-square { color: #1d7fff; } .fa-instagram { color: #8b09b2; } /*=========================== HOME =============================*/ /* ズームフェード */ @-webkit-keyframes zoomUp { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes zoomUp { //1.15倍させる指定 0% { transform: scale(1); } 100% { transform: scale(1.15); } } .swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img { //12秒かけて拡大させる -webkit-animation: zoomUp 12s linear 0s; animation: zoomUp 12s linear 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slide-img { background-size: cover; background-position: center center; //背景画像は中央を軸に表示させる height: 600px; //600pxの高さで表示させる } .top-title-content { width: 100%; color: #fff; text-align: center; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .top-title { font-size: 6rem; font-family: "Noto Sans Japanese", sans-serif; font-weight: 700; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); } .top-sub1, .top-sub2 { font-weight: bold; margin-top: 30px; font-size: 5rem; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。