Q&A
型崩れ、ってだけで、あなたのところで起こっていることを想像できる人はいません。
スクリーンショットをつけるなり、もっと詳しく説明できませんか。
display:flexで型崩れをしてしまいなおせなくなりました。
display flexの子要素にメインとサイドが8:2であり、固定させたくてサイド全体にposition fixedしたら型くずれしました。
対処法お願いします！
レスポンシブです！→
このような形になりました
回答1件
0
ベストアンサー
position:fixedしますとwidth入れないと崩れるかと思いますので、width:20%と80%で分割するなどで対応はどうでしょうか？
またコードと実現したいこと（サイドメニューとメイン画面がほしい等）が載せてありますと明確にお答えできますので、お手数でなければ質問を編集頂けますと幸いでございます。
投稿2021/06/07 10:38
総合スコア318
ご返信ありがとうございます。
ちょっとコードが書けない状態でしたので、SlackやDMでzipファイル事送りたいのですが可能でしょうか？
両方にwidthしたのですが型くずれしてしまいました
かしこまりました。
ちょっとDM上でのやりとりは大変失礼して申し訳ございませんがすこし抵抗がありますため、もしコードを公開しても大丈夫であればgithubにあげていただくか、googledrive等に上げていただいてリンクをご共有頂けますと幸いでございます。
わかりました、貼らせていただきますね！
大変お手数をおかけいたしますがどうぞよろしくお願い致します。
後、補足で固定させてからスクロールしたいのですがそのやり方とかも教えて頂けますと助かります。
githubはこちらになります！
メインを動かしているときに、サイドバーを固定する流れなのですが、逆に
サイドバーをスクロールしているときにメインを固定する動きと同じようにできますか？
ご連携頂きましてありがとうございます。
今外におりますため、後ほどご返信させていただきますので宜しくお願いします。
ありがとうございます。
お待ちしております
画像とかは一旦著作権とかあるとは思いますので、一旦htmlとcssの方を下記修正してみました。
htmlとcss部を写していただければyakiringo様の環境でも使えるかと思いますのでご確認ください。
メインとサブの固定につきましてはflexをお使いいただいているのでoverflow-y:scrollで実現できます。
https://codepen.io/masanori0209/pen/xxqzrOW
凄すぎませんか...
本当にありがとうございます...
overflow-y:scrollで実現出来るんですね！
これ以外に元のコードに比べて大きくこれが必要って部分ありますかね？
いえ他は特に触っておりませんので、これ以外は大丈夫でございます。
（ただ、index.htmlとstyle.cssは結構変更加えましたので、codepenのリンクをコピーして動作確認いただけますと幸いでございます。）
動作するか確認してみますね！
分からない部分あれば追加でお聞きしてもよろしいでしょうか？
はい、大丈夫でございます。
もし、動作自体は大丈夫そうでしたらこの質問とは別で新しく質問いただけますとスムーズですので、
どうぞよろしくお願いいたします。
大きな原因としては、overflow以外に何かあれば教えて頂きたいです
二つございますので、下記列挙いたしますね。
1. position: fixedによって固定されてしまっていたため、widthが崩れてしまってました。
2. width, heightの指定がなかったため、固定スクロールを実現することができていなかったかと思われます。
上記以外は少しyoutubeのレイアウトをみて少し調整（paddingやmarginなど）しただけですので特段良いかと思いました。
ありがとうございます。
コードを今比較しながら見ているのですが、貼ったら上にスペースが足りなくなったのでご回答お願いしたいです。（画像はりました）
responsive.cssのほうを下記にしていただいてみてもよろしいでしょうか？
---
/*レスポンシブ対応*/
@media (max-width: 1330px) {
.aside {
width: 80px;
background-color: white;
height:100%;
}
.main {
width: 93%;
}
.list-video > li {
width: 30%;
}
/*サイドリスト*/
.side-list {
padding: 15px 0px;
}
.side-text {
padding-left: 4px;
text-align: center;
}
.side-list a {
display: block;
padding: 0;
text-align: center;
}
.side-list p {
font-size: 10px;
display: block;
line-height: 12px;
margin-top: 10px;
margin-right: 10px;
width: 70px;
}
.side-bar {
border-bottom: 0;
padding: 0 0 12px 0;
width: 85%;
}
.side-bar3,
.side-bar2,
.lastText,
.reserved {
display: none;
}
.none {
display: none;
}
}
もし、お手数でなければ先ほどのスクリーンショットの状態のソースコードのものをgithubへ反映いただけますとありがたいです。
わかりました、送らせていただきますね！
あと、先程のレスポンシブの画像も貼らせていただきますね！
ご対応ありがとうございます。
大変申し訳ございませんが明日朝早いため、また明日回答させていただきますね。
（おそらくお昼ごろか18時以降となりますことご了承くださいませ。）
画像を最新にさせていただきました！
githubにも先程あげました！＞＜
分かりました！お待ちしておりますね！
夜遅くまでお時間いただきありがとうございました！また自分でもコード比較して見直してみます！
あれから自分でもやって見たのですが結局何が原因か分かりませんでした、、、
調べたら解決出来ました！本当にお礼しきれません；；
何お礼させていただけないでしょうか・・・
ご返信遅くなり大変申し訳ございません。
解決できて良かったです！
私も勉強がてら行っているだけですので特段大丈夫ですよ！もし宜しければベストアンサーにしていただけると嬉しいです。
分かりました！押させていただきますね！
また機会がありましたら個別にお声掛けに行くのは駄目でしょうか？
ありがとうございます。
もちろん大丈夫ですよ。
普段は仕事しているので、レスポンス遅くなる事もありますが、何かありましたらお声掛け下さいませ。
twitterとかでよければ@M2Ldevで活動しておりますので、そこでDM頂ければと思います。
ありがとうございます！！！
フォローさせていただきますね！！！
あなたの回答
tips
プレビュー
