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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

7028閲覧

【コード、画像有】cssの「fixed」を使用することで、レイアウトが崩れる原因を教えていただけませんか。

sanset

総合スコア186

CSS3

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/07/29 03:49

サイト内に、スクロールによって追従するサイドメニューを作りたいと思います。(PC専用)

その際に、スクロール位置によってcssの「position:fixed」を追加しサイドメニューを固定したいと思うのですが、
fixedを使用することでよくわからないレイアウト崩れが起きてしまいました。画像とコードで状況をお伝えしますので、よろしければご一緒に考えて頂ければ幸いです。

【現在の状況】

まずは背景色で簡単に位置分けをしております。左がサイドメニューです。

HTML

1<!DOCTYPE html> 2<html lang="ja-JP"> 3<head> 4<meta charset="UTF-8"> 5<title>test</title> 6</head> 7<style type="text/css"> 8 9.main{ 10 width:800px; 11 margin:0 auto; 12} 13 14.clearfix:after{ 15 content:""; 16 display:block; 17 clear:both; 18} 19 20.main > div{ 21 float:left; 22 box-sizing:border-box; 23} 24 25.content{ 26 width:80%; 27 background-color:#CCC; 28 height:2000px; 29} 30 31.side{ 32 width:20%; 33 height:500px; 34} 35 36.side-in{ 37 background-color:#EEE; 38} 39 40.fixed{ 41 position:fixed; 42} 43 44</style> 45<body> 46 47<div class="main clearfix"> 48 <div class="side"> 49 <div class=""> <!-- ここにfixedを入れる --> 50 <div class="side-in"> 51 こちらがサイドメニューになります 52 </div> 53 </div> 54 </div> 55 <div class="content"> 56 ここはメインコンテンツ 57 </div> 58</div> 59 60</body> 61</html>

イメージ説明

薄いグレーになっている部分がサイドメニューの領域で、「こちらがサイドメニューになります」という文章を入れています。

この状態で、.side-inの親要素に.fixedを追加を追加すると、

イメージ説明

このようになぜか大元の.sideを横幅をはみ出してしまいます。
word-break: break-allなどを利用してもこの状況は改善されませんでした。

.fixedを追加させても、「こちらがサイドメニューになります」を.sideの領域の中で折り返しを行いたいのですが、その場合はどのような記述を行えばいいのでしょうか。

実験はfirefox,chromeで確認しています。コードはコピーで画像のような状況を再現できます。

どなたかご教示お願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

<div class="side"> ここで幅指定をしてそのあと <div class="fixed"> <!-- ここにfixedを入れる --> ここでfixed(スクロールも無視した固定)をしているので

その内側だけが固定されています。固定されている領域は文字列とその周囲で、サイドメニュー自体は固定されていません。
試しに色を付けてみるとわかりやすいと思います。

css

1.side{ 2 width:20%; 3 height:500px; 4 background-color:#ff0000; 5}

一つ上のタグではなく画面に依存したサイズになっていることがわかると思います。
これでは折り返しません。


解消するには、サイドのクラス指定で一緒にfixedを指定して(もしくはsideにfixedを含める)

html

1<div class="side fixed">

そのままだとサイドメニューが画面の大きさに依存してしまうので絶対値で幅を固定して

css

1.side{ 2 width:160px; 3 height:500px; 4 background-color:#ff0000; 5}

コンテンツが一番左に来てしまうので左にマージンを空けて

css

1.content{ 2 width:80%;//(ここも横幅固定でOK) 3 background-color:#CCC; 4 height:2000px; 5 margin-left:20%; 6}

あとところどころ調整すればしっかりと動くと思います。

ただこれをしてしまうと、小さい画面で閲覧しようとすると固定されたサイドメニューが邪魔をしてメインコンテンツが見れなくなることも。
フレームを使って分割して、左右とも自由にサイズ変更できるようにしたり、左右のスクロールのみ許容する(javascriptが必要?)などするとより良いページになると思います。

投稿2016/07/29 05:35

intelf___

総合スコア868

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

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

sanset

2016/08/01 02:26

詳しいコードでの解説までくださり、ありがとうございます。 無事解決いたしました。
guest

0

.side-inがfixedつまり親要素に関係なく絶対配置となったときに、いわば親要素の外に出たような状態になります。
fixedを指定した要素自体に幅を指定する必要があります。
もしsideの幅が可変ならば、JavaScriptなどを使用する必要があるかもしれません。

投稿2016/07/29 05:05

NatsumiOki

総合スコア1298

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

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

sanset

2016/08/01 02:26

回答ありがとうございます。 横幅を指定したところ、無事解決いたしました。sideは可変ではないので問題ありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問