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

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

ただいまの
回答率

90.33%

  • HTML

    9614questions

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

  • CSS

    6226questions

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

viewportを設定すると、スマホ画面の左に寄ってしまいます

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 467

garter

score 2

 前提・実現したいこと

初めてHTML&CSSでランディングページを作っている初心者です。
レスポンシブデザイン、viewportについてお聞きしたいです。

 発生している問題・エラーメッセージ

PC版を作り終え、レスポンシブデザインでスマホ用・タブレット用を制作する際に問題が発生しております。
ChromeのF12でスマホ用のプレビューを見ているのですが、viewportを設定すると、スマホ画面の左3分の1にしか表示されません。
縦長に表示され、レイアウトも崩れています。
ネットで調べた方法を試すと、変化がないかもしくは画面の左側が拡大されてしまいます。
widthはすべて100%に設定しています。

 該当のソースコード

<meta name="viewport" content="width=device-width,initial-scale=1">

ここに言語を入力
コード

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>--</title>
     <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body>
    <div class="main-wrapper">
        <div class="container">
            <div class="copy">
             <h1>ーー</h1>
            </div>
            <img src="aa.png" class="aa">
            <div class="points">
                <div class="point">
                <span class="sircle"></span>
                <h2 class="sircle-po">ーー</h2>
                </div>
                <div class="point">
                <span class="sircle"></span>
                <h2 class="sircle-po">ーー</h2>
                </div>
                <div class="point">
                <span class="sircle"></span>
                <h2 class="sircle-po">ーー</h2>
                </div>
            </div>
           </div>
     </div>
   <body>
</html>

```ここに言語を入力

body {  
margin: 0;  
font-family: "Hiragino Kaku Gothic ProN";  
}  

html,body{  
width: 100%;  
}  

.img {  
vertical-align:bottom;  
}  


h1  {  
font-size: 80px;  
color: #111e3e;  
}  

p {  
font-size: 16px;  
color: #111e3e;  
}  


.container {  
width: 100%;  
max-width: 1040px;  
padding: 0 15px;  
margin: 0 auto;  
}  

* {  
box-sizing: border-box;  
}  

.main-wrapper {  
margin-top: 60px;  
background-color: green;  
background-size: cover;  
position: relative;  
vertical-align: bottom;  
width: 100%;  
}  

.aa {  
display: inline-block;  
height: 100%;  
position: absolute;  
bottom: 0%;  
left: 50%;  
}  

.span {  
display: block;  
}  

.copy h1 {  
font-size: 46px;  
color: #111e3e;  
padding-top: 100px;  
}  

.copy span {  
font-size:80px;  
}  

.sircle {  
display: inline-block;  
width: 185px;  
height: 185px;  
border-radius: 50%;  
background-color: #111e3e;  
}  

.sircle-po {  
position: absolute;  
text-align: center;  
color: white;  
display: inline-block;  
left: 0;  
top: 0;  
width: 185px;  
font-weight: normal;  
}  

.points {  
padding: 130px 0 300px 0;  
}  

.point {  
float: left;  
margin: 0 30px;  
position: relative;  
}   


イメージ説明

 試したこと

・width=device-widthを消す
・bodyをdivで囲み、overflow: hidden;をかける
・各wrapperにoverflow: hidden;をかける
・containerにoverflow: hidden;をかける

どこのコードを乗せればよいかわからず、viewportのみの記載となってしまい、申し訳ございません。
追記すべき所があればご教授いただきたいと思います。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • yoshinavi

    2018/04/20 15:53

    回答がつかないのは、質問内容に「何をどうしたいのか?」が無いからだと思います。表現したいイメージを画像ソフトや手書き、または参照とするサイト等でも良いので、提示してください。その上で現状の「問題となっている箇所」をコードと併せてご提示されると、回答がつきやすくなると思います。

    キャンセル

  • yoshinavi

    2018/04/21 15:44

    スミマセン。質問の意味がいまひとつ理解出来ていません。「>スマホ画面の左3分の1にしか表示されません。」コンテンツ全体の表示が1/3なのでしょうか?PCとスマホでは表示領域のサイズが違いますので、見やすくするために、CSSに「メディアクエリ」を使ってレイアウトをPCやスマホに合わせて変える事が出来ます。「CSS メディアクエリ」等で検索してみてください。

    キャンセル

  • marian

    2018/04/26 17:41 編集

    上記の記述ローカルでの確認になりますが、Win7のChromeでiPhone6sのブレビューを見たところ左3分の1にしか表示されるようなことはなく正常に(横幅全体に)表示されてる事確認したのですが、この表示では意図したようにレタリングされていないのでしょうか?スマホ時のデザインはこのようにしたいという事があれば教えてください。

    キャンセル

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

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • HTML

    9614questions

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

  • CSS

    6226questions

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