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

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

ただいまの
回答率

88.80%

ヘッダーのh2とアイコンの高さを揃えたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 639

yucom

score 22

ヘッダーのh2の文字と右のアイコンを同じ高さに揃えたいのですが
h2の文字を下げようとすると要素ごと下がってしまいます。
指定方法が間違っていると思いますがどこかわかりません。
該当のhtmlとcssの指定方法を教えていただきたいです。

イメージ説明

該当のソースコード

<header class="header">
  <div class="header-left">
     <h2>ここを右のアイコンと同じ高さに</h2>
       <div class="socialbtn">
         <i class="las la-envelope la-2x"></i>
         <i class="lab la-github la-2x"></i>
         <i class="lab la-twitter la-2x"></i>
       </div>
  </div>

    <div class="header-right">
            <nav class="list">
              <ul class="site.map">
                <li><a href="#">About</a></li>
                <li><a href="#jump">Works</a></li>
                <li><a href="#">Blog</a></li>
             </ul>
          </nav>
      </div>
 </header>
コード

 ```

レスポンシブcss  
@media (min-width:1024px){  


.header{  
margin:0px 220px;  
}  

.header-left h2{  
text-align: start;  
margin-top: 20px;  

}  

.header-right a{  
font-size: 0.8em;  
padding-left: 20px;  

}  
}  

共通css

.header{  
background-color: white;  
}  

.header-left h2{  
width:100%;  
text-align: start;  
}  

.socialbtn{  
list-style: none;  
display: flex;  
justify-content:flex-end;  

}  

.socialbtn i{  
max-width: 33px;  
padding:3px;  


}  



.header-right ul{  
display: flex;  
list-style: none;  
justify-content: flex-end;  
margin-top: 10px;  

}  

.list li{  
padding-right: 10px;  
}  

.header-right a{  
color: #000;  
text-decoration: none;  
font-size: 14px;  
}  

試したこと

h2を<div>で囲む。
h2にクラスをつけてcssで指定する

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

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

こんにちは。以下でどうでしょう?

動くサンプル
headerの要素を全て横並びで表現するとできます。
横並びの要素はcssのflex boxというものが一般的に使われている方法の1つだと思います。

今回、flex boxの説明は割愛させていただきますが、検索していただけると、参考になるサイト等が沢山あるので参考にしてみてください。

ざっくりいうと、横並びさせたいものを囲んでdisplay: flex;で横並びとなります。
header内の要素を全て横並びにしたい時

header {
  display: flex;
}

ちなみに、headerタグにそのままheaderというクラスをつけるのは好ましくないです。
(意図が読み取れませんでしたが、理由があるなら大丈夫です。)
下記サイトを参考にしてください。
セレクターについて

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/19 18:19

    -apple-さん
    サンプルをつけていただきありがとうございます!
    おっしゃる通り、横並びで表示できました。
    ただ、私の説明不足で申し訳ありません、
    アイコン<i class="las la-envelope la-2x"></i>とh2を同じ高さにしたかったのでした。
    でも-apple-さんの指定方法で分かりました。ありがとうございます。

    headerのクラス名、意図はありませんでした。
    添付していただいた参考サイトを確認してみますm(_ _)m

    キャンセル

  • 2020/01/19 18:26

    解決した様で何よりです。
    アイコンとh2の高さを同じにするにせよ、flexboxを使うのは変わりないので、どこを指定するかを変えれば実装できると思います。

    今回の回答・解説した点は
    -flexboxの使い方
    -セレクターについて
    です。セレクターにつきましては、classが多かった印象もありますので、要素セレクターにすると、より分かりやすく、綺麗なコードになると思います。
    簡単に説明すると、以下2つのコードは同じ結果となります。
    インデントや空白の設定に関しても目を通しておいて良いと思います。
    (インデントはコメント欄の都合上割愛します。)

    <h2>hello</h2>
    h2 {
    color: red;
    }

    <h2 class="h2">hello</h2>
    .h2 {
    color: red;
    }

    キャンセル

  • 2020/01/19 18:28

    追記

    質問が解決したのであれば解決済みを押してください。

    キャンセル

  • 2020/01/19 18:37

    ご丁寧な解説ありがとうございます!
    flexboxの使い方をもっと勉強します。
    セレクターについてもご説明ありがとうございます。
    分かりやすいです!

    キャンセル

0

.header-left内のh2div(アイコン?)を横並び、かつ高さを中央揃えにしたいと解釈しました。
<i class="las la-envelope la-2x"></i>これがたぶんアイコンかな?

.header-left {
  display: flex;  
  align-items:center;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/19 18:16 編集

    下記サイトのアイコンを使用したのではないでしょうか?
    https://themewagon.github.io/Ready-Bootstrap-Dashboard/icons.html

    キャンセル

  • 2020/01/19 18:23 編集

    -apple-さん、ありがとうございます。
    そんなのがあるんですね。参考になりました。

    キャンセル

  • 2020/01/19 18:28

    hatena19さん
    私は、いくつかアイコンがダウンロードできるホームページを以前探していたのですが、現在はとても多く、クオリティも高くて驚きました。
    たまに、玉石混じりもありますが。。。

    キャンセル

-1

はじめまして。
H2の要素に、CSSで回り込みを設定して、それぞれのmargin-topを調整してみては、いかがでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/19 21:19

    ご回答ありがとうございました。
    そういった方法もあるのですね。
    今回はflex-boxを使い解決させて
    頂きました。

    キャンセル

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

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

関連した質問

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