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

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

ただいまの
回答率

88.92%

レスポンシブデザイン(ドロワーでの表示)

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 132

tetsuya7724

score 27

前提・実現したいこと

jQueryでレスポンシブデザインを作成しています。
drawer-navをパソコンサイズでは表示、スマホサイズではドロワーの中で表示というようにしたいです。(パソコンサイズで表示されていた部分は非表示)
ドロワーを開くとhtmlがスライドするものもありますが、スライドはさせません。
bootstrapは入れていません。

発生している問題・エラーメッセージ

スマホサイズにしたときに、パソコン画面のときは表示されていたdrawer-nav(トップページ、医院紹介 etc)を消すことはできたのですが、ドロワーを左から出したときに中にあるdrawer-menuやliが表示されません。
(文章だとわかりにくいと思うので、画像の方を見たほうがわかりやすいと思います。
サンプルページのようにliを表示させたいです。)

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebCafe - top</title>
  <link href="css/index.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <!-- drawer.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
  <!-- jquery & iScroll -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
  <!-- drawer.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>


</head>
<body>
  <header>
    <div class="page-header">
      <h1 class="logo">Dental Clinic</h1>
      <div class="clinic-info">
        <p>”地域に根付いた歯科医院”デンタルクリニック</p>
        <a class="tell">03-0000-0000</a>
        <p class="open-info">予約受付時間 10:00~19:30 日祝休診</p>
      </div>
    </div>

    <div class="drawer drawer--left">
      <!-- ハンバーガーメニューアイコン -->
      <button type="button" class="drawer-toggle drawer-hamburger">
        <span class="sr-only">toggle navigation</span>
        <span class="drawer-hamburger-icon"></span>
      </button>

      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
          <li><a class="list-text drawer-menu-item" href="#">トップページ<br>HOME</a></li>
          <li><a class="list-text drawer-menu-item">医院紹介<br>CLINIC</a></li>
          <li><a class="list-text drawer-menu-item">診療案内<br>SERVICE</a></li>
          <li><a class="list-text drawer-menu-item">院長・スタッフ案内<br>STAFF</a></li>
          <li><a class="list-text drawer-menu-item">アクセス<br>ACCESS</a></li>
        </ul>
      </nav>
    </div>

    <!-- ドロワーメニューの利用宣言 -->
    <script>
      $(document).ready(function () {
        $('.drawer').drawer();
      });
    </script>
  </header>

  <div class="home-content" id="home">
    <div class="main-content wrapper">
      <div class="image">
        image
      </div>
      <article>
        <h2 class="article-title">新着情報</h2>

        <div class="article-item">
          <p class="date">2012年08月01日</p>
          <p class="article-content">
            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
          </p>
        </div>

        <div class="article-item">
          <p class="date">2012年07月24日</p>
          <p class="article-content">
            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
          </p>
        </div>

        <div class="article-item">
          <p class="date">2012年07月02日</p>
          <p class="article-content">
            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
          </p>
        </div>

        <div class="article-item">
          <p class="date">2012年06月20日</p>
          <p class="article-content">
            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
          </p>
        </div>

        <div class="article-item">
          <p class="date">2012年06月01日</p>
          <p class="article-content">
            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療することにしました。
          </p>
        </div>
      </article>
    </div><!-- main-content -->

    <aside>
      <div class="sub-content wrapper">
        <div class="sub-info">
          <h2 class="sub-info-title">一般歯科</h2>
          <div class="sub-info-list">
            <ul>
              <li>虫歯治療</li>
              <li>歯周病治療</li>
              <li>入れ歯</li>
              <li>予防歯科</li>
            </ul>
          </div>
        </div><!-- sub-info -->

        <div class="sub-info">
          <h2 class="sub-info-title">審美歯科</h2>
          <div class="sub-info-list">
            <ul>
              <li>ホワイトニング</li>
              <li>オールセラミック</li>
              <li>セラミックインレー</li>
              <li>PMTC</li>
            </ul>
          </div><!-- sub-info-list -->
        </div><!-- sub-info -->
      </div><!-- sub-content -->
    </aside>

  </div><!-- home-content #home -->

  <div class="page-list wrapper">
    <ul>
      <li>トップページ</li>
      <li>医院紹介</li>
      <li>診療案内</li>
      <li>院長・スタッフ紹介</li>
      <li>アクセス</li>
    </ul>
  </div><!-- page-list -->

  <div class="location-info wrapper">
    <div class="info">
      <p><span>デンタルクリニック</span></p>
      <p>東京都新宿区市谷左内町21−13 TEL:03-0000-0000</p>
    </div>
  </div><!-- location-info -->

  <footer>
    <div class="wrapper">
      <p><small>&copy;2012 Dental Clinic CO.,LTD All Right Reserved. </small></p>
    </div>
  </footer>

</body>
</html>
@charset "UTF-8";

html {
  font-size: 100%;
}

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
  max-width: 1000px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 3rem;
  font-family: 'メイリオ',
    'Hiragino Mincho ProN',
    'ヒラギノ明朝 ProN', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro',
    sans-serif;
  font-weight: normal;
  margin-top: 30px;
}

.clinic-info {
  text-align: center;
  margin-top: 15px;
}

.clinic-info a {
  font-size: 30px;
}

.clinic-info .open-info {
  border: 1px solid #432;
  padding: 7px;
}

/* header-navigation */
.drawer{
  margin-bottom: 30px;
}

.drawer button{
  display: none;
}

nav{
  display: contents;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 100%;
  border: 1px solid #432;
  border-radius: 10px;
}

nav li {
  flex: 1 0 auto;
  min-width: 50px;
  border-left: 1px solid #432;
}

nav li a{
  display: block;
  width: 100%;
  padding: 10px 0;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}

nav ul li:first-child {
  border-left: none; /* ナビのliの最初の要素のボーダーを消す */
}

.home-content{
  display: flex;
}

.main-content{
  width: 70%;
  order: 2;
}

.main-content .image{
  border: 1px solid #432;
  height: 200px;
  width: 100%;
}

.article-title{
  margin-top: 30px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid blueviolet;
}

.article-item{
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid skyblue;
}

.article-item .date{
  width: 250px;
  text-align: center;
}

.sub-content{
  width: 300px;
  order: 1;
}

.sub-info{
  box-shadow: 1px 1px blue;
  margin-right: 20px;
  margin-bottom: 20px;
  height: 220px;
}

.sub-info-title{
  color: white;
  background-color: lightgreen;
}

.sub-info ul{
  padding: 10px;
  list-style: none;
}

.sub-info-list ul li{
  position: relative;
  padding: 5px;
  border-bottom: 1px solid skyblue;
  font-weight: bold;
  list-style-type: "◆";
  list-style-position: inside;
}

.page-list{
  margin-top: 10px;
  background-color: skyblue;
  border-radius: 10px;
}

.page-list ul{
  display: flex;
  list-style: none;
}

.page-list li {
  margin: 5px 0 5px 20px;
  color: white;
}

.location-info .info{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.location-info .info p{
  text-align: right;
}

.location-info span{
  font-weight: bolder;
  margin-right: 10px;
}


footer{
  text-align: center;
  margin: 0 auto;
  padding: 5px 0;
}

@media(max-width: 600px){
  /* header */
  .page-header{
    flex-direction: column;
  }
  .page-header .logo{
    margin: 0 auto;
  }

  .page-header .clinic-info{
    margin: 0 auto;
  }

  .drawer button{
    display: block;
  }

  .drawer nav{
    display: none;
  }

  /* home-content */
  .home-content{
    margin-top: 20px;
    flex-direction: column-reverse;
  }

  .main-content{
    order: 1;
  }

  .sub-content{
    order: 2;
  }

  .sub-info{
  margin-top: 20px;
  }

}


パソコン画面

イメージ説明

スマホの画面(drawer-navを非表示)

イメージ説明

スマホ画面(ドロワーを表示しているが、その中のliが表示されていない)
イメージ説明

サンプルページ
イメージ説明

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

こんにちは。
こういうことですか?

/*  .drawer nav{  変更*/
  .drawer.drawer-close nav{
    display: none;
  }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る