[星乃 みなみ]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】最新版
【お使いのブラウザ】safari
【当該サイトのURL】https://www.kigoulab.co.jp/

===

以前、タブレットでもハンバーガーメニューを表示してもらう件で、CSSをご提供いただきました。

今頃きがついたのですが、タブレット画面で、お問い合わせが消えます。

ハンバーガーメニューの横に表示されるようにしたいのですが、可能ですか？

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

「ヘッダーコンテンツ」が消えるということですかね？

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

そうです、そうなります。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

先のトピックの方法は単純にヘッダー内のブレイクポイントを変えるだけなのでそうなりますね…。ブレイクポイント変更のために追加した CSS を消して、要件に合った CSS を改めて書くのが良いと思います。

どの画面サイズ（px）ごとにどう表示するのがベストなのか、要件を詳しく書いてもらえますか？ それにあわせて CSS を書いてみます。

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

 

iPadの横の場合に、でてないのが問題なのですが、iPadも沢山でていて悩みます。

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 – Qiita

サイズ端末　　　　　ポイントRetinaピクセル倍率デバイスアスペクト比3.5iPhoneiPhone 3GiPhone 3GS320x4801320x4801320x4802:33….

qiita.com

上記のページを見ると、1024pxをブレークポイントの候補とする形になるでしょうか
あとは、7世代以降の1112pxをどう扱うかですね

ハンバーガーメニューの出現ポイントを変更したい

タグ: ハンバーガー このトピックには6件の返信、2人の参加者があり、最後に土居 安佳里により1年、…

snow-monkey.2inc.org

頂いたCSSは、1286px未満がブレークポイントになっているようですね
パソコンでもちょっと縮めると、すぐメニューがでるので、少し広めなきがします

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

現状は

• 0〜
  • ハンバーガーボタンとヘッダーコンテンツ（モバイル用）を表示
  • グローバルナビゲーションとヘッダーコンテンツ（グロナビ横）は非表示
• 1024〜
  • ハンバーガーボタンとヘッダーコンテンツ（モバイル用）は非表示
  • グローバルナビゲーションとヘッダーコンテンツ（グロナビ横）を表示

となっています。おそらく小山さんのやりたいことは上記のブレイクポイントを切り替えるだけではだめですよね？ タブレットサイズではグローバルナビゲーションは非表示にするけどヘッダーコンテンツ（グロナビ横）は表示とかをされたいんですよね？

なので、「どのブレイクポイントで切り替えるか」を決めるのはもちろんですが、「どの要素をどうする」というのも一緒にまとめて書いてほしいです。

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

具体的なブレークポイントの数字はわからないのですが、下記のようになると思います。

 

●スマホ縦・横

ハンバーガーメニューと、ヘッダーコンテンツ（ページセンター）

●タブレット縦

ハンバーガーメニューと、ヘッダーコンテンツ（ページセンター）

●タブレット横

ハンバーガーメニューと、その横にヘッダコンテンツ

●PC

グローバルメニューと、その横にヘッダコンテンツ

—

こう言うまとめ方でよいでしょうか？

 

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

ありがとうございます。

ブレイクポイントをどうするかはその制作者の考えによってまちまちなので…とりあえず僕が適当なブレイクポイントでで上記の表示を実現できるコードを提示して、そのあとブレイクポイントは小山さんが良いように調整してもらう、というのが良ないかと思いますがどうでしょうか。

スマホ縦・横、タブレット縦、タブレット横、という分け方はのは厳密には難しいと思います。端末（サイズ）は膨大にあるので、でっかいスマホの横は小さいタブレットの縦より大きいとかが無いとは言い切れないと思うので。

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

ブレークポイントについては、その考えで結構です。
現在、比較的古いiPad2と、新しいiPad miniがありますので、その2台でヘッダコンテンツがみれればOKです。比較的新しいiPadは、どっかのお店にいってこっそり見てきます。

知りあいのiPad Proの大きいほうはPC用画面が表示されていました。

引き続きよろしくお願いします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

下記試してみてください。

/* 一旦打ち消す */
@media (min-width: 64em) {
  .l-1row-header .u-hidden-lg-up {
    position: static!important;
    clip: auto!important;
    speak: normal!important;
    visibility: visible!important;
  }
}

/* 再定義 */
@media (min-width: 1280px) {
  .l-1row-header .u-hidden-lg-up {
    position: absolute!important;
    clip: rect(1px,1px,1px,1px)!important;
    speak: none!important;
    visibility: hidden!important;
  }
}

/* グローバルナビゲーション + ヘッダーコンテンツの表示を上書き */
@media (min-width: 64em) and (max-width: 1279px) {
  .l-1row-header .c-row__col.u-visible-lg-up {
    flex: 1;
  }
  .l-1row-header .c-row__col.u-visible-lg-up .c-row {
    justify-content: flex-end;
  }
  .l-1row-header .c-row__col.u-visible-lg-up .c-row .c-row__col--auto {
    display: none;
  }
}

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

いつも素早い回答ありがとうございます。助かってます。

このCSSは、現在はいってるタブレット用を消して、これに入れ替えると考えて良いですか

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

別スレッドで公開されていたCSSはコメントアウトして、頂いたCSSに入れ替えました。

所有している検証機では正常にヘッダコンテンツが表示されていることを確認しました！

これでiPad miniでもプレゼンできます。ありがとうございました！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

閉じます！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿