アイコン画像とテキストをボトムでそろえる方法を教えて下さい。

フッターの「ページの先頭へ戻る」とその左にあるアイコン画像をボトムでそろえる方法を教えて下さい。
https://practice2017.web.fc2.com/hotel_imperial_resort_tokyo/root/base.html

これまで試みた点
1.フレックスレイアウト
2.<img>による記述
3.HTMLとCSSを編集

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0">
<title>結婚式場のコンセプト|HOTEL IMPERIAL RESORT TOKYO</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body id="base">
<header id="top" class="hdr"><!-- 【ヘッダー】 -->
  <h1><a href="index.html"><img src="img/logo_01.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1>
</header><!-- /#top .hdr -->
<nav class="gnav" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション -->
  <ul class="wrap-list">
    <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li>
    <li id="nav_plan"><a href="plan.html">プランのご案内</a></li>
    <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li>
    <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li>
  </ul><!-- /.wrap-list -->
</nav><!-- /.gnav -->
<div id="breadcrumb">
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li>結婚式場のコンセプト</li>
  </ul>
</div><!-- /#breadcrumb -->
<div class="contents"><!-- 【コンテンツ】 -->
  <section class="contents-main"><!-- 【メインコンテンツ】 -->
    <article>
      <h2>結婚式場のコンセプト</h2>
    </article>
  </section><!-- /.contents-main -->

  <div class="contents-sub"><!-- 【サブコンテンツ】 -->
    <aside>
      <div class="bnr-inner">
        <a href="plan.html">
          <dl>
            <dt><img src="img/bnr_contents_sub_plan_01.jpg" alt="プランのご案内"></dt>
            <dd>標準のプランをご紹介いたします。</dd>
          </dl>
        </a>
      </div><!-- /.bnr-inner -->
      <div class="bnr_inner">
        <a href="contact.html">
          <p><img src="img/bnr_contents_sub_contact_01.png" alt="お問い合わせ"></p>
        </a>
      </div><!-- /.bnr-inner -->
    </aside>
  </div><!-- /.contents-sub -->
</div><!-- /.contents -->

<footer class="ftr"><!-- 【フッター】 -->
  <div id="topPage">
    <a href="#top"><img class="icon-arrow"></a>
    <p ><a href="#top">ページの先頭へ戻る</a></p>
  </div>
  <address>東京都千代田区Ｘ－Ｘ－Ｘ 電話　０１２０－０００－ＸＸＸＸ　営業時間　１１：００～２０：００（水曜日定休日）</address>
  <p id="copyright"><small>Copyright &copy;2014 HOTEL IMPERIA RESORT TOKYO All rights reserved.</small></p>
</footer><!-- /.ftr -->
</body><!-- /#base -->
</html>

@charset "utf-8";

/* 【共通箇所・基本設定：ページ全体】 ここから↓ */
/* フォントサイズ */
html { font-size:  62.5%; } /* 62.5%:1em:10px */
body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */
h1   { font-size: 2.8rem; } /* =28px */
h2   { font-size: 2.1rem; } /* =21px */
h3   { font-size: 1.6rem; } /* =16px */
h4   { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */

body {
  background-color:#f3f2e9;
  color: #5f5039;
  line-height:1.5;
  margin: 0 auto;
  width: 84rem;
}

li {
  list-style : none;
}


/* 【ヘッダー】 ここから↓ */
header h1 {
  margin: 0 0 2.6rem 0;
  padding-top: 2.8rem ;
  text-align: center;
}


/* 【グローバルナビゲーション】　ここから↓
　リストを横に並べる。 */
.wrap-list {
  margin   : 0 0 2rem 0;
  overflow : hidden;
  padding  : 0;
}

.gnav li {
  float : left;
  width : 21rem;
}

/* グローバルナビゲーションのリンクに画像を指定する。 */
#nav_concept a {
  background-image:url(../img/gnav_01.png);
}

#nav_plan a {
  background-image:url(../img/gnav_02.png);
}

#nav_fair a {
  background-image:url(../img/gnav_03.png);
}

#nav_contact a {
  background-image:url(../img/gnav_04.png);
}

.gnav a {
  overflow:hidden;
  display:block;
  padding-top:4.4rem;
  height:0;
}

/* CSSスプライト */
#concept #nav_concept a,
#plan #nav_plan a,
#fair #nav_fair a,
#contact #nav_contact a,
nav a:hover {
  background-position:0 -4.5rem;
}
/* 【グローバルナビゲーション】　ここまで↑ */


/* 【パンくずリスト】　ここから↓ */
#breadcrumb ul {
  overflow:hidden;
  padding-left:0;
}

#breadcrumb li {
  float:left
}

#breadcrumb li:first-child {
  margin-right:1rem;
}
/* 【パンくずリスト】　ここまで↑ */
/* 【ヘッダー】　ここまで↑ */


/* 【コンテンツ】　ここから↓
メインコンテンツとサブコンテンツを横に並べる。 */
.contents {
  overflow:hidden;
}

.contents-main {
  float:left;
  width:57rem;
}

.contents-sub {
  float:right;
  width:23rem;
}

.contents-main h2 {
  margin: 0 0 3rem 0;
  padding: 3.5rem 0 3.5rem 6rem;
  font-size:140%;
  background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
  background-repeat:no-repeat,no-repeat;
  background-position:left top, left bottom;
}
/* 【コンテンツ】　ここまで↑ */


/* 【サブコンテンツ】　ここから↓ */
.bnr_inner img:hover {
  opacity:.8;
}

.bnr-inner dd {
  margin-left: .5rem;
}
/* 【サブコンテンツ】　ここまで↑ */


/* 【フッター】 */
.ftr {
    margin-top: 7rem;
}

/* 「ページの先頭へ戻る」
右によせる。 */
#topPage {
  float:right;
}

.ftr address {
  clear:both;
}

/* 矢印の画像を配置する。 */

.icon-arrow {
   background-image:url(../img/icon_ftr_arrow_01.png);
  background-repeat:no-repeat;
width:2.1rem;
height:2.8rem;


}
/* 【フッター】 ここまで↑ */ 
/* 【共通箇所・基本設定：ページ全体】 ここまで↑ */

m.ts10806

2019/07/10 07:59

コードブロックはファイル毎に分けてもらえればと思います。

taka_oct092018

2019/07/10 08:14

mts10806様何度編集しても更新が反映されません。

m.ts10806

2019/07/10 08:18

んん更新時間（編集履歴）の表示がでていないので編集完了できていないみたいですね。質問編集画面の投稿ボタン（質問したことがないのでどんなラベルのボタンになってるか分かりませんが）は確実に押下しました？

m.ts10806

2019/07/10 08:23

編集はできているようですが、切り出した別のファイルがコードブロック出来てませんね。コード部分を選択して<code>ボタンを押してください。

taka_oct092018

2019/07/10 08:24

htmlとcssは分割しないとダメなのでしょうか？疲れているので、まずは解決方法を教えて頂けないでしょうか？

taka_oct092018

2019/07/10 08:25

「更新する」は押しています。でも、更新すればするほど見づらいなります。

m.ts10806

2019/07/10 08:27

コードをちゃんと提示されないと再現確認がとれないので解決方法もなにも提示しようがありません。（コード見ただけで全てが分かるということはほとんどのケースでありませんので）大変お手数をおかけしますが、余裕あるときで結構ですので。

taka_oct092018

2019/07/10 08:30

編集の仕方から教えて下さい。

m.ts10806

2019/07/10 08:32

画面見れないので何とも言えませんけど、先に書いたように、 -　コード部分を選択状態にする -　<code>ボタンを押すで出来ると思います。編集完了の投稿の前にPCであれば右側にリアルタイムでプレビューが表示されているはずなので、そちらを確認しながらきちんとなっているか調整してください。

taka_oct092018

2019/07/10 09:22

編集しました。

taka_oct092018

2019/07/10 11:36

コードブロックを分けました。私の方からは出来ていると思うのですが、まだ修正されてないのでしょうか？

m.ts10806

2019/07/10 13:17

問題ないと思います。既についた回答で解決できそうだなと思ってみておりました。

taka_oct092018

2019/07/10 13:24

返信ありがとうございます。最初の編集時から何度も同じ操作を繰り返したにもかかわらず、なぜか正しく反映されませんでした。原因は不明なままです。疲れた。すごく辛い。

m.ts10806

2019/07/10 13:34

んー回答でもたまに反映されてないときありますからね。 teratailも投稿関係はでちょこちょこ不具合あるらしいので。

yoshinavi

2019/07/10 17:04

質問者さんへ質問に直接な関係の無い意見でスミマセン。言葉の使い方を少し考慮されると良いかと思います。「疲れた」の言葉は、このような場には不適切に感じます。

taka_oct092018

2019/07/10 17:14

yoshinavi様通報させて頂きました。 teratail側からの判断を仰ぎます。

yoshinavi

2019/07/10 17:25

個人々の意見や感想は、人それぞれなので、質問者さんと私とで相反する意見や感想でも、仕方がないかと思います。これ以上ここでコメントはしませんので、ご安心ください。

taka_oct092018

2019/07/10 17:29

？

taka_oct092018

2019/07/10 18:15

yoshinavi様個人の感想云々より、本来の目的である問題を解決するためのコードを教えて下さい。

taka_oct092018

2019/07/11 03:55

質問を編集しました。

taka_oct092018

2019/07/12 08:38

mts10806様ご指摘通りファイルは分割して表示しましたので、回答の程よろしくお願い致します。

taka_oct092018

2019/07/12 08:41

yoshinavi様批判は受け止め今後は慎重に言葉を選びますので、解決方法を教えて頂けないでしょうか。

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

回答2件

提示のURLは参照先でしょうか？参照先と提示のコードでは、画像の扱いが違っています。
URLは背景ですが、提示コードは<img>タグになっています。

背景で良ければ、参照先コードをそっくりコピペすれば良いかと思います。

<img>タグを使うのであれば、方法はいくつかありますが、flexが簡単かと思います。
flexを使ったひとつの例です。以下をためしてみてください。

※コメントではなく、回答してみました。
(^^;)

CSS
1#topPage {
2  display: flex;
3  justify-content: flex-end;
4  align-items: flex-end;
5}
6
7#topPage p {
8  margin: 0 0 0 0.5em; /* ← 任意 */  
9  height: 2.8rem;
10}

投稿2019/07/12 09:17

yoshinavi

総合スコア3523

ベストアンサー

以下のCSSですね。display: block;でaタグをブロックレベル要素に変更し、min-height: 1.6rem;で最小限の高さを設定、backgroundで画像の指定と繰り返し、表示位置の指定。
途中のpaddingは余白の設定ですかね。
文字位置自体はどこかでbottom指定をしているんでしょう。
とてもシンプルなコードだと思うので、ミニマム環境で試してみて下さい。
ちなみに以下のCSSはchromeの開発者ツールで探してみて下さいね。

CSS
1#topPage a {
2    display: block;
3    min-height: 1.6rem;
4    padding: .6rem 0 0 2.8rem;
5    background-image: url(../img/icon_ftr_arrow_01.png);
6    background-repeat: no-repeat;
7    background-position: left bottom;
8}

投稿2019/07/10 08:26

mikan_s4n

総合スコア377

taka_oct092018

2019/07/10 08:41

mikan_s4n様返信ありがとうございます。具体的にどのようにコードを書き換えればいいのでしょうか？ミニマム環境とはどのようなものでしょうか？クロームのデベロッパーツールはいつも使っています。

taka_oct092018

2019/07/10 10:02

文字位置のボトム指定がポイントなのでしょうか？

mikan_s4n

2019/07/10 11:49

急ぎで書いたので間違えました。ブロックレベル要素だと文字位置指定のvertical-alignが使えないので、display:inline-block の方ですね。これを指定するとインライン要素のように扱えるので、vertical-alignが使えたと思います。 vertical-alignが分からなければリファレンスを調べてみると理解しやすいですよ。画像との位置関係を1px単位で調整したいとなると、メンテナンス性は悪くなりますが、画像と文字でタグを分けた上でposition指定でゴリゴリに設定するのもできます。ただ、オススメは致しませんが…

taka_oct092018

2019/07/10 13:26

具体的で丁寧な回答ありがとうございます。今はものすごく疲れているので、後日改善に向けて取り組みます。

taka_oct092018

2019/07/12 08:41

mikan_s4n様インライン要素にしてvertical-alignを試しましたがうまく行きませんでした。その代りにHTMLの構造を変えて再挑戦しています。

mikan_s4n

2019/07/12 10:09

どううまくいかなかったかは分かりませんが、インラインとインラインブロックは扱いか異なりますよ。インライン要素の主体は文字のため、height等の指定はできません。一方ブロック要素は主体が入れ物(タグ)になりますのでheight等の指定ができます。大雑把に言うと、そのいいとこ取りみたいなものが、インラインブロックです。今回の場合はaタグとしてリンクの性能を残しつつ、ブロック要素としてheight等の指定を出来るようにできます。まずはインラインとブロックとはなんぞやという根本的なところを理解出来れば今後も色々な場面で役に立ちますよ

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

あなたの回答