HTML&CSS PC→モバイル表示に変更すると、bodyタグの幅が1/3ほどになる
HTML&CSSの模写をしていました。
レスポンシブデザイン作成中
表示をPC→モバイル(960px以下)に切り替えると、bodyの幅がおかしくなります。
bodyにはCSSでプロパティは何も設定していません。
@media (max-width: 960px){
body { width: 100%;}
}
としてみても特に変わりませんでした。width: ;で設定するとその幅に変わりますが。初期値で100%になっていないのは何ででしょうか?
head>
meta charaset = "utf-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
link rel="stylesheet" href="index.css">
link rel="stylesheet" href="index2.css">
link rel="icon" href="pic/favicon.ico">
title>ランディングページを活用したマーケティング戦略なら株式会社FREE WEB HOPE
/head>
</div>
<div class="header-inner">
<div class="header-top">
<div class="header-left">
<img src="pic/logo.png" alt="ロゴです">
</div>
<div class="header-right">
<a href="" class="tel">TEL:03-3525-8971</a>
<a href="" class="mark-info">集客のご相談はこちら</a>
</div>
</div>
<div class="key-words">
<img src="pic/mv_hl01_pc.png" alt="いい戦略いいコピーいいデザインランディングページならfreewebhope">
</div>
<div class="performance-fv">
<img src="pic/mv_point02_pc.png" alt="業界問わず年間100本の制作・運用">
</div>
<div class="application-info">
<a href="#"><img src="pic/cta_btn.png" alt=" LP制作してみる"></a>
</div>
</div>
<div class="temporary-box">
<img src="pic/performance_en.png" alt="">
</div>
</div>
<div class="performance-inner">
<div class="performance-contents">
<h2>BtoBやBtoCを問わず</h2>
<h1>年間100本の制作・運用</h1>
<p>BtoBやBtoCでもブランドイメージを落とさず
<br>
顧客獲得を実現する
</p>
</div>
<div class="question">
<ul>
<li>現在運用しているランディングページの成果が悪い</li>
<li>新たに制作をしたいがどう創っていいかわからない</li>
<li>ブランドイメージを刷新したい</li>
<li>依頼している代理店の対応に不満がある</li>
</ul>
</div>
<div class="performance-img">
<img src="pic/performance_loop.png" alt="成果物">
</div>
<div class="customer-voice"> <!--JSわからん-->
<div customer-top>
<h1>期待を超える成果にたくさんの喜びを頂いております</h1>
<div ckass="customers-intro">
</div>
</div>
</div>
<section class="member">
<div class="member-inner">
<div class="member-logo">
<img src="pic/member_en.png" alt="メンバー">
</div>
<div class="member-text">
<p>お客様の期待を超えるために真面目に、しつこく</p>
<h1>成果にこだわる仲間</h1>
</div>
<div class="memb-container">
<img src="pic/member_pic01.jpg" alt="" >
<img src="pic/member_pic02.jpg" alt="" >
<img src="pic/member_pic03.jpg" alt="" >
<img src="pic/member_pic04.jpg" alt="" >
<img src="pic/member_pic05.jpg" alt="" >
<img src="pic/member_pic06.jpg" alt="" >
<img src="pic/member_pic07.jpg" alt="" >
<img src="pic/member_pic08.jpg" alt="" >
<img src="pic/member_pic09.jpg" alt="" >
<img src="pic/member_pic10.jpg" alt="" >
</div>
</div><!--member-inner-->
</seciton><!--member-->
</div><!--peformance-inner-->
</div>
</div><!--bg-wrapper-->
<section class="appeal">
<div class="appeal-inner">
<img class="appeal-txt-img" src="pic/cta_txt01_pc.png" alt="">
<img class="appeal-main-img" src="pic/cta_point.png" alt="">
<a href=""><img src="pic/cta_btn.png" alt="" class="appeal-btn"></a>
</div><!--appeal-inner-->
</section><!--appeal-->
<section class="specific">
<div class="sp-temporary-box">
<img src="pic/strong_en.png" alt="">
</div>
<div class="specific-wrapper">
<div class="specific-title">
<h1>マーケティング施策の企画から設計するため売れる
<br>
ランディングページが作れる</h1>
</div>
<div class="specific-contents">
<div class="specific-content01">
<div class="div-left01">
<img src="pic/strong_01_num_pc.png" alt="">
<div class="sp-txt-top01">
<h2>売れるページにする</h2>
<h1>段違いの企画を提案</h1>
</div><!--top-->
<div class="sp-txt-down01">
<p>ビジネスモデルの理解、エンド顧客の理解はもちろんのこと、商品だけにフォーカスするのではなくでなくWEBマーケティング全体の視点からコンバージョンが取れるランディングページの戦略を設計します。</p>
<p>ご提案→制作→広告運用→分析・改善が1つの会社で一貫しているので、目標がブレることがありません。
</p>
</div><!--down-->
</div><!--div-left-->
<div class="div-right01">
<img src="pic/strong_01_pic01_pc.jpg" alt="">
</div>
</div><!--content01-->
<div class="specific-content02">
<div class=" sp-top02">
<img src="pic/strong_02_num_pc.png" alt="">
</div>
<div class="specific-bottom02">
<div class="sp-title02">
<h2>9年間<span>あらゆる業種を経験</span></h2>
<h1> 豊富な実績</h1>
</div>
<div class="sp-content02">
<p>
創業から業種業界を問わずLPを年間100本以上作ってきました。世の中のビジネスモデルは【BtoB】【BtoC】この中でも【物販】【サービス】さらにこの中でも【ストック型】【フロー型】に別れます。(BtoGなどもありますが、おおよそはということで・・)私達はこの8つのビジネスモデルを様々経験しております。例えば東証一部上場企業が提供するエンタープライズ向け製品や設立1年のスタートアップ企業の提供するC向けサブスクリプション商品など、経験の幅を強みとしております。
</p>
</div>
</div>
</div>
<div class="specific-content03"></div>
<div class="specific-content04"></div>
<div class="specific-content05"></div>
</div>
</div><!--specific-box-->
</section>
<!--main-->
1 likes