前提・実現したいこと

ここに質問の内容を詳しく書いてください。
趣味のページを作っています。
「TOPページに戻るボタン」をページの一番右下（動画の横）に表示させたいです。

該当のソースコード

<!DOCTYPE html>
<html>
    <head>
    
        <title>NARUTO大好き</title>
        <style type="text/css">
            .nav {
  width: 750px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  display: flex;
}
.nav li {
  position: relative;
  list-style: none;
}
.nav li a {
  display: block;
  width: 150px;
  height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 2.8;
  background: #9fb7d4;
  text-decoration: none;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.nav > li:hover > a {/*layer-1*/
  color: orange;
  background: #afc6e2;
}
.nav > li li:hover > a {/*layer-2*/
  color: olive;
  background: #afc6e2;
}
.nav li ul {
  top: 40px;
  left: -40px;
  position: absolute;
}
.nav li ul li {
  overflow: hidden;
  height: 0;
}
.nav li ul li a {
  border-top: 1px solid #eee;
}
.nav li:hover > ul > li {
  overflow: visible;
  height: 40px;
}
  .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .nav li ul li ul:before {/*layer-2▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }
  .nav li ul li ul li:hover > a {/*layer-3*/
    color: pink;
    background: #afc6e2;
  }
  .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }
  .nav li ul li ul.left:before,/*layer-2-left▷*/
  .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 190px;
    border: 5px solid transparent;
    border-right: 5px solid #fff;
  }
  .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    color: pink;
    background: #afc6e2;
  }
  .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    color: purple;
    background: #afc6e2;
  }
.content {
  width: 750px;
  height: 200px;
  background: #eee;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}
            .TOP{
                border:1px solid #cccccc;
                height: 200px;
                position: relative;
            }
           
        </style>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!--プルダウンメニュー-->
        <ul class="nav">
            <li><a href="#">Home</a>
            </li>
        <li><a href="#">うずまきナルト</a>
            <ul>
                <li><img src="uzumakinaruto.jpg" width=150px height="200px"></li>
            </ul>
        </li>
        <!-- <ul>
            <li><a href="#">b2</a></li>
            <li><a href="#">b2</a></li>
        </ul> -->
        
            
        <!-- </li> -->
        <li><a href="#">うちはサスケ</a>
            <ul>
                <li><img src="uchihasasuke.jpg" width="150px" height="200px"></li>
            </ul>
        </li>
        <li><a href="#">はるのサクラ</a>
        <ul>
            <li><img src="harunosakura.jpg" width="150px" height="200px"></li>
        <ul>
            <li><a href="#">d2</a></li>
            <li><a href="#">d2</a></li>
            <!-- <ul class="left">
            <li><a href="#">d3</a></li>
            <li><a href="#">d3</a></li>
            </ul> -->
            
        </ul>
        </ul>
        </li>
        <li><a href="#">はたけカカシ</a>
        <ul>
        <li><img src="hatakekakashi.jpg" width="150px" height="200px"></li>
        <!-- <ul class="left">
            <li><a href="#">e2-1</a></li>
            <li><a href="#">e2-1</a></li>
        </ul> -->
        <ul class="left">
        <li><a href="#">e2-2</a></li>
        <li><a href="#">e2-2</a></li>
        </ul>
        </ul>
        </li>
        <!--nav--></ul>
    </head>
    
    <body>
        <h1>NARUTO大好き人間集まれ！</h1>
        <h2>We love NARUTO!</h2>
        <hr>
        <h2>NARUTOキャラ紹介</h2>
        <table border>
            <thead>
                <tr>
                    <th>キャラNo.</th>
                    <th>キャラ名</th>
                    <th>キャラ紹介</th>
                    <th>キャラ画像</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>No.1</td>
                    <td>うずまきナルト</td>
                    <td>意外性ナンバーワン忍者</td>
                    <td><a href="https://ja.wikipedia.org/wiki/%E3%81%86%E3%81%9A%E3%81%BE%E3%81%8D%E3%83%8A%E3%83%AB%E3%83%88"><img src="uzumakinaruto.jpg" width="100" height="100"></td>
                </tr>
                <tr>
                    <td>No.2</td>
                    <td>うちはサスケ</td>
                    <td>うちは一族エリート忍者</td>
                    <td><a href="https://ja.wikipedia.org/wiki/%E3%81%86%E3%81%A1%E3%81%AF%E3%82%B5%E3%82%B9%E3%82%B1"><img src="uchihasasuke.jpg" width="100" height="100"></td>
                </tr>
                <tr>
                    <td>No.3</td>
                    <td>はるのサクラ</td>
                    <td>医療忍者で怪力の持ち主</td>
                    <td><a href="https://ja.wikipedia.org/wiki/%E6%98%A5%E9%87%8E%E3%82%B5%E3%82%AF%E3%83%A9"><img src="harunosakura.jpg" width="100" height="100"></td>
                </tr>
                <tr>
                    <td>No.4</td>
                    <td>はたけカカシ</td>
                    <td>写輪眼使いのコピー忍者</td>
                    <td><a href="https://ja.wikipedia.org/wiki/%E3%81%AF%E3%81%9F%E3%81%91%E3%82%AB%E3%82%AB%E3%82%B7"><img src="hatakekakashi.jpg" width="100" height="100"></td>
                </tr>
            
                <p>小学生の頃から観てきたアニメで一番面白く、
                現在も観ているアニメです。最近はBORUTOになりましたが相変わらず録画して観ています。<br>キャラ画像をクリックするとwikipediaにジャンプします。</p>
            </tbody>
        </table>
        
        <img src="uzumakinaruto-shippuden.jpg"><img src="utihasasuke-shippuden.jpg"><img src="harunosakura-shippuden.jpg">
        <img src="hatakekakashi-shippuden.jpg">
        
        <iframe width="560" height="315" src="https://www.youtube.com/embed/G75445vc1u8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </body>
    <footer>
        <div class="TOP">TOPへ戻る</div>
    </footer>
</html>

試したこと

div,classなどを使って試してみましたが、ページの中段に表示されてしまい、うまくいきませんでした。

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

ブラウザ：GoogleChrome
OS:windows10

m.ts10806

2018/08/31 00:23

インデントぐちゃぐちゃなので(特にCSS）揃えていただけますか？</tr>と</tbody>の間にテキストが入っていたり構造的にアウトかと思われるところが散見されます。細かいですがdivとclassは階層に違うものなので（タグと属性）同列にはできません。「一番右下」は「どんなに縦が長くなっても固定で右下にいる」か、単に最下部に右寄せになっていればいいかでつくりが変わってきます。イメージ図などで要件をご説明いただけますか？

macaron_xxx

2018/08/31 00:23

色々タグが間違っているので、それを先に直したほうがよさそう。

m.ts10806

2018/08/31 01:12

ブラウザがいいように解釈して表示してくれてますが、画面に表示させたい部分は<body>～</body>の中に書くものです。今のfooterタグの位置だと原稿用紙だと枠部分に書いているようなものです。Web上にある構文チェックサービスも利用してみてください（中にはそういう機能がついたエディタもありますのでご活用ください。）

dit.

2018/08/31 02:22

プルダウンメニューも<head>内にありますね。<body>-<header>内ならいいのですが。時間に余裕があるので原因究明がてらソースの整理をしてますが、他にもいくつか気になる点があります。ご自身で気づいていただければいいのですが。

dit.

2018/08/31 02:36

そもそも提示のコードだと「ページの中段に表示されてしまい」も再現できないため状況がわかりません。<body>の外に出ているのはともかく、borderのついたdivが高さ200pxで表示されているので指定した通りかと。mts10806さんも最初に指摘していますが、「ページがスクロールしても常に右下固定」なのか、「スクロール後ページの右下」なのかもご提示ください。

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

回答2件

単に右下にずっとTOPへ戻るを固定したいだけなら

css
1            .TOP{
2                border:1px solid #cccccc;
3                height: 200px;
4                position: fixed;
5                bottom:0;
6                right:0;
7            }

に変更するだけでもできます。
…が、修正依頼や回答でもさんざん指摘されている通りHTMLとして破綻している部分があります。
可能な限り直してみましたがまだ修正しきれてない部分があるかもしれません。
画像やリンクがダミーになってたり記述を簡略化してあります。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>NARUTO大好き</title>
7    <style type="text/css">
8      .nav {
9        width: 750px;
10        height: 40px;
11        margin: 0 auto;
12        padding: 0;
13        display: flex;
14      }
15
16      .nav li {
17        position: relative;
18        list-style: none;
19      }
20
21      .nav li a {
22        display: block;
23        width: 150px;
24        height: 40px;
25        text-align: center;
26        color: #fff;
27        font-size: 14px;
28        line-height: 2.8;
29        background: #9fb7d4;
30        text-decoration: none;
31        border-right: 1px solid #eee;
32        box-sizing: border-box;
33      }
34
35      .nav > li:hover > a {
36        /*layer-1*/
37        color: orange;
38        background: #afc6e2;
39      }
40
41      .nav > li li:hover > a {
42        /*layer-2*/
43        color: olive;
44        background: #afc6e2;
45      }
46
47      .nav li ul {
48        top: 40px;
49        left: -40px;
50        position: absolute;
51      }
52
53      .nav li ul li {
54        overflow: hidden;
55        height: 0;
56      }
57
58      .nav li ul li a {
59        border-top: 1px solid #eee;
60      }
61
62      .nav li:hover > ul > li {
63        overflow: visible;
64        height: 40px;
65      }
66
67      .nav li ul li ul {
68        top: 0;
69        left: 110px;
70      }
71
72      .nav li ul li ul:before {
73        /*layer-2▷*/
74        position: absolute;
75        content: "";
76        top: 15px;
77        left: 30px;
78        border: 5px solid transparent;
79        border-left: 5px solid #fff;
80      }
81
82      .nav li ul li ul li:hover > a {
83        /*layer-3*/
84        color: pink;
85        background: #afc6e2;
86      }
87
88      .nav li ul li ul.left {
89        top: 0;
90        left: -190px;
91      }
92
93      .nav li ul li ul.left:before,
94      /*layer-2-left▷*/
95      .nav li ul li ul li ul.left:before {
96        /*layer-3-left▷*/
97        position: absolute;
98        content: "";
99        top: 15px;
100        left: 190px;
101        border: 5px solid transparent;
102        border-right: 5px solid #fff;
103      }
104
105      .nav li ul li ul.left li:hover>a {
106        /*layer-2-left*/
107        color: pink;
108        background: #afc6e2;
109      }
110
111      .nav li ul li ul li ul.left li:hover > a {
112        /*layer-3-left*/
113        color: purple;
114        background: #afc6e2;
115      }
116      /* .contentどこにも使われてないけどok? */
117      .content {
118        width: 750px;
119        height: 200px;
120        background: #eee;
121        margin: 0 auto;
122        padding: 10px;
123        text-align: left;
124        box-sizing: border-box;
125      }
126      .TOP {
127        border: 1px solid #cccccc;
128        height: 200px;
129        position: fixed; /* 変更 */
130        bottom: 0; /* 追加 */
131        right:0; /* 追加 */
132      }
133    </style>
134  </head>
135  <body>
136    <header>
137    <!-- ulをbody-header内に移動　b2とかをli内に移動(不要ならコメントしてあるところで削除)　もともとコメントだったところはわかりづらくなるので削除 -->
138      <ul class="nav">
139        <li><a href="#">Home</a></li>
140        <li>
141          <a href="#">NARUTO</a>
142          <ul>
143            <li><img src="http://placehold.jp/150x200.png" width="150" height="200"><!-- 数値の指定を修正 --></li>
144          </ul>
145        </li>
146        <li>
147          <a href="#">SASUKE</a>
148          <ul>
149            <li><img src="http://placehold.jp/150x200.png" width="150" height="200"></li>
150          </ul>
151        </li>
152        <li>
153          <a href="#">SAKURA</a>
154          <ul>
155            <li>
156              <img src="http://placehold.jp/150x200.png" width="150" height="200">
157              <ul><!-- 不要ならここから -->
158                <li><a href="#">d2</a></li>
159                <li><a href="#">d2</a></li>
160              </ul><!-- ここまでを削除 -->
161            </li>
162          </ul>
163        </li>
164        <li>
165          <a href="#">KAKASHI</a>
166          <ul>
167            <li>
168              <img src="http://placehold.jp/150x200.png" width="150" height="200">
169              <ul class="left"><!-- 不要ならここから -->
170                <li><a href="#">e2-2</a></li>
171                <li><a href="#">e2-2</a></li>
172              </ul><!-- ここまでを削除 -->
173            </li>
174          </ul>
175        </li>
176      </ul><!-- /.nav -->
177    </header>
178    
179    <h1>NARUTO大好き人間集まれ！</h1>
180    <h2>We love NARUTO!</h2>
181    <hr>
182    <h2>NARUTOキャラ紹介</h2>
183    <table border>
184      <thead>
185        <tr>
186          <th>キャラNo.</th>
187          <th>キャラ名</th>
188          <th>キャラ紹介</th>
189          <th>キャラ画像</th>
190        </tr>
191      </thead>
192      <tbody>
193        <tr>
194          <td>No.1</td>
195          <td>名前1</td>
196          <td>説明1</td>
197          <td><a href="#"><img src="http://placehold.jp/100x100.png" width="100" height="100"></a><!-- </a>抜けてた --></td>
198        </tr>
199        <tr>
200          <td>No.2</td>
201          <td>名前2</td>
202          <td>説明2</td>
203          <td><a href="#"><img src="http://placehold.jp/100x100.png" width="100" height="100"></a><!-- </a>抜けてた --></td>
204        </tr>
205        <tr>
206          <td>No.3</td>
207          <td>名前3</td>
208          <td>説明3</td>
209          <td><a href="#"><img src="http://placehold.jp/100x100.png" width="100" height="100"></a><!-- </a>抜けてた --></td>
210        </tr>
211        <tr>
212          <td>No.4</td>
213          <td>名前4</td>
214          <td>説明4</td>
215          <td><a href="#"><img src="http://placehold.jp/100x100.png" width="100" height="100"></a><!-- </a>抜けてた --></td>
216        </tr>
217      </tbody>
218    </table>
219    
220    <!-- pはtbody直下に入れない！ -->
221    <p>小学生の頃から観てきたアニメで一番面白く、現在も観ているアニメです。最近はBORUTOになりましたが相変わらず録画して観ています。<br>キャラ画像をクリックするとwikipediaにジャンプします。</p>
222    
223    <div><!-- ここの画像をどうしたいかわからないけどiframeと区別するために一応divに入れておく -->
224      <img src="http://placehold.jp/100x100.png" width="100" height="100">
225      <img src="http://placehold.jp/100x100.png" width="100" height="100">
226      <img src="http://placehold.jp/100x100.png" width="100" height="100">
227      <img src="http://placehold.jp/100x100.png" width="100" height="100">
228    </div>
229    
230    <iframe width="560" height="315" src="https://www.youtube.com/embed/G75445vc1u8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
231    
232    <!-- footerをbody内へ -->
233    <footer>
234      <div class="TOP">TOPへ戻る</div>
235    </footer>
236  </body>
237</html>

投稿2018/08/31 05:32

dit.

総合スコア3235

ベストアンサー

つい最近知ったんですけど，LiveWeaveにコピペして「Ctrl+A」→「Shift+Tab」すると，自動でインデント整えてくれるんですね．これ便利なので，インデントぐちゃぐちゃなコードが出てきたときに重宝してます（エディタより開くの速いし）

本題

本題といいつつ，まずHTMLの修正からですが，HTMLは基本的に開始タグと終了タグをセットで書かないといけないことはご存知ですよね？（もちろん例外もあります）

今回抜けていたのはaタグの閉じタグでした．それも見事に「すべてのaタグで」です
インデントがぐちゃぐちゃだからこうなったのか，こうだからインデントがぐちゃぐちゃになったのか知りませんが，見やすいコードにしましょう

閉じタグを修正しただけでご覧のとおりです

ちなみになぜインデントが大事かというと，HTMLが文書（最近は大抵Webページ）の構造を記述する言語だからです．

建物の設計図を渡されたとき，リビングのど真ん中にお風呂場があったり，台所の一角が駐車場だったりしたら意味わからないですよね？
HTMLの記述を間違うというのは，そういう状態を起こしてしまうのです

これを防ぐ方法として，インデントを整えることが奨励されており，インデントを整えることで，どの要素がどの要素に内包されているのかといったことを，視覚的に判断することができるようになります

また，さっきの例えで，「駐車場は高級感のある黒色に塗り，その後，台所は清潔感のある白色に塗ってくれ」という指示を出された時に，どのような結果になるか想像してください．
うっかり，駐車場を台所の中に置いたせいで，台所ごと駐車場が真っ白に塗られることになるでしょう．

開始タグと終了タグはセットで書いてから，中身を書いてください（Brackets等の専用のエディタなら自動挿入してくれるんですけどね）

さて，やっと本題に入れますね

...といいたいところでしたが，HTMLをよく見てみると，さらにすごいミスを発見しました
何がおかしいか分かったら，すぐ修正してください↓

meta,link,script,style等のタグは確かにheadタグ内にまとめて記述すべきです．しかしなぜここにulがあるのでしょう？家の新築予算を家族会議で決めている最中に建設車両が到着したぐらい唐突な登場です（本来の位置はbody内）

意味不明すぎるぜ（直してくれ）

ちなみに先ほどの「駐車場は高級感のある黒色に塗り，その後，台所は清潔感のある白色に塗ってくれ」は，CSSを書く際にも重要なポイントです．なぜなら，この順番が逆だと，うまく塗り分け出来てしまうことがあるからです

CSSが適応される優先順について
【ちょっとした豆知識】CSSの適用優先度
http://specificity.keegan.st/：セレクタの優先度が計算できるサイト

...よしっ，本題に入ろう！
そう思ったときでした．私はまたしても不可解なものを目撃してしまったのです

<tbody>: テーブル本体要素 | MDN

表組みをしたかったんですよね？
ならなぜそこにpタグが単体で存在するのでしょうか...
表に入れたかったのか，それとも表の外に書きたかったのか...真相は闇の中です...

もういいや，そろそろほんとに本題に入ろう...あれ？本題なんだっけ（疲

「TOPページに戻るボタン」をページの一番右下（動画の横）に表示させたいです。

...そうだ，そうだった，これはとても簡単なことなんだ．複雑に考える必要はない．

css
1footer{
2  text-align: right;/*右寄せ*/
3}
4.TOP{
5  border:1px solid #cccccc;
6  height: 200px;
7  position: relative;
8  display: inline-block;/*高さが設定できる＋右寄せが効く*/
9  background: skyblue;/*分かりやすいように背景色つけた*/
10}

display: inline-block;は，少し前までインライン要素・ブロック要素と呼ばれていた要素の良いとこどりをした要素としてスタイリングできるようにする指定です
これがdisplay: inline;だとheightの指定が効かないし，display: block;だとwidthを短くしても，text-alignは文字列の位置を決める指定だから，右寄せはできない
それで，こういうコードを書きました

方法はもう1つあります．必要なのはこれだけ

css
1footer{
2  display: flex;
3  flex-direction: row-reverse;/*横方向，文字列と逆方向から整列*/
4}

いやあ，Flexboxって本当に良いものですね～

~~水野晴郎~~，Youtube

ただ，全てFlexboxを使えば良いというものでもありません．Flexboxの子要素はwidth,heightの値が動的に変化します．

CSS Flexbox の各プロパティの使い方を詳しく解説

displayプロパティの値は，用途に合わせて変えてください

他に何か質問はありますか？

コメント機能を利用してください．だれかが答えてくれるでしょう

投稿2018/08/31 03:41

編集2018/08/31 03:43

liveasnotes

総合スコア1284

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

TOPへ戻るボタンをページの一番右下に表示させたい。

前提・実現したいこと

該当のソースコード

試したこと

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

本題

関連した質問