プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
Web制作のノウハウ

【レスポンシブ】横並び要素の横幅をレスポンシブにする方法

「レスポンシブデザイン難しい。」

「もっと簡単にできないか。」

と思っていたら、いいのを発見しました。

CSSだけで、簡単にレスポンシブデザインを作る方法をご紹介します。

 

横並び要素の横幅をレスポンシブデザインにする方法

横に並んだ要素の横幅(width)を一定に保つ方法です。

どんな画面幅でも一定の割合で要素の幅がレスポンシブに動きます。

 

CSSボタンを押して、画面幅を変えてみてください。

画面幅が変わっても、4:6の割合で一定に保っているのがわかると思います。

See the Pen
【レスポンシブ】横に並んだ要素のwidthをレスポンシブに
by MacLove (@maclove1)
on CodePen.

とても簡単ですね。

以下サンプルコードを貼っておきますので、コピペで使ってください。

 

HTMLのサンプルコード

HTMLのサンプルコードを載せておきます。コピペで使ってください。

<div class="container">
  <div class="content1">コンテンツ1</div>
  <div class="content2">コンテンツ2</div>
</div>

 

CSSのサンプルコード

CSSのサンプルコードを載せておきます。コピペで使ってください。

.container {
  display: flex;
}

.content1 {
  width: 40%;
  background-color: lightblue;
}

.content2 {
  flex: 1;
  background-color: pink;
}

 

以上です。