LoginSignup
user80845
@user80845 (Tyler)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

メルカリのサイトを模写しているので教えてください

Q&A

Closed

HTMLCSS

メルカリのサイト模写をHTML/CSSで練習しているのですが

メルカリトップページにある
「おすすめ・マイリスト・ランキング...」と続いているところで
ウィンドウを縮小すると水平スクロールが出るのですが、自分で作ってみると
画面が横に広がったり、スクロールができるようにulタグに
overflow-x: scroll;
white-space: nowrap;

このような記載を足しても、jusutify-content:center;の影響でウィンドウ左側も見えなくなってしまいます。

html

  <li class="select" id="select">
      <a href="#" class="nav-list" id="nav-list-select">おすすめ</a>

 
  </li>
  <li class="select">
    <a href="#" class="nav-list">マイリスト</a>
  </li>
  <li class="select"><a href="#" class="nav-list">ランキング</a></li>
  <li class="select"> <a href="#" class="nav-list">ゲーム・おもちゃ・グッズ</a></li>
  <li class="select"><a href="#" class="nav-list">本・雑誌・漫画</a></li>
  <li class="select"><a href="#" class="nav-list">メンズ</a></li>
  <li class="select"><a href="#" class="nav-list">レディース</a></li>
  <li class="select"><a href="#" class="nav-list">ベビー・キッズ</a></li>
  <li class="select"><a href="#" class="nav-list">すべて見る</a></li>
</ul>
<hr>

css

nav {
margin-top: 20px;
/* border-bottom: 1px solid #333; /
/ min-width:1220px; /
/ overflow-x: scroll; /
/ width:100%; /
/ overflow-x: scroll;
white-space: nowrap; */
}

nav ul {
padding: 0;
margin: 0 20px;
display: flex;
justify-content: center;

height: 30px;
/* overflow-x: scroll;
white-space: nowrap; */
}

nav ul li {
align-items: center;
padding-bottom: 5px;
height: 100%;

}

自分の模写の中でnavタグの部分のみ水平スクロールが発生し、スクロールすればリストがすべて確認できるようにしたいです。

0

2Answer

Kero7ka2
@Kero7ka2

質問拝読いたしました！
メルカリの模写いいですね！自分もやってみようかな...（笑）

一旦質問の内容について下記項目に整理の上、それぞれ回答できればと存じます。

■質問内容の整理

①ナビゲーションの横スクロールの実装
②画面縮小時にナビゲーションが左基準で標示されること

■各質問への回答

①→これは既にご自身で調べているみたいなので、重複になり恐縮なのですが...「overflow-x:auto;」「white-space:no-wrap;」で実装できます！

②→質問文に記載いただいたhtmlのulタグに該当する箇所に「display:flex」「justify-contet:start」を当てれば実装できるかと思います。

下記に実装コードを記載いたしますので、一回コピペして挙動を確認の上、調整してみてください！(HTMLやクラス名は質問文にいただいた内容をそのまま使ってます。)

稚拙な回答で恐縮ですが...もし不明点などあれば、ご返信ください！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        /* ResetCSS */
        margin: 0;
        padding: 0;
        list-style: none;
        color: black;
        text-decoration: none;
        /* フォントサイズ指定 */
        font-size: 14px;
      }
      /* スタイル */
      nav {
        /* navの幅と高さの設定*/
        width: 100vw;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid lightgray;
      }

      nav ul {
        /* nav ulの横幅の最大値を設定 */
        max-width: 1200px;
        height: 100%;
        margin-inline: 36px;
        /* 横スクロールするリストを左寄せして、表示を左基準にする*/
        display: flex;
        justify-content: start;
        align-items: center;
        /* ↓ここから_横スクロールの実装 */
        white-space: nowrap;
        overflow-x: auto;
        /* 横スクロールバーを非表示にする */
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
          display: none;
        }
        /* ここまで_横スクロールの実装 */
      }

      nav ul li {
        /* ボタンの体裁を整える */
        height: 100%;
        box-sizing: border-box;
        padding-inline: 24px;
        background-color: white;
        /* hover時の設定 */
        &:hover {
          filter: brightness(0.9);
          border-bottom: red solid 2px;
        }
      }
      nav ul li a {
        /* 文字列中央寄せ */
        display: flex;
        justify-content: center;
        align-items: center;
        /* liの幅にaをあわせる */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li class="select" id="select">
          <a href="#" class="nav-list" id="nav-list-select">おすすめ</a>
        </li>
        <li class="select">
          <a href="#" class="nav-list">マイリスト</a>
        </li>
        <li class="select"><a href="#" class="nav-list">ランキング</a></li>
        <li class="select">
          <a href="#" class="nav-list">ゲーム・おもちゃ・グッズ</a>
        </li>
        <li class="select"><a href="#" class="nav-list">本・雑誌・漫画</a></li>
        <li class="select"><a href="#" class="nav-list">メンズ</a></li>
        <li class="select"><a href="#" class="nav-list">レディース</a></li>
        <li class="select"><a href="#" class="nav-list">ベビー・キッズ</a></li>
        <li class="select"><a href="#" class="nav-list">すべて見る</a></li>
      </ul>
    </nav>
  </body>
</html>
1Like
user80845
@user80845

ご教授いただきありがとうございます！
まさに自分が実装したい形でした。
初めて見たタグなどもあり、噛み砕くの時間を有してしまいご返答が遅れました。
scssなども使ったことがなかったので、使い方として勉強になりました。
ありがとうございました。

0Like

Comments

Your answer might help someone💌

LoginSign Up