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

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

ただいまの
回答率

89.05%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 655

taka_oct092018

score 32

フッターの「ページの先頭へ戻る」とその左にあるアイコン画像をボトムでそろえる方法を教えて下さい。
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>東京都千代田区X-X-X 電話 0120-000-XXXX 営業時間 11:00~20:00(水曜日定休日)</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;


}
/* 【フッター】 ここまで↑ */ 
/* 【共通箇所・基本設定:ページ全体】 ここまで↑ */
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • taka_oct092018

    2019/07/11 12:55

    質問を編集しました。

    キャンセル

  • taka_oct092018

    2019/07/12 17:38

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

    キャンセル

  • taka_oct092018

    2019/07/12 17:41

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

    キャンセル

回答 2

+1

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

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

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

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

#topPage {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

#topPage p {
  margin: 0 0 0 0.5em; /* ← 任意 */  
  height: 2.8rem;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/10 22:26

    具体的で丁寧な回答ありがとうございます。

    今はものすごく疲れているので、後日改善に向けて取り組みます。

    キャンセル

  • 2019/07/12 17:41

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

    キャンセル

  • 2019/07/12 19:09

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

    キャンセル

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

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る