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

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

ただいまの
回答率

89.12%

SkeletonでのCSSでsectionの高さが変わらない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,470

HTML・CSS初心者です。
フレームワークでの作成がレスポンシブデザインには良いと聞き、作成予定のサイトもシンプルなデザインのためSkeletonをチョイスしました。
Skeleton base templateをそのまま利用し、適宜変更していく方法で作成しています。
トップのhero部分のsectionの高さを変えたいのですが、うまくいきません。

基本的には http://getskeleton.com/examples/landing/
と同じ構成で、ワンカラム、画面いっぱいに画像を表示させる縦に長いランディングページを作成します。
section heroの下にintro や他のsection4〜5個もあるのですが、それらの高さは変わりました。

.section {
  text-align: center;
  height: 100vh;
}


これだけはトップのsectionの高さは変わらないのでしょうか?

・・・
  <div class="section hero">
    <div class="container">
        <div class="one-half column phone">
          <img class="phone" src="images/iphone.png">
        </div>
        <div class ="right-contents">
          <div class="one-half column">
            <h1 class="hero-heading">ヘッドコピー</h1>
          </div>
          <div class="three columns left-message">
            <h6 class="hero-subcopy">テキストテキスト</h1>
            <a class="button button-primary"  href="#">利用はこちらから</a>
          </div>
          <div class="three columns right-message">
            <h4 class="hero-subcopy">サブコピー的なもの</h1>
            <img class="qr" src="images/qr_sample.png">
          </div>
        </div>
    </div>
  </div>
・・・
/* NOTE
ベースが10pxなので1.5rem =15px) */

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  text-align: center;
  height: 100vh;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phone {
  max-width: 80%;
  margin: 3rem auto -12rem;
}

.hero {
  background-image: url('../images/top_catch.png');
  no-repeat fixed;
  background-size: cover;
  color: #25C7AD;
}

.hero-subcopy {
  top:10rem;
}

.hero-heading {
  position: relative;
}



/* Intro
–––––––––––––––––––––––––––––––––––––––––––––––––– */




/* Bus Position
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bus-position{
  background-image: url('../images/buses.jpg');
  background-size: cover;
}

/* Bus Route
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* Bus Operation Status
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bus-operation-status{
  background-color: #AEFFEE;
}

/* Any Device
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.devices {
  display:block;
  margin-left: auto;
  margin-right: auto;
}

.center {
  text-align: center;
}


/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background-color: #17C0FF;
  margin-bottom: 10px;
  padding: 8rem 0 7rem;
  text-align: center;
}

p.footer-operation{
  color:white;
}
p.footer-inquiry{
  color:white;
}
p.footer-mail{
  color:white;
}



/* Media
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 400px) {
  .phone {
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    max-height: 362px;
    z-index: 3;
  }

  .qr {
    max-height:50px;
  }

}

/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    left:2rem;
    z-index: -7;
    max-height: 640px;
  }
  .hero-heading {
    font-size: 3rem;
    margin-top: 4rem;
  }

  .qr {
    max-height:80px;
  }
}



/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 4.4rem;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }

  .phone {
    top: -8rem;
    left: 2rem;
    max-height: 720px;
  }

  .qr {
    max-height:120px;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 5.0rem;
    right: -5rem;
  }
  .phone {
    top: -11rem;
    max-height: 990px;
    left:5rem;
  }

  .qr {
    max-height:140px;
  }

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+2

レスポンシブということですが、端末・OS・ブラウザはどれで確認していますか?
未だvwやvhに対応していないものもあるので、たまたまそういうので見ているってことはないでしょうか?

あと、メディアクエリで.heroに対してheightを指定していますが、これは.sectionとセレクタの詳細度が同じで後から書かれているため上書きされているという可能性もありますね。
確認してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/10 17:46 編集

    macbook osx EIの最新
    chrome バージョン 52.0.2743.82 (64-bit)
    です。

    メディアクエリ削除したら、他のsectionは100vhのままでしたが、heroだけやはりサイズ変わらなかったです。確認方法合ってるでしょうか?

    キャンセル

  • 2016/08/11 01:40

    あ、お返事遅くなってしまいましてすみません…
    解決されたようでよかったですヾ(*´∀`*)ノ

    キャンセル

checkベストアンサー

0

.section.hero {
  height: 100vh;
}

とか

.section.hero {
  height: 100vh !important;
}

とかで反応ありますか?

提示されているサイトでは .section のみで height が適用されたため、記述順か他の記述での上書き、またそのCSSが適用されていない(キャッシュやファイル自体の指定違い)なども確認してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/10 17:54

    ご説明ありがとうございます。
    一度目を通してみます!


    ちなみに自分の環境だと、
    .section.hero {
    height: 60vh;
    }
    くらいで画面いっぱいにちょうど良いくらいでした。

    100vhを指定したらどんなデバイスの画面サイズでもいっぱいに表示されるってわけでもないのでしょうか。
    http://coliss.com/articles/build-websites/operation/css/css-make-full-screen-sections-by-ckor.html

    キャンセル

  • 2016/08/10 18:05

    .section にはパディングが設定されているので。要素の高さはpadding+border+heightです。
    .section.hero {
    box-sizing: border-box;
    height: 60vh;
    }
    としたら高さが足りないはずです。
    .section.hero {
    box-sizing: border-box;
    height: 100vh;
    }
    これでどうでしょう?

    【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】
    http://phiary.me/css3-box-sizing/

    キャンセル

  • 2016/08/10 18:21

    >>.section にはパディングが設定されているので。要素の高さはpadding+border+heightです。

    テンプレをコピペして使っていたのでなにが反映されてるのかしっかり把握してませんでした。。。

    .section.hero {
    box-sizing: border-box;
    height: 60vh;
    }
    でちょうどいい感じでした。

    .section.hero {
    box-sizing: border-box;
    height: 100vh;
    }
    だと少しはみ出ています。
    モニターも変えてみましたが、60vhくらいがちょうどいいようです。



    詳細度について目を通しましたが意味がなんとなくわかりました!
    ただ、どこが詳細度が高いのか、いまいちわかっていないので少し難しそうです。


    box-sizingみてみます!

    キャンセル

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

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