CSSで，画面の横幅(width)と要素の高さ(height)をパーセント指定で連動させる方法 （動作サンプルつき。親と子のタテとヨコを連動）
問題
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> ㌼㌨㌥㌑㌝㌈㌏㌐㌞㌞㌞㌞㌑㌆<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>
ソースコード２（親の横幅を，子の縦幅に反映させる）：
<!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> ㌼㌨㌥㌑㌝㌈㌏㌐㌞㌞㌞㌞㌑㌆<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%;」の２つを付与
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
今から３分で，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
