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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3677閲覧

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

yucom

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/01/19 07:47

編集2020/01/19 07:53

ヘッダーの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;

}

}

.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/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

css

1.header-left { 2 display: flex; 3 align-items:center; 4}

投稿2020/01/19 08:43

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/01/19 08:44

まるっきり被ってしまいました。。
yucom

2020/01/19 09:11

hatena19さん 説明不足ですみません。解釈していただいたとおりです。 やりたいように出来ました。 ありがとうございます!
hatena19

2020/01/19 09:15

ちなみに class="las la-envelope la-2x" ってなんでしょうか。はじめてみました。Font Awesome とは違うようですが。
hatena19

2020/01/19 09:23 編集

-apple-さん、ありがとうございます。 そんなのがあるんですね。参考になりました。
退会済みユーザー

退会済みユーザー

2020/01/19 09:28

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

0

ベストアンサー

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

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

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

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

css

1header { 2 display: flex; 3}

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

投稿2020/01/19 08:30

編集2020/01/19 08:37
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yucom

2020/01/19 09:19

-apple-さん サンプルをつけていただきありがとうございます! おっしゃる通り、横並びで表示できました。 ただ、私の説明不足で申し訳ありません、 アイコン<i class="las la-envelope la-2x"></i>とh2を同じ高さにしたかったのでした。 でも-apple-さんの指定方法で分かりました。ありがとうございます。 headerのクラス名、意図はありませんでした。 添付していただいた参考サイトを確認してみますm(_ _)m
退会済みユーザー

退会済みユーザー

2020/01/19 09:26

解決した様で何よりです。 アイコンとh2の高さを同じにするにせよ、flexboxを使うのは変わりないので、どこを指定するかを変えれば実装できると思います。 今回の回答・解説した点は -flexboxの使い方 -セレクターについて です。セレクターにつきましては、classが多かった印象もありますので、要素セレクターにすると、より分かりやすく、綺麗なコードになると思います。 簡単に説明すると、以下2つのコードは同じ結果となります。 インデントや空白の設定に関しても目を通しておいて良いと思います。 (インデントはコメント欄の都合上割愛します。) <h2>hello</h2> h2 { color: red; } <h2 class="h2">hello</h2> .h2 { color: red; }
退会済みユーザー

退会済みユーザー

2020/01/19 09:28

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

2020/01/19 09:37

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

0

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

投稿2020/01/19 08:25

creator.M

総合スコア80

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yucom

2020/01/19 12:19

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問