読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

CSSで,画面の横幅(width)と要素の高さ(height)をパーセント指定で連動させる方法 (動作サンプルつき。親と子のタテとヨコを連動)

css 小ネタ

問題

CSSで「親の幅を,子の幅に」連動させるのは簡単だ。単純にパーセント指定すればよい。


では,「親の幅を,子の幅に」連動させるにはどうするか?

(JavaScriptを使ってはいけない。)


解答例

横をタテに・・・という事は

rotateを使って無理やり回転させればいいのでは…?


動作サンプル ※ブラウザのサイズをいろいろ変えてみてください

CSSだけで,要素の横幅(width)を画面の縦幅(height)に応じて変化させるサンプル
http://name-of-this-site.org/coding/css/tateyoko-width-percent/tateyoko.html


CSSだけで,要素の縦幅(height)を画面の横幅(width)に応じて変化させるサンプル
http://name-of-this-site.org/coding/css/tateyoko-width-percent/tateyoko2.html


ソースコード(親の縦幅を子の横幅に反映させる):

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSSだけで,要素の横幅(width)を画面の縦幅(height)に応じて変化させるサンプル</title>
  <meta name="viewport" content="width=device-width" />
</head>
<body>

<div id="container">
  
  ↓画面の縦幅が変化すると,この青い領域の横幅が変化します。
  
  <div id="hoge">

    <div id="fuga">
      
      ※表示サンプル用テキスト<br>
      <br>
      <br>

      &#13116;&#13096;&#13093;&#13073;&#13085;&#13064;&#13071;&#13072;&#13086;&#13086;&#13086;&#13086;&#13073;&#13062;<br>
      <br>
      <br>
      
      ゎぃゎ ヵッォゃ<br>
      <br>
      <br>

      「ぁぁ ゅぅぅっ ゃゎぁ…」<br>
      っゅ ゎ ぃゃゃゎ…。 <br>
      <br>

      ヵッォ「ぉぃ ヮィヶィヶィ ゎ ぅぇ ヵ?」<br>
      ゥヶッヶ「ぃぃぇ ヮィヶィヶィ ゎ ょっゃ ょ」<br>
      ヵッォ「ぁぁ ょっゃ ヵ ょゅぅ ゃ」<br>
      ゥヶッヶ「ょっゃ ヵィヮィ ゎ ぉぃゎ ゃ ヵィャ ぅょぅょ ょ」<br>
      ヵッォ「ヵィャ ゎ ぃゃゃゎ ゅぅぅっ ゃゎ」<br>
      ゥヶッヶ「ぅぇ ゎ ェィヵィヮ ょ」<br>
      ヵッォ「ェィヵィヮ ヵょ ョヶィ ゅぅぅっゃ」<br>
      ゥヶッヶ「ゎぇぃ ヵ ぇぃゎ ぉ ヵぉぅょ」<br>
      ヵッォ「ぃゃゃゎ ゎぃ ゎ ぃゃゃ」<br>
      ゥヶッヶ「ェィヵィヮ ぃぃゎょ ェィヵィヮ」<br>
      ヵッォ「ぃゃゃ ェィヵィヮ ぃゃゃ ぅゎ ュゥヵィ ゃ ぃゃ ぃゃぁぁぁぁ」 <br>
      <br>
      <br>
      
      「ヶッィ ゎ ョィヵ? っぇッヵィ ュヵ ょ」<br>
      「ぃぃゎょ」<br>
      「ぃょぃょ ョゥヵィぉぅ ぉ ぅっ」<br>
      「ぇぇ、 ぁぃっ ぉ ぅっゎ」<br>
      「ゃっ ゎ っょぃ。 ヵォ ぉ ッヶ」<br>
      「ヵォ ゎ ょゎぃ?」<br>
      「ァヵィ っぇ ぉ ッヵェ」<br>
      「ォゥヶィ ょゅぅょ」<br>
      「ぉぉ ぇぃゅぅょ ゃっ ぉ ぉぇ。 ぁぉぃ ぃぇ ぇ ュヶ!」<br>
      <br>
      ゃぉゃ ぉ ヶィュ。ぃゎ ぉ ゥヵィ。<br>
      ュヵ ゎ ぃょぃょ ぁぉぃ ぃぇ。<br>
      「ョゥヵィぉぅ ゎ ぅぇ ヵ」<br>
      「ぅゎぁ ぇぃゅぅ ゃ」<br>
      ョゥヵィぉぅ ゎ ぉぇっ。<br>
      「ィィヮヶ ゎ ぃぃ」<br>
      ュヵ ゎ ヶィヵィ。 ァヵィ っぇ ぉ ょぅぃ。<br>
      「ぁゎゎ、ゎぃ ゎ っぇ ゎ ぃゃゃ。 ぉぅぃ ゎ ぇぇ。 ゅぅぁぃ ゃ」<br>
      「ヮヵィ? ぃぃゎ。ヵィヶッょ」<br>
      ぉぃゎぃ ゎ ょぃ ぉゃっ。 <br>
      <br>
      <br>
      
    </div>

    要素の見かけ上のwidthは変化してくれますが,<br>
    中身のwidthまでリキッドには変化してくれません。

  </div>

</div>


<style>

html, body{
  /* bodyにheightを指定すれば,中身の要素もheightを%指定できる */
  height : 100%;

  padding : 0;
  margin  : 0;
}

#container {
  width  : 100%;
  height : 100%;
  border : solid 1px red;
}

#hoge {
  /* 高さは半分とする */
  height : 50%;

  /* タテと横を無理やり入れ替える */
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  
  transform-origin: 0 0;  
  -moz-transform-origin: 0 0;  
  -webkit-transform-origin: 0 0;  
  
  border : solid 1px blue;
  background-color : skyblue;

  width : 500px;
  margin-top : 500px;
}


#fuga {
  /* 入れ替わったタテと横を元に戻す */
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  
  transform-origin: 0 0;  
  -moz-transform-origin: 0 0;  
  -webkit-transform-origin: 0 0;  
  
  border : solid 1px black;

  margin-left : 500px;
  width : 500px;
  padding : 10px;
}


</style>


</body>
</html>

ソースコード2(親の横幅を,子の縦幅に反映させる):

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSSだけで,要素の縦幅(height)を画面の横幅(width)に応じて変化させるサンプル</title>
  <meta name="viewport" content="width=device-width" />
</head>
<body>

<div id="container">
  
  ↓画面の横幅が変化すると,この青い領域の縦幅が変化します。
  
  <div id="hoge">

    <div id="fuga">
      
      ※表示サンプル用テキスト<br>
      <br>
      <br>

      &#13116;&#13096;&#13093;&#13073;&#13085;&#13064;&#13071;&#13072;&#13086;&#13086;&#13086;&#13086;&#13073;&#13062;<br>
      <br>
      <br>
      
      ゎぃゎ ヵッォゃ<br>
      <br>
      <br>

      「ぁぁ ゅぅぅっ ゃゎぁ…」<br>
      っゅ ゎ ぃゃゃゎ…。 <br>
      <br>

      ヵッォ「ぉぃ ヮィヶィヶィ ゎ ぅぇ ヵ?」<br>
      ゥヶッヶ「ぃぃぇ ヮィヶィヶィ ゎ ょっゃ ょ」<br>
      ヵッォ「ぁぁ ょっゃ ヵ ょゅぅ ゃ」<br>
      ゥヶッヶ「ょっゃ ヵィヮィ ゎ ぉぃゎ ゃ ヵィャ ぅょぅょ ょ」<br>
      ヵッォ「ヵィャ ゎ ぃゃゃゎ ゅぅぅっ ゃゎ」<br>
      ゥヶッヶ「ぅぇ ゎ ェィヵィヮ ょ」<br>
      ヵッォ「ェィヵィヮ ヵょ ョヶィ ゅぅぅっゃ」<br>
      ゥヶッヶ「ゎぇぃ ヵ ぇぃゎ ぉ ヵぉぅょ」<br>
      ヵッォ「ぃゃゃゎ ゎぃ ゎ ぃゃゃ」<br>
      ゥヶッヶ「ェィヵィヮ ぃぃゎょ ェィヵィヮ」<br>
      ヵッォ「ぃゃゃ ェィヵィヮ ぃゃゃ ぅゎ ュゥヵィ ゃ ぃゃ ぃゃぁぁぁぁ」 <br>
      <br>
      <br>
      
      「ヶッィ ゎ ョィヵ? っぇッヵィ ュヵ ょ」<br>
      「ぃぃゎょ」<br>
      「ぃょぃょ ョゥヵィぉぅ ぉ ぅっ」<br>
      「ぇぇ、 ぁぃっ ぉ ぅっゎ」<br>
      「ゃっ ゎ っょぃ。 ヵォ ぉ ッヶ」<br>
      「ヵォ ゎ ょゎぃ?」<br>
      「ァヵィ っぇ ぉ ッヵェ」<br>
      「ォゥヶィ ょゅぅょ」<br>
      「ぉぉ ぇぃゅぅょ ゃっ ぉ ぉぇ。 ぁぉぃ ぃぇ ぇ ュヶ!」<br>
      <br>
      ゃぉゃ ぉ ヶィュ。ぃゎ ぉ ゥヵィ。<br>
      ュヵ ゎ ぃょぃょ ぁぉぃ ぃぇ。<br>
      「ョゥヵィぉぅ ゎ ぅぇ ヵ」<br>
      「ぅゎぁ ぇぃゅぅ ゃ」<br>
      ョゥヵィぉぅ ゎ ぉぇっ。<br>
      「ィィヮヶ ゎ ぃぃ」<br>
      ュヵ ゎ ヶィヵィ。 ァヵィ っぇ ぉ ょぅぃ。<br>
      「ぁゎゎ、ゎぃ ゎ っぇ ゎ ぃゃゃ。 ぉぅぃ ゎ ぇぇ。 ゅぅぁぃ ゃ」<br>
      「ヮヵィ? ぃぃゎ。ヵィヶッょ」<br>
      ぉぃゎぃ ゎ ょぃ ぉゃっ。 <br>
      <br>
      <br>
      
    </div>

  </div>

</div>


<style>

html, body{
  padding : 0;
  margin  : 0;
}

#container {
  width  : 100%;
  border : solid 1px red;
}

#hoge {
  /* 横幅は半分とする */
  width : 50%;
  
  /* タテと横を無理やり入れ替える */
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  
  transform-origin: 0 0;  
  -moz-transform-origin: 0 0;  
  -webkit-transform-origin: 0 0;  
  

  border : solid 1px blue;
  background-color : skyblue;

  height : 500px;
  margin-left : 500px;

}


#fuga {
  /* 入れ替わったタテと横を元に戻す */
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  
  transform-origin: 0 0;  
  -moz-transform-origin: 0 0;  
  -webkit-transform-origin: 0 0;  
  
  border : solid 1px black;

  height : 500px;
  padding : 10px;
  
  position : relative;
  bottom : -500px;
}

</style>


</body>
</html>

ちなみに注記にあるとおり,

要素の中身がリキッドに変形してくれるわけではないので,実用性はいまいちだ。


参考:

高さ100%のボックス-CSS TIPS
http://css.webcreativepark.net/tips2/

  • html要素とbody要素のheightプロパティに対して100%と明示的に指定しておく事によりheight100%のdiv要素を作成する事ができます。


CSSで高さ(height)100%のボックス要素を作る方法 | BlackFlag
http://black-flag.net/css/20110621-3232.html

  • 「html」タグと「body」タグには「height:100%;」を付けて、 高さ100%を適用させる要素に対しては 「height:100%;」とあわせて「min-height:100%;」の2つを付与


transform:rotate()−CSS3リファレンス
http://www.htmq.com/css3/transform_rotate.shtml


transform-origin−CSS3リファレンス
http://www.htmq.com/css3/transform-origin.shtml


ゎぃ ゎ ヵッォ ゃ のガイドライン6ゃ
http://anago.2ch.net/test/read.cgi/gline/1289717587/

関連記事:

CSSだけで「横並び」と「縦並び」を切り替え可能なテーブルを,dl・dd・dtタグで作ろう (table要素を使わない,変更しやすい表組みレイアウトの実装方法) - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20120312/p1


今から3分で,HTML5のドラッグ&ドロップAPIと File APIを習得しよう(JSの実装サンプル付き) - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20140330/HTMLfiveDragDropAndFileAPISample


HTML5の「Web Workers API」を,別ファイルを使わずページ単体で利用するサンプル (createObjectURLがあれば,1ファイルでマルチスレッドのJSコーディングが可能) - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20140331/HTMLfiveWebWorkersAPISampleOnlyOneFile


Webサイトの画像に文字を埋め込もうとする人がいたら,フォントのライセンス問題を知ってもらうために見せるページ (MS明朝・MSゴシックは,商用利用可能か?) - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20111024/p1