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

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

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

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Q&A

解決済

3回答

1362閲覧

フォーカスが当たったとき要素(ヘッダ)の横幅を画面いっぱいにしたい

pecchan

総合スコア555

CSS3

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

0グッド

0クリップ

投稿2021/07/19 23:24

編集2021/07/20 10:42

TOPページの背景画像を横幅いっぱいにしたため、ヘッダが少し分かり辛くなりました。
そこで、ヘッダにフォーカス当たった時は、背景を白くなるようにしました。

ところがこの白背景の幅が狭いため、画面幅いっぱいにしたいです。

ヘッダにフォーカスが当たる前
イメージ説明

ヘッダにフォーカスが当たった時(この時に幅いっぱいにしたい)
イメージ説明

フォーカスが当たった時に背景色を白に変えるのは、

<header>タグに対してtop-header-bgcolorクラスというのを作って行いました。

html

1<div class="wrapper "> 2 <div class="full-wide-adjust-overflow-hidden"> 3 <div class="full-wide"> 4 <header class="top-header-bgcolor"> 5 <div class="header__inner"> 6 <div class="header-logo"> 7 <a href="/"><img src="/images/logo-l.png" class="header-logo-img top__logo-color" alt=""></a> 8 <a href="/"><img src="/images/logo-s.png" class="header-logo-img-sp top__logo-color" alt=""></a> 9 </div> 10 <div class="header-nav-btn full-wide-adjust-padding-right"> 11 <ul class="horizontal-btn-list__btn-right"> 12 <li class="horizontal-btn-list__item-sm"> 13 <a class="horizontal-btn-list__btn btn btn-outline-info btn-sm header-login-btn" href="#">ログイン</a> 14 </li> 15 <li class="horizontal-btn-list__item-sm"> 16 <a class="horizontal-btn-list__btn btn btn-primary btn-sm" href="#">会員登録</a> 17 </li> 18 </ul> 19 </div> 20 <div class="header-serach"> 21 <form method="get" action="#" class="search_container"> 22 <input type="text" placeholder="何かお探しですか?"> 23 <input type="submit" value="&#xf002" class="fas"> 24 </form> 25 </div> 26 <div class="header-nav-link full-wide-adjust-padding-left"> 27 <button class="btn btn-outline-success btn-sm header-category-btn">カテゴリ一覧</button>  28 <button class="btn btn-outline-success btn-sm header-category-btn">ユーザ一覧</button> 29 </div> 30 </div> 31 </header> 32 <!-- /. header --> 33

_header.scss

scss

1/* トップページだけヘッダーのカスタマイズ */ 2.top-header-bgcolor { 3 & :focus, :hover { 4 background-color: #fff; /* フォーカス時に背景色を変える */ 5 } 6} 7

####試したこと
CSSで親要素の幅を超えて画面幅いっぱいに表示する
を参考にして、
background-color: #fff;の前に

css

1margin: 0 calc(50% - 50vw);

を追加しますと、以下のようにフォーカス時にレイアウトが崩れてしまいました。
イメージ説明

どう修正すべきでしょうか?
アドバイス宜しくお願いします。

関係ありそうなscss(layout, header ,top)を記載致します。

_layout.scss

scss

1/* _layout.scss start */ 2 3/* 最上位 */ 4.wrapper{ 5 margin-right: auto; 6 margin-left: auto; 7 /* max-width: $main-max-width; */ 8 padding-right: 2px; /* 両脇にpaddingを加える */ 9 padding-left: 2px; /* 両脇にpaddingを加える */ 10} 11 12/* ヘッダ */ 13.header__inner{ 14 @include space; 15 display: flex; 16 flex-wrap: wrap; 17 padding: 10px 0; 18} 19/* フッタ */ 20.footer__inner{ 21 @include space; 22} 23/* コンテンツ */ 24.content{ 25 @include space; 26 margin-top: 40px; 27 padding: 20px 0; 28} 29/* ページタイトル */ 30.content__title{ 31 @include space; 32 margin-bottom: 20px; 33} 34 35/* コンテンツ基底 */ 36.content__inner { 37 margin: 0px; 38 width: 100%; 39} 40/* 1カラムレイアウト */ 41.content__inner-1col { 42 @extend .content__inner; 43 padding: 0 20px; 44} 45 46/* 2カラムレイアウト (マイページ)*/ 47.content__inner-2col { 48 @extend .content__inner; 49 display: flex; 50 flex-wrap: wrap; 51} 52/* 2カラム サイドメニュー */ 53.content__inner__side{ 54 width: 0; 55} 56/* 2カラム コンテンツ */ 57.content__inner__main{ 58 width: 100%; 59} 60 61 62/* PCサイズ以上 */ 63@include screen(pc) { 64 65 /* サイドメニュー表示 */ 66 .content__inner__side{ 67 width: 25%; 68 } 69 .content__inner__main{ 70 width: 75%; 71 } 72 73} 74 75 76/* _layout.scss end */ 77 78 79

_header.scss

scss

1/* _header.scss start */ 2 3$header-logo-width: 130px; 4$header-nav-link-width: 310px; 5 6/* PC用ロゴ */ 7.header-logo-img { 8 display: none; /* 非表示 */ 9 max-width: 100%; 10 height: auto; 11 background-color: $mainColor1; 12} 13/* SP用ロゴ */ 14.header-logo-img-sp { 15 @extend .header-logo-img; 16 display: block; /* 表示 */ 17 margin-top: -4px; 18 margin-left: 2px; 19 width: 50px; 20} 21.header-logo { 22 width: $header-logo-width; 23} 24.header-nav-btn { 25 width: calc(100% - #{$header-logo-width}); 26 padding-top: 0; 27 padding-bottom: 10px; 28 text-align: right; 29} 30.header-serach { 31 width: 100%; 32} 33.header-nav-link{ 34 width: $header-nav-link-width; 35 display: inline-flex; 36 align-items: center; 37 justify-content: start; 38} 39/* ハンバーガーメニューアイコン */ 40.header-mypage-menu { 41 visibility: hidden; 42} 43 44/* PCサイズ以上 */ 45@include screen(pc){ 46 .header__inner{ 47 .header-serach { 48 order: 2; 49 width: calc(100% - #{$header-logo-width}); 50 } 51 .header-nav-link { 52 order: 3; 53 } 54 .header-nav-btn { 55 width: calc(100% - #{$header-nav-link-width}); 56 padding-top: 10px; 57 padding-bottom: 0; 58 order: 4; 59 } 60 } 61 /* ハンバーガーメニューアイコン */ 62 .header-mypage-menu { 63 visibility: visible; 64 } 65 /* PC用ロゴ */ 66 .header-logo-img { 67 display: block; /* 表示 */ 68 } 69 /* SP用ロゴ */ 70 .header-logo-img-sp { 71 display: none; /* 非表示 */ 72 } 73} 74/* _header.scss end */ 75 76

_top.scss

scss

1/*_top.scss start*/ 2 3/* full-wideを使うことによる調整 */ 4.full-wide-adjust-overflow-hidden { 5 overflow: hidden; /* スクロールバーを消す */ 6} 7.full-wide-adjust-padding-left { 8 padding-left: 4px; /* ヘッダが左右に伸びてしまうのを調整 */ 9} 10.full-wide-adjust-padding-right { 11 padding-right: 4px; /* ヘッダが左右に伸びてしまうのを調整 */ 12} 13 14 15/* headerとheroを横幅いっぱいに広げる */ 16.full-wide { 17 margin: 0 calc(50% - 50vw); 18 width: 100vw; 19 background-image: url( "/top.webp" ); 20 /* background-image: url( "/images/top.webp" ); */ 21 background-size: 180% auto; 22} 23 24 25/* トップページだけヘッダーのカスタマイズ */ 26.top-header-bgcolor { 27 & :focus, :hover { 28 background-color: #fff; /* フォーカス時に背景色を変える */ 29 } 30} 31.header-category-btn { 32 margin-top: 2px; 33 background-color: #fff; 34 &:hover { 35 background: $successColor; 36 color: #fff; 37 border: solid 2px $successColor; 38 } 39} 40.header-login-btn { 41 background-color: #fff; 42 &:hover { 43 background: $mainColor4; 44 color: #fff; 45 border: solid 2px $mainColor4; 46 } 47} 48.top__logo-color { 49 background-color: $mainColor1; 50 &:hover { 51 background: $mainColor1; 52 } 53} 54 55 56/* hero部分 外枠 */ 57.top-hero { 58 //margin-top: -60px; /* ヘッダとコンテンツの余白を埋める */ 59 display: flex; 60 flex-wrap: wrap; 61 justify-content: space-evenly; 62} 63/* hero部分 見出し */ 64.top-hero__h { 65 width: 90%; 66 margin-bottom: 50px; /* 余白調整 */ 67} 68.top-hero__h__text{ 69 text-align: center; 70 color: #fff; 71 margin-bottom: 30px; /* 余白調整 */ 72 73} 74.top-hero-btn-start { 75 background-color: #fff; 76 font-size: $fontSize14; 77} 78.top-hero-btn-howto { 79 font-size: $fontSize14; 80} 81 82/* hero部分 動画 */ 83.top-hero__v { 84 width: 90%; 85 margin-bottom: 30px; /* 余白調整 */ 86} 87.top-hero__v__video { 88 width: 100%; 89} 90/* 動画の囲み枠 */ 91.video-box { 92 padding: 0.6em 0.5em 0 0.5em; 93 margin: 2em 0; 94 color: #565656; 95 background: #ffeaea; 96 box-shadow: 0px 0px 0px 10px #ffeaea; 97 border: dashed 2px #ffc3c3; 98 border-radius: 8px; 99} 100 101 102/* メインコンテンツ部分 外枠 */ 103.top-main { 104 padding: 10px 15px; /* 余白調整 */ 105} 106 107.top-main__about { 108 //padding: 30px; 109 max-width: 100%; 110 margin: 0 auto; 111} 112.top-main__about-parent { 113 display: flex; 114 justify-content: space-between; 115} 116.top-main__about-child { 117 flex-grow: 1; 118 padding: 5px; 119 margin: 0 5px; 120 img { 121 width: 100%; 122 height: auto; 123 } 124} 125 126.top-main__list { 127 margin-top: 30px; 128} 129.top-main__list__h { 130 display: flex; 131 flex-wrap: wrap; 132 justify-content: space-between; 133} 134.top-main__list__card__text__profile { 135 font-size: $fontSize14; 136} 137.top-main__list__card__text__area { 138 font-size: $fontSize12; 139 text-align: right; 140} 141 142 143/* PCサイズ以上 */ 144@include screen(pc){ 145 .full-wide-adjust-padding-left { 146 padding-left: 10px; /* ヘッダが左右に伸びてしまうのを調整 */ 147 } 148 .full-wide-adjust-padding-right { 149 padding-right: 12px; /* ヘッダが左右に伸びてしまうのを調整 */ 150 } 151 .full-wide { 152 background-size: auto; 153 } 154 /* hero部分 外枠 */ 155 .top-hero { 156 padding-top: 60px; 157 padding-bottom: 200px; /* 背景を広げるため下に余白 */ 158 } 159 /* hero部分 見出し */ 160 .top-hero__h { 161 width: 45%; 162 } 163 /* hero部分 動画 */ 164 .top-hero__v { 165 padding-top: 20px; /* 見出しの高さと揃える微調整 */ 166 width: 45%; 167 } 168 /* メインコンテンツ部分 外枠 */ 169 .top-main { 170 } 171 .top-hero-btn-howto, .top-hero-btn-start { 172 font-size: $fontSize20; 173 } 174 .top-main__about { 175 max-width: 70%; 176 } 177 178} 179 180/*_top.scss end*/ 181 182

不足しているscss追記

_mixin.scss

css

1@mixin screen($breakpoint: tablet){ 2 @media #{map-get($breakpoints, $breakpoint)}{ 3 @content; 4 } 5} 6 7@mixin space { 8 margin: auto; 9 max-width: $container-max-width; 10 11} 12

_config.scss

css

1$main-max-width: 1024px; 2$container-max-width: 1020px; 3 4 5$breakpoints: ( 6 'sp': 'screen and (max-width: 767px)', /* 0〜767 スマフォ */ 7 'tablet': 'screen and (min-width: 768px) and (max-width: 959px)', /* 768以上に適用(タブレットサイズ) */ 8 'pc': 'screen and (min-width: 960px)', /* 960以上に適用(PCサイズ以上) */ 9) !default; 10 11$baseFontSize: 62.5%; 12$fontSize12: 1.2rem; 13$fontSize14: 1.4rem; 14$fontSize16: 1.6rem; 15$fontSize18: 1.8rem; 16$fontSize20: 2.0rem; 17$fontSize22: 2.2rem; 18$fontSize24: 2.4rem; 19$fontSize26: 2.6rem; 20$fontSize28: 2.8rem; 21$fontSize30: 3.0rem; 22$fontSize32: 3.2rem; 23$fontSize34: 3.4rem; 24$fontSize36: 3.6rem; 25$baseFont: Source Sans Pro, Helvetica, Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif; 26$enFont: "Open Sans", sans-serif; 27$baseLineHeight: 2.0; 28 29$mainColor1: #f47b20; 30$mainColor2: #f48620; 31$mainColor3: #f49420; 32$mainColor4: #e25c00; 33$baseColor1: #a7a7a8; 34$baseColor2: #b9b9ba; 35$baseColor3: #e7e7e7; 36$accentColor1: #03be2c; 37$accentColor2: #03cf2c; 38$accentColor3: #03ea2c; 39$accentColor4: #00BB00; 40$primaryColor: #205df4; 41$secondaryColor: #33bbff; 42$successColor: #f457d4; 43$dangerColor: red; 44$warningColor: #cc8800; 45$infoColor: skyblue; 46

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

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

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

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

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

Lhankor_Mhy

2021/07/20 04:25 編集

space では何をしていますか? その他、ミックスインや変数の定義がされていないので、コンパイルをすることができません。 ですので、問題を確認できません。 問題が確認できるコードをご提示ください。
pecchan

2021/07/20 10:43

申し訳ございません。 最初の質問作成時に、コンパイル済みのCSSをアップ試みたら文字数オーバーになって諦めたところでした。 不足していると思われるSCSS追加いたしました。
guest

回答3

0

JSでやれば簡単なのですが、、
HTML&CSSでやるにはこのやり方しか思いつきませんでした。

軽く解説すると、メインのheader(header)と、ダミーのheader(dummyHeader)を用意して重ね合わせます。
ダミーheaderは横幅100%にしておき、メインheaderがhoverされたら隣接セレクタでダミーheaderに色を付けています。

HTML

1<div class="contents"> 2 <div class="header">ヘッダー</div> 3 <div class="dummyHeader"></div> 4</div>

CSS

1.contents { 2 position: relative; 3 background-color: gray; 4 height: 500px; 5} 6 7.header { 8 width: 800px; 9 height: 200px; 10 position: absolute; 11 background-color: white; 12 top: 0; 13 left: 50%; 14 transform: translateX(-50%); 15} 16 17.header:hover + .dummyHeader { 18 background-color: red; 19} 20 21.dummyHeader { 22 width: 100%; 23 height: 200px; 24}

投稿2021/07/20 02:32

編集2021/07/20 02:34
agumon

総合スコア271

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

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

pecchan

2021/07/20 04:07

ありがとうございます。 実装してみたのですがこちらでは何も変わらなくなりました。 考え方は理解できました。 jsでやる場合ならどのようになるでしょうか?
agumon

2021/07/20 05:34

headerにマウスオーバーしたときイベントを発火させ、'''top-header-bgcolor'''にclass名を付けたり外したりする処理を書きます。 あとはつけたclass名にbackground-colorを設定しといてあげれば色がつくかと思います。
pecchan

2021/07/20 10:45

なるほど! ありがとうございます。 検討してみます!
guest

0

自己解決

_top.scssに以下を追加

css

1.top-header__inner{ 2 max-width: 100%; 3} 4 5.top-footer__inner{ 6 max-width: 100%; 7} 8

これをhtml側に追加しました。

html

1<div class="header__inner top-header__inner"> 2

html

1<div class="footer__inner top-footer__inner ">

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

投稿2021/07/25 03:53

pecchan

総合スコア555

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

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

0

scssがコンパイルできないので推測になりますが、こうするとどうですか?

scss

1.top-header-bgcolor { 2// & :focus, :hover { 3 &:focus, &:hover { 4 background-color: #fff; /* フォーカス時に背景色を変える */ 5 } 6}

投稿2021/07/20 04:35

Lhankor_Mhy

総合スコア35869

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

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

pecchan

2021/07/20 10:44

ありがとうございます。 特に変化ありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問