[フロントエンド]横固定の美しいUIをスマホレスポンシブでも実現したい。

###前提・実現したいこと
美しい横固定UIをWebブラウザの横固定でも実現したい。

AbemaTVさんのようなアプリには
スマホ端末の向きに関係なく常に横固定のUIがあると思いますが、
ブラウザで見る通常のWebサイトにも同様の
常に横固定のUIを実装すること自体は可能なのでしょうか。

実現の方法をグぐって検索をしましたが、なかなか出てこず・・・

###実現イメージサイト
実現イメージは下記サイトのUIですが、
スマホでは縦画面に横UIが表示され、
スマホ端末を横に向けた時しか実現されておらず、見にくくなってしまいます・・。

http://dd-inc.jp/

行動規範の内容に同意します

回答3件

ベストアンサー

こういう感じですか？（あとは @media で回転に合わせて切り替えれば）

CSS
1body {
2	margin: 0;
3	padding: 0;
4	height: 100vh;
5	width: 100vw;
6	overflow: hidden;
7}
8div {
9	position: absolute;
10	left: 0;
11	top: 0;
12	overflow-y: scroll;
13	transform: rotate(90deg) translate(0px, -100vw);
14	transform-origin: left top 0;
15	height: 100vw;
16	width: 100vh;
17}
18```**動くサンプル：**[https://jsfiddle.net/3dor6Lbp/](https://jsfiddle.net/3dor6Lbp/)
19
20---
21
22【transform-origin - 変形の基軸を調整する】
23[https://syncer.jp/css-reference/transform-origin](https://syncer.jp/css-reference/transform-origin)
24
25【@media - CSS | MDN】
26[https://developer.mozilla.org/ja/docs/Web/CSS/@media](https://developer.mozilla.org/ja/docs/Web/CSS/@media)
27
28【デバイスに合わせてCSSを振り分ける「Media Queries」 ｜ Developers.IO】
29[http://dev.classmethod.jp/smartphone/device-media-queries/](http://dev.classmethod.jp/smartphone/device-media-queries/)
30