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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2238閲覧

子要素を、親要素の中に入れたい(位置的に)

EXIT

総合スコア43

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2019/02/15 06:40

編集2019/02/16 14:19

問題

親と子が離れ離れに
このように、親(div#filter)と子(input)が離れ離れになってしまいました。
子要素のinputは90°回転してあります。(縦のスライドバーにするため)

親のdiv#filter+少し写ってるwrapで、position: sticky;の連携がうまくいってるので
子要素のinputを動かしたいのですが、何故か動きません…

今のdiv#filter(親)がある位置にぴったりinput(子)を置きたいです。

コード

html

1<div class="l-wrap"> 2 3 <div id="filter"> 4 <input type="range" name="page" orient="vertical" step="20" list="pagelist" /> 5 <datalist class="pagelist"> 6 <option value="1"></option> 7 <option value="2"></option> 8 <option value="3"></option> 9 <option value="4"></option> 10 <option value="5"></option> 11 </datalist> 12 </div> 13 14<!-- この間に他要素 --> 15 16</div>

css

1input[type=range]:focus { 2 outline: none; 3} 4#filter { 5 position: sticky; 6 position: -webkit-sticky; 7 top: 250px; 8 left: 57px; 9 width: 13px; 10 height: 196px; 11 float: left; 12} 13 14#filter input[type=range][orient=vertical] { 15 writing-mode: bt-lr; /* IE */ 16 -webkit-appearance: none; 17 width: 196px; 18 right: 250px; 19 bottom: 57px; 20 -webkit-transform:rotate(90deg); 21 -moz-transform:rotate(90deg); 22 -o-transform:rotate(90deg); 23 transform:rotate(90deg); 24} 25/* Chrome */ 26#filter input[type=range][orient=vertical]::-webkit-slider-runnable-track { 27 -webkit-appearance: none; 28 height: 13px; 29 background: url('../img/jiku.svg'); 30} 31#filter input[type="range"][orient=vertical]::-webkit-slider-thumb { 32 -webkit-appearance: none; 33 width: 30px; 34 height: 35px; 35 margin-top: -11px; 36 background: url('../img/botan.svg') no-repeat center center; 37} 38/* Firefox */ 39#filter input[type=range]::-moz-range-track { 40 height: 13px; 41 background: url('../img/jiku.svg'); 42} 43#filter input[type="range"]::-moz-range-thumb { 44 width: 30px; 45 height: 35px; 46 margin-top: -11px; 47 background: url('../img/botan.svg') no-repeat center center; 48} 49 50.l-wrap { 51 width: 100%; 52 height: 1421px; 53}

よろしくお願いします。

追記

ありがとうございます!
おしい
ちょっと位置がずれてたので transform-origin: bottom left; にしたらものすごく惜しい所まできて、ここから少し上にしたいのですが left: とか top: で指定しても全く動きませんTT
もうちょっとなんですが、この微調整はどうやったら効きますか?

azuapricot👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

stdio

2019/02/15 06:49

学校の課題等なら自分で解いて下さい。
azuapricot

2019/02/15 07:33

ん~、課題には見えませんがね~。 数日前から試行錯誤して頑張っている印象です。(難しそうなので回答はできませんが)
EXIT

2019/02/15 10:33 編集

学校の課題じゃないです。 完全に自主的なやつで、周りにエンジニアみたいな人がいないのでここ使わせてもらってます。 >>azuapricotさん ちゃんと見てくださってる方がいると思うと励みになります。ありがとうございます。(孤独環境なので)
yoshinavi

2019/02/15 22:43

ブラウザは何が対象でしょうか?
yoshinavi

2019/02/16 00:16

>子要素のinputを動かしたいのですが、何故か動きません… → 位置のプロパティがないからでは?
EXIT

2019/02/16 14:15

>>yoshinaviさん 使ってるのはChromeです。でもできたら全ブラウザに対応したいです。 right とかって位置のプロパティじゃないんですか…?
guest

回答1

0

ベストアンサー

問題は回転の軸が中心点にあることかと思います。
transform-originを使って軸をずらしてみては?

css

1element.style { 2 transform: rotate(90deg); 3 transform-origin: 0% 50%; 4}

投稿2019/02/15 11:35

yutampp

総合スコア182

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

EXIT

2019/02/16 14:16 編集

ありがとうございます!!ちゃんと動きました! ちょっと位置がずれてたので transform-origin: bottom left; にしたらものすごく惜しい所まできたのですが、(追記参照)ここから少し上にしたいのですが left: とか top: で指定しても全く動きませんTT もうちょっとなんですが、この微調整はどうやったら効くんでしょうか?
yutampp

2019/02/17 04:52

回転させる軸を考えてやれば、 スライダーの高さの半分だけ、上からも左からも離れた箇所を、軸に指定すればビッタリになるかと思います。 長方形の板を回転させるにはどこに釘を打てばいいかといったことを思い浮かべてみてください。 でも、divごと回転させたほうが楽じゃないですか?(なんでピッタリ合わせたいのかはわかりませんが) スライダーの高さなんてブラウザごとに違うだろうし。
EXIT

2019/02/17 11:03

上下左右 px % - translate() 色々試してみましたがうまく嵌りませんでした。うーん難しいですね。90°回るのが厄介です。 divごと回転のが楽→ですよね。でも divごと回転すると position: sticky; の終わる所が指定より下にずれるし、調整もまた90°を加味しないといけないのでどちみちややこしくなってしまいます ; ; かといって90°回転をやめるとスライドバーが動かなくなるし…(画像使ってるので縦バーだと動かず、横→90°回転でしか動かない) 自分には難解です… ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問