コーディング初心者です。
現在、LPの依頼を受けて作業をしております。
(Macbook Air M1チップ 11.2.3 でAtomを使用しています)
HTMLの記述段階では、数行書いてはFinderで表示させて確認、、と繰り返し行い
問題なく出来ていました。ところがいざCSSの記述に入って、ちゃんと効いているかどうか
を確認しようと思い、同様の「Finderで表示」をしたところ、LPの最上部(headerとメイン画像のみ)が表示され、トラックパットを二本指でシャカシャカしてもスクロール出来ません。
LPですので、結構な長尺で、メイン画像の下には他の素材が色々詰まっています。
ブラウザをchromeからsafariに変更してみたのですが、同じでした。
またOSの初期化、検索履歴の削除、色々やっているのですが、、、お手上げです。
因みに、head内に記述したリセットCSSは
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
で、Web上に公開されているものから引っ張ってます。
もちろんその下段に自分のCSSファイルも記述しています。
この二つのリンクをコメントアウトすると、当然の事ながらHTMLだけになって、Finder表示ができ、スクロールも出来ます。でもこれではCSSの確認が出来ないので意味がありません。。。
cssのファイルをダウンロードして、CSSフォルダに入れてリンクさせてみたのですがそれもだめでした。どなたか、このような事例を解決された方はいませんか?
教えていただけると助かります。
よろしくお願い申し上げます。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
原因は HTML にあるかも知れません。
開始タグがあるのに、終了タグがないとか、構造的な問題があるのでは?
デベロッパーツールを使えば、エラー箇所の指摘が出るかも知れません。
ブラウザーの表示結果だけでなく、自分が書いたコードも目視で確認した方が良いです。
コードを読み返せば不具合が見つかる場合があります。結果しか見ない人は不具合を見落とします。
ご回答ありがとうございます。
今デベロッパーツールで検証してみたのですが、特に警告の黄色い三角は出てきませんでした。
以前はちゃんと確認できていたのになんで急にできなくなるのか不思議です、、、、
No.1
- 回答日時:
困ってるポイントがよく理解できないのですが、HTMLの開発をしたいのであれば、以下が便利です。
・GoogleChromeを使って、「デベロッパツール」を起動する
CSSの適用状況などがすぐに目視できます。
また、デベロッパツールで「キャッシュを無効にする」というのも操作を覚えておくと便利だと思います。
ご回答ありがとうございます。
クロームのデベロッパーツールは使わず、MacのFinder表示の方が簡単に確認できるので、いつもそっちを使っています。右クリックで選択するだけでブラウザでの表示が確認出来ますので、、
キャッシュは上記に書いた通り、検索履歴は全て削除済です。
positionをfixなどにしたわけでもないのになんで画面がスクロールしないのか全くわかりません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- Ruby htmlの記述で link rel=stylesheet href=ress.cssの指定をする l 1 2023/04/02 21:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでのpdf資料のリンク方法
-
【OpenCV】BGRからHSVへの画像変換
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
[twip]から[pixel]への変換
-
同じページの最上部へ戻るボタ...
-
HTMLファイルの一部の画像だけ...
-
htmlでのページの作り方を教え...
-
web制作の初心者です。車のHP...
-
alt属性を付けるとは?
-
【PHP+lightbox2】 キャプショ...
-
正規表現でリンクタグを削除す...
-
右クリック禁止タグについて
-
アドレスがあっているのにバナ...
-
HTMLタグの画像貼り付けのことで
-
画像リンクの上に文字リンクを...
-
バルーン(?)表示の仕方(ボ...
-
タブレット端末の拡大率を大き...
-
画像を重ねて表示したい
-
サムネイル画像をクリックする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
IMGタグでTIFF画像を表示
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
拡張子無しで画像を表示したいです
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
クリックしても、リンクに飛ば...
-
予約語の表示について
-
HTMLでデスクトップの画像がでない
-
崩れたレイアウトが更新すると...
-
カーソルを合わせると文字が出...
-
カウンターのHTMLソースを教え...
-
画像クリックでクリップボード...
-
tifファイルが表示されない
-
IFRAME内に収まるように画像を...
おすすめ情報
body タグにoverflow:hiddenを書いた事が要因でした。解決しました!