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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

9707閲覧

レスポンシブサイトの縦スクロールがスクロールされない

user-name1

総合スコア13

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/06/15 10:41

前提・実現したいこと

自作のポートフォリオサイトのレスポンシブ対応のでご質問させていただきます。

(現在の進捗)
PC用サイトは1画面(画面いっぱい)で作成し、自分なりには完成しました。
そこで今度は作成したサイトを元にスマホ、タブレッド用にレスポンシブ対応するためコーディングを行なっていますが、実際に作成したサイトをディベロッパーツールで確認するとサイトの縦スクロールされない状況です。
本来であればタブレット・スマートフォンサイトの場合は縦長のサイトであるため、headerからfooterまでスクロールされるはずですが、作成したサイトはfooterまでスクロールがされないようです。

自作サイトのURL

https://nixer18.github.io/index.html

→本来であればまだいくつかのページがありますが、今回はHOMEのページだけです。
※起きている状況はすべてのページ同じです。
※スマートフォンのレスポンシブはまだ作成しておりません。(タブレッドのみ)

試したこと

自分と同じエラーの方がいないかGoogleで調べました。

(調べた内容)

https://hacknote.jp/archives/25099/
→HTML要素に以下要素を追加する

css

1html { 2 -webkit-overflow-scrolling: touch; 3}


https://techacademy.jp/magazine/9428
→body要素に以下要素を追加する

css

1body { 2 overflow: scroll; 3}

最後に

もし可能でしたら、自分が作成したサイトのコーディング内容に関しまして、
お気づきの点や改善点などありましたら、合わせてご教示いただけるとありがたい所存です。
※完全独学で今回はじめてポートフォリオサイトの作成をしているからです。

以上、お手数ですがよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

サイトを拝見しましたがそもそも縦長になる要素がないと思います。
※質問にコード載せたほうがいいですよ、ある程度は。
「サイトのURL貼ってやるから問題点はそっちが探せよオラァ」って感じに見えます。

html

1<body> 2 <!--- Header ---> 3 <div class="wrapper"> 4 <header class="page-header"> 5 </header> 6 7 <!--- Main ---> 8 <section class="main"> 9 </section> 10 11 <!--- Footer ---> 12 <footer> 13 </footer> 14 </div> 15</body>

css

1.main { 2 display: flex; 3 align-items: center; 4 text-align: center; 5 justify-content: center; 6 width: 100%; 7 min-height: 100vh; 8}

で画面の縦いっぱいに広がっていて
header,footerはposition:absolute;でtop:0;とbottom:0;で生えてくるので
どうあってもサイト画面は端末の画面よりほんのちょっと縦にはみ出る程度の高さになるので
スクロールできないというよりかコンテンツ自体のheightがないです。
スクロールするには端末の画面がheaderより短いぐらいじゃないとだめですね。

ここまで書いて思ったんですがコンテンツでなにかミスってるんですかね?アップし忘れとか?

投稿2020/06/15 10:59

sousuke

総合スコア3828

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

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

user-name1

2020/06/15 12:52

sousuke様 ご教示いただきありがとうございました。 また、ご指摘もありがとうございます。 たしかに言われた通り「間違いの箇所探してください」と捉えられてもおかしくないですね。 すみませんでした、 今後質問する際はサイトURLとプラスして別途コードも記載するようにします。 内容に関してですが、 「スクロールできないというよりかコンテンツ自体のheightがない」 →たしかにその通りでした、  トップページのコンテンツは「Welcome to my Portfolio site」のタイトルのみで、  その他に自己紹介や他に作成したポートフォリオを表示するページがあるのですが、  その部分はコンテンツがいくらかはあるので、縦に伸びるような形になるかもしれません。  また、1ページで完結する長いサイトに変えてみようとも考えています。  参考サイトのようにすれば縦にスクロールできるサイトが作成できるかもしれません。  参考URL↓  http://portfolio.outomoput.info/#skills    今あるページも新しく作成するサイトも  もう一度作成してみて、コンテンツを確認してみようと思います。  ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問