Q&A
変に反映されてしまっているのできちんと```でコードの開始と終わりを囲ってください。このままでは回答者の読む気や再現をする気が起きないと思います。
https://practice2017.web.fc2.com/root_may282019/info.html
アイコンと見出しの文字列「施設のご案内」の中心の高さを揃えることが出来ません。
https://practice2017.web.fc2.com/root_may282019/idx.html
このページでは上手く揃ったですが…。```(info.html)
(info.html) <!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>トップ|HAPPINESS FITNESS CLUB</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body id="info"> <header class="hdr"><!-- 【ヘッダー】 --> <h1 class="logo"><a href="idx.html"><img src="img/logo_hdr.png" alt="ハピネスフィットネスクラブ"></a></h1> <nav class="gnav" role="navigation" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション --> <ul class="wrap-list"> <li><a href="info.html"><img class="img-info" src="img/gnav_hdr_01_info.png" alt="施設のご案内"></a></li> <li><a href="fee.html"><img class="img-fee"src="img/gnav_hdr_02_fee.png" alt="料金プラン"></a></li> <li><a href="opinion.html"><img class="img-opinion" src="img/gnav_hdr_03_opinion.png" alt="ご意見・ご要望"></a></li> </ul><!-- /.wrap-list --> </nav><!-- /.gnav --> </header><!-- /.hdr --> <div class="contents"><!-- 【コンテンツ】 --> <div class="contents-main"><!-- 【メインコンテンツ】 --> <h2><img class="icon_h2_02">施設のご案内</h2> <p></p> <p></p> <p></p> <p></p> <p></p> </div><!-- /.contents-main --> <div class="contents-sub"><!-- 【サブコンテンツ】 --> <aside class="wrap-sub-nav"> <nav class="sub-nav" role="navigation" aria-label="サブナビゲーション"><!-- 【サブナビゲーション】 --> <ul> <li class="ttl_sub-menu"><a href="info.html"><img src="img/ttl_sub-menu.png" alt="施設のご案内"></a></li> <li><a href="opinion.html"><img src="img/btn_contact.png" alt="ご意見・ご要望"></a></li> </ul> </nav><!-- /.gnav --> </aside><!-- /.wrap-sub-nav --> </div><!-- /.contents-sub --> </div><!-- /.contents --> <footer class="ftr"><!-- 【フッター】 --> <p><small>Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.</small></p> </footer><!-- /.ftr --> </body><!-- /.file-name --> </html> (idx.html) <!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>トップ|HAPPINESS FITNESS CLUB</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body id="idx"> <header class="hdr"><!-- 【ヘッダー】 --> <h1 class="logo"><a href="idx.html"><img src="img/logo_hdr.png" alt="ハピネスフィットネスクラブ"></a></h1> <nav class="gnav" role="navigation" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション --> <ul class="wrap-list"> <li><a href="info.html"><img class="img-info" src="img/gnav_hdr_01_info.png" alt="施設のご案内"></a></li> <li><a href="fee.html"><img class="img-fee"src="img/gnav_hdr_02_fee.png" alt="料金プラン"></a></li> <li><a href="opinion.html"><img class="img-opinion" src="img/gnav_hdr_03_opinion.png" alt="ご意見・ご要望"></a></li> </ul><!-- /.wrap-list --> </nav><!-- /.gnav --> </header><!-- /.hdr --> <div class="contents"><!-- 【コンテンツ】 --> <div class="contents-main"><!-- 【メインコンテンツ】 --> <div class="wrap-contents-main"> <img class="img-main" src="img/img_main_idx.jpg" alt="メインの画像"> <section> <h2><img class="icon_h2_01">今月のお知らせ</h2> <p>入会された方に、ミネラルウォーターをプレゼントいたします。<br> 運動中の水分補給にお使いください。</p> </section> </div><!-- /.wrap-contents-main --> </div><!-- /.contents-main --> <div class="contents-sub"><!-- 【サブコンテンツ】 --> <aside class="wrap-sub-nav"> <nav class="sub-nav" role="navigation" aria-label="サブナビゲーション"><!-- 【サブナビゲーション】 --> <ul> <li class="ttl_sub-menu"><a href="info.html"><img src="img/ttl_sub-menu.png" alt="施設のご案内"></a></li> <li><a href="opinion.html"><img src="img/btn_contact.png" alt="ご意見・ご要望"></a></li> </ul> </nav><!-- /.gnav --> </aside><!-- /.wrap-sub-nav --> </div><!-- /.contents-sub --> </div><!-- /.contents --> <footer class="ftr"><!-- 【フッター】 --> <p><small>Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.</small></p> </footer><!-- /.ftr --> </body><!-- /.file-name --> </html> (css) @charset "utf-8"; /* 【基本色】 */ :root { --main-color : ; --accent-color : ; --dark-main-color : ; --text-bright-color : ; --icon-color : ; --icon-bk-color : ; --gray-color : ; --large-width : 1000px; --middle-width : 800px; } /* 【共通箇所・基本設定：ページ全体】 */ body { font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; max-width: var(--large-width); margin-right:auto ; margin-left: auto; } li { list-style:none; } /* 【ヘッダー】 ロゴとグローバルナビゲーションを横に並べる。 */ .hdr { display:flex; justify-content:space-between; } .logo, .gnav { flex:0 0 auto; } /* ロゴとグローバルナビゲーションを横に並べる。 */ .wrap-list { display:flex; justify-content:space-between; } .gnav li { flex:auto; } /* ロゴとグローバルナビゲーションの高さを揃える。 */ .gnav { padding-top: 10px; } /* 【フッター】 コピーライトを中央に寄せる。 */ .ftr { text-align:center; } p.ftr { display:inline-block; width:100%; } /* 【サブコンテンツ】 サブコンテンツを右端に配置する。 */ .wrap-sub-nav::after { content: ""; display: block; overflow:hidden; } .sub-nav { float: right; padding-right:10% } /* ２つの画像の上下の間を広げる。 */ .ttl_sub-menu { margin-bottom: 5%; } /* 【共通箇所・基本設定：ページ全体】 ここまで */ /* 【idx.htmlの設定】 【コンテンツ】 メインコンテンツとサブコンテンツを横に並べる。並べる比率は7:3とする。 */ #idx .contents { display:flex; align-items:flex-start; } #idx .contents-main { width: 70%; } #idx .contents-sub { width: 30%; } /* メインの画像とサブコンテンツの画像の上部を揃える。 */ #idx .contents-sub ul { margin-top: 0; } /* 文章と見出しの間を少し詰める。 */ #idx .contents h2, #idx .contents p { padding:0; margin:0; } #idx .contents p { margin-top:.4em; } /* 【メインコンテンツ】 メインコンテンツを中央に寄せる。 */ #idx .wrap-contents-main { margin-right:0; margin-left: auto; width:600px; } /* h2の見出しの前にアイコンを挿入する。 */ #idx .icon_h2_01 { background-image : url(../img/icon_h2_01.png); background-repeat : no-repeat; height : 15px; padding-bottom : .15em; padding-right : .25em; width : 15px; } /* 【idx.htmlの設定】 ここまで */ /* 【info.htmlの設定 】 【メインコンテンツ】 h2の見出しの前にアイコンを挿入する。 */ #info .icon_h2_02 { background-image : url(../img/icon_h2_02.png); background-repeat : no-repeat; height : 30px; width : 30px; } /* アイコンとh2の見出しの大きさを揃える。 */ /* 【info.htmlの設定 】 ここまで */
これをコピペすれば正しく反映できると思います。
一部変換ミスあるかもしれませんので悪しからず。
```HTML
<!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>トップ|HAPPINESS FITNESS CLUB</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head>
<body id="info"> <header class="hdr"><!-- 【ヘッダー】 --> <h1 class="logo"><a href="idx.html"><img src="img/logo_hdr.png" alt="ハピネスフィットネスクラブ"></a></h1> <nav class="gnav" role="navigation" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション --> <ul class="wrap-list"> <li><a href="info.html"><img class="img-info" src="img/gnav_hdr_01_info.png" alt="施設のご案内"></a></li> <li><a href="fee.html"><img class="img-fee"src="img/gnav_hdr_02_fee.png" alt="料金プラン"></a></li> <li><a href="opinion.html"><img class="img-opinion" src="img/gnav_hdr_03_opinion.png" alt="ご意見・ご要望"></a></li> </ul><!-- /.wrap-list --> </nav><!-- /.gnav --> </header><!-- /.hdr -->
<div class="contents"><!-- 【コンテンツ】 --> <div class="contents-main"><!-- 【メインコンテンツ】 --> <h2><img class="icon_h2_02">施設のご案内</h2> <p></p> <p></p> <p></p> <p></p> <p></p> </div><!-- /.contents-main -->
<div class="contents-sub"><!-- 【サブコンテンツ】 --> <aside class="wrap-sub-nav"> <nav class="sub-nav" role="navigation" aria-label="サブナビゲーション"><!-- 【サブナビゲーション】 --> <ul> <li class="ttl_sub-menu"><a href="info.html"><img src="img/ttl_sub-menu.png" alt="施設のご案内"></a></li> <li><a href="opinion.html"><img src="img/btn_contact.png" alt="ご意見・ご要望"></a></li> </ul> </nav><!-- /.gnav --> </aside><!-- /.wrap-sub-nav --> </div><!-- /.contents-sub --> </div><!-- /.contents -->
<footer class="ftr"><!-- 【フッター】 --> <p><small>Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.</small></p> </footer><!-- /.ftr --> </body><!-- /.file-name --> </html>
```
```HTML
<!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>トップ|HAPPINESS FITNESS CLUB</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head>
<body id="idx"> <header class="hdr"><!-- 【ヘッダー】 --> <h1 class="logo"><a href="idx.html"><img src="img/logo_hdr.png" alt="ハピネスフィットネスクラブ"></a></h1> <nav class="gnav" role="navigation" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション --> <ul class="wrap-list"> <li><a href="info.html"><img class="img-info" src="img/gnav_hdr_01_info.png" alt="施設のご案内"></a></li> <li><a href="fee.html"><img class="img-fee"src="img/gnav_hdr_02_fee.png" alt="料金プラン"></a></li> <li><a href="opinion.html"><img class="img-opinion" src="img/gnav_hdr_03_opinion.png" alt="ご意見・ご要望"></a></li> </ul><!-- /.wrap-list --> </nav><!-- /.gnav --> </header><!-- /.hdr -->
<div class="contents"><!-- 【コンテンツ】 --> <div class="contents-main"><!-- 【メインコンテンツ】 --> <div class="wrap-contents-main"> <img class="img-main" src="img/img_main_idx.jpg" alt="メインの画像"> <section> <h2><img class="icon_h2_01">今月のお知らせ</h2> <p>入会された方に、ミネラルウォーターをプレゼントいたします。<br> 運動中の水分補給にお使いください。</p> </section> </div><!-- /.wrap-contents-main --> </div><!-- /.contents-main -->
<div class="contents-sub"><!-- 【サブコンテンツ】 --> <aside class="wrap-sub-nav"> <nav class="sub-nav" role="navigation" aria-label="サブナビゲーション"><!-- 【サブナビゲーション】 --> <ul> <li class="ttl_sub-menu"><a href="info.html"><img src="img/ttl_sub-menu.png" alt="施設のご案内"></a></li> <li><a href="opinion.html"><img src="img/btn_contact.png" alt="ご意見・ご要望"></a></li> </ul> </nav><!-- /.gnav --> </aside><!-- /.wrap-sub-nav --> </div><!-- /.contents-sub --> </div><!-- /.contents -->
<footer class="ftr"><!-- 【フッター】 --> <p><small>Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.</small></p> </footer><!-- /.ftr --> </body><!-- /.file-name --> </html>
```
```CSS
@charset "utf-8";
/* 【基本色】 */ :root { --main-color : ; --accent-color : ; --dark-main-color : ; --text-bright-color : ; --icon-color : ; --icon-bk-color : ; --gray-color : ; --large-width : 1000px; --middle-width : 800px; }
/* 【共通箇所・基本設定：ページ全体】 */ body { font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; max-width: var(--large-width); margin-right:auto ; margin-left: auto; }
li { list-style:none; }
/* 【ヘッダー】 ロゴとグローバルナビゲーションを横に並べる。 */ .hdr { display:flex; justify-content:space-between; }
.logo, .gnav { flex:0 0 auto; }
/* ロゴとグローバルナビゲーションを横に並べる。 */ .wrap-list { display:flex; justify-content:space-between; }
.gnav li { flex:auto; }
/* ロゴとグローバルナビゲーションの高さを揃える。 */ .gnav { padding-top: 10px; }
/* 【フッター】 コピーライトを中央に寄せる。 */ .ftr { text-align:center; }
p.ftr { display:inline-block; width:100%; }
/* 【サブコンテンツ】 サブコンテンツを右端に配置する。 */ .wrap-sub-nav::after { content: ""; display: block; overflow:hidden; }
.sub-nav { float: right; padding-right:10% }
/* ２つの画像の上下の間を広げる。 */ .ttl_sub-menu { margin-bottom: 5%; } /* 【共通箇所・基本設定：ページ全体】 ここまで */
/* 【idx.htmlの設定】 【コンテンツ】 メインコンテンツとサブコンテンツを横に並べる。並べる比率は7:3とする。 */
idx .contents {
display:flex; align-items:flex-start; }
idx .contents-main {
width: 70%; }
idx .contents-sub {
width: 30%; }
/* メインの画像とサブコンテンツの画像の上部を揃える。 */
idx .contents-sub ul {
margin-top: 0; }
/* 文章と見出しの間を少し詰める。 */
idx .contents h2,
idx .contents p {
padding:0; margin:0; }
idx .contents p {
margin-top:.4em; }
/* 【メインコンテンツ】 メインコンテンツを中央に寄せる。 */
idx .wrap-contents-main {
margin-right:0; margin-left: auto; width:600px; }
/* h2の見出しの前にアイコンを挿入する。 */
idx .icon_h2_01 {
background-image : url(../img/icon_h2_01.png); background-repeat : no-repeat; height : 15px; padding-bottom : .15em; padding-right : .25em; width : 15px; } /* 【idx.htmlの設定】 ここまで */
/* 【info.htmlの設定 】 【メインコンテンツ】 h2の見出しの前にアイコンを挿入する。 */
info .icon_h2_02 {
background-image : url(../img/icon_h2_02.png); background-repeat : no-repeat; height : 30px; width : 30px; }
/* アイコンとh2の見出しの大きさを揃える。 */ここに言語を入力 コード ```
質問は編集できます。ヘルプ等を参考に、マークダウン機能を使い、各コードはコードブロックで提示してください。
yoshinavi様、返信ありがとうございます。
やっと編集が出来ました。
回答1件
0
ベストアンサー
imgタグにvertical-align: middle;を設定してやればよいです。
これでも画像が若干下にずれますが、その理由は文字の方が baseline 基準になっているためです。
baseline については、ここに書くと長くなるので調べてみてください。
対症療法として、画像にmargin-top: -0.1em;などを指定してやればよいです。
css
1#idx .icon_h2_01 { 2 vertical-align: middle; 3 mergin-top: -0.1em; 4}
ついでですが(お節介かもしれませんが)、imgタグに画像を指定せず、backgroundのみを指定するのはHTML的に正しくないのでおすすめしません。
h2に直接backgroundを指定することをおすすめします。使い回しがきく上、imgタグを書く必要もなくなるので、こちらのほうが有用です。異なるh2に異なる画像を使いたい場合はclass指定で分ければよいです。
#idx .contents h2 { background-image: url(../img/icon_h2_01.png); background-repeat: no-repeat; background-position: left center; /* 横位置 縦位置 */ /* background-position: left calc(50% - 0.1em); */ /* baseline由来のズレを補正するなら(数値は適当に) */ background-size: 20px 20px; /* サイズ指定 1em や 80% なども可能 */ padding-left: 30px; /* 画像分のスペースをあける */ }
投稿2019/05/31 12:20
総合スコア118
HAC様、返信ありがとうございます。
当初はh2にbackgroundを指定しておりましたが上手く行かなかったため、
imgタグを強引にねじ込んでしまいました。
今一度、基本に戻り再度修正を試みてみます。
あなたの回答
tips
プレビュー
