実現したいこと
消えたパンくずリストの再表示
発生している問題・分からないこと
ヘッダーの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を省いた。 ### 補足 特になし
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/05/21 05:37
2024/06/02 21:57