Go to Qiita Advent Calendar 2024 Top
LoginSignup
Sakuya_wd
@Sakuya_wd (霧崎さくや)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

レスポンシブデザイン 余白を調整したい

Q&A

Closed

HTMLCSS

問題

現在iSaraの模写をしています。
windowのサイズを変更した際に、
header部分に関してロゴの左側とボタンの右側の余白を調整したいです。

下記の挙動を目指しています。

下記は現状です。

ソースコード

html
<div id="wrapper">


  <!-- ヘッダー -->
  <div class= "header">
    <div class="headerLogo">
      <img src ="./image/isaralogo.png">
    </div>
    <div class="headerTitle">
      <p>バンコクのノマドエンジニア育成講座</p>
    </div>
    <div class="headerContact">
      <a href="#nineteenthSection-link">お問い合わせ / 資料請求はこちら</a>
    </div>
  </div>

</div>
css
*{
  margin: 0;
  padding: 0;
}

.wrapper{
  width: 100%;
}

/* ヘッダー */
.header{
  display: flex;
  height: 75px;
  width: 100%;
  position: fixed;
  z-index: 10;
  background-color: #FFFFFF;
}

.headerLogo img{
  padding: 15px 0px 0px 130px;
  width: 130px;
  height: 50px;
}

.headerTitle p{
  padding: 37px 0px 0px 0px;
  margin: 0px 0px 0px 13px;
  font-style: normal;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic Pro";
  font-size: 14px;
  line-height: 22px;
  color: #333333;
  letter-spacing: 1px;
}

.headerContact {
  margin-left: auto;
  padding: 25px 90px 0px 0px;
}

.headerContact a{
  text-decoration: none;
  font-style: normal;
  font-weight: 300;
  font-family: "Hiragino Kaku Gothic Pro";
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  letter-spacing: 1px;
  background-color: #DA6A64;
  border-radius: 30px;
  padding: 15px 45px 15px 40px;
}
0

1Answer

thiagomatsui
@thiagomatsui

要素にpaddingをつけるのではなく、もう一つheader内にdiv要素を追加してそこにwidth,margin: 0 auto; を設定すれば上記のようになります。

<div class= "header">
  <div class="headerInner"> <!-- ← タグを追加 -->
    <div class="headerLogo">
      <img src ="./image/isaralogo.png">
    </div>
    <div class="headerTitle">
      <p>バンコクのノマドエンジニア育成講座</p>
    </div>
    <div class="headerContact">
      <a href="#nineteenthSection-link">お問い合わせ / 資料請求はこちら</a>
    </div>
  </div>
</div>

/* ヘッダー */
.headerInner{
  width: 1000px;
  margin: 0 auto;
}

.headerLogo img{
  padding: 15px 0px 0px 0;
  width: 130px;
  height: 50px;
}

.headerContact {
  margin-left: auto;
  padding: 25px 0 0px 0px;
}
1Like

Comments

  1. @Sakuya_wd

    Questioner

    ご回答有り難うございます。

Your answer might help someone💌

LoginSign Up