フルスクリーンの中に文字やボタンが記載されない

こんにちわ。HTML、CSSでWEBサイトを勉強中のものです。練習として草津温泉に行った思い出をテーマにWEBサイトを作っています。
写真をフルスクリーンにして現在下になってしまっている文字やボタン、ロゴなどを写真の中心に持ってきたいです。

色々調べて実践してみましたが上手くいきません。初心者でお恥ずかしいのですが手助けしていただけるとありがたいです????

『HTML』

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>草津温泉</title> <meta name="description" content="草津温泉の思い出と美味しかったお肉の紹介"> <link rel="icon" type= href="/kusatu.png">

<!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <div id="home" class="big-bg">
      <!-- トップバナー -->
      <img src="kusatu.png" id="top-baner">

        <header class="page-header wrapper">
          <h1><a href="index.html"><img class="logo" src="./images/onsen.png" alt="草津温泉ホーム"></a></h1>

      <nav>
                <ul class="main-nav">
                    <li><a href="news.html">News</a></li>
                    <li><a href="menu.html">Menu</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>


          <div class="home-content wrapper">
              <h2 class="page-title">草津温泉ホームページ</h2>
              <p>草津温泉の思い出と美味しかったご飯</p>
              <a class="button" href="menu.html">メニュー</a>

        </div>
        </div>
</body>

</html> -----------------------------------------------------------------------------

『CSS』

@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
color: #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}

/* 大きな背景画像 */
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

/* 見出し /
.page-title {
font-size: 5rem;
font-family: 'Philosopher', serif;
text-transform: uppercase;
font-weight: normal;
}
/ HOME
------------------------------- */
#home {
background-image: url(kusatu.png);
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125rem;
margin: 10px 0 42px;
}

.sub-title {
font-size: 1.375rem;
padding: 0 8px 8px;
border-bottom: 2px #0bd solid;
font-weight: normal;
}

/* ボタン */
.button {
font-size: 1.375rem;
background: #0bd;
color: #fff;
border-radius: 5px;
padding: 18px 32px;
}
.button:hover {
background: #0090aa;
}

/* iframe */
iframe {
width: 100%;
}

/* HEADER
------------------------------- */
.page-header {
display: flex;
justify-content: space-between;
}
.logo {
width: 210px;
margin-top: 14px;
}
.main-nav {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li {
margin-left: 36px;
}
.main-nav a {
color: #432;
}
.main-nav a:hover {
color: #0bd;
}

/* HOME
------------------------------- */
#home {
background-image: url(../images/main-bg.jpg);
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125rem;
margin: 10px 0 42px;
}

お手数ですがよろしくお願い致します。

m.ts10806

2020/01/02 08:58

(質問は編集できます) コードはマークダウンのcode機能を利用してご提示ください https://teratail.com/help#about-markdown https://teratail-v2.storage.googleapis.com/assets/img/help/imgQuestionTips3_3_1.png?1577268946690220 「CSSフレームワーク」は本件とはどのように関係するのでしょうか？また、「うまくいかない」は誰にも何も伝えない表現方法なので、具体的に記載しましょう。 https://teratail.com/help/question-tips#questionTips3-4-1

rsu

2020/01/02 10:10 編集

初心者ということを伝える文より現状をもっと細かく伝えてください。(????こんなマークが編集画面の左上にあるのでそれを使ってください) あとコードは ```ここに言語を入力コード ```

退会済みユーザー

2020/01/02 17:53

すいません。。。「うまくいかない」は誰にも何も伝えない表現方法なので、具体的に記載しましょう。その通りだと思います。勉強になりました。ありがとうございます

m.ts10806

2020/01/02 21:32

質問は編集できますので適宜調整してもらえればと。そのためのこのコメント欄です

行動規範の内容に同意します

回答2件

まず、フルスクリーン関連の表示をCSSだけでやることが間違いです。
JSを使うことも考慮しなければいけません。
Appleという強敵がいますので、フルスクリーンの挙動を望む場合に、100vhという値は使えません。
「なんで？」はやめてください、「そうAppleが決めたから。」です。

以上のことを加味してちょちょいと作ると

HTmL
1<div id="home" class="big-bg">
2  <img src="kusatu.png" id="top-baner">
3  <header class="page-header wrapper">
4    <h1><a href="index.html"><img class="logo" src="./images/onsen.png" alt="草津温泉ホーム"></a></h1>
5    <nav>
6      <ul class="main-nav">
7        <li><a href="news.html">News</a></li>
8        <li><a href="menu.html">Menu</a></li>
9        <li><a href="contact.html">Contact</a></li>
10      </ul>
11    </nav>
12  </header>
13  <div class="home-content wrapper" id="target">
14    <h2 class="page-title">草津温泉ホームページ</h2>
15    <p>草津温泉の思い出と美味しかったご飯</p>
16    <a class="button" href="menu.html">メニュー</a>
17  </div>
18</div>

CSS
1
2@charset "UTF-8";
3
4/* 共通部分
5------------------------------- */
6html {
7font-size: 100%;
8}
9body{
10font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
11line-height: 1.7;
12color: #432;
13}
14a {
15text-decoration: none;
16}
17img {
18max-width: 100%;
19}
20.wrapper {
21max-width: 1100px;
22margin: 0 auto;
23padding: 0 4%;
24}
25
26/* 大きな背景画像 */
27.big-bg {
28background-size: cover;
29background-position: center top;
30background-repeat: no-repeat;
31}
32
33/* 見出し */
34.page-title {
35font-size: 5rem;
36font-family: 'Philosopher', serif;
37text-transform: uppercase;
38font-weight: normal;
39}
40/* HOME
41------------------------------- */
42
43#home {
44background-image: url(kusatu.png);
45position: relative;
46width: 100%
47}
48
49#home .page-title {
50
51text-transform: none;
52}
53.home-content {
54text-align: center;
55position: absolute;
56}
57.home-content p {
58font-size: 1.125rem;
59margin: 10px 0 42px;
60}
61
62.sub-title {
63font-size: 1.375rem;
64padding: 0 8px 8px;
65border-bottom: 2px #0bd solid;
66font-weight: normal;
67}
68
69/* ボタン */
70.button {
71font-size: 1.375rem;
72background: #0bd;
73color: #fff;
74border-radius: 5px;
75padding: 18px 32px;
76}
77.button:hover {
78background: #0090aa;
79}
80
81/* iframe */
82iframe {
83width: 100%;
84}
85
86/* HEADER
87------------------------------- */
88.page-header {
89display: flex;
90justify-content: space-between;
91}
92.logo {
93width: 210px;
94margin-top: 14px;
95}
96.main-nav {
97display: flex;
98font-size: 1.25rem;
99text-transform: uppercase;
100margin-top: 34px;
101list-style: none;
102}
103.main-nav li {
104margin-left: 36px;
105}
106.main-nav a {
107color: #432;
108}
109.main-nav a:hover {
110color: #0bd;
111}
112

Js
1
2window.onload = function(){
3  const home = document.getElementById('home');
4  const target = document.getElementById('target');
5  home.style.minHeight = window.innerHeight + 'px';
6  target.style.top = (home.clientHeight - target.clientHeight) / 2 + 'px';
7}
8

投稿2020/01/03 14:43

総合スコア10429

2020/01/03 22:54

asuchi0819さん、codepenのサンプルがproユーザーではないので見られないのですが...

kyoya0819

2020/01/04 08:25

ご指摘ありがとうございます。 CodePenのバグのようなのでリンクの張り替えを行いました。アクセスできますでしょうか？

taiyakix

2020/01/04 08:25

ありがとうございます。

退会済みユーザー

2020/01/04 14:26

taiyakix様初めて質問したので使い方が分かっておらず失礼いたしました。コピペで申し訳なかったです。見直してみたら#homeと記載していたのでコピペ漏れになります。ずっとパソコンの前にいるあなたの様に早急に回答でき無かった事をお詫びします。友達や彼氏と会っていたのでご返信遅くなりました。

taiyakix

2020/01/04 22:25

私は別にずっとパソコンの前にいるわけではなく暇を持て余した中学生というだけです

taiyakix

2020/01/05 07:02

嫌味かよ

行動規範の内容に同意します

ベストアンサー

ここを見てもらったら、どうやったら書けるかわかると思います。
まず、コードはこうやって書いたほうがいいと思います。

コード

そして、cssに

css
1home {
2
3}

と書いていると思いますが、あなたが指定しているのは、id="home"なので

css
1#home {
2
3}

と書かないと意味がありません。
あと悪いんですけど、

css
1home {
2
3}
4//と
5home.page-title {
6
7}

の2つが重複しているんですけど、これはわざとですか。
そして、

html
1<img class="logo" src="./images/onsen.png" alt="草津温泉ホーム">

などと書かれても、ネイティブの画像ファイルを提示されても、codepen上で実行したところで、なんの画像かわからず、CSSも適用されないのでやめてください。

追記
ごめんなさい。きつく書いてしまったかも。でも、せめて、markdownは正しく使って欲しい。

投稿2020/01/02 09:05

編集2020/01/03 22:56

taiyakix

総合スコア427

m.ts10806

2020/01/02 12:02

#home ってマークダウンなしで書くと見出しが適用されますからね・・（teratailでよく見る現象）

taiyakix

2020/01/02 12:29 編集

確かに。

退会済みユーザー

2020/01/02 17:55

すいません、、初心者で練習中なので重複してしまいました。お怒りごもっともだと思います。ありがとうございます。

taiyakix

2020/01/03 01:16

とりあえず編集してもらえません?

kyoya0819

2020/01/03 14:24 編集

質問者さん、SNSで愚痴るのはいいですが、まずは修正しましょう。（某所で特定されていただけで、私が調べたわけではありません。

kyoya0819

2020/01/03 14:25

回答者さん、いくら人の話を聞かないからと言って「あんた」と言う言葉を使うことはよろしくないです。

taiyakix

2020/01/03 22:55

ごめんなさい。あなたの"な"のaが抜けてました。

退会済みユーザー

2020/01/04 13:57

愚痴じゃないです。初めて投稿してこれが当たり前なのかな？って疑問に思ったことをSNSに投稿しただけなのですが、、

退会済みユーザー

2020/01/04 16:16

teiyakixとりあえず敬語使ってくんない？

kyoya0819

2020/01/04 18:42 編集

質問者さんとりあえず、人の言うこと聞け、それからだ。お前がだれにあってようが、どんな用事があろうとこっちは知ったこっちゃない。そのような書き込みはただのノイズ。以上、特に怒っているわけではないのでご留意を m.ts10806さんが2度、rsuさんが１度注意しているので、それに従っていただければ幸いです。（あと、私もずっとパソコンの前にいるわけではないのでそこも合わせてご理解いただければ（加えて、二重人格等々でもないのでそこも併せてご理解いただければ

taiyakix

2020/01/04 22:40

色々言いたいことがあったけど、言いたいだけいって退会するユーザーなのね。 fuck000000は。通報しようかと思ってたからちょうどいいね

行動規範の内容に同意します

あなたの回答