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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

1回答

507閲覧

cssで設定したものが、ブラウザからイメージ通り返ってこない(写真つき)

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2018/11/19 02:56

編集2022/01/12 10:55

いつもお世話になっております。

html

1<header> 2 <div class="header-logo"> 3 TweetApp 4 </div> 5 <ul class="header-menus"> 6 <li>TweetAppとは</li> 7 </ul> 8</header> 9 10<div class="main top-main"> 11 <div class="top-message"> 12 <h2>つぶやきで、世界はつながる</h2> 13 <p>今の気持ちをつぶやいてみよう!</p> 14 </div> 15</div>

css

1/* reset ================================ */ 2*{ 3 box-sizing: border-box; 4} 5 6// いじってみる 7html{ 8 font: 100%/1.5 "Avenir Next",'Hiragino Sans', sans-serif; 9 line-height: 1.7; 10 letter-spacing: 1px; 11} 12 13ul, li{ 14 list-style-type: none; 15 padding: 0; 16 margin: 0; 17} 18 19h1, h2, h3, h4, h5, h6, p { 20 margin: 0; 21} 22 23// 共通レイアウト===========================================- 24body{ 25 color: #2d3133; 26 background-color: #3ecdc6; 27 margin: 0; 28 min-height: 1vh; 29} 30 31.main{ 32 position: absolute; 33 top: 64px; 34 width: 100%; 35 height: auto; 36 min-height: 100%; 37 background-color: #f5f8fa; 38} 39 40 41 42// ヘッダー============================================================ 43header{ 44 height: 64px; 45 position: absolute; 46 z-index: 1; 47 width: 100%; 48} 49 50.header-logo{ 51 float: left; 52 padding-left: 20px; 53 color: white; 54 font-size: 22px; 55 line-height: 64px; 56} 57 58.header-logo a{ 59 color: white; 60 font-size: 22px; 61} 62 63.header-menus { 64 float: right; 65 padding-right: 20px; 66} 67 68.header-menus li{ 69 float: left; 70 line-height: 64px; 71 font-size: 13px; 72 color: white; 73 padding-left: 15px; 74} 75 76 77// top========================================= 78 79.top-main{ 80 padding: 200px 0 100px; 81 text-align: center; 82 position: absolute; 83 top: 0; 84 width: 100%; 85 height: auto; 86 min-height: 100%; 87 color: white; 88 background-color: #3ecdc6; 89 background-repeat: no-repeat; 90 background-position: center 50%; 91 // background-size: cover; 92 background-size: cover; 93 background-image: url("/top.jpg"); 94} 95 96.top-message{ 97 position: relative; 98} 99 100.top-main h2{ 101 font-size: 70px; 102 font-weight: 500; 103 line-height: 1.3; 104 -webkid-font-smoothing: antialiased; 105 margin-bottom: 20px; 106 107} 108 109.top-main p{ 110 font-size: 24px; 111}

こんな感じでコードを書いてみたんですが、Chromeブラウザから返されたのが、
イメージ説明

でheader-logoが効いてないなど、イメージと違ったものが出来上がってしまいます。

完成イメージ
イメージ説明

ブラウザを小さくすると。。
イメージ説明

イメージ説明

自分では解決できそうにないので、教えて下さい。よろしくお願いします。

こんな感じになります。

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

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

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

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

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

Lhankor_Mhy

2018/11/19 03:06

「イメージと違ったもの」とありますが、そのイメージはあなたの頭の中にしかないため、「どうしたい」のかを書かないと回答のしようがないのではないかと思いますが。
kei344

2018/11/19 03:07

「header-logoが効いてない」とは具体的にどのような状態にしたいのでしょうか。
退会済みユーザー

退会済みユーザー

2018/11/19 03:07

確かに。。書き直します
kei344

2018/11/19 03:22

「header-logoが効いてない」とは具体的にどのような状態でしょうか。 追加された画像とは文字サイズが違う以外なにか変わっているのでしょうか。
Lhankor_Mhy

2018/11/19 03:28

当方の環境では下の画像のような感じになり、問題が再現しませんでした。画像から文字サイズを読み取るのは困難なので、正確に下の画像どおりになったかどうかは分かりませんが…… 質問者の環境では、ご提示のコード**だけ**で問題が再現しますか?
退会済みユーザー

退会済みユーザー

2018/11/19 04:04

kei334さんへ、位置が違うかなと思っています。font-sizeの値は、答えと同じなんですが、私のページは小さく表示されます。また、値を大きくしても、位置が左上に寄っています。画像のアップ具合を違っていて、個別のプロパティをいじるよりかは、全体が少しずつ違うため、どこか特定の場所が間違っているのかな。と思っています。まとまっておらず、すみません。
退会済みユーザー

退会済みユーザー

2018/11/19 04:14

Lhankor_Mhyさんへ、わざわざ再現までしてくださってありがとうございます。環境の問題なんですかね。。学習サイトでやっていて試せる環境になく、今さっき、自分でやってみたんですがエディタを使いこなす実力もなくできませんでした。。すいません。
Lhankor_Mhy

2018/11/19 04:16

ということは、ご提示のコードだけで再現しているのですね? ちなみに、Chromeのウィンドウサイズを小さくするとどうなりますか?
退会済みユーザー

退会済みユーザー

2018/11/19 04:22

そうです!質問編集に載せておきます!
Lhankor_Mhy

2018/11/19 04:27

2番目と4番目の差異がよく分からないのですが…… 2番目はフォトショとかで作ったモックですよね?
退会済みユーザー

退会済みユーザー

2018/11/19 04:31 編集

全部スクショです。自分でブラウザで作ったものが1番、3番(3番は1番の縮小版)。完成図が2番、4番です。わかりにくくてすみません。。
Lhankor_Mhy

2018/11/19 05:02

ん? 完成図もHTMLなんですか? それならそのコードを見ればよくないですか?
dit.

2018/11/19 06:39

実際のコードが提示のものと同じかはわかりませんが、CSSでのコメントは「//コメント」ではなく「/* コメント */」という書き方になります。念のため指摘しておきます。
退会済みユーザー

退会済みユーザー

2018/11/19 09:56

Lhankor_Mhyさんへ。ほんとそうなんです。だけど、完成図のコードは、完成しきったもの(これからHTMLが足されていく)でどこが影響して、直ったのかわからなかったんです。
退会済みユーザー

退会済みユーザー

2018/11/19 09:59

dit.さんへ。そんなルールもあったんですか。。。ご指摘ありがとうございます。でも、私バカなんで、たぶん次も同じミスします。すいません
dit.

2018/11/19 23:50

とりあえず現状「//コメント」になってるのであれば、すべて修正してください。同じミスをしてもいいので、「あ、なんかCSSの時のコメントは違うって指摘されたことがあるな…」て気づいてください。
Lhankor_Mhy

2018/11/22 00:32

そうだとすると、現物を見ない限り回答は難しいのではないでしょうか。ブラウザの開発者ツールは使っていますか? そちらを丁寧に見ていけば分かるのでは、と思うのですが。
guest

回答1

0

ここ参考になりませんか?
vwでフォントの大きさを指定する方法です。

投稿2018/11/19 05:23

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2018/11/19 09:57

ありがとうございます。 文字にURL被せるやり方めちゃくちゃいいですね。参考にします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問