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

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

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

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

2回答

258閲覧

パンくずリストが消えてしまった。再表示させたい

naaS

総合スコア6

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

1クリップ

投稿2024/05/20 12:15

実現したいこと

消えたパンくずリストの再表示

発生している問題・分からないこと

ヘッダーのcssを編集、jsも追記したら、パンくずリストが消えた。
試行錯誤しても問題解決しません。以下はパンくずリストイメージ画像
イメージ説明

該当のソースコード

html

<body> <div class="top_fixed"> <div class="headtop" id="headtop"> <div class="head_logo"> <a href="index.html"><img src="img/city-search_06.png" alt="logo"></a> </div> <div class="head_right"> <div class="headtext">株式会社</div> <div class="headtext2">まるまるなどを行う会社です。</div> </div> </div> <div class="header"> <nav class="globalMenuSp"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="company.html">会社概要</a></li> <li><a href="privacy.html">プライバシーポリシー</a></li> <li><a href="bus_toppage.html">ページ</a></li> <li><a href="#">ページ2</a></li> <li><a href="#">ページ3</a></li> <li><a href="contact_form.html">お問い合わせ</a></li> </ul> </nav> <div class="navToggle"> <span></span><span></span><span></span><span>menu</span> </div> </div> </div> <div class="pankuzu_list"> <ul> <li><a href="index.html">ホーム</a></li> <li><p> > </p></li> <li>タイトル</li> </ul> </div> <div class="contents"> <div class="kashikiri"> <div class="kashikiri_head"> タイトル </div> <div class="kashikiri_image"> <div class="kashikiri_fuukei01"> <img src="img/IMG_shirobusfuukei.png" alt="bus"/> </div> <div class="kashikiri_text"> テキスト…<br> テキスト<br> テキスト </div> </div> </div> </body> </html>

css

* { margin: 0; padding: 0; box-sizing: border-box; } .header{ width:100%; overflow: hidden; padding: 0; margin: 0; } .head_logo{ width:50%; transition: max-height 0.3s ease; } .head_logo img{ max-width:35%; } .head_right{ width:40%; } .headtop { width: 100%; display: flex; position: fixed; z-index: 11; background-color: rgb(4 70 104); /*color: rgb(245 218 124);*/ padding: 10px 2%; /*justify-content: space-between;*/ /*align-items: center;*/ transition: height 0.3s ease; height: 24%; } .headtext { font-size: 24px; font-weight: 400; /*margin-top: 3%;*/ color: #fff; transition: font-size 0.3s ease; } .headtext2 { font-size: 14px; margin: -5px 0 0 0; color: #fff; transition: font-size 0.3s ease; } .pankuzu_list { width: 100%; margin: 10px 0px 10px 0px; z-index: 8; } .pankuzu_list ul { list-style: none; display: flex; margin-left: 20px; } .pankuzu_list li a { text-decoration: none; color: black; font-size: 14px; } .pankuzu_list li a:hover { color: black; text-decoration: underline; } .pankuzu_list li { text-decoration: none; color: black; font-size: 14px; } .pankuzu_list p { margin: 2px 10px 0px 10px; font-size: 13px; } .contents{ width:100%; overflow: hidden; display: flex; margin: 208px 0px 0px 0px; padding: 0px 0px; } .main { z-index: 2; } .kijibox{ width:50%; margin: 10px 10px 10px 10px; } .kita_side_nav{ width:50%; margin: 10px 10px 10px 10px; border-left: 1px dotted; } .kiji_link span { font-weight: bold; } .kiji_link a { text-decoration: none; color: black; } .link span { font-weight: bold; } .link a{ text-decoration: none; color: black; } .link { display: block; text-decoration: none; } .top_fixed { width: 100%; position: fixed; top: 0px; background-color: #fff;/* 背景色を追加して潜り込みを防ぐ */ z-index: 15; } .kashikiri{ width:100%; overflow: hidden; background-color: #edf0f9; } .kashikiri_head{ width:100%; font-size: 24px; text-align: center; background-color: #5aa3d6; margin-top: 2px; /* 固定位置を調整 */ padding-top: 2px; /* パディングを追加 */ } .kashikiri_image{ width:100%; } .kashikiri_fuukei01{ width:100%; } .kashikiri_fuukei01 img{ width: 94%; margin: 20px 3% 15px 3%; } .kashikiri_text{ text-align: center; background-color: #fff; border:1px solid #ccc; padding: 33px; margin: 0 3%; margin-right: 3%; font-size: 16px; letter-spacing: 0.4em; line-height: 2.3em; font-family:serif; font-weight: bold; } @media screen and (max-width:750px){ .head_logo { width: 50%; } .head_right { width: 40%; } .headtext { font-size: 13px; } .headtext2 { font-size: 13px; } } @media screen and (max-width:700px){ .headtext { font-size: 13px; font-weight: 400; margin-top: 10px; } .headtext2 { font-size: 6px; margin: -5px 0 0 0; } .head_logo{ margin-top: 10px; } .head_logo img{ max-width:30%; } .pankuzu_list li a { font-size: 10px; } .pankuzu_list li { font-size: 10px; } .pankuzu_list p { margin: 0px 6px 0px 6px; font-size: 9px; } } @media screen and (max-width:650px){ .contents{ width: 100% display: flex; flex-direction: column; } .kijibox{ width:100%; } .kita_side_nav{ width:100%; border: none; } } @media screen and (max-width:580px){ .head_logo { width: 45%; } .head_right { width: 40%; } } @media screen and (max-width:500px){ .head_logo { width: 40%; }   .headtop { margin-top: 0px; } .headtext { font-size: 6px; margin-top: 2px; } .headtext2 { font-size: 6px; } } @media screen and (max-width:300px){ .navToggle { right: 4px; } } nav.globalMenuSp { position: fixed; z-index: 11; top: 0; left: 0; background: #fff; color: #000; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 100%; } nav.globalMenuSp ul { background: #ccc; margin: 0 auto; padding: 0; width: 100%; } nav.globalMenuSp ul li { font-size: 1.1em; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted #333; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.globalMenuSp ul li a { display: block; color: #000; padding: 1em 0; text-decoration: none; } nav.globalMenuSp.active { transform: translateY(0%); } .navToggle { display: block; position: fixed; /* bodyに対しての絶対位置指定 */ right: 13px; top: 12px; width: 42px; height: 51px; cursor: pointer; z-index: 11; background: #666; text-align: center; } .navToggle span { display: block; position: absolute; /* .navToggleに対して */ width: 30px; border-bottom: solid 3px #eee; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px; } .navToggle span:nth-child(1) { top: 9px; } .navToggle span:nth-child(2) { top: 18px; } .navToggle span:nth-child(3) { top: 27px; } .navToggle span:nth-child(4) { border: none; color: #eee; font-size: 9px; font-weight: bold; top: 34px; } .navToggle.active span:nth-child(1) { top: 18px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

js

document.addEventListener('DOMContentLoaded', function() { var headtop = document.getElementById('headtop'); var originalHeight = headtop.offsetHeight; var shrinkHeight = originalHeight / 2; var logo = headtop.querySelector('.head_logo img'); var originalLogoHeight = logo.offsetHeight; var shrinkLogoHeight = originalLogoHeight / 2; var headtext = headtop.querySelector('.headtext'); var headtext2 = headtop.querySelector('.headtext2'); var originalFontSize = window.getComputedStyle(headtext).fontSize; var originalFontSize2 = window.getComputedStyle(headtext2).fontSize; var shrinkFontSize = (parseFloat(originalFontSize) * 0.8) + 'px'; var shrinkFontSize2 = (parseFloat(originalFontSize2) * 0.8) + 'px'; window.addEventListener('scroll', function() { if (window.scrollY > 50) { headtop.style.height = shrinkHeight + 'px'; logo.style.maxHeight = shrinkLogoHeight + 'px'; headtext.style.fontSize = shrinkFontSize; headtext2.style.fontSize = shrinkFontSize2; } else { headtop.style.height = originalHeight + 'px'; logo.style.maxHeight = originalLogoHeight + 'px'; headtext.style.fontSize = originalFontSize; headtext2.style.fontSize = originalFontSize2; } }); });
### 試したこと・調べたこと - [x] teratailやGoogle等で検索した - [x] ソースコードを自分なりに変更した - [ ] 知人に聞いた - [x] その他 ##### 上記の詳細・結果 グーグルの検索はワードプレスのパンくずリストの再表示方法ばかりで、html版の再表示方法は見あたりません。複数ファイルにまたがるcssを再度編集して、余分なcssを省いた。 ### 補足 特になし

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

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

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

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

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

guest

回答2

0

「.headtop」がfixedで上にずれてしまっているのでその分マージンを設定してください

CSS

1.pankuzu_list { 2 margin: 100px 0 0 0;

投稿2024/05/21 00:32

yambejp

総合スコア115241

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

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

naaS

2024/05/21 05:37

ありがとございました。
naaS

2024/06/02 21:57

回答ありがとうございます。 margin: 100px 0 0 0;では足りなくて、自己解決してしまいました。
guest

0

自己解決

パンくずリストが.headtop の下に潜り込んでいたので、 margin: 175px 0px 0px 0px;にして、どうにか解決しました。

投稿2024/06/02 21:53

naaS

総合スコア6

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問