システムメンテナンスのお知らせ

以下のサイトは<footer>の(C)2020 YYY-studio.
がスマホ画面で閲覧した場合、かなり下がっていて
スクロールしないと見えてきません!
そもそも
スマホで閲覧すると、バック色の緑が馬鹿みたいに広く
他のリンクが画面は、ほぼスマホサイズに収まっているのもあります。
だから、<footer>の(C)2020 YYY-studio.はスクロールしないと見えない
と思います。
それで!
 (C)2020 YYY-studio.を上に上げたいのですが!HTML側から
以下のHTMLに <td>height="10"</td>を組み込みましたが
まったく変化なしです。
 どんなソースを組めば、高さの調整ができますか?
よろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>切り絵作品集</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body id="index">

<!-- header始まり -->
<header>
<div class="logo"><!--P80・P109-->
<a href="index.html"><img src="images/top.png" alt="TOP"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="Flo.html">Flower</a></li>
<li><a href="hover-Dis.html">Disney's</a></li>
<li><a href="Lea.html">Leaf</a></li>
</ul>
</nav>
</header>

<div id="wrap">
<h2>切り絵作品絵集</h2>
<h2>皆様に、私の作品をお見せすることができとても光栄です。</h2>
</div>
<!-- wrap終わり -->
<footer>
<td>height="10"</td>
<small>(C)2020 YYY-studio.</small>
</footer>

</body>
</html>

質問者からの補足コメント

  • うれしい

    どうもすみません!
    参考書をベースに、私のHPを作成に当たり
    参考書をちゃんと見て、
    (C)2020 YYY-studio.
    がちゃんと、レスポンシブの画面内収めること
    に成功しました!
     CSS側の変更前(問題)
    #index footer {/*P144(C)2017 Hattori-studioの位置等*/
    width: 960px;
    line-height: 300px;
    margin: 400px auto 0 auto;
    text-align: left;
    line-height: 30px;
    background-color: transparent;/*フッター文字の背景を透明*/
    }

      補足日時:2020/06/27 04:19
  • うれしい

    以下の変更しました。
    #index footer {/*P144(C)2017 Hattori-studioの位置等*/
    width: 960px;
    margin: auto 0 auto;
    text-align: left;
    background-color: transparent;/*フッター文字の背景を透明*/
    }

    以上ですが
     持論ですが
    margin: 400pxでヘッダ間の距離が空いたので、
    これを削除宇
    その他ですが!
    line-height: 30px;が2個入っていました。
    これは!
    この問題解決に当たり、入力しました。
    二個あるのは、重なっていたことに今気づきました。

      補足日時:2020/06/27 04:27
gooドクター

A 回答 (2件)

こんにちは



レイアウトや見え方の質問をしながら、HTMLだけを提示されても何もわかりませんね。

>かなり下がっていてスクロールしないと見えてきません!
普通に position:fixed とかじゃダメなのでしょうか?
(stickyという方法もあるけれど)
https://developer.mozilla.org/ja/docs/Web/CSS/po …

><td>height="10"</td>を組み込みましたが
意味不明です。(ブラウザで確認してみましたか??)
そもそもですが、td要素はtr要素の子要素として設定されているものです。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

※ HTMLとCSSを落ち着いて学習なさった方が近道と感じます。
 あとは、このようなところをご利用なさるのもひとつの方法かと。
 http://www.htmllint.net/html-lint/htmllint.html
    • good
    • 1
この回答へのお礼

ご回答くださいまして、ありがとうございました。
チェッカーですが
やっぱり
<td>height="10"</td>
に問題ありでした。
 最近使うように私もなりましたが
今回は使っていません!
 使うべきでした。
今後ともよろしくお願いいたします。

お礼日時:2020/06/27 04:30

Campus2


 ・・・・・どんなソースを組めば、高さの調整ができますか?・・・・・・・・・・・・・・・・

正しい htmlゃ cssを記述すれば良いでしょう。

少なくとも、htmlのページは htmlゃ cssとで構成されていること、htmlなどの基本的な記述方法を理解しないと、問題は永遠に解決しませんね。
まずは、
<footer>
<td>height="10"</td>
<small>(C)2020 YYY-studio.</small>
</footer>
というような記述がありえないことを理解することから始めることを、強くお勧めします。

当面の対策としては、
<link href="css/style.css" rel="stylesheet">
を消したらどうなるかみてください。

ご参考に↓
https://oshiete.goo.ne.jp/qa/11613017.html
http://www.tohoho-web.com/wwwbeg.htm
http://www.tohoho-web.com/css/basic.htm
    • good
    • 1
この回答へのお礼

ご回答くださいまして、ありがとうございました。
今後ともよろしくお願いいたします。

お礼日時:2020/06/27 04:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

gooドクター

このカテゴリの人気Q&Aランキング