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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

2回答

2446閲覧

スマホで見た時にファーストビューの高さがうまく取れなくて困っています。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2017/09/08 08:59

編集2017/09/20 04:59

スマホで見た時にファーストビューの高さがうまく取れなくて困っています。

現在あるサイトを作っており、ファーストビューでメインビジュアルが縦横100%になるパララックスサイトを制作しています。
ほとんど完成しているのですが、スマートフォンでファーストビューでみると初期表示でデフォルトでスマートフォンの検索メニューバーなどが出ている影響か、
高さがうまく取れずロゴが上下左右中央にきていません。

実際に下にスクロールしてデフォルトのスマートフォンの検索メニューバーなどが縮小した状態で、
ロゴを押してトップにスムーススクロールでトップに戻るとファーストビューでロゴが上下左右中央にきているのがわかります。

この状態をファーストビューでも再現したいのですが、ここで詰まってしまいわからないでおります。

テストサイトのURLを載せますので、どなたか直す方法を教えていただけないでしょうか。
心優しい方のご協力何卒宜しくお願い致します。


テストサイト
こちらでは解決に至らなかったので、URLは削除させていただきました。ご協力ありがとうございました。

関係しているjs/css
jquery.bgswitcher.js
style.css


参考画像(初期表示時)
解決に至らなかったので、参考画像は削除しました。

参考画像(検索メニューなどが縮小した時)
解決に至らなかったので、参考画像は削除しました。

// 対象htmlコード <div id="top" class="wrapper"> <div id="mainvisual" style=""> <h1><a href="./"><img src="assets/images/logo-big.png" alt="TIMELESS"></a></h1> </div> <!-- #mainvisual --> </div>
// 対象css html { height: 100%; } .wrapper { overflow: hidden; position: relative; margin: 0 auto; padding: 0; } #mainvisual { width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #fff; position: fixed; overflow: hidden; top:0 !important; z-index:0 !important; } #mainvisual h1 { width: 30.4%; max-width: 228px; cursor: pointer; }
// 対象js(jquery.bgswitcher.js) jsのソースが載せきれないので、リンクを追記しておきます。。 http://37854bc53656a874.main.jp/test/timeless/assets/js/jquery.bgswitcher.js ID: test PW: test

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/08 09:17

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)を提示されたほうが回答を得やすいと思います。
退会済みユーザー

退会済みユーザー

2017/09/08 09:19

ありがとうございます!追記させていただきます!
kei344

2017/09/20 05:00

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。
guest

回答2

0

テストページのCSSは、以下のようになっています。
これは関係ありませんか?

#mainvisual h1 { width: 30.4%; max-width: 228px; cursor: pointer; margin-top: -13%; /* このページに記述されているCSSにはないプロパティ */ }

投稿2017/09/17 13:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/18 09:15

Tak_Matzさん こちらのサイトで解決できなかったので、自分で追加で調整したものになります! なので、こちらのページに追記してないのですが、これは関係ないと思います。
guest

0

ベストアンサー

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

viewportにminimal-uiを追加してフッター非表示にしてみてください。

追記

関係あるかわからないけど、同じhtml内にid=mainvisualが3つもありますね。
idは通常同一画面上に1つになるようにしたほうが良いと思います。

投稿2017/09/08 13:00

編集2017/09/08 14:00
Tak1016

総合スコア1408

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/11 17:27

コメントありがとうございます。 教えていただいた方法でやってみたのですが、何も変化が起こりませんでした。 もし可能でしたら引き続きご協力いただけますと非常に助かります。 何卒宜しくお願い致します。 mainvisualのところは調べて直してみます!ありがとうございます!
退会済みユーザー

退会済みユーザー

2017/09/20 05:02

こちら解決には至りませんでしたが、一番親身にみてくれた方なので、ベストアンサーとさせていただきます。ご協力ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問