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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

963閲覧

HTML・CSSで拡大縮小するとおかしくなります。誰か解決法を教えてください!

Homura_konosuba

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/23 07:43

前提・実現したいこと

HTML・CSSでゲームの攻略サイトを作っています。
ツールはvisual Studio codeです。

発生している問題・エラーメッセージ

画面を拡大・縮小すると、おかしくなります。

該当のソースコード

html・css

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>マインクラフト攻略.com</title> 6 <style> 7 body{ 8 background-color: whitesmoke; 9 background-position: center top; 10 background-repeat: no-repeat; 11 background-size: 810px; 12 background-repeat: repeat-y; 13} 14h1{ 15 text-align: left; 16 font-size: 35px; 17 border-bottom: solid #0bd; 18} 19.d{ 20 align-items: stretch; 21} 22.e{ 23 background: white; 24 color: black; 25 margin: 0% 266px; 26 height: auto; 27 padding: 10px 10px; 28} 29.f{ 30 border-style: inset; 31 border-width: 4px; 32 background: #333333; 33 color: white; 34 font-weight: lighter; 35} 36 </style> 37</head> 38<body> 39 <div class=d> 40 <div class=e> 41 <h1>【マイクラ】初心者必見!安定するまでの順序!</h1> 42 <h2> 43 皆さんこんにちは!マインクラフターの---です! 44 </h2> 45 <img src="a10aaaa.png" class="g"> 46 <h2> 47 <p> 48 今日はマインクラフトで序盤はどのようなことをすればいいのかをお教えします!ぜひ参考にしてください! 49 </p> 50 <p> 51 52 </p> 53 <p class="f"> 54目次 55 </p> 56 </h2> 57 </div> 58 </div> 59 <div class="b"> 60序盤にやっておきたいこと 61 </div class="c"> 62 <div class="b"> 63 建築がうまくなるコツ 64 </div> 65 <div class="b"> 66 おすすめMOD一覧 67 </div> 68 <div class="b"> 69 おすすめサーバー一覧 70 </div> 71 <div class="b"> 72 コマンド一覧 73 </div> 74</body> 75</html>

試したこと

私が知ってる限りのことはやりましいたが、直りません。

補足情報(FW/ツールのバージョンなど)

ツールはvisual Studio codeです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AMK

2020/05/23 07:50

>私が知ってる限りのことはやりましいたが、直りません。 みんな、あなたの知識を知りません あなたの知っていることが何なのかも知りません なので、知っている限りをもっと具体的に書かないとどこまで理解しているのか?解らないです。
Yasumichi

2020/05/23 07:53

100%で表示した場合と拡大・縮小をして表示した場合のスクリーンショットなどを載せて、何が問題なのかを具体的に表してもらえると回答がつきやすいかもしれません。
TatamiSteak

2020/05/23 08:07

まぁまぁ、質問者さんはHTMLもteratailも初心者なんですから。 「`Ctrl`+スクロール」とか、「`Ctrl`+`+`」・「`Ctrl`+`-`」で拡大縮小したときにおかしくなるって話ですかね? それとも、Webブラウザのウィンドウサイズを縮めてみるとおかしくなるって話ですかね? 質問を編集して、もうちょっと詳しい話を書いてみましょう。回答する人もだんだんあなたの伝えようとしていることがわかるようになってきます。
m.ts10806

2020/05/23 09:44

TatamiSteakさん 今日登録したユーザーだからと本当に初めての利用とは限りません。 もちろん本人以外知る由はないですが、初めてでも「それで伝わるか」は考えて投稿すべきかと思います。
kai0310

2020/05/23 13:08

> HTML・CSSで拡大縮小するとおかしくなります。 この現象がどのようなものか不明確ではありますが、marginの指定が絶対値指定だからなのでは?
guest

回答1

0

拡大縮小でおかしくなる

width及びheightの指定をしましょう。

拡大縮小の前にミスが多いです
class名の指定 ""のつけ忘れ、<h2>の中に<p> などなど。

まぁ頑張ってください(-_-;)

投稿2020/06/16 18:48

yk0002

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問