CSSでのリキッドレイアウトの作り方

Question

縦横比を固定しながらwindowサイズに追従する一般的な書き方を教えてください。

比率を保ちたいのは画像要素、divなどで囲った要素、それらを並べたときなどです。

よろしくお願いいたします。

Answer 1

私も先日までMasakazuFukamiさんと同じ方法でCSSで縦横比固定をしてたんですが、
某セミナーで「自分のwidthを基準に縦横比を固定する方法」を教えてもらい、目からウロコでしたので
共有しておきます。

.box{
  position:relative;
  width:30%;←ここは任意の数
}
.box:before{
  padding-top: 150%; ←親要素.boxに対する比率
}
.box__inner{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

これは便利ｗ

Comments

[enokiyo]

MasakazuFukamiさんとの違いがよくわからなかったのですが:beforeは何を意味していますでしょうか？

[aKusano]

.boxに直接padding-topを設定した場合、基準は.box自身のwidthではなく、その親要素のwidthとなります。
:before擬似要素にpadding-topを設定した場合は、.boxのwidthが基準となります。
詳しくはこちらのスライドをご覧ください。
http://yoshiko-pg.github.io/slides/20150830-backtobasics/

[MasakazuFukami]

うぉおおおおおおおおお！
これ超便利ですね！！！！！！
ゾクッとしました！！！（笑）

これ使わせてもらいます！！！！！

[MasakazuFukami]

すいません僕の回答ちょっと間違ってましたｗ
僕.boxのしたにもう一つdivをかませてそれを基準にpadding-topを指定するようにしてました！
おそらくyoshikoさんがされていることと同じ原理です！
ただ、before要素を使って実装されるのはすごいですねｗ
感動しましたｗ

[MasakazuFukami]

ちなみに僕の無知で申し訳ないんですが、afterやbeforeなどの擬似要素にcontentやdisplay:block;などを指定しなければ動かない？理由ってなんなんでしょうか？？

[aKusano]

:before、:afterは「擬似要素」といって、指定要素の開始タグ直後（:before）・終了タグ直前（:after）に「要素っぽいもの（擬似要素）」を作り出すことができる特殊なセレクタです。
擬似要素を実際に生成するのがcontentプロパティなので、それがないと何も作られない＝動作しないはずです。（上の私のサンプルソースだとダメですね多分ｗ）

contentプロパティで作られる擬似要素は、<span></span>に相当するものと考えると分かりやすいのですが、デフォルトではdisplay:inline;として生成されます。なので、widthやheightを設定したければdisplay:block;などに変更しないとスタイルが効かないです。

ちなみにposition:absolute;が設定された要素は自動的にdisplay:block;になる仕様のようですので、擬似要素をposition:absolute;で絶対配置にする場合は、わざわざdisplay:block;と明示しなくても良いようです。

[MasakazuFukami]

うぉ！メチャクチャ勉強になります！
個人的にはcontentプロパティをデフォルトで''に指定していてほしいなと感じました（笑）
擬似要素がdisplay:inline;で作られるのは初めて知りました！
メチャクチャ勉強になります！

ありがとうございます！

Answer 2

縦横比の固定ですね。
横だけの比率保持なら簡単なんですが、縦横の比率保持は結構難しいと思います。

投稿者様は①画像要素②divなどで囲った要素の縦横比率保持なのでひとつずつ解説します。

①画像の縦横比率保持
画像に関しては横幅を%指定すると縦幅も勝手に比率保持されるのでwidth="50%"など指定すると問題なく縦横の比率を保持したまま可変します。

②divタグ等の縦横比率保持
こえはcssのドンピシャの方法はなく、無理やり作成します。
1.jsで指定する方法（.boxという要素に縦:横 = 1:1.5とする）

  window.onresize = function(){
        var $box = $('.box');
        var width = $box.width();
        
        $box.height(width * 1.5);
      }

とすることで、windowのサイズがリサイズするたびにjsが実行されて$boxのheightに横幅の1.5倍が入ります。

2.cssで無理やり指定する（縦:横 = 1:1.5）（個人的にはこっちが好きです）
cssで指定するのに何が難しいかというと実装する側としては、
「自分の横幅」の1.5倍としたいわけですがcssで「自分の横幅」を基準に指定してくれるプロパティでいいものがないことです。
ただ、縦横のレスポンシブにする場合はpadding-top（or padding-bottom）を指定することが多いのでこれを使います。

つまり1:1.5にしたい場合はwidth:○%;padding-top:150%;を指定すると縦横のレスポンシブになります。

そしてその要素をposition:relative;にし、子要素をposition:absolute;top:0;left:0;width:100%;heght:100%;にしてpaddingを指定した親要素いっぱいに広げてあげることで縦横のレスポンシブを指定することが可能です。

具体的なコードは以下です。

<div class="box">
  <div class="box__inner">ここがレスポンシブになるよ</div>
</div>

.box{
  position:relative;
  width:30%;←ここは任意の数
  height:0;
  padding-top:150%;←1:1.5の場合。1:0.5の場合だと50%を指定、1:3の場合だと300%を指定しましょう！
}
.box__inner{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

こうすることで実現できます！

長くなってしまいましたが、頑張ってください！

Answer 3

<div class="content">
    <div class="left">
       Sample Text Node
    </div>
    <div class="right">
       Sample Text Node
    </div>
</div>
<p>
    <img src="./test.jpg" alt="test" />
    Sample Text Node
</p>

div.content,
p{
overflow : hidden;
}
div.content div.left{
   width : 20%;
   float : left;
}
div.content div.right{
   width : 80%;
   float : right;
}
p img{
    width : 20%;
    float : left;
}
media screen and (max-width : 767px){
   div.content div.left,  
   div.content div.right,
   p img{
      width  : 100%;
      float  : none;
   }
}

私はこんな感じでmedia queryを利用したり%指定したりしてます。