Q&A
模写したサイトと、質問者さんが記述したコードの 2 つを質問文に追記していただけませんか？
前提・実現したいこと
WEBサイトのコーディング模写をしております。
テキストエディタはSublime Textを使用しています。
HTMLとCSSの入力を全て完了しChromeのデベロッパーツールで
確認すると、自分が模写したほぼ全ての要素の横幅と高さが
模写サイトと異なります。
模写サイトの横幅と高さを一致させる方法をご教示いただけないでしょうか。
発生している問題・エラーメッセージ
模写サイトのある要素のComputed
width 1486.5px
height 489.984px
自分が入力した同じ要素のComputed
width 1821.6px
height 570.375px
模写サイトのurl
http://icedog.xsrv.jp/portfolio6/
入力コード
htmlのコード
cssのコード
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0;
background-color: #FAFAFA;
width: 100%;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0;
background-color: #FAFAFA;
width: 100%;
}
試したこと
模写サイトのHTMLとCSSをコピーしても
同じ現象が発生しました。
ご返信下さり、ありがとうございます。
模写サイトのurlと入力コードを追記いたしました。
ご指摘くださり、ありがとうございます。
誤コメント
追記された質問者さんが記述したコードでは、高さは常に 0 になるはずです( https://codepen.io/anon/pen/YgJdNg )。570.375px にはなり得ません。
他に HTML, CSS, JavaScript などは一切書かれていませんか？もし書かれているのであれば、それらすべてを含めた上で、具体的にどの要素の高さが合わないのかを教えていただけませんか？
HTML,CSSを全て入力致しました。JavaScriptはありませんでした。
https://codepen.io/anon/pen/jJedMz#anon-login
上記サイト該当要素(11行目class="header")の高さを確認すると、87.185pxに変更されていました。
無知で申し訳ございません。
> 上記サイト該当要素(11行目class="header")の高さを確認すると、87.185pxに変更されていました。
質問者さんが書いたコードと模写サイトで、該当要素の高さを確認しましたが、どちらも同じ高さ( 約 87.2px )のようです。
これは、質問文にある「ほぼ全ての要素の横幅と高さが模写サイトと異なる」という動作と異なりますが、質問者さんの環境では、質問者さんが書いたコードと模写サイトで`.header`の高さが異なる、ということでしょうか？
スクロールバーで横幅を変更すると、模写サイトの横幅と高さがほぼ一致しました。
模写サイトの幅を合わせると、ほぼ全ての要素の横幅と高さが一致し、解決出来ました。
本当にご迷惑おかけしました。ありがとうございました。
自己解決されたのであれば、どのような手順で解決したのか、回答して質問を解決済みにしていただけませんか？
手順・回答を入力し、解決済みに変更いたしました。
ご助言下さり、ありがとうございました。
そんな幅直接指定とかで満足してるようじゃあなたが何をやりたいのかよくわかりませんね。
回答2件
0
とりあえずはコードを提示してください。
コードがなければ想像でしか答えられません。
回答者はエスパーではありません。
とりあえず想像して確認してほしい点は以下になります
・キャッシュのクリアはできているか
→F12を押してデベロッパーツールを開く、更新ボタン右クリック→キャッシュの消去とハードの再読込
・高さや幅は「％」表示になっていないか
→％表示の場合パソコンの画面によって幅が変わります。
今回だとかなり中途半端な幅なので、どこかの要素が％表示で指定されているのでは？
投稿2019/03/20 00:21
総合スコア2341
ご回答下さり、ありがとうございます。
以下がコードになります。
htmlのコード
<header class="header">
<div class="container">
</div>
</header>
cssのコード
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0;
background-color: #FAFAFA;
width: 100%;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0;
background-color: #FAFAFA;
width: 100%;
}
キャッシュのクリアに関しまして、キャッシュの消去とハードの再読込を行いましたが、幅と高さが異なります。
%表記に関して、該当箇所のcssを見ると幅が%表示で指定されていました。
無知で申し訳ございませんが、ご教示いただけますと幸いです。
ほら～％表示じゃないですか。
％表示で指定されてるってことは、使っているパソコンの画面サイズなどに合わせますよってことです。
例えば携帯で開いたとき、2000pxなんかで表示されてもでかすぎて見えませんよね？
なら携帯の横幅を100%として、要素を配置してあげれば
携帯の横幅にぴったりあったものが作れるわけです。
％表示も知らないようでしたら、サイトを作るのは厳しいのでまずは初歩的なところから学びましょう。
丁寧に教えてくださり、ありがとうございます。
%表記とpx表記の違いもよく分からなかったので、理解できました。
progateとドットインストールで基礎をもう一度勉強します。
0
自己解決
CHromeでデベロッパーツールを表示し、模写サイトのスクロールバーで横幅を確認し、
自分が模写したサイトの横幅を、模写サイトの横幅と合わせると
該当要素の幅と高さがほぼ一致しました。
投稿2019/03/21 08:50
総合スコア14
それ根本的な解決になってませんよね？
めっちゃ細かい幅とかで指定してあーなおった～満足～！なんですか？
あなたの回答
tips
プレビュー
