Q&A
「厄介」とは？HTMLとCSSをもう少し提示されてはいかがでしょうか。
背景画像を可変で表示したいだけなのですが、background(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されません。レスポンシブのシングルページレイアウトを制作する上で、空コンテンツのpaddingの分高さが広がってしまうのを回避したいです。
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
CSS3 スマホサイト制作にかかせないbackground-sizeについて
PHP
1<!doctype html> 2<html <?php language_attributes(); ?>> 3<head> 4 <meta charset="<?php bloginfo( 'charset' ); ?>"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="profile" href="http://gmpg.org/xfn/11"> 7 8 <?php wp_head(); ?> 9</head> 10 11<body <?php body_class(); ?>> 12<div id="page" class="site"> 13 14 15 <header id="masthead" class="site-header"> 16 <nav id="site-navigation" class="main-navigation"> 17 <a class="navbar-brand" href="#"><img class="img-fluid navbar-brand" src="<?php echo get_template_directory_uri(); ?>/images/navi-logo.png" alt="navi-logo"></a> 18 <img class="img-fluid bg-header-img" src="<?php echo get_template_directory_uri(); ?>/images/bg-header.png" alt="bg-header"> 19 <div class="navbar-collapse"> 20 <ul class="navbar-nav"> 21 <li class="nav-item active"> 22 <a class="nav-link" href="#about"><img class="img-fluid navi-about-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-about.png" alt="navi-about"></a> 23 </li> 24 <li class="nav-item"> 25 <a class="nav-link" href="#access"><img class="img-fluid navi-access-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-access.png" alt="navi-access"></a> 26 </li> 27 <li class="nav-item"> 28 <a class="nav-link" href="#news"><img class="img-fluid navi-news-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-news.png" alt="navi-news"></a> 29 </li> 30 <li class="nav-item"> 31 <a class="nav-link" href="#join"><img class="img-fluid navi-join-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-join.png" alt="navi-join"></a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#paper-rally"><img class="img-fluid navi-rarry-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-rarry.png" alt="navi-rarry"></a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#circle-list"><img class="img-fluid navi-circle-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-circle.png" alt="navi-circle"></a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#contact"><img class="img-fluid navi-mail-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-mail.png" alt="navi-mail"></a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#"><img class="img-fluid navi-twitter-img" src="<?php echo get_template_directory_uri(); ?>/images/navi-twitter.png" alt="navi-twitter"></a> 44 </li> 45 </ul> 46 </div> 47 </nav><!-- #site-navigation --> 48 </header><!-- #masthead --> 49 50 <div id="content" class="site-content">
PHP
1<div id="primary" class="content-area"> 2 <main id="main" class="site-main" role="main"> 3 4 <section id="intro" class="intro"> 5 <div class="container"> 6 <div class="row"> 7 <div class="col-md-12"> 8 <div class="section-header"> 9 <h1><img class="img-fluid title-intro" src="<?php echo get_template_directory_uri(); ?>/images/title-intro.png" alt="title-intro"></h1> 10 </div> 11 <p class="lead">説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト</p> 12 </div> 13 </div> 14 </div> 15 </section><!-- .intro --> 16 17 <section id="about" class="about"> 18 <div class="container"> 19 <div class="section-header"> 20 <h2><img class="img-fluid title-about" src="<?php echo get_template_directory_uri(); ?>/images/title-about.png" alt="title-about"></h2> 21 </div> 22 <div class="about-boxes"> 23 <div class="row"> 24 <div class="col-md-3 col-sm-6"> 25 <div class="about-circle"> 26 <div class="about-text"> 27 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-circle.png" alt="title-circle"></h3> 28 <p>BAROQUE</p> 29 </div> 30 </div> 31 </div> 32 <div class="col-md-3 col-sm-6"> 33 <div class="about-circle"> 34 <div class="about-text"> 35 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-organizer.png" alt="title-organizer"></h3> 36 <p>うづき</p> 37 </div> 38 </div> 39 </div> 40 <div class="col-md-3 col-sm-6"> 41 <div class="about-circle"> 42 <div class="about-text"> 43 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-booth.png" alt="title-booth"></h3> 44 <p>未定</p> 45 </div> 46 </div> 47 </div> 48 <div class="col-md-3 col-sm-6"> 49 <div class="about-circle"> 50 <div class="about-text"> 51 <h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-date.png" alt="title-date"></h3> 52 <p>2018/3/11</p> 53 </div> 54 </div> 55 </div> 56 </div> 57 </div> 58 </div> 59 </section><!-- .about -->
scss
1/*-------------------------------------------------------------- 2# Body 3--------------------------------------------------------------*/ 4.section-header { 5 margin-bottom: 4rem; 6} 7 8/*-------------------------------------------------------------- 9# Buttons 10--------------------------------------------------------------*/ 11.btn { 12 display: inline-block; 13 font-weight: 400; 14 text-align: center; 15 white-space: nowrap; 16 vertical-align: middle; 17 -webkit-user-select: none; 18 -moz-user-select: none; 19 -ms-user-select: none; 20 user-select: none; 21 border: .1rem solid transparent; 22 padding: 1rem 4rem; 23 font-size: 1rem; 24 line-height: 1.5; 25 border-radius: .4rem; 26} 27 28.btn-access { 29 background-color: $white; 30 color: $blue; 31 border: .2rem solid $blue; 32} 33 34.btn-join { 35 background-color: $white; 36 color: $green; 37 border: .2rem solid $green; 38} 39 40.btn-contact { 41 background-color: transparent; 42 color: $white; 43 border: .2rem solid $white; 44 cursor: pointer; 45} 46 47/*-------------------------------------------------------------- 48# Navigation 49--------------------------------------------------------------*/ 50.main-navigation .bg-header-img { 51 position: fixed; 52 top: 0; 53 left: 0; 54 width: 100rem; 55 z-index: 100; 56} 57 58.main-navigation .navbar-brand { 59 position: fixed; 60 top: 1.6rem; 61 left: 13.3rem; 62 z-index: 200; 63} 64 65.navbar-nav .nav-item .navi-about-img { 66 position: fixed; 67 top: 4rem; 68 left: 22rem; 69 z-index: 100; 70} 71 72.navbar-nav .nav-item .navi-access-img { 73 position: fixed; 74 top: 4rem; 75 left: 30rem; 76 z-index: 100; 77} 78 79.navbar-nav .nav-item .navi-news-img { 80 position: fixed; 81 top: 4rem; 82 left: 38rem; 83 z-index: 100; 84} 85 86.navbar-nav .nav-item .navi-join-img { 87 position: fixed; 88 top: 4rem; 89 left: 46rem; 90 z-index: 100; 91} 92 93.navbar-nav .nav-item .navi-rarry-img { 94 position: fixed; 95 top: 4rem; 96 left: 64rem; 97 z-index: 100; 98} 99 100.navbar-nav .nav-item .navi-circle-img { 101 position: fixed; 102 top: 4rem; 103 left: 52rem; 104 z-index: 100; 105} 106 107.navbar-nav .nav-item .navi-mail-img { 108 position: fixed; 109 top: 4rem; 110 right: 16rem; 111 z-index: 100; 112} 113 114.navbar-nav .nav-item .navi-twitter-img { 115 position: fixed; 116 top: 4rem; 117 right: 12rem; 118 z-index: 100; 119} 120 121/*-------------------------------------------------------------- 122# SiteHeader 123--------------------------------------------------------------*/ 124.site-header { 125 height: 0; 126 padding-top: 69.44%; 127 background: url(images/mainImage.png) center center no-repeat; 128 background-size: contain; 129} 130 131/*-------------------------------------------------------------- 132# Intro 133--------------------------------------------------------------*/ 134.intro { 135 padding: 10rem 0; 136} 137 138.title-intro { 139 @include media-breakpoint-down(sm) { 140 margin: 0 auto; 141 } 142} 143 144.intro p { 145 text-align: center; 146} 147 148/*-------------------------------------------------------------- 149# About 150--------------------------------------------------------------*/ 151.about { 152 position: relative; 153 padding: 2rem 0 4rem 0; 154 background: url(images/bg-about.png) center /contain no-repeat; 155} 156 157.about-boxes { 158 position: absolute; 159 top: 43rem; 160 right: 0; 161 bottom: auto; 162 left: 0; 163 width: 1050px; 164 height: 240px; 165 margin: 0 auto; 166} 167 168.about-img { 169 position: absolute; 170 top: 32rem; 171 left: 64rem; 172 @include media-breakpoint-down(sm) { 173 margin: 0 auto; 174 } 175} 176 177.about .about-circle { 178 width: 15rem; 179 height: 15rem; 180 border-radius: 50%; 181 background-color: $white; 182} 183 184.about .about-circle .about-text { 185 padding-top: 4rem 186} 187 188.about .about-circle .about-text h3, 189.about .about-circle .about-text p { 190 text-align: center; 191} 192 193.about .about-circle .about-text p { 194 margin-top: 2rem; 195}
承知しました、申し訳ありません。
どの部分がどうなるのが問題かが再現環境を作れないためわかりません。スクリーンショットは提示可能でしょうか？
恐れ入りますが公開は難しいので、kei344さんにデザインを送りたいのですが、いかがでしょうか？
回答1件
0
ベストアンサー
背景画像を分けて表示させました。
CSSの擬似要素で背景画像のリピートを使った伸縮可能なコンテンツ枠の作成
SCSS
1/*-------------------------------------------------------------- 2# About 3--------------------------------------------------------------*/ 4.about-wrapper { 5 height: 0; 6 padding-bottom: calc(414 / 1440 * 100%); 7 background: 8 url(images/bg-about.png) 0 0 / contain no-repeat; 9} 10 11.about::before{ 12 content: ''; 13 display: block; 14 height: 0; 15 padding-top: calc(474 / 1440 * 100%); 16 background: url(images/bg-about-top.png) 0 0 / contain no-repeat; 17} 18 19.about::after{ 20 content: ''; 21 height: 0; 22 padding-top: calc(222 / 1440 * 100%); 23 display: block; 24 background: url(images/bg-about-bottom.png) 0 0 / contain no-repeat; 25} 26
投稿2017/12/13 01:55
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
