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

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

ただいまの
回答率

88.04%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 5,007

score 70

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

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

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


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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+1

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

投稿者様は①画像要素②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%;
}

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+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%;
}

これは便利w

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/17 12:41

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

    キャンセル

  • 2015/09/17 23:44 編集

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

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

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

    キャンセル

  • 2015/09/18 11:15

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

    ありがとうございます!

    キャンセル

0

<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を利用したり%指定したりしてます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

閲覧数の多いCSSの質問