Q&A
ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1
<meta name="viewport" content="width=device-width">と<meta name="viewport" content="width=device-width, initial-scale=1">の違いはなんでしょうか？
テンプレコードでは<meta name="viewport" content="width=device-width, initial-scale=1">でも、でもスマホに合わせて画面ぴったりになりますが、私のコーディングだとそうはいきません。
<meta name="viewport" content="width=device-width">だとスマホの画面の大きさになりました。
どうしたら<meta name="viewport" content="width=device-width, initial-scale=1">でもスマホに合わせて画面ぴったりになりますか？
ソースソード
html
</body> </html><div id="gallery"> <a name="gallery"></a> <h2 class="subMidashi">制作物</h2> <div id="work"> <p>以下のようなのを制作いたします。</p> <ul class="clearFix"> <li><a href="#site">Webサイト</a><a href="#Illustrat">イラスト</a><a href="#bannerrogo">バナー・ロゴ</a></li> <li></li> <li></li> </ul> </div> <div id="illustImg"> <div id="bannerrogo" class="illustBox clearFix"> <h2>バナー・ロゴ</h2> <h3>閲覧者の興味をひきつけ、欲しい！と思わせるバナー広告、企業のイメージをシンプルかつ魅力的に伝えられるロゴを制作します！</h3> <p class="img"><a class="lightbox" href="common/images/imgPortfolio01.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio01.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio02.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio02.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio03.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio03.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio04.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio04.png" alt="ポートフォリオ" /></a></p> </div> <div id="Illustrat" class="illustBox clearFix"> <h2>イラスト</h2> <h3>ゆる可愛いどうぶつのイラストが専門分野です。たとえば愛犬や愛猫(もちろんうさぎさんやハムちゃんも)をイラストにされるのはいかがでしょうか？承ります！</h3> <p class="img"><a class="lightbox" href="common/images/imgPortfolio01.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio01.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio02.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio02.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio03.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio03.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio04.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio04.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio05.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio05.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio06.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio06.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio07.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio07.png" alt="ポートフォリオ" /></a></p> </div> <div id="site" class="illustBox clearFix"> <h2>webサイト</h2> <h3>例えば、お店や病院を開業したけれどもっとみんなに知ってほしい！という方！事業に沿ったイメージにピッタリのサイトを作ります！</h3> <p class="img"><a class="lightbox" href="common/images/imgPortfolio01.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio01.png" alt="ポートフォリオ" /></a></p> <p class="img"><a class="lightbox" href="common/images/imgPortfolio02.png" title="説明が入ります。説明が入ります。説明が入ります。"><img src="common/images/imgPortfolio02.png" alt="ポートフォリオ" /></a></p> </div> </div> <div id="contact"> <h2 class="subMidashi">お問い合わせ</h2> <a name="contact"></a> <div class="mail"> <h2>お仕事承ります！<br> こちらのメールアドレスにお願いします。</h2> <p class="mail"><a href="mailto:webcreatoryoko@ryokosite.work">webcreatoryoko@ryokosite.work</a></p> </div> <footer> Copyright Ryoko All Rights Reserved.</footer> </div> </div> <p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>
ソースコードを記入しました css
cssはこちら
@charset "utf-8";
body html{
width: 100%; height: 100%;
}
body {
margin: 0px;
padding: 0px;
color: #806C68;
font-size: 20px;
line-height: 2;
font-family: 'YuMincho';
background-image:url(../images/背景.png);
background-size: cover;
-webkit-text-size-adjust:none;
}
h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form, figure, th, form {
margin: 0px;
padding: 0px;
font-size: 100%;
font-weight: normal;
}
ul {
list-style-type: none;
}
ol {
padding-left: 40px;
padding-bottom: 15px;
}
img {
border: none;
max-width: 100%;
height: auto;
vertical-align: middle;
}
table {
border-collapse: collapse;
font-size: 100%;
border-spacing: 0;
}
iframe {
width: 100%;
}
a {
color: #666;
transition: 0.4s;
}
a:hover {
color: #cd6052;
text-decoration: none;
}
#container {
width: 100px;
height: 100%;
}
#main {
text-indent: -9999px;
position: fixed;top: 0px;z-index: -1;
width: 100%;
height:100%;
}
header {
height: 75%;
}
header #ryokosite img {
width: 15%;
position: fixed;
left: 1%;
top: 5px;
}
#ryokosite1 img{
position:relative;
left:400px;
width: 50%;
height: 50%;
top:10px;
}
@keyframes about {
0% {
opacity: 0;
}
100% {
opacity: 5;
}
}
.subMidashi {
color:#fff;
font-size: 30px;
background: #FEA993;
border: 2px dashed #F7F9CC;
border-radius: 10px;
box-shadow: 0 0 0 5px #FEA993;
width: 900px;
margin: 10px 10px 10px 375px;
padding: 0 0 0 10px;
}
#ryokosite, #menu1, #menu2, #menu3 {
animation-name: about;
animation-duration: 3S;
animation-fill-mode: both;
}
#ryokosite a:hover, #menu a:hover {
opacity: 0.5;
}
#ryokosite1 img{
width: 800px;
height: 500px;
}
#menu1 {
position:fixed;
left: 15%;
top: 30%;
width: 10%;
animation-delay: 0.1s;
}
#menu1 table {
width: 100%;
border-spacing: 0;
margin: 0;
}
.text h3{
font-size:25px;
}
.textBox h3{
font-size:25px;
}
.textBox {
margin: 35px 15px 15px 400px;
padding: 0 30px;
width: 750px;
}
.textBox table th {
width: 150px;
margin: 15px 0 0 0px;
padding: 0;
}
.textBox table td {
padding: 20px 0 0 50px;
text-align: start;
}
.photoTextBox .photo {
width: 200px;
float: left;
margin: 15px 0 0 400px;
padding: 0;
}
.photoTextBox .text {
margin: 35px 15px 15px 400px;
padding: 60px;
width: 750px;
}
.photoTextBox .h3 {
margin: 35px 0px 0px 35px;
padding: 50px;
width: 600px;
}
.photoTextBox .text p {
margin: 15px 0 0 0;
padding: 0;
}
#menu2 {
position:fixed;
left: 5%;
top: 50%;
width: 10%;
animation-delay: 0.4s;
}
#illustImg {
width: 900px;
margin: 50px 0px 35px 450px;
padding: 0;
}
#illustImg h2{
font-size:25px;
}
#illustImg .img {
padding: 20px 0 16px 32px;
float: left;
width: 300px;
height: 300px;
}
#illustImg .img img {
border: 8px solid #ffffff;
}
#work {
width: 900px;
margin: 55px auto 0 395px;
}
#work p a{
font-size: 30px;
margin: 25px 15px 15px 20px;
color: #fff;
text-shadow: 0 0 15px #cd6052;
font-family: 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', sans-serif;
}
#illustImg h3 {
width: 750px;
font-size: 20px;
}
#work ul li a {
display: block;
margin: 0 0 0 35px;
font-size: 93%;
list-style-type: none;
background: #FEA993 6px 0.9em;
border-radius: 5px;
padding: 2px 10px 2px 10px;
float: right;
}
#work ul li a:hover,
#work ul li a:active {
background: #F8ABA6 url(../images/iconArrowPageWhite.png) no-repeat 6px 0.9em;
color: #ffffff;
text-decoration: none;
}
.clearFix {
zoom: 100%;
}
.clearFix:after {
content: " ";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
#menu3 {
position:fixed;
left: 15%;
top: 70%;
width: 10%;
animation-delay: 0.7s;
}
.mail h2 p {
margin: 35px 15px 15px 400px;
padding: 60px;
width: 750px;
}
footer {
text-align: center;
}
@media screen and (max-width:480px){
body{
font-size: 20px; /*文字サイズ*/
line-height: 1.5; /*行間*/
}
#ryokosite1 img {
position:relative;
top: 10px;
padding: 50px 0px 10px 200px;
}
header #ryokosite img {
position:fixed;
left: 4%;
top: 10px;
width: 20%;
margin:0 50px 0 0px;
}
#menu1,#menu2,#menu3{
width: 15%;
}
#menu1 {
position:fixed;
left: 5%;
top: 20%;
}
#menu2 {
position:fixed;
left: 5%;
top: 35%;
}
#menu3 {
position:fixed;
left: 5%;
top: 50%;
}
#illustImg .img {
padding: 20px 10px 16px 32px;
float: left;
width: 600px;
height: 600px;
}
}
テストしたデバイスとブラウザを教えていただけますか？
また、コードはマークダウンで書いた方がいいです。
https://teratail.com/help/question-tips#questionTips3-5-1
デバイスはスマホ（アンドロイド sh-01l）でPCで見たブラウザはクロムです（ディベロッパーツール）
回答1件
0
ベストアンサー
こんにちは。
<meta name="viewport" content="width=device-width">と<meta name="viewport" content="width=device-width, initial-scale=1">の違いはなんでしょうか？
まず前提として、ご提示のページの横幅が1350pxで作られていることを確認してください。
ですので、たとえば横幅375pxのiPhone8で閲覧すると、どうがんばってもページがはみ出します。
initial-scaleは、大雑把に言うとはみ出したときにどうするか、ということに影響します。
以下、正確さよりもわかりやすさを優先してご説明しますので、実際の仕様などと説明が異なる場合があります。
initial-scaleとは、つまり「スケールの初期値」です。
では、スケールは何かというと、これは縮小/拡大率です。
たとえば、デバイス幅が375pxの時にページ幅が750pxのページを表示した場合、スケールは375/700=0.5となります。
さて、ご提示のページ幅が1350pxで作られていることはさきほど確認した通りですが、この場合のスケールはどうなるでしょうか。375/1350=0.277...です。つまりご提示のページは全体を表示するためにおよそ4分の1に縮小されて表示されている、ということになります。
ところで、initial-scale=1を指定した場合、この0.277...が強制的に1にされるため、等倍で表示されます。しかしスクリーン幅は375pxしかないのですから、1350pxの内の4分の1ほどしか表示されません。
あふれて表示されていない部分は横スクロールして見ることになります。
以上が、<meta name="viewport" content="width=device-width">と<meta name="viewport" content="width=device-width, initial-scale=1">の違いです。
以下は蛇足になります。
前記の通り、375pxのデバイスで1350pxのページを表示しようとすると、小さくなるかスクロールが必要になるかするため、あまり見やすいとは言えません。
そこで、「デバイス幅ごとにレイアウトを用意して、ページ幅をデバイス幅に合わせる」というデザインが生まれました。これを「レスポンシブデザイン」と呼びます。
ご興味があるようでしたら、検索などをしてみるといいかもしれません。
投稿2021/01/30 03:12
総合スコア36960
あなたの回答
tips
プレビュー
