実現したいこと
sliderの画像やcontentsは、ヘッダーの下に食い込むようにするところは出来た。ブラウザの横幅が変わるとヘッダーの縦のサイズが変わるようにした。
発生している問題・分からないこと
jsを機能させて収縮させようとしたが、レイアウトが崩れるので、その原因となるjsのコードは一時的にコメントアウトした。
該当のソースコード
html
<body> <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"> <div class="slide"> <ul> <li> <a href="bus_toppage.html" alt="slide_img"><img src="img/2357486_kankouao_1400.png" alt="Slide 1" /><div class="text-overlay">テキスト。</div></a> </li> <li> <a href="bus_toppage.html" alt="slide_img"><img src="img/1679585_1400.png" alt="Slide 2" /><div class="text-overlay">テキスト…</div></a> </li> <li> <a href="bus_toppage.html" alt="slide_img"><img src="img/1339937_1400_600.jpg" alt="Slide 3" /><div class="text-overlay">様々な場面に</div></a> </li> <li> <a href="index.html" alt="slide_img"><img src="img/625842_1400.jpg" alt="Slide 4" /></a> </li> <li> <a href="index.html" alt="slide_img"><img src="img/3025924_1400.jpg" alt="Slide 5" /></a> </li> </ul> </div> </div> <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="#">テキスト</a></li> <li><a href="#">テキスト</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 class="contents"> <div class="kijibox"> <div class="kiji_link"> <span><a href="#">挨拶</a><br/></span> テキスト<br/> 当社は、テキスト<br/> </div> </div> <div class="kita_side_nav"> <div class="link"> <span><a href="#">テキストテキスト</a></span> </div> </div> </div> </body>
css
* { margin: 0; padding: 0; box-sizing: border-box; } .top_fixed { width: 100%; position: relative; top: 0px; background-color: #fff; z-index: 9; } .headtop { width: 100%; display: flex; position: fixed; z-index: 11; background-color: rgb(4 70 104); padding: 10px 2%; transition: height 0.3s ease, font-size 0.3s ease; height: auto; } .head_logo{ width:50%; transition: height 0.3s ease; } .head_logo img{ max-width:35%; transition: height 0.3s ease; } .head_right{ width:40%; margin: 5px 0 0 0; } .headtext, .headtext2 { color: #fff; overflow: hidden; transition: font-size 0.3s ease; } .headtext { font-size: 22px; font-weight: 400; margin-top: 3%; } .headtext2 { font-size: 16px; margin: -5px 0 0 0; } .header{ width:100%; overflow: hidden; padding: 0; margin: 0; } .contents{ width:100%; overflow: hidden; display: flex; margin: 0px 0px 0px 0px; padding: 0px 0px; } .frame { width: 100%; overflow: hidden; display: block; 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; } .footer{ width:100%; background-color: rgb(4 70 104); font-size: 80%; padding-bottom: 20px; margin: 0px 0px 0px 0px; } .footer_top { display: flex; margin: 0px 0px 5px 0px; } .footer_text { color:#fff; text-align: center; background-color: #5aa3d6; margin: 0px 0px 10px 0px; } .footer_text a { color: #fff; text-decoration: none; } .footer_text a:hover { color:#e7d77e; /*color: #a78a2c;*/ text-decoration: none; } .footerbox_l{ width:25%; margin: 10px 0px 10px 0px; } .footerbox_r{ width:25%; margin: 10px 0px 10px 0px; } .footer_kita_menu{ text-align: left; margin: 0px 0px 0px 30%; } .footer_kita_menu ul{ list-style-type: none; } .footer_kita_menu ul li a{ text-decoration: none; color:#fff; } .footer_kita_menu ul li a:hover { color:#e7d77e; } .link { display: block; text-decoration: none; } @media screen and (max-width:1000px){ .headtop { height: auto; /* max-heightを使用せず、heightで調整 */ } .headtext { font-size: 14px;/* 適切なフォントサイズに調整 */ margin-top: 0;/* 適切なマージンに調整 */ } .headtext2 { font-size: 11px;/* 適切なフォントサイズに調整 */ margin-top: 0;/* 適切なマージンに調整 */ } } @media screen and (max-width:750px){ .head_logo { width: 45%; } .head_right { width: 50%; } .headtext { font-size: 13px; margin: 0; } .headtext2 { font-size: 10px; margin: 0; } } @media screen and (max-width:700px){ .footer { font-size: 60%; } } @media screen and (max-width:650px){ .head_logo{ width: 40%; } .head_right { width: 50%; } .headtext { font-size: 12px; margin: 0; } .headtext2 { font-size: 10px; margin: 0; } .contents { width: 100%; display: flex; flex-direction: column; } .kijibox { width:100%; } .kita_side_nav { width:100%; border: none; } .footer_top { display: flex; flex-direction: column; } .footerbox_l { width:100%; } .footerbox_r { width:100%; } .footer_kita_menu { margin: 0px 0px 0px 10%; } } @media screen and (max-width:580px){ .head_logo { width: 33%; } .head_right { width: 55%; } .headtext { font-size: 10px; margin: 0; } .headtext2 { font-size: 8px; margin: 0; } } @media screen and (max-width:500px){ .head_logo { width: 22%; } .head_logo img{ max-width:60%; margin: 0; } .head_right{ width: 62%; } .headtext { font-size: 8px; margin: 0; } .headtext2 { font-size: 6px; margin: 0; } } @media screen and (max-width:300px){ .head_logo { width: 20%; } .head_right{ width: 59%; } .headtext { font-size: 6px; margin: 0; } .headtext2 { font-size: 4px; margin: 0; } .navToggle { right: 4px; } .footer { position: relative; width: 100%; padding-bottom: 20px; margin: 0px 0px 0px 0px; text-align: left; } } .slide { display: flex; overflow: hidden; width: 100%; } .slide ul { list-style-type: none; margin: 0; padding: 0; width: 100%; } .slide li { position: relative; margin-right: 0px; float: left; display: block; transform: scale(1); } .slide li .active { opacity: 1; transform: scale(1.05); height: auto; } .slide img { display: block; width: 100%; height: 0px; opacity: 0; transition: opacity 1s ease-in-out, transform 6s ease-out; object-fit: contain; }
js
document.addEventListener('DOMContentLoaded', function() { var headtop = document.getElementById('headtop'); /*var logo = headtop.querySelector('.head_logo img'); var headtext = headtop.querySelector('.headtext'); var headtext2 = headtop.querySelector('.headtext2');*/ var originalHeight = headtop.offsetHeight; var shrinkHeight = originalHeight / 2; /*var originalLogoHeight = logo.offsetHeight; var shrinkLogoHeight = originalLogoHeight / 2; var originalFontSize = parseFloat(window.getComputedStyle(headtext).fontSize); var originalFontSize2 = parseFloat(window.getComputedStyle(headtext2).fontSize); var shrinkFontSize = (originalFontSize * 0.8) + 'px'; var shrinkFontSize2 = (originalFontSize2 * 0.8) + 'px'; */ function onScroll() { if (window.scrollY > 50) { headtop.style.height = shrinkHeight + 'px'; /* logo.style.height = shrinkLogoHeight + 'px'; headtext.style.fontSize = shrinkFontSize; headtext2.style.fontSize = shrinkFontSize2;*/ } else { headtop.style.height = originalHeight + 'px'; /* logo.style.height = originalLogoHeight + 'px'; headtext.style.fontSize = originalFontSize + 'px'; headtext2.style.fontSize = originalFontSize2 + 'px';*/ } } }); /*コメントアウトの部分がレイアウト崩れを引き起こす。ヘッダーの高さが半分どころか１/4になったり、文字の大きさが崩れる。画面再読み込みでも崩れる。.headtopの height: auto; または、固定値にして応急措置をした。*/
0 コメント