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

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

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

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

Ruby on Rails

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

HTML

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

CSS

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

Q&A

解決済

1回答

1475閲覧

ヘッダーと本文が積み木状態にならない問題

EleAco

総合スコア15

Ruby

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

Ruby on Rails

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/10/08 03:52

編集2020/10/09 07:06

前提・実現したいこと

個人アプリ開発中です
トップページのヘッダーが積み木関係にならず画像が上手く表示させることができません。

HTML

1本文のHTML 2 3<%= render "shared/header" %> 4 5 <%# トップ画像 %> 6<div class="contents"> 7 <div class='first-page'> 8 <img class="top-page-photo" src="/assets/top-page2.jpg"> 9 10 <%# コンセプトテキスト %> 11 <div class="top-concept"> 12 <h3 class="consept-text"> 13 テキストが入ります。テキストが入りますテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 14 </h3> 15 <h4 class="second-consept-text"> 16 テキストが入ります。テキストが入りますテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 17 </h3> 18 </div> 19 </div> 20</div>

CSS

1本文のCSSです 2.contents{ 3 width: 100vw; 4 display: flex; 5 background-color: violet; 6} 7 8.top-page-photo{ 9 width: 100%; 10 height: 100%; 11 object-fit: cover; /*画像の縦横比を整える */ 12 opacity: 0.2; 13}

イメージ説明
contensがヘッダーの領域まで表示されている為写真が透けてしまっています
イメージ説明
この問題を解決したいです
皆様のお力をお貸しください…!よろしくお願いいたします

##追加
皆様ご指示ありがとうございます。

html

1<%#_header.html.erbのHTML%> 2 3 4<header> 5 <div class='top-page-header'> 6 <%#ロゴの情報が入る%> 7 <div class='photoroke-icon'> 8 <a href="/"> 9 <img class='photoroke-icon-photo'src="/assets/Photoroke_logo.png"> 10 </a> 11 </div> 12 13 <%#ページの名前が入る%> 14 <h2 class='top-page-name'> 15 ここに各ページの名前が入ります 16 </h2> 17 18 <%#ハンバーガーアイコンが入る%> 19 <p class='hamburger'>tekisuto</p> 20 </div> 21</header>

css

1<%#_header.css%> 2 3*{ 4 margin: 0px; 5} 6 7.top-page-header { 8 width: 100vw; 9 height: 15vh; 10 display: flex; 11 background-color:#DDDDDD; 12 justify-content: space-around; 13 align-items: center; 14 position: fixed; 15} 16 17.photoroke-icon{ 18 height: 90%; 19 margin-top: 10px; 20} 21 22.photoroke-icon-photo{ 23 height: 100%; 24} 25 26.top-page-name{ 27 background-color: cornflowerblue; 28 height: 50%; 29 font-size: 3vh; 30} 31 32.hamburger{ 33 background-color: darkgreen; 34 width: 100px; 35 height: 50px; 36} 37

#解決方法
Lhankor_Mhy 様よりアドバイスいただきまして解決することができました
何をしたかと言いますと、ヘッダーの大きな枠であるtop-page-headerを
本文の大きな枠であるcontentsの並び順を、z-indexで指定してあげたら良いということでした
######IllustratorやPhotoshopを触ったことがあるかただったらレイヤーの重なり順みたいな感覚のものです
僕がしたい事としては、top-page-headerがcontentsより上に来てくれればcontentsの画像がヘッダーにかかることがないわけです。
なのでtop-page-headerにz-index1を記述しました。

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

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

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

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

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

m.ts10806

2020/10/08 04:14

Ruby on Rails前提でしたらタグがないとアドバイスは得られないかと思います。 HTML,CSSだけならHTMLもブラウザに表示されたコードをご提示ください。
Lhankor_Mhy

2020/10/08 07:52

ヘッダー部分のHTMLとCSSをご提示ください。
guest

回答1

1

ベストアンサー

こんにちは。

これは、重ね合わせコンテキスト(スタッキングコンテキスト)の影響です。

本来であれば、その画像は position:fixed であるヘッダの下に潜るはずです。
しかし、opacity を設定するとスタッキングコンテキストを生成するので、画像もヘッダと同じく「高さのある」状態になります。
そして、双方とも z-index:auto ですので、同じ「高さ」となり、DOMの出現順で画像の方が上に来るのです。


解決方法ですが、z-index を適切に設定しましょう。
下記の参考ページが、かなりわかりやすいです。


参考:
君は真に理解しているか?z-indexとスタッキングコンテキストの関係 - ICS MEDIA

投稿2020/10/09 03:09

Lhankor_Mhy

総合スコア37018

gogoweb_ikeda👍を押しています

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

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

EleAco

2020/10/09 06:55

解決することができました! 解決した方法に関しては本文にて記述させていただきます! 大変助かりました新しく知識を増やすことができましたありがとうざいます
Lhankor_Mhy

2020/10/09 07:15

追記拝読。 正しいご理解だと思います。 ご解決されて何よりでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問