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

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

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

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

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

1264閲覧

画面を広げるとハンバーガーメニューが右にはみ出てしまう

seakai

総合スコア24

SCSS

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

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/04/28 14:02

編集2021/04/29 04:28

前提・実現したいこと

画面を広げてもハンバーガーメニューがはみ出さないようにしたい。

該当のソースコード

html

1<header class="header"> 2 <div class="header_logo"> 3 <a href=""> 4 <img src="img/logo.jpg" alt="Engress"> 5 </a> 6 </div> 7 <nav class="header_nav"> 8 <div class="ham"><a href=""><span class="ham-line ham-line1"></span><span class="ham-line ham-line2"></span><span 9 class="ham-line ham-line3"></span></a></div> 10 <ul class="header_list"> 11 <li class="header_list-item"><a href="" class="p">ホーム</a></li> 12 <li class="header_list-item"><a href="" class="p">お知らせ</a></li> 13 <li class="header_list-item"><a href="" class="p">ブログ</a></li> 14 <li class="header_list-item"><a href="" class="p">コース・料金</a></li> 15 </ul> 16 <div class="header_right"> 17 <div class="tel-box"> 18 <small class="tel-hour">平日08:00〜20:00</small> 19 <p class="tel-number"><a href="tel:0123-456-7890" class="p">0123-456-7890</a></p> 20 </div> 21 <a href=""> 22 <div class="square-request-btn"> 23 <span class="square-request-btn-text"> 24 資料請求 25 </span> 26 </div> 27 </a> 28 <a href=""> 29 <div class="contact-btn header-btn"> 30 <span class="contact-btn-text"> 31 お問い合わせ 32 </span> 33 </div> 34 </a> 35 </div> 36 </nav> 37 </header>

scss

1//style.scss 2 3$bpc: 1600px; //PC大画面 4$spc: 1280px; // PC通常 5$ipad: 768px; // iPad 6$sp: 375px; // スマホ 7 8@mixin sp { 9 @media screen and (min-width: $sp) { 10 @content; 11 } 12} 13 14@mixin ipad { 15 @media screen and (min-width: $ipad) { 16 @content; 17 } 18} 19 20@mixin spc { 21 @media screen and (min-width: $spc) { 22 @content; 23 } 24} 25 26@mixin bpc { 27 @media screen and (min-width: $bpc) { 28 @content; 29 } 30}

scss

1//hero.scss 2 3@charset "utf-8"; 4 5@import 'style.scss'; 6 7.header { 8 display: flex; 9 align-items: center; 10 height: 5rem; 11 max-width: 100%; 12 13 @include ipad { 14 height: 8rem; 15 } 16} 17 18.header_logo { 19 margin: auto 0; 20 margin-left: .5rem; 21 22 @include ipad { 23 margin-left: 1.5rem; 24 } 25 26 a { 27 img { 28 width: 10rem; 29 height: auto; 30 31 @include spc { 32 width: 13.6rem; 33 height: 2.7rem; 34 } 35 } 36 } 37} 38 39.header_nav { 40 margin-left: auto; 41 display: flex; 42 align-items: center; 43 44 @include spc { 45 46 width: 100%; 47 align-items: center; 48 margin-left: .2rem; 49 } 50} 51 52.ham { 53 width: 4em; 54 height: 4em; 55 cursor: pointer; 56 position: relative; 57 58 @include spc { 59 display: none; 60 } 61} 62 63.ham-line { 64 position: absolute; 65 left: 1em; 66 width: 2em; 67 height: 0.2em; 68 background-color: $navyBlue; 69 transition: all 0.3s; 70} 71 72.ham-line1 { 73 top: 1em; 74} 75 76.ham-line1.open { 77 transform: rotate(45deg); 78 top: 2em; 79} 80 81.ham-line2 { 82 top: 1.8em; 83} 84 85.ham-line2.open { 86 width: 0; 87} 88 89.ham-line3 { 90 top: 2.6em; 91} 92 93.ham-line3.open { 94 transform: rotate(-45deg); 95 top: 2em; 96} 97 98 99.header_list { 100 101 @include spc { 102 display: flex; 103 } 104} 105 106.header_list-item { 107 display: none; 108 109 @include spc { 110 display: block; 111 margin-left: 2.8rem; 112 font-weight: bold; 113 line-height: 1.8; 114 } 115 116 a { 117 color: $navyBlue; 118 } 119} 120 121.header_right { 122 display: none; 123 margin-left: auto; 124 125 @include spc { 126 display: flex; 127 } 128} 129 130.tel-box { 131 132 @include spc { 133 margin-right: 1.4rem; 134 } 135} 136 137.tel-hour { 138 color: $navyBlue; 139} 140 141.tel-number { 142 a { 143 color: $navyBlue; 144 145 @include spc { 146 font-weight: bold; 147 } 148 } 149} 150 151.square-request-btn { 152 font-size: 1.4rem; 153 line-height: 1.7; 154 font-weight: bold; 155 height: 5rem; 156 margin-right: 1rem; 157 width: 14rem; 158 border-radius: .5rem; 159 background-color: $yellowOrange; 160 width: 10rem; 161 display: none; 162 justify-content: center; 163 align-items: center; 164 color: $white; 165 166 @include spc { 167 display: flex; 168 } 169} 170 171.contact-btn { 172 font-size: 1.4rem; 173 font-weight: bold; 174 line-height: 1.7; 175 height: 5rem; 176 width: 13.7rem; 177 border-radius: .5rem; 178 margin-right: 1rem; 179 background-color: $navyBlue; 180 display: none; 181 justify-content: center; 182 align-items: center; 183 color: $white; 184 185 @include spc { 186 display: flex; 187 } 188} 189

補足情報(FW/ツールのバージョンなど)

scssで書いています。

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

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

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

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

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

guest

回答1

0

自己解決

下の方でレイアウトが崩れた箇所があり、そこをレスポンシブにすると通常の動きに戻りました。

投稿2021/04/29 09:15

seakai

総合スコア24

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問