いつもお世話になっております。
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が効いてないなど、イメージと違ったものが出来上がってしまいます。
自分では解決できそうにないので、教えて下さい。よろしくお願いします。
こんな感じになります。
「イメージと違ったもの」とありますが、そのイメージはあなたの頭の中にしかないため、「どうしたい」のかを書かないと回答のしようがないのではないかと思いますが。
「header-logoが効いてない」とは具体的にどのような状態にしたいのでしょうか。
確かに。。書き直します
「header-logoが効いてない」とは具体的にどのような状態でしょうか。 追加された画像とは文字サイズが違う以外なにか変わっているのでしょうか。
当方の環境では下の画像のような感じになり、問題が再現しませんでした。画像から文字サイズを読み取るのは困難なので、正確に下の画像どおりになったかどうかは分かりませんが…… 質問者の環境では、ご提示のコード**だけ**で問題が再現しますか?
kei334さんへ、位置が違うかなと思っています。font-sizeの値は、答えと同じなんですが、私のページは小さく表示されます。また、値を大きくしても、位置が左上に寄っています。画像のアップ具合を違っていて、個別のプロパティをいじるよりかは、全体が少しずつ違うため、どこか特定の場所が間違っているのかな。と思っています。まとまっておらず、すみません。
Lhankor_Mhyさんへ、わざわざ再現までしてくださってありがとうございます。環境の問題なんですかね。。学習サイトでやっていて試せる環境になく、今さっき、自分でやってみたんですがエディタを使いこなす実力もなくできませんでした。。すいません。
ということは、ご提示のコードだけで再現しているのですね? ちなみに、Chromeのウィンドウサイズを小さくするとどうなりますか?
そうです!質問編集に載せておきます!
2番目と4番目の差異がよく分からないのですが…… 2番目はフォトショとかで作ったモックですよね?
全部スクショです。自分でブラウザで作ったものが1番、3番(3番は1番の縮小版)。完成図が2番、4番です。わかりにくくてすみません。。
ん? 完成図もHTMLなんですか? それならそのコードを見ればよくないですか?
実際のコードが提示のものと同じかはわかりませんが、CSSでのコメントは「//コメント」ではなく「/* コメント */」という書き方になります。念のため指摘しておきます。
Lhankor_Mhyさんへ。ほんとそうなんです。だけど、完成図のコードは、完成しきったもの(これからHTMLが足されていく)でどこが影響して、直ったのかわからなかったんです。
dit.さんへ。そんなルールもあったんですか。。。ご指摘ありがとうございます。でも、私バカなんで、たぶん次も同じミスします。すいません
とりあえず現状「//コメント」になってるのであれば、すべて修正してください。同じミスをしてもいいので、「あ、なんかCSSの時のコメントは違うって指摘されたことがあるな…」て気づいてください。
そうだとすると、現物を見ない限り回答は難しいのではないでしょうか。ブラウザの開発者ツールは使っていますか? そちらを丁寧に見ていけば分かるのでは、と思うのですが。