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

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

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

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

CSS

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

Q&A

解決済

1回答

682閲覧

ローカルのHTMLの見た目がおかしい…チェックすべき場所はどこですか?

hacosato

総合スコア48

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/27 02:48

ローカルのHTMLの見た目が昨日からおかしくなってしまいました…。
わたしの環境の問題のようなのですが、チェックする個所を教えていただけますか?

現状

ローカルにHTMLファイルがあります。
めちゃ古いフォーマットのデータで <font size="1"> のような感じで、
CSSを使わずに文字の大きさを指定しています…。

こちらChromeで開いたところ、文字の大小関係がばらばらの見た目になります。
デベロッパーツールで見てみたら、たとえば

size:3 → 16px
size:1 → 28px

のような感じです。同じサイズを指定しても、場所によって仕上がりの見た目が異なります。
ソースを表示したところ、HTML自体は意図通り読み込まれています。

少なくとも先週までは同じファイルを開いていて意図通りの見た目になっていたので、
こちらの環境の問題だと思っています。

文字の大きさ以外は大丈夫そうです…。

やったこと

Chromeの設定を初期化しましたが変わりませんでした。
Safari、Firefoxで見たところ意図通りの見た目になりました。

環境

Google Chrome 72.0.3626.119
Safari 12.0.3
Firefox 65.0.1
macOS 10.13.6

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

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

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

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

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

azuapricot

2019/02/27 02:50

コードが何もないのでなんともいえませんが、 Chromeのキャッシュクリアはしましたか? F12を押してディベロッパーツールを開く→更新ボタン右クリック→キャッシュの消去とハードの再読み込み
maisumakun

2019/02/27 02:52

「デベロッパーツールで見てみたら」とありますが、どこからCSSがかかっているかをDeveloper Toolsから確認できませんか?
mutsuki22

2019/02/27 02:55

まずキャッシュを疑ったのですが、クリアしても駄目ですか?
m.ts10806

2019/02/27 02:55

推測が必要な部分が多すぎると結局憶測にしかならず質問者さんへの回答は難しくなります。 具体的に、現象が再現可能な情報を提示してください。
hacosato

2019/02/27 03:08

さっそくたくさんありがとうございます! ■azuapricotさん 「キャッシュの消去とハードの再読み込み」やりました! 状況変わりませんでした…。 ■maisumakunさん 見た範囲ではぜんぶelement.styleから来ていることになっています。 <font size="1">の部分はx-smallに読み替えられているようでした。 font[Attributes Style] { font-size: x-small; color: rgb(0, 0, 0); } それがpxになるとき、同じ<font size="1">でも10pxになったり、28.188pxになったりしています…。 ■mutsuki22さん 「キャッシュの消去とハードの再読み込み」はだめでした…。 ■mts10806さん そうですよね…。 再現しそうなHTMLを作ってみます!
m.ts10806

2019/02/27 03:22

ん?わざわざ作らずとも今のhtmlを質問本文に提示してもらえれば良いのですが
yoshinavi

2019/02/27 03:30

>わたしの環境の問題のようなのですが・・・ → こう思われた理由は?何か心当たりでもあるのでしょうか?
hacosato

2019/02/27 05:07

■mts10806さん いまのHTMLが公開できないのと無駄に長いので、問題点洗い出す意味でも短いもの作ってみます! ■yoshinaviさん 理由1:先週まで問題なく見られていたファイルがいま見たときにうまく見えない。 理由2:同じファイルを見ているほかのひとは問題ない。 ためです。 また、デベロッパーツールを開かずに普通に見る分には問題ないと気づきました…。 デベロッパーツールを開くと表示が崩れます(toggle device toolbarはどちらにしても崩れる)。 情報整理して質問文をまとめ直します。 みなさまアドバイスいただきありがとうございます。 質問の時点で洗い出しが甘くてすみません…????
azuapricot

2019/02/27 05:11

ディベロッパーツールを開かなければ問題ないということは 画面サイズに影響していたりしませんか?
hacosato

2019/02/28 01:13

■azuapricotさん 「画面サイズに影響」というのは、ウィンドウの大きさの話でしょうか? それであれば大きさを変えたりしてもとくにかわらず、 デベロッパーツールを開く→表示が崩れる デベロッパーツールを開かない→表示問題なし という感じでした。 また、再現できるHTMLを作り出そうとしているのですがなんだかよくわからなくなってしまっているのでもうすこし時間をかけて練ってみます…。
guest

回答1

0

ベストアンサー

  • シークレットウインドウで開く (設定が既定値なら、全拡張Off)
  • 全ての拡張を無効化or削除する
  • Google Chromeのプロファイルを削除する
  • Google Chromeのクリーンインストール
  • 現象を再現可能な最小限のコードを作成し、トリガーとなるコードを特定する

Re: hacosato さん

投稿2019/02/27 03:01

think49

総合スコア18162

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

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

hacosato

2019/02/27 05:07

やってみてまたご報告します!
hacosato

2019/03/01 12:23

再現できるHTMLを作っているうちに、よくわからなくなってしまいました…。 一旦整理して、またわからないことが出ればご質問します。 お付き合いいただきありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問