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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

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

Q&A

解決済

4回答

1430閲覧

ヘッダー上の余白(マージン)を削除したいです。。

keitaro3

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

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

0グッド

0クリップ

投稿2020/01/21 08:16

前提・実現したいこと

→サイト「TOPページのみ」に発生するヘッダー上の余白(マージン)を削除したい。

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

「TOPページのみ」に発生するヘッダー上の余白(マージン)

試したこと

→Google Chrome版Firebugを使用し、
マージンの追加・削除・数値の調整などを試してみました。

補足情報(FW/ツールのバージョンなど)

→サイトの管理・運営を引き継いだのですが、私の勉強不足、理解力のなさが原因かと思われますが解決することができません。

本職はデザインを担当していました。基本的なことで恐縮ですがアドバイス頂くことは可能でしょうか。
taratailは初めてです。

質問の不備や不明点なども随時ご指摘ください。
何卒宜しくお願い致します。m(_ _ )m

〈対象ページ〉
https://ikemen.works/

〈解決したい内容〉
「TOPページのみ」に発生するヘッダー上の余白(マージン)を削除したい。
※PC、SP共に。

イメージ説明

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

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

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

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

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

guest

回答4

0

body要素の直下に無駄な改行禁止空白文字 がたくさん入ってます。
まずそれがマズいのですが、
吐き出しているプログラムがすぐに修正できないようでしたら、
現状bodyのスタイルが以下で定義されているので、

css

1body { 2 line-height: 150%; 3} 4

無駄な空白文字を隠す形で、実際のコンテンツブロックを上にずらしてみましょう。

css

1.container { 2 top: -1.5em; 3} 4

これはあくまでも突貫工事です。(すでに本番に反映されているようなので^^;)
 の対処とhtmlとcssの設計を見直しましょう。

投稿2020/01/21 08:42

編集2020/01/21 08:43
so87

総合スコア764

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

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

keitaro3

2020/01/21 09:09

詳細のご回答ありがとうございます。 最終的にどうにもならない場合一度、チャレンジさせて頂きます。 早速のご協力頂きあいがとうございます。
keitaro3

2020/01/21 09:22

原因がわかりました。。ありがとうございます!
guest

0

ベストアンサー

パッと見た感じですと<body id...>以下になぜかmetaタグと余計な文字が入っていましたのでそれを削除すると空白は消えました。 by Firefox
イメージ説明
イメージ説明

投稿2020/01/21 08:32

sunglass

総合スコア303

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

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

keitaro3

2020/01/21 09:05

早速のご返答ありがとうございます。 私は、chrome上で試してみました。ご指定のとおり余白が消えました。 ただ、html自体にはそれらしきコード(metaタグと余計な文字)が入っていないようです。 余計な文字が表示されてしまうのは、別に原因があるということでしょうか。 可能なようでしたらアドバイス頂けると幸いです。。
keitaro3

2020/01/21 09:22

原因がわかりました。。ありがとうございます!
keitaro3

2020/01/21 09:33

sunglassさま 削除で対応できる点を最初にご指摘いただきましたので、ベストアンサーとさせて頂きました。 so87さま、KShiramizさまも早急なアドバイスありがとうございました!
guest

0

検証ツールで見ると謎のスペースが入っているので、それを削除すれば治りそうです。
イメージ説明

投稿2020/01/21 08:27

shiramiso

総合スコア25

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

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

keitaro3

2020/01/21 09:06

早速のご返答ありがとうございます。 私は、chrome上で試してみました。ご指定のとおり余白が消えました。 ただ、html自体にはそれらしきコード(謎のスペース)が入っていないようです。 余計な文字が表示されてしまうのは、別に原因があるということでしょうか。 可能なようでしたらアドバイス頂けると幸いです。。
keitaro3

2020/01/21 09:22

原因がわかりました。。ありがとうございます!
guest

0

ご指摘頂いた内容で、解決しました。

Google Chrome版Firebug上では、body要素の直下に「無駄な改行禁止空白文字 」が表示されていましたが、html上〈head〉内のOGP設定部分にあった改行禁止空白文字 を削除したら無事、マージンがなくなりました。

お忙しい中、ご協力ありがとうございました!

イメージ説明

投稿2020/01/21 09:28

編集2020/01/21 09:36
keitaro3

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問