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

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

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

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

CSS

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

Q&A

解決済

4回答

4753閲覧

HTMLのposition:fixed;について質問です。

KaKiYuKi

総合スコア13

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/22 08:07

最近Progateで勉強し始め、「HTML & CSS 中級編」の道場コースの課題に挑戦しています。

問題自体は解決しているのですが、どうしても理解ができていないので質問させてください。

画像の「見本」のようにヘッダー部分を固定したくて、73行目に「position:fixed;」をCSSに記述しました。

実際の「プレビュー」だとヘッダーの帯が短くなってしまいました。

初心者なりに考えたのですが、78行目の「.containerクラス」に「width: 1170px;」と幅を指定しており、その状態で73行目に「position:fixed;」とだけ記述したので、恐らく画面左上を基準として固定され、ヘッダーの幅が1170pxだから帯が短くなっているように表示されているのかなと思いました。

イメージ説明

どうしても分からなかったので「見本」の「要素の検証」を使ってソースをみたところ、cssの「position:fixed;」と記述されているクラス内に「width: 100%;」とも記載されており、なんとなくピンときたので74行目に「width: 100%;」を記述しました。

すると下記の画像のように上手くいき課題自体もクリアしたのですが、なぜヘッダーの幅を100%に固定したら上手くいったのかの仕組みが理解できません・・・これはどういった理屈で上手くいったのでしょうか?

イメージ説明

ド素人質問で申し訳ありませんが、どうか理由を教えて下さい。

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

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

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

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

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

yu-smc

2019/02/22 08:13

有料コンテンツに関する質問はまずい気がします。。。 別の形で質問できませんか?
yoshinavi

2019/02/22 11:24

Progateの内容は知りませんが、「ボックスモデル」についての内容は初級・中級には無いのでしょうか?
KaKiYuKi

2019/02/22 11:45

yu-smcさん 言われてみればそうですね・・・次回からは気を付けます。 yoshinaviさん ボックスモデルについての内容はありました。 大きい要素の中にさらに要素が入ってるというようなイメージ?みたいな考え方がまだパッと思いつかないというかなんというか・・・。
yoshinavi

2019/02/23 06:30

いくつもの「ボックスモデル」が配置されて、画面に表示(デザイン)されています。 各要素の大きさ(幅や高さ)の指定方法と、基準となる部分を理解していかないと、他の要素が少し加わっただけで、意図するデザインができなくなったりします。 そこで気を付ける事項のひとつに「単位」があります。いくつか種類があるので、それぞれの適した使用方法を理解していくのが、今後の課題のひとつかと思います。
guest

回答4

0

ベストアンサー

【幅いっぱいにならない場合】
こちらの画面をみると親要素にheader、子要素に.containerで書いてあるかと思います。
position:fixedを指定した場合、左上を基準に固定されます。
(親要素にposition:static以外があればその要素の左上を基準に固定されますが、ない場合はディスプレイの左上を基準に固定されます。)
その場合、子要素の.containerにwidth:1170pxを指定してありますので親要素であるheaderの横幅も1170pxになります。
質問者さんの使用されている画面が1170pxよりも大きいため、左端から1170px以降は空白になるためheaderが横幅いっぱいには表示されません。

【幅いっぱいになった場合】
親要素のheaderにwidth:100%;と指定した場合、width:100%;=使用しているディスプレイいっぱいに表示するということになるので、左端から右端まで表示されます。

余談ですが、もしwidth:100%;で幅がいっぱいになった時にProgarte、ログインの文字の横にスペースができたのかと思われたら、それは.containerにmargin:0 auto;を使用しているためです。
margin:0 auto;=親要素に対して子要素(margin:0 autoを指定した要素)を真ん中にもってくるという意味ですので、親要素width:100%;に対して子要素width:1170px;を真ん中に持ってくるということです。
例でいえば、親要素がwidth:1000px;子要素がwidth:600pxの場合1000pxの中央に600pxを配置するので左右に200pxの余白ができます。

投稿2019/02/22 09:16

hiroki88

総合スコア66

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

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

KaKiYuKi

2019/02/22 11:47

詳しくありがとうございます!あれからまた色々考えてなんとか理解する事ができました。
guest

0

まず、position:fixedというのは位置をそこに固定してしまい、他の何者の要素にも干渉されないようになります。そのwidthを1170pxに指定して、そこまでしか幅が表示されないってことは貴方が見ているブラウザ、あるいはディスプレーの幅が1170px以上あるってことです。

対して100%というのは、コンテンツ全体の幅を100%でブラウザに表示させます。ですので、幅が650pxのブラウザやディスプレイでも1900pxのディスプレーでも目一杯幅が表示されます。

この部分は見ている利用者の環境(ブラウザの指定幅)に依存し、フル表示だとディスプレーのサイズに直結します。仮にそのサイトを1170pxのままスマホで見てみたら、ブラウザに表示しきれずに、横に移動できるようにスクロールが表示されるはずですが、100%にするとディスプレーで表示できる幅いっぱいに表示されるはずです。

投稿2019/02/22 08:36

編集2019/02/22 08:54
FKM

総合スコア3608

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

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

KaKiYuKi

2019/02/22 11:49

ありがとうございます!返信内容とボックスモデルについて等を考えてたらなんとか理解する事ができました。
guest

0

解決済みにしたいと思います。回答してくださった方、ありがとうございました。

投稿2019/02/23 13:27

KaKiYuKi

総合スコア13

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

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

0

解決済みにしたいと思います。回答してくださった方、ありがとうございました。

投稿2019/02/23 13:26

KaKiYuKi

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問