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

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

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

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

CSS

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

Q&A

解決済

2回答

9978閲覧

div部分が下にずれる。

shutamo

総合スコア26

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/15 05:02

前提・実現したいこと

赤のボーダーに囲まれている部分に文字を書きたい。文字を書かない状態だと下にずれることはありません。
イメージ説明

イメージ説明

発生している問題・エラーメッセージ

文字を打つと文字が反映されない&div部分が下にずれる。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>SANGO | 心地良さを追求したWordPressテーマ</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 </head> 9 <body> 10 <header> 11 <div class="container"> 12 <div class="header-left"> 13 <img class="SANGO" src="https://saruwakakun.design/wp-content/uploads/2017/08/sango-1.svg" alt="SANGO" height="42px" width="138px"> 14 </div> 15 <div class="header-right"> 16 <a href="#" class="flag"><span class="fas fa-flag"></span>特徴</a> 17 <a href="#" class="book"><span class="fa fa-book" aria-hidden="true"></span>使い方ガイド</a> 18 <a href="#" class="download"><span class="fa fa-arrow-circle-down" aria-hidden="true"></span>ダウンロード</a> 19 </div> 20 </div> 21 </header> 22 <div class="top-wrapper"> 23 <div class="container-2"> 24 <img src="img/sangoheader-min.png"> 25 <div class="img-container"> 26 <h2>ああああああ</h2> 27 28 </div> 29 </div> 30 31 </div> 32 33 </body> 34</html>

css

1body{ 2 width: 100%; 3 margin-left: 0px; 4 margin-top: 0px; 5} 6 7header{ 8 height: 62px; 9 background-color: #5CAAEC; 10 box-shadow: 0px 5px 5px #C9CBD0; 11 margin-bottom: 5px; 12} 13 14header a{ 15 color: white; 16 text-decoration: none; 17} 18 19.header-left{ 20 float: left; 21 height:62px; 22} 23 24.header-right{ 25 float:right; 26} 27 28.header-left img{ 29 display:inline-block; 30 height:62px; 31} 32 33.header-left img:hover{ 34 opacity: 0.5; 35} 36 37.header-right a{ 38 font-size: 15px; 39 line-height: 62px; 40 font-family:arial; 41} 42 43.fa{ 44 margin-right: 8px; 45 opacity: 0.8; 46} 47 48.fas{ 49 margin-right: 8px; 50 opacity: 0.8; 51} 52 53.download{ 54 margin-right: 140px; 55} 56 57.book{ 58 margin-right:20px 59} 60 61.flag{ 62 margin-right:20px 63} 64 65.SANGO{ 66 margin-left: 140px; 67} 68 69.top-wrapper{ 70 height: 500px; 71 font-size:0px; /*フォントサイズ0px*/ 72 background-color: #EAEDF2; 73} 74 75.top-wrapper img{ 76 height: 426px; 77 width:500px; 78 margin-top: 28px; 79 display: inline-block; 80} 81 82.img-container{ 83 height: 426px; 84 width:500px; 85 background-color: #95D1EE; 86 margin-top: 28px; 87 margin-left: 0px; 88 border: 1px solid red; 89 display: inline-block; 90} 91 92 93.container-2{ 94 width: 1010px; 95 margin: 0 auto; 96 display: block; 97} 98

試したこと

文字の色を変えてみても現れませんでした。

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

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

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

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

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

azuapricot

2019/02/15 05:04

質問が多すぎる気が・・・。 あまり多いと作成依頼と変わらないので、試行錯誤してみてください。 しかも文字がでてこないのは他の質問と重複していて関係ないので削除してください。
Lhankor_Mhy

2019/02/15 05:14

ああ、ほぼ同じ内容でいくつも質問していたのですね。
dice142

2019/02/15 05:17

問題点を細かく列挙するのは良いのですが、なるべくひとつずつ解決するようにしてください。 あっちもこっちも複数箇所を同時に直していくと、どこかしらで弊害が起きる可能性があります。 あるいはある箇所を修正したらもう一方も解決することもあります。 焦らずひとつずつ取り組んでください。
shutamo

2019/02/15 05:32

以後気をつけます、、
guest

回答2

0

css

1.top-wrapper{ 2 height: 500px; 3 font-size:0px; /*フォントサイズ0px*/ 4 background-color: #EAEDF2; 5}

ここでフォントサイズを0にしてますね。

投稿2019/02/15 05:09

Lhankor_Mhy

総合スコア36074

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

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

Lhankor_Mhy

2019/02/15 05:10

おや、ご解決の様子。
guest

0

自己解決

display:flex;で解決しました。

投稿2019/02/15 05:07

shutamo

総合スコア26

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

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

m.ts10806

2019/02/15 05:09

質問する前に試せることが沢山あるはずです。 これまでの質問の内容から備忘録的な使い方をしたいわけではないはずですし、 「質問して5分で自己解決してしまっている」意味を考えてください。
azuapricot

2019/02/15 05:11

30分くらい悩んでみてから質問してほしいですよね、自分で考えることをやめてしまっては意味がないですし。
m.ts10806

2019/02/15 05:15

一応もとは「15分考えて解決しなかったら」でしたね。 いずれにしても「とりあえず投げとけ」って質問が非推奨なのは確かですし、CSSは特に考えるより試してなんぼ、微調整してなんぼなので、回答する方も相当に時間かけることになります。
dit.

2019/02/15 05:20

https://teratail.com/questions/174544 こちらの質問との関連があって今回の問題が発生し、さらにそちらで解決した という状況だと推測します。ひとつ前の質問もそうですが。 練習のためにhttps://saruwakakun.design/のサイトを模写しようとしているのかな。あちらは横並びのためにdisplay:table;を使っているようです。 flexやfloatなどいろいろなやり方があるので、調べたり試行錯誤しながら頑張ってほしいです。(人に言われたことだけをやるのではなく)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問