teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

コードの追加をしました

2021/03/17 05:50

投稿

himeneko
himeneko

スコア1

title CHANGED
File without changes
body CHANGED
@@ -16,7 +16,95 @@
16
16
  ここに質問の内容を詳しく書いてください。
17
17
  (例)PHP(CakePHP)で●●なシステムを作っています。
18
18
  ■■な機能を実装中に以下のエラーメッセージが発生しました。
19
+ <!--ーーこのファイルはFamm/ココナラ1回目のコーディングです------>
20
+ <!DOCTYPE html>
21
+ <html lang="ja" dir="ltr">
22
+ <head>
23
+ <meta charset="utf-8">
24
+ <title>スクールFamm・おうちで子どもとママ専用webデザイナー養成講座LPトップ</title>
25
+ <meta name="description" content="在宅で受講できるママ専用Webデザイナー養成講座のご案内"
26
+ <link rel="stylesheet" href="css/ress.css">
27
+ <link rel="stylesheet" href="css/style.css">
28
+ </head>
29
+ <body>
30
+ <header class="page-header">
31
+ <p id="logo"><img src="Famm-logo.png" alt=""></p>
32
+ <nav>
33
+ <ul class="nav">
34
+ <li><a href="#">お問い合わせ</a></li>
35
+ <li><a href="#">契約内容変更</a></li>
36
+ </ul>
37
+ </nav>
38
+ </header>
39
+ <main>
40
+ <div id="mainvisual">
41
+  <img src="./images-page&banner/Topcreative.jpg" alt="" width="100%">
42
+ </div><!---mainvisualとじタグ-->
43
+ <h4>LIVE配信4月期開催決定!今月も満席間近!(※3月期も募集中)</h4>
44
+ <h4>無料電話説明会参加で「5,000円もらえる」キャンペーン実施中!</h4>
45
+ <p><img src="Amazon.png" alt=""></p>
46
+ <p>説明会終了後、申込有無のご連絡をいただいたタイミングの翌月までに、ご登録のメールアドレスにアマゾンギフト券<br>5,000円分をお送り致します。ギフト券送付の対象者については、条件がございますので、以下の「注意事項」もあわせてご確認く<br>ださい。</p>
47
+ <p><a href="#">注意事項はこちら</a></p>
48
+ </main>
49
+ <!---ここからYouTube------------->
50
+ <div class="youtube">
51
+ <iframe width="854" height="480" src="https://www.youtube.com/embed/JfgjKsFi-A0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
52
+ <iframe width="854" height="480" src="https://www.youtube.com/embed/dqMEQ-k0lyk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
53
+ </div>
54
+ <!--ここまでYouTube------>
55
+ <article class="mark1">
19
56
 
57
+ <!---ここからcssですが、スクロールできないためheaderとメインビジュアルのみの記述しかできていません---->
58
+ @charset "UTF-8";
59
+ html{
60
+ font-size: 100%;
61
+ line-height: 1.8rem;
62
+ }
63
+ body{
64
+ font-family: "遊ゴシック体", "遊ゴシック","Yu Gothic","メイリオ", sans-serif;
65
+ margin:auto;/*中央よせ*/
66
+ width: 1200px;
67
+ overflow: hidden;
68
+ }
69
+ img {
70
+ max-width: 100%;
71
+ }
72
+ header {
73
+ height: 65px;
74
+ }
75
+ /*header #logo{
76
+ float:left;
77
+ }*/
78
+ header #logo img {
79
+ width:50%;
80
+ height:auto;
81
+ }
82
+ header ul {
83
+ display: flex;
84
+ text-align: right;
85
+ }
86
+ .nav {
87
+ list-style: none;
88
+ justify-content: flex-end;
89
+ margin-right;
90
+ }
91
+ .nav li {
92
+ display: inline;
93
+ text-align: right;
94
+ margin-left: 36px;
95
+ margin-top: 21px;
96
+ }
97
+ header a {
98
+ color: #888888;
99
+ text-decoration: none;
100
+ }
101
+ .page-header {
102
+ display: flex;
103
+ justify-content: space-between;
104
+ }
105
+ h4{
106
+ margin-top: 10px;
107
+ }
20
108
  ### 発生している問題・エラーメッセージ
21
109
 
22
110
  ```

1

入力内容の変更

2021/03/17 05:49

投稿

himeneko
himeneko

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,18 @@
1
1
  ### 前提・実現したいこと
2
+ コーディング初心者です。
3
+ 現在LPの制作をしています。
4
+ HTMLを記述していた時には、数行書いては[Finder表示をさせて確認]ができていました。
5
+ それでいざCSSの記述に入り、ちゃんとCSSが効いているかを確認すべく、同様の手順で右クリック、
6
+ Finder表示で、ブラウザでの画面の確認をしたかったのですが、表示されるのはheaderとその下の
7
+ メイン画像のみで、画面のスクロールが全くできなくなってしまいました。
8
+ chromeのデベロッパーツールもありますが、そちらでもスクロールできませんでした。
9
+ cssにはposition fixは入れていません。
10
+ デベロッパーツールで検証もしましたが、警告の三角マークは出なかったです。
11
+ 何が原因で突然このような状態になってしまったのか、全くわからず困り果てています。。。。
12
+ 確認ができないことには作業が進まず、手詰まりの状態です。
13
+ 同様の現象を解決した方がいらっしゃいましたら、どうかご教示頂けますようお願い申し上げます。
2
14
 
15
+
3
16
  ここに質問の内容を詳しく書いてください。
4
17
  (例)PHP(CakePHP)で●●なシステムを作っています。
5
18
  ■■な機能を実装中に以下のエラーメッセージが発生しました。
@@ -17,9 +30,18 @@
17
30
  ```
18
31
 
19
32
  ### 試したこと
20
-
33
+ head内に記述したcssの部分
34
+ <link rel="stylesheet" href="css/ress.css"> <!--web上のリセットcssから引っ張った-->
35
+ <link rel="stylesheet" href="css/style.css"><!--自作のcssファイルパス-->
36
+ この上記二行をコメントアウトすると、当然HTMLのみの表示になりますが、画面のスクロールができます。
37
+ ❶OSの初期化
38
+ ❷サファリでも表示を試しましたがだめでした。
21
- ここに問題に対したことを記載てください
39
+ ❸サファリ、クロームの検索履歴を全削除
22
-
40
+ ❹リセットcssのファイルをダウンロードして、自分のcssフォルダに入れてリンクさせましたが同様の結果でした。
41
+
42
+
43
+ Atomを使用
44
+ MacbookAir M1チップ 11.2.3
23
45
  ### 補足情報(FW/ツールのバージョンなど)
24
46
 
25
47
  ここにより詳細な情報を記載してください。