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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

Q&A

解決済

1回答

1774閲覧

トップのヘッダー上部に入る白い余白を消したい

WPJ

総合スコア23

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

0グッド

1クリップ

投稿2021/02/22 05:57

トップヘッダーの余白を消したい

サイトを制作しているのですが、
ヘッダーに余白が入っており、調べると、

<body>にmetadiscriptionなど入っており、 余白タグも入っております。 ソースを全て確認しましたが、全角のスペースなど無く困っております。

http://test.second-order.jp/

該当のソースコード

header.php

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="norton-safeweb-site-verification" content="2vlaiguh-8yk6r7ua9cc7p3hx2z230u2lv51gljjxhgbxbkmziqtvtp01po3yk4a-7a1juubl97xal11l8rd3801mrrt8k79lg35--ayzb0v413l1gnadt2ldelvxims" /> 7 <title>ARK</title> 8    <meta name="description" content="ARKとは"> 9 <meta name="author" content="ARK"> 10 <!-- Bootstrap Core CSS --> 11 <link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_directory'); ?>/css/bootstrap.min.css" /> 12 <!-- Fonts --> 13 <link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_directory'); ?>/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 15 <link href="<?php echo get_bloginfo('template_directory'); ?>/css/animate.css" rel="stylesheet" /> 16 <!-- Squad theme CSS --> 17 <link href="<?php echo get_bloginfo('template_directory'); ?>/css/style.css" rel="stylesheet"> 18 <link href="<?php echo get_bloginfo('template_directory'); ?>/css/default.css" rel="stylesheet"> 19 <link href="<?php echo get_bloginfo('template_directory'); ?>/css/slick-theme.css" rel="stylesheet" type="text/css"> 20 <link href="<?php echo get_bloginfo('template_directory'); ?>/css/slick.css" rel="stylesheet" type="text/css"> 21 <link href="<?php echo get_bloginfo('template_directory'); ?>/css/admin-build.css" rel="stylesheet" type="text/css"> 22 <script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>/js/slick.min.js"></script> 23</head> 24 25<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 26 <header id="header"> 27 <nav id="menu" class="navbar navbar-default navbar-fixed-top2"> 28 <div class="navbar-header smapho-show"> 29 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 30 <a class="navbar-brand-top" href="/"><img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo.png" alt="ARK" class="logo-top"></a> 31 </div> 32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 33 <ul class="nav navbar-nav"> 34 <li class="img-none2"><a class="pl0 pt0" href="/"> 35 <img src="<?php echo get_bloginfo('template_directory'); ?>/img/logo.png" class="top12" alt="Keiyukai"></a> 36 </li> 37 <li><a href="/" class="page-scroll">QUALITY<br>品質</a></li> 38 <li><a href="/" class="page-scroll">PERFORMANCE<br>性能/特徴</a></li> 39 <li><a href="/" class="page-scroll">PRODUCT<br>製品特徴</a></li> 40 <li><a href="/" class="page-scroll">CUSTOMER<br>REVIEW<br>利用者の声</a></li> 41 <li><a href="/" class="page-scroll">COMPANY<br>会社概要</a></li> 42 <li><a href="/" class="page-scroll">SUPPORT<br>サポート</a></li> 43 </ul> 44 </div> 45 </nav> 46 </header> 47 48 49 50

試したこと

空白がないか全チェックしましたが見当たりませんでした。

以下も参考にしましたが、違うようでした。
https://wemo.tech/1142

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

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

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

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

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

mai1210

2021/02/22 07:06 編集

確かに最終的に吐き出されるHTMLでは、metaタグなどがbody内に入ってしまってますね。上部の空きは、ノンブレイクスペースが原因のようです。 index.phpの中身と、index.php内で読み込んでいるものの中身も記載可能でしょうか?
guest

回答1

0

ベストアンサー

HTMLを確認しましたが、スペースに0xA0が混じっているようです。

ノーブレークスペース - Wikipedia

html

1    <meta name="description" content="ARKとは"> 2 ^ ^ここに0xA0

参考:

HTML Living Standard では、 U+0009 TAB (タブ), U+000A LF (改行), U+000C FF (頁送り), U+000D CR (復帰), U+0020 SPACE (空白) の5文字を ASCII ホワイトスペースとして定めています。

Whitespace (ホワイトスペース) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN


ソースコードビューワーを通ると変換されてしまうようで、見つけるのしんどかったです……

投稿2021/02/22 08:00

Lhankor_Mhy

総合スコア36960

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

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

WPJ

2021/02/22 08:06

ありがとうございました。 確かにスペースに0xA0を消したら直りました。 この度は誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問