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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

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

CSS

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

Q&A

解決済

1回答

3508閲覧

margin-topを設定するとヘッダーが下がる

aspot_0734

総合スコア19

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/19 09:41

下記のように、margin-topを設定すると、ヘッダーが下がってしまいます。
本当によく分からず、調べても出てこず、かなり抽象的ですが、よろしくおねがいします。
イメージ説明
検証したものが以下になります。
イメージ説明

html

1 <div class="big"> 2 <div class="container"> 3 <div class="show-texts"> 4 <%= @post.content %> 5 </div> 6 </div> 7</div>

css

1.container { 2 background-color: white; 3 margin: 0 auto; 4 width: 700px; 5 height: 500px; 6 border: 10px solid #f5f5f5; 7 margin-top: 100px; 8}

html

1 <header> 2 <div class="header-left"> 3 <p>ChatSpot</p> 4 </div> 5 <div class="header-right"> 6 <ul> 7 <li> 8 <%= link_to("投稿一覧", "/posts/index") %> 9 </li> 10 <li> 11 <%= link_to("新規登録", "/signup") %> 12 </li> 13 </ul> 14 </div> 15 </header>

css

1 header { 2 height: 75px; 3 width: 100%; 4 background-color: #4169e1; 5 position: absolute; 6 z-index: 1; 7 display: flex; 8 justify-content: space-between; 9}

ruby

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

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

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

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

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

Lhankor_Mhy

2020/03/19 09:49

header 要素は最初のHTMLで言うと、どこにありますか? .big の上ですか?
aspot_0734

2020/03/19 10:32

headerは常に表示させるためにapplication.css, bigはposts.cssというファイルに、別々に書いています。 それが原因ですかね?
kei344

2020/03/19 13:02

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
aspot_0734

2020/03/19 13:05

忘れてました。 ありがとうございます。
guest

回答1

0

ベストアンサー

bodyや.bigにpadding-topを指定する形で対応したほうがいい箇所と考えます。

marginは親要素の枠を越えて周りの要素に影響するので、
子要素、孫要素に大きな値を指定しないようにしたほうが無難です。

あと、<header>への指定は、position: fixed;ではないでしょうか?
(意図通りの挙動をしていないなら、試してみてもいいと思います。)

投稿2020/03/19 10:31

new1ro

総合スコア4528

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

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

aspot_0734

2020/03/19 10:38

position: absolte; を position: flexed; top: 0; とすることでmarginのままでもできました! ありがとうございます!
new1ro

2020/03/19 10:40

よかったです!
new1ro

2020/03/19 10:45

ただ、外側の余白はできるだけ外側の要素 (=浅い階層の要素) で指定したほうが、 どの要素で余白を指定しているかを探しやすくなるので、.containerに指定するのは避けたほうがいいと思います。 以下のようなシチュエーションできっと似たような崩れ方をするのでそのときにでも思い出してください。 ``` <div style="background: gray;"> <div class="container" style="margin-top: 100px;"> ... </div> </div> ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問