文字の位置がおかしくなっている

前提・実現したいこと

「About」の真横に文字を入れたい

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

写真のように「ゼルダの伝説」までは「About」の真横にくっつくのですが
「ゼルダの伝説」のあとに文字を入れていくと「About」からなぜか遠ざかっていきます。![

該当のソースコード

html・css・css3

試したこと

・半角問題なし
・全角アルファベット問題なし
・数字問題なし

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

html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="A.css" type="text/css">
</head>
<body><li style="cursor: pointer">
<h1 style="position: absolute; left: 60px; top: -90px"/><big>Z</big>ELDA</h1>
<font color="goldenrod" size="6" face="ＭＳ 明朝,平成明朝" style="position: absolute; left: 165px; top: 50px">The Lezend Of</font>
<font style="position: absolute; left: 90px; top: 240px"><p class="menu">About</p>
<p class="menuber">ゼルダの伝説について</p></font>
</li></body>

css

h1{
  color: goldenrod;
  font-size:1100%;
  font-family: "ＭＳ 明朝",serif;
}
body{
  background-color: #000000
}
p.menu{
  color: #FF0000;
  font-size:260%;
  font-family:times;
  display:inline-block;
  width:0%;
  transition: all 300ms 0s ease;
}
p.menu:hover {
  display:inline-block;
  width:100%;
  color: black;
  background-color: white;
}
p.menuber{
  position:relative;
  left:100%;
  top:-85px;
  font-size:100%;
  color:red;
  background-color:black;
}

yoshinavi

2018/03/25 01:01

質問文は編集できますので、各コードの上下にバッククォートを3つ「```（最後に改行）」でコード表示されるようになるので、編集してください。より良い回答を得れるようになります。

defghi1977

2018/03/25 01:40

big,font要素はHTML5で廃止されています. 特に問題がない限り, span要素等で置き換えて下さい. なお, このHTMLの用途が判りませんが, 指定したフォントがインストールされていない環境では意図したレイアウトとなりませんが, よろしいのでしょうか？

Akiraman

2018/03/25 04:59 編集

defghi1977さん　すみません。私は今独学で「html」を使っていて「html５」というものを知っていますが、詳しくは知りません。（何が違うのか、どういうことができるのか等）私はまだ初心者に毛が生えた程度で、htmlをある程度できるようになったら5を学んでいこうと思っていました。ですが「html」と「html５」は基本は変わらず、「html」をより良くしたのが「html５」ということでしょうか？後者の話についてですが、htmlの用途がわからないというのはどういうことでしょうか？もしかして私は無駄なことをしていますか？それとフォントはインストールされたものした使えないというのは知りませんでした。そちらについては自分で調べてみます。質問重ね、長文で申し訳ないです。

Akiraman

2018/03/25 05:01

yoshinaviさん　すみません。言っている意味が分からなかったのですが見直してみておかしな点があったので修正しておきました。これであっていますでしょうか？

defghi1977

2018/03/25 05:03

いや, 学習目的であれば問題ありません(外部に公開する目的だとあまりよくない構成だなあと感じたまでです) HTML"5"についてはざっくりと言えば「現在標準のHTML仕様」を指していて, その中でfontやbig要素は10年以上前の古い仕組みなので, 現在では使わない方が良いものとされています.

yoshinavi

2018/03/25 05:10

teratailでは質問や回答について「マークダウン（Markdown）記法」と言うのが使用出来るようになっています。（「修正依頼」や「コメント投稿」の欄では使えません）ちょっとした装飾が出来るので太字にしたりリンクを貼ったり、今回の場合だとHTMLやCSSをコードブロック表示できます。これがあると他の方が見やすくコードのコピペがしやすくなり、検証できるようになります。その結果、いろいろな回答を得れるようになりますので、確認してみてください。

Akiraman

2018/03/25 05:12

defghi1977さん　なるほど、htmlは今では古いものということでしょうか？学習目的であっても将来はなにか役立てたいので変更したいと思います。

defghi1977

2018/03/25 05:13

HTMLが古いんじゃなくてfont/big要素が古いのですよ

Akiraman

2018/03/25 05:18

defghi1977さんどちらでもいいが、font/bigは古いからspan要素等に変えたほうがいいという事ですね。わかりました。ありがとうございます。

Akiraman

2018/03/25 05:19

yoshinoviさん　変更いたしました。丁寧に説明してくださってありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

離れる原因としては<p class="menuber">ゼルダの伝説について</p>の幅が<p class="menu">About</p>の幅を超えるので、超えた分だけ離れて行きます。

確認方法のひとつとして、CSSのp.menuberの中のposition:relative; left:100%; top:-85px;を一旦削除し、background-color:black;を黒から違う色にしてください。

テキスト部分の「About」「ゼルダの伝説（またはゼルダの伝説について）」を上下に並べて、「About」にマウスを乗せると離れる理由が分かると思います。（-回答文を一部編集しました-）

CSS
1p.menuber {
2  position:relative; /* 一旦削除 */
3  left:100%;　　　　　/* 一旦削除 */
4  top:-85px;　　　　　/* 一旦削除 */
5  font-size:100%;　　
6  color:red;
7  background-color:black;　/* 違う色にする */
8}

-追記-
修正方法としてはHTMLとCSSの組み方を考えなおす必要があると思います。色々なパターンがありますので再検討してみてください。

投稿2018/03/25 01:16

編集2018/03/25 02:55

yoshinavi

総合スコア3523

Akiraman

2018/03/25 05:08

回答ありがとうございます。要するに今のやり方では不効率？とういより間違っているのですね。調べてみて他のパターンを試してみます。ベストアンサーについてはもう少し他の回答を待ってみようかと思います。

yoshinavi

2018/03/25 05:29

HTMLやCSSの組み方は、十人いれば十通りの違いがありますので、いまのやり方がまったくダメだと言いう訳ではありません。古いサイトのやり方でも表示はキチンとされます。いわゆる「ホームページ」を作る場合、検索エンジン（グーグルクロームやインターネットエクスプローラー等）に正しく伝えるか書き方がHTML5だとHTMLより明確な部分があります。これは検索エンジンに正しく伝える事で「SEO」と言う部分にも関わってきます。

Akiraman

2018/03/25 05:31

なるほど。丁寧なご回答ありがとうございます

行動規範の内容に同意します