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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

スマートフォン向け表示設定について

feeen
feeen

総合スコア1

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0評価

0クリップ

186閲覧

投稿2022/01/26 18:31

編集2022/01/28 17:11

よくわかるHTML5+CSS3の教科書第3版のサンプルサイトをデベロッパーツールで表示したものです。
ダウンロードしたコードなので、ミスはないはずなのですが、
この隙間はどうやったら埋まるのでしょうか?

tablet.css pc.cssにはまだ何も書かれていません。

html

<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>株式会社サンプルサイト</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="tablet.css" media="screen and (min-width: 600px) and (max-width: 999px)"> <link rel="stylesheet" href="pc.css" media="screen and (min-width: 1000px)"> </head> <body> <header> <div id="logo"> <img src="images/logo.png" srcset="images/logo2x.png 2x" alt="株式会社サンプルサイト"> </div> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">お知らせ</a></li> <li><a href="#">製品情報</a></li> <li><a href="#">サービス</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> <picture> <source media="(min-width:600px)" srcset="images/mv-1000.jpg, images/mv-2000.jpg 2x"> <img src="images/mv-s600.jpg" srcset="images/mv-s1200.jpg 2x" alt="日本のサンプルのリーディング・カンパニーを目指します。"> </picture> </header> <main> <article> <h1>サンプルだからこその“カタチ”がある</h1> <p>わかりやすいサンプルはどうあるべきなのか? その答えを知っているかどうかで<a href="#">サンプルの出来映え</a>は決まってきます。これはサンプルのテキストです。これはサンプルのテキストです。 </p> <p>これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。 </p> </article> <div id="sub"> <article> <h2>見えない部分へのこだわり</h2> <p>これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。 </p> </article> <article> <h2>最高のサンプルを驚きのプライスで!</h2> <p>これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。 </p> </article> </div> </main> <footer> <div id="footlinks"> <section> <h3>オンラインショップ</h3> <ul> <li><a href="#">これはサンプルリンク</a></li> <li><a href="#">サンプルのリンク</a></li> <li><a href="#">これはサンプルリンク</a></li> <li><a href="#">サンプルのリンク</a></li> <li><a href="#">これはサンプルのリンク</a></li> </ul> </section> <section> <h3>アフターサービス</h3> <ul> <li><a href="#">サンプルのリンク</a></li> <li><a href="#">サンプルリンク</a></li> <li><a href="#">これはサンプルのリンク</a></li> <li><a href="#">サンプルリンク</a></li> </ul> </section> <section> <h3>お客様サポート</h3> <ul> <li><a href="#">サンプルリンク</a></li> <li><a href="#">これはサンプルのリンク</a></li> <li><a href="#">これはサンプルのリンク</a></li> <li><a href="#">サンプルリンク</a></li> <li><a href="#">これはサンプルのリンク</a></li> </ul> </section> <section> <h3>社会活動・環境活動</h3> <ul> <li><a href="#">これはサンプルリンク</a></li> <li><a href="#">サンプルのリンク</a></li> <li><a href="#">サンプルリンク</a></li> <li><a href="#">これはサンプルのリンク</a></li> </ul> </section> </div> <p id="copyright"> <small>Copyright © 2018 sample site. All rights reserved.</small> </p> </footer> </body> </html>

base.css

/* ======================================================= * ページ全体 * ======================================================= */ body { margin: 0; border-top: 7px solid #0086e9; color: #000; background: #fff; font-family: sans-serif; } main, #footlinks { margin: 1.2rem; } a:link, a:visited { color: #0086e9; } a:hover { color: #000; } h1, h2, h3 { margin: 0; color: #000; line-height: 1; } /* ======================================================= * ヘッダー * ======================================================= */ /* ======================================================= * メインコンテンツ * ======================================================= */ /* ======================================================= * フッター * ======================================================= */

ヘッダーやメインコンテンツの設定はまだしていないので、完成した状態ではないのですが
書内では、隙間がないイメージが載っているので何かしらが間違っているのだと思います。
イメージ説明

イメージ説明

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

m.ts10806

2022/01/26 21:44

ご自身が書かれたコード(提示の画像が再現できるコード)をテキストでマークダウンのcodeにて全て提示してください。
Lhankor_Mhy

2022/01/27 00:51

コードをご提示ください。
Lhankor_Mhy

2022/01/28 01:36

picture要素の4つの画像について、それぞれの幅を教えてください。
feeen

2022/01/28 07:37

mv-の数値が幅だと思います。 それぞれ1000px,2000px スマホ用が600px,1200pxです。 よろしくお願いします。
Lhankor_Mhy

2022/01/28 07:48

問題を把握しました。

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。