Q&A
「一部分が崩れていると、報告がありました。」とありますが、何がどう崩れているのか詳しく書いて下さい。そうすることでアドバイスが集まりやすくなると思います。逆に今の情報だけだと何が崩れているのかわからないのでアドバイスしようがない状態です。
回答者からのアドバイスで、内容を追記しています。
ポートフォリオサイトを会社に提出したのですが、pcでみると、一部分が崩れていると、報告がありました。
自身のpc（mac book pro）で見ると、崩れてないのですが、
会社からのメールで、
「参考までに私の使用しているノートPCの解像度をお伝えしますね。」
＜解像度：1366×768＞
と伝えられたのですが、自身で色々調べたのですが、解決方法がわからないので、こちらに行き着きました。
崩れているのは、asideの部分だけが、上にズレてたんです。 それ以外に気になる点があり お願いします。
http://egoseimei-portfolio.rossa.cc/index.html
宜しくお願い致します。
書かれている状況が再現するコード全体（HTML/CSS）か、再現するURLを提示されたほうが回答を得やすいと思います。
御指導ありがとうございます。
表示が崩れているというブラウザは何でしょうか？
回答4件
0
こんばんは、もしかするとご存知のこともあるかもしれませんが
私がよく使っているツール、サイトを書いてみます。
ブラウザの開発ツールというのがあります。
https://dotinstall.com/lessons/basic_chrome_dev_v2/28002
https://dotinstall.com/lessons/basic_chrome_dev_v2/28003
ここで要素のサイズの見方を説明してくれているので今回は
この辺りを見るといいかもしれません。
ブラウザごとにツールもそれぞれあるので
一部のブラウザで崩れている場合はそのブラウザで確認したほうがいいです。
今はだいぶブラウザごとの差異が少なくなったと思いますが
以下のサイトでhtml,cssの対応状況が調べられます。
https://caniuse.com/
あと以前知人の相談を受けた時に盲点だったのが
確認している人のブラウザの拡大率が違うというのがありました。
winだとctrlキーと+キーで拡大みたいな動きをするので
ctrlキーと0キーで100%に戻して確認したほうがいいです。
参考になれば幸いです。
投稿2018/03/08 15:21
総合スコア468
0
ベストアンサー
提示されたURLを私の環境で見た場合、ChromeやFirefoxは崩れた感じは見受けられませんでしたが、ie11で見ると崩れています。
ie11はHTMLの<section>部分からおかしくなっています。CSSを見るとflexやfloatが使われているので、再度コード確認や調整が必要と思われます。
崩れているのは、asideの部分だけが、上にズレてたんです。
これは上記が<section>部分が原因と見られます。
また、「ニュース」「ニューコンテンツ」「保険を知る」がfloatされていますが、これをdivにまとめると、上が崩れても、ここから下が引っ張られることは無くなるので、一度、ご検討して見てください。
投稿2018/03/08 19:20
総合スコア3523
ありがとうございます。試してみます！sectionがおかしいんですね。確認してみます。
修正して提出するにあたって、URLはやっぱり変えないとダメですよね
修正後、関連ファイルを再UPすればURLは変えなくて良いです。その際に、先方のPCにキャッシュが残っている可能性がありますので、キャッシュクリア後に確認して貰えば良いと思います。
CSSの確認で、分かりづらい場合は、各要素の背景に色を一時的に付けるとチェックしやすいかと思います。
floatのコマ落ち（ズレ）原因の多くは親要素の幅に子要素が収まっていない場合や、クリア（解除）不足が多いので、注意してください。
なるほど。わかりやすくて、勉強になります！ありがとうございます。
「ie11はHTMLの<section>部分からおかしくなっています。CSSを見るとflexやfloatが使われているので、再度コード確認や調整が必要と思われます。」の部分なんですが、どう修正すればいいかわからないです。よかったら教えていただけたら、嬉しいです。。
ちなみにIE11だけが崩れてるみたいなんですが、
IE11対策として、webに載っていたのですが、
IEの最新のレンダリングが適用されると書いていました。
<meta http-equiv="X-UA-Compatible" content="IE=edge">を記述すればいいっていうわけではないですか？
ご提示頂いたURLをみた時に、私の環境ではChromeやFirefoxでは問題なかったので、IE11のレンダリング問題だと推測しますが、通常は質問者さんの疑問のとおり<meta http-equiv="X-UA-Compatible" content="IE=edge">を<head>内に記述すれば良いはずです。
（CSSやJavascriptの読込よりは上に記述してください）
それでも崩れる場合、flexによるバグや記述の問題が考えられますので、以下を参考にしてみてください。
■teratailの過去質問
https://teratail.com/questions/80934
■ie11のflexバグ・ハック対応
https://www.seojuku.com/blog/ie-edge-css.html
0
投稿2018/03/08 14:37
編集2018/03/08 14:47
総合スコア527
あなたの回答
tips
プレビュー
