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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

4回答

424閲覧

background-imageが反映されません

sutosi

総合スコア27

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/04/02 06:24

cssにbackground-imageをbody内に設定したのですが反映されません。
特にnav id="fh5co-main-nav"に背景画像が反映されないのが全く分からず、画像が入っているimagesの場所も指定はできています。
ご教授お願いいたします。

HTML

1<!DOCTYPE html> 2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 3<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 4<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <title>Minimal &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title> 10 <meta name="viewport" content="width=device-width, initial-scale=1"> 11 <meta name="description" content="Free HTML5 Template by FREEHTML5.CO" /> 12 <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" /> 13 <meta name="author" content="FREEHTML5.CO" /> 14 15 <!-- 16 ////////////////////////////////////////////////////// 17 18 FREE HTML5 TEMPLATE 19 DESIGNED & DEVELOPED by FREEHTML5.CO 20 21 Website: http://freehtml5.co/ 22 Email: info@freehtml5.co 23 Twitter: http://twitter.com/fh5co 24 Facebook: https://www.facebook.com/fh5co 25 26 ////////////////////////////////////////////////////// 27 --> 28 29 <!-- Facebook and Twitter integration --> 30 <meta property="og:title" content=""/> 31 <meta property="og:image" content=""/> 32 <meta property="og:url" content=""/> 33 <meta property="og:site_name" content=""/> 34 <meta property="og:description" content=""/> 35 <meta name="twitter:title" content="" /> 36 <meta name="twitter:image" content="" /> 37 <meta name="twitter:url" content="" /> 38 <meta name="twitter:card" content="" /> 39 40 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 41 <link rel="shortcut icon" href="favicon.ico"> 42 43 <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet"> 44 <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet"> 45 46 <!-- Animate.css --> 47 <link rel="stylesheet" href="css/animate.css"> 48 <!-- Icomoon Icon Fonts--> 49 <link rel="stylesheet" href="css/icomoon.css"> 50 <!-- Bootstrap --> 51 <link rel="stylesheet" href="css/bootstrap.css"> 52 53 <!-- Flexslider --> 54 <link rel="stylesheet" href="css/flexslider.css"> 55 56 <link rel="stylesheet" href="css/style.css"> 57 58 59 <!-- Modernizr JS --> 60 <script src="js/modernizr-2.6.2.min.js"></script> 61 <!-- FOR IE9 below --> 62 <!--[if lt IE 9]> 63 <script src="js/respond.min.js"></script> 64 <![endif]--> 65 66 </head> 67 <body> 68 69 <nav id="fh5co-main-nav" role="navigation"> 70 <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle active"><i></i></a> 71 <div class="js-fullheight fh5co-table"> 72 <div class="fh5co-table-cell js-fullheight"> 73 <ul> 74 <li><a href="index.html">Home</a></li> 75 <li><a href="work.html">Profile</a></li> 76 <li><a href="product.html">News</a></li> 77 <li><a href="about.html">Shop</a></li> 78 <li><a href="contact.html">Contact</a></li> 79 </ul> 80 <p class="fh5co-social-icon"> 81 <a href="#"><i class="icon-twitter2"></i></a> 82 <a href="#"><i class="icon-user"></i></a> 83 <a href="#"><i class="icon-youtube"></i></a> 84 </p> 85 </div> 86 </div> 87 </nav> 88 89 <div id="fh5co-page"> 90 <header> 91 <div class="container"> 92 <div class="fh5co-navbar-brand"> 93 <h1 class="text-left"><a class="fh5co-logo" href="index.html">PIONEA</a></h1> 94 <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a> 95 </div> 96 </div> 97 </header> 98 99 <aside id="fh5co-hero" class="js-fullheight"> 100 <div class="flexslider js-fullheight"> 101 <ul class="slides"> 102 <li style="background-image: url(images/plini.jpg);"> 103 <div class="overlay-gradient"></div> 104 <div class="container"> 105 <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text"> 106 <div class="slider-text-inner"> 107 <h2>Create A Motivational Template</h2> 108 <span>Branding</span> 109 </div> 110 </div> 111 </div> 112 </li> 113 <li style="background-image: url(images/plini.jpg);"> 114 <div class="overlay-gradient"></div> 115 <div class="container"> 116 <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text"> 117 <div class="slider-text-inner"> 118 <h2>Start Practicing Your Course</h2> 119 <span>Website</span> 120 </div> 121 </div> 122 </div> 123 </li> 124 <li style="background-image: url(images/plini.jpg);"> 125 <div class="overlay-gradient"></div> 126 <div class="container"> 127 <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text"> 128 <div class="slider-text-inner"> 129 <h2>Start Practicing Your Course</h2> 130 <span>Products</span> 131 </div> 132 </div> 133 </div> 134 </li> 135 </ul> 136 </div> 137 </aside> 138 139 <footer> 140 <div id="footer"> 141 <div class="container"> 142 143 144 <div class="row copy-right"> 145 <div class="col-md-6 col-md-offset-3 text-center"> 146 <p class="fh5co-social-icon"> 147 <a href="#"><i class="icon-twitter2"></i></a> 148 <a href="#"><i class="icon-user"></i></a> 149 <a href="#"><i class="icon-youtube"></i></a> 150 </p> 151 152 <!--ここのspanは数字のアニメーションを設定--> 153 <p> 154 © <span class="fh5co-counter js-counter" data-from="0" data-to="2018" data-speed="5000" data-refresh-interval="50"> 155 </span> 156 @PIONEA_jpn 157 </p> 158 </div> 159 </div> 160 </div> 161 </div> 162 </footer> 163 164 </div> 165 166 <!-- jQuery --> 167 <script src="js/jquery.min.js"></script> 168 <!-- jQuery Easing --> 169 <script src="js/jquery.easing.1.3.js"></script> 170 <!-- Bootstrap --> 171 <script src="js/bootstrap.min.js"></script> 172 <!-- Waypoints --> 173 <script src="js/jquery.waypoints.min.js"></script> 174 <!-- Counters --> 175 <script src="js/jquery.countTo.js"></script> 176 <!-- Flexslider --> 177 <script src="js/jquery.flexslider-min.js"></script> 178 179 <!-- Main JS --> 180 <script src="js/main.js"></script> 181 182 </body> 183</html> 184

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/04/02 06:33

important指定を入れるとどうなりますか? 例:background-image: url(images/plini.jpg) !important;
sutosi

2018/04/02 06:39

うまくいきませんでした..また別のbodyタグに背景が指定されていたんで削除して試してみたのですがそれもうまくいきませんでした
m.ts10806

2018/04/02 07:28

bodyタグの背景の指定は今回当てたい箇所には影響ないはずです。例えばli全体に対して!important指定で設定があるとか、の場合は影響があります。やはり画像のパスが間違っているのではないでしょうか。相対パスで書かれているのようなので、ひとまずhttpから始まる絶対パスを入れてみて表示されたらパスが違うということなので、実行しているファイルからの相対パスを改めて設定しなおすと良いです。
guest

回答4

0

CSS がキチンと意図した通りあたっているか?
画像ファイルが読めているか?

いずれも、ブラウザの開発ツールで確認すると簡単にわかります。

投稿2018/04/02 06:40

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sutosi

2018/04/02 06:42

他の箇所にも画像を指定しているのですがそちらはうまく表示されました!
guest

0

widthで対象の画像に適当に幅をつけてあげるとどうですか?

投稿2021/03/18 09:15

shunta80

総合スコア96

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

少し気になる部分として推測でしかありませんが、CSS内のコメントの終わらせ方で「*/」の前に半角文字や半角スペース以外の全角文字で終わっている所が見られます。この場合、次の正しい終わらせ方のところまで、CSSが効かない場合があります。

確認してみてください。

投稿2018/04/04 10:14

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

その場所に画像が適切に配置されていれば、

・外部CSSのその箇所に、!importantbackground が指定されている可能性があります。
・元のサイズが大きく、その要素内におさまりきっていない場合、background-size: contain;もしくはサイズ固定で指定することで、見えるようになるかもしれません。(あとbackground-positionとか)

まず開発ツールで、その画像がnot foundになっていないかを確認する必要がありますね。

投稿2018/04/02 06:30

編集2018/04/02 08:32
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sutosi

2018/04/02 06:33

確認してみます! また、CSSはテキストが多いため分けて記載します ```CSS @font-face { font-family: 'icomoon'; src: url("../fonts/icomoon/icomoon.eot?srf3rx"); src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg"); font-weight: normal; font-style: normal; } /* ======================================================= * * Template Style * Edit this section * * ======================================================= */ body { font-family: "Karla", Arial, sans-serif; line-height: 1.8; font-size: 20px; background: #f0f0f0; background-image: url(images/photography.png); font-weight: 300; overflow-x: hidden; } body { /*背景画像....まだテストです-----------------------------------*/ background-image: url("../images/ichika.jpg"); background-repeat: no-repeat; background-attachment: fixed;/*背景を固定している*/ background-position: center;/*背景が中央に設定される*/ background-size:cover;/*背景画像をちゃんと表示*/ /*padding-bottom: 50px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ } body.menu-show { overflow: hidden; position: fixed; height: 100%; width: 100%; } #fh5co-wrapper { height: 100%; width: 100%; overflow: hidden; } #fh5co-wrapper > div { width: 100%; height: 100%; overflow-y: hidden; } a { color: #FF847C; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover { text-decoration: underline; color: #FF847C; } a:focus, a:active { outline: none; } p, span { margin-bottom: 1.5em; font-size: 18px; color: #727272; font-weight: 300; font-family: "Karla", Arial, sans-serif; } span { font-size: 18px; color: rgba(114, 114, 114, 0.8); } h1, h2, h3, h4, h5, h6 { color: rgba(0, 0, 0, 0.8); font-family: "Playfair Display", Arial, serif; font-weight: 300; margin: 0 0 30px 0; } ::-webkit-selection { color: #fcfcfc; background: #b7c2c2; } ::-moz-selection { color: #fcfcfc; background: #b7c2c2; } ::selection { color: #fcfcfc; background: #b7c2c2; } #fh5co-page { position: relative; -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background: #fff; } .menu-show #fh5co-page { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } #fh5co-main-nav { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); z-index: 1002; text-align: center; visibility: hidden; opacity: 0; -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); overflow-y: scroll; } #fh5co-main-nav .fh5co-nav-toggle { position: absolute; top: 30px; right: 30px; padding: 20px; height: 50px; width: 50px; background: rgba(0, 0, 0, 0.5); line-height: 0; padding: 0 !important; visibility: hidden; opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #fh5co-main-nav .fh5co-nav-toggle:hover { background: rgba(0, 0, 0, 0.7); } #fh5co-main-nav .fh5co-nav-toggle i { top: 19px !important; left: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0; text-indent: 0; } #fh5co-main-nav .fh5co-nav-toggle.show { visibility: visible; opacity: 1; } .menu-show #fh5co-main-nav { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #fh5co-main-nav ul { text-align: center; padding: 50px 0 50px 0; margin: 0; } @media screen and (max-width: 768px) { #fh5co-main-nav ul { padding: 20px 0 0 0; } } #fh5co-main-nav ul li { padding: 0; margin: 0; display: inline-block; font-family: "Playfair Display", Arial, serif; } #fh5co-main-nav ul li a { display: block; width: 100%; color: black; font-size: 30px; padding: 10px 20px; } @media screen and (max-width: 768px) { #fh5co-main-nav ul li a { font-size: 30px; padding: 10px 0; } } #fh5co-main-nav ul li a:hover, #fh5co-main-nav ul li a:active, #fh5co-main-nav ul li a:focus { color: rgba(0, 0, 0, 0.7); outline: none; text-decoration: none; } @media screen and (max-width: 768px) { #fh5co-main-nav ul li { display: block; } } .fh5co-table { display: table; width: 100%; height: 100%; } @media screen and (max-width: 768px) { .fh5co-table { display: block !important; height: inherit !important; width: inherit !important; } } .fh5co-table .fh5co-table-cell { width: 100%; height: 100%; display: table-cell; vertical-align: middle; } @media screen and (max-width: 768px) { .fh5co-table .fh5co-table-cell { display: block !important; height: inherit !important; width: inherit !important; } } .btn { margin-right: 4px; margin-bottom: 4px; font-family: "Karla", Arial, sans-serif; font-size: 16px; font-weight: 400; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .btn.btn-md { padding: 10px 20px !important; } .btn.btn-lg { padding: 18px 36px !important; } .btn:hover, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; color: #fff !important; } .btn-primary { background: #FF847C; color: #fff; border: 2px solid #FF847C; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #ff9c96 !important; border-color: #ff9c96 !important; } .btn-primary.btn-outline { background: transparent; color: #FF847C; border: 2px solid #FF847C; } .btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active { background: #FF847C; color: #fff !important; } .btn-success { background: #5cb85c; color: #fff; border: 2px solid #5cb85c; } .btn-success:hover, .btn-success:focus, .btn-success:active { background: #4cae4c !important; border-color: #4cae4c !important; } .btn-success.btn-outline { background: transparent; color: #5cb85c; border: 2px solid #5cb85c; } .btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active { background: #5cb85c; color: #fff; } .btn-info { background: #5bc0de; color: #fff; border: 2px solid #5bc0de; } .btn-info:hover, .btn-info:focus, .btn-info:active { background: #46b8da !important; border-color: #46b8da !important; } .btn-info.btn-outline { background: transparent; color: #5bc0de; border: 2px solid #5bc0de; } .btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active { background: #5bc0de; color: #fff; } .btn-warning { background: #f0ad4e; color: #fff; border: 2px solid #f0ad4e; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #eea236 !important; border-color: #eea236 !important; } .btn-warning.btn-outline { background: transparent; color: #f0ad4e; border: 2px solid #f0ad4e; } .btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active { background: #f0ad4e; color: #fff; } .btn-danger { background: #d9534f; color: #fff; border: 2px solid #d9534f; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #d43f3a !important; border-color: #d43f3a !important; } .btn-danger.btn-outline { background: transparent; color: #d9534f; border: 2px solid #d9534f; } .btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active { background: #d9534f; color: #fff; } ```
sutosi

2018/04/02 06:34

続きです2 ```CSS .btn-outline { background: none; border: 2px solid gray; font-size: 16px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn-outline:hover, .btn-outline:focus, .btn-outline:active { box-shadow: none; } .btn.with-arrow { position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn.with-arrow i { visibility: hidden; opacity: 0; position: absolute; right: 0px; top: 50%; margin-top: -8px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .btn.with-arrow:hover { padding-right: 50px; } .btn.with-arrow:hover i { color: #fff; right: 18px; visibility: visible; opacity: 1; } .view-button .btn-outline { background: transparent; color: #000; border: 2px solid #000; } .view-button .btn-outline:hover, .view-button .btn-outline:focus, .view-button .btn-outline:active { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; } header { padding:3em 0 1em 0; } @media screen and (max-width: 768px) { header { padding: 2em 0; } } header .fh5co-navbar-brand { float: left; width: 100%; position: relative; } header .fh5co-navbar-brand h1 { width: 100%; float: left; display: block; font-family: "Karla", Arial, sans-serif; } header .fh5co-navbar-brand .fh5co-logo { font-size: 24px; text-transform: uppercase; color: #000; letter-spacing: 4px; border: 2px solid #000; padding: 5px 20px; } header .fh5co-navbar-brand .fh5co-logo:hover { text-decoration: none !important; color: #000 !important; } header .fh5co-navbar-brand .fh5co-logo:active, header .fh5co-navbar-brand .fh5co-logo:focus { outline: none; text-decoration: none; } .fh5co-nav-toggle { cursor: pointer; text-decoration: none; position: absolute !important; top: 0; right: 0; } .fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after { background: #fff; } .fh5co-nav-toggle.dark.active i::before, .fh5co-nav-toggle.dark.active i::after { background: #fff; } .fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active { outline: none; border-bottom: none !important; } .fh5co-nav-toggle i { position: relative; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; width: 30px; height: 2px; color: #000; font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #000; transition: all .2s ease-out; } .menu-show .fh5co-nav-toggle i { background: #fff; color: #fff; } .fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after { content: ''; width: 30px; height: 2px; background: #000; position: absolute; left: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .menu-show .fh5co-nav-toggle i::before, .menu-show .fh5co-nav-toggle i::after { background: #fff; } .fh5co-nav-toggle.dark i { position: relative; color: #000; background: #000; transition: all .2s ease-out; } .fh5co-nav-toggle.dark i::before, .fh5co-nav-toggle.dark i::after { background: #000; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .fh5co-nav-toggle i::before { top: -7px; } .fh5co-nav-toggle i::after { bottom: -7px; } .fh5co-nav-toggle:hover i::before { top: -10px; } .fh5co-nav-toggle:hover i::after { bottom: -10px; } .fh5co-nav-toggle.active i { background: transparent; } .fh5co-nav-toggle.active i::before { top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } .fh5co-nav-toggle.active i::after { bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .fh5co-nav-toggle { float: right; z-index: 1003; position: relative; display: block; margin: 0 auto; cursor: pointer; margin-top: 0px; } @media screen and (max-width: 768px) { .fh5co-nav-toggle { display: block; top: 0px; } } #fh5co-hero { margin-bottom: 0/*元は4em*/; min-height: 700px; background: #fff url(../images/loader.gif) no-repeat center center; } #fh5co-hero .btn { font-size: 24px; } #fh5co-hero .btn.btn-primary { padding: 14px 30px !important; } #fh5co-hero .flexslider { border: none; z-index: 1; margin-bottom: 0; } #fh5co-hero .flexslider .slides { position: relative; overflow: hidden; } #fh5co-hero .flexslider .slides li { background-repeat: no-repeat; background-size: cover; background-position: center center; min-height: 700px; position: relative; } #fh5co-hero .flexslider .slides li:after { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; content: ''; background: rgba(0, 0, 0, 0.2); z-index: 1; } #fh5co-hero .flexslider .flex-control-nav { position: absolute; bottom: 0; z-index: 1000; } @media screen and (max-width: 768px) { #fh5co-hero .flexslider .flex-control-nav { bottom: -15em; } } @media screen and (max-width: 480px) { #fh5co-hero .flexslider .flex-control-nav { bottom: -10em; } } #fh5co-hero .flexslider .flex-control-nav li a { background: rgba(255, 255, 255, 0.2); box-shadow: none; width: 12px; height: 12px; cursor: pointer; } #fh5co-hero .flexslider .flex-control-nav li a.flex-active { cursor: pointer; background: rgba(255, 255, 255, 0.7); } #fh5co-hero .flexslider .flex-direction-nav { display: none; } #fh5co-hero .flexslider .slider-text { display: table; opacity: 0; height: 700px; z-index: 9; } ```
sutosi

2018/04/02 06:35

続きです3 ```CSS @media screen and (max-width: 768px) { #fh5co-hero .flexslider .slider-text { text-align: center; } } #fh5co-hero .flexslider .slider-text > .slider-text-inner { display: table-cell; vertical-align: middle; height: 700px; } #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 { font-size: 60px; font-weight: 400; color: #fff; } @media screen and (max-width: 768px) { #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 { font-size: 40px; } } #fh5co-hero .flexslider .slider-text > .slider-text-inner p .btn:hover { color: #fff !important; } #fh5co-hero .flexslider .slider-text > .slider-text-inner span { color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 5px; font-size: 12px; } #fh5co-contact-section, #fh5co-services-section, #fh5co-work-section, #fh5co-product-section, #fh5co-about-section, #fh5co-map-section { padding-bottom: 7em; } #fh5co-intro-section { margin-bottom: 0.1em/*元は2em*/; padding-bottom: 0.1em/*元は2em*/; } .intro-heading { font-size: 40px; font-weight: 300; line-height: 1.5; } @media screen and (max-width: 768px) { .intro-heading { font-size: 30px; } } .work, .product { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height: 400px; margin-bottom: 30px; } .work .view, .product .view { width: 100%; height: 400px; display: table; opacity: 0; padding: 0; margin: 0; text-decoration: none; color: #fff; background: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 768px) { .work .view, .product .view { opacity: 1; } } .work .view span, .work .view i, .product .view span, .product .view i { height: 400px; display: table-cell; vertical-align: middle; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: 4px; } .work h3, .product h3 { margin-top: 30px; } .work h3 a, .product h3 a { color: #000; } .work:hover .view, .work:focus .view, .product:hover .view, .product:focus .view { opacity: 1; } .product { margin-bottom: 0; } .product .view i { font-size: 18px; } .prod { margin-bottom: 30px; } .prod h3 { margin-top: 30px; margin-bottom: 10px; font-size: 20px; } .prod h3 a { color: #000; } .fh5co-counters { padding: 3em 0; background: #e6e6e6; background-size: cover; background-attachment: fixed; background-position: center center; } .fh5co-counters .heading-section h2 { color: #fff; font-weight: 400; font-size: 40px; } .fh5co-counters .fh5co-counter { font-size: 60px; display: block; color: #fff; font-family: "Karla", Arial, sans-serif; width: 100%; font-weight: 700; margin-bottom: .3em; } .fh5co-counters .fh5co-counter-label { color: #fff; text-transform: uppercase; font-size: 13px; letter-spacing: 5px; margin-bottom: 2em; display: block; } .services { position: relative; padding: 30px; margin-top: 60px; background: white; border: 1px solid rgba(0, 0, 0, 0.1); } .services .icon { width: 100%; float: left; margin-bottom: 30px; margin-top: -80px; } .services .icon span { display: table; display: block; width: 100px; height: 100px; margin: 0 auto; background: #eee; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .services .icon span i { width: 100px; height: 100px; display: table-cell; vertical-align: middle; font-size: 40px; color: #000; } @media screen and (max-width: 768px) { .services { margin-bottom: 5em; } } .about-content { margin-bottom: 5em; } .fh5co-staff { text-align: center; margin-bottom: 30px; } .fh5co-staff img { width: 170px; margin-bottom: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .fh5co-staff h3 { font-size: 24px; margin-bottom: 5px; } .fh5co-staff p { margin-bottom: 30px; } .fh5co-staff .role { color: #bfbfbf; margin-bottom: 30px; font-weight: normal; display: block; } .fh5co-social-icons { margin: 0; padding: 0; } .fh5co-social-icons li { margin: 0; padding: 0; list-style: none; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .fh5co-social-icons li a { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; color: #000; padding-left: 10px; padding-right: 10px; text-decoration: none; } .fh5co-social-icons li a i { font-size: 20px; } .contact-info { margin-bottom: 4em; padding: 0; } .contact-info li { list-style: none; margin: 0 0 20px 0; position: relative; padding-left: 40px; color: #727272; } .contact-info li i { position: absolute; top: .3em; left: 0; font-size: 22px; color: #727272; } .contact-info li a { color: #727272; } .form-control { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border: none; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 18px; font-weight: 300; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; } .form-control:focus, .form-control:active { box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.8); } input[type="text"] { height: 50px; } .form-group { margin-bottom: 30px; } #footer { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 1em/*元は4em*/ 0; } #footer h3 { font-size: 18px; font-weight: 400; } #footer ul { margin: 0; padding: 0; } #footer ul li { font-size: 18px; list-style: none; margin-bottom: 0; } #footer ul li a { color: #727272; } #footer .float { width: 50%; float: left; } @media screen and (max-width: 768px) { #footer .float { width: 100%; } } #footer .copy-right { padding-top: 0/*元は4em*/; } #footer a { color: black; } #footer a:hover, #footer a:focus { text-decoration: none; color: #FF847C; } .fh5co-social-icon a { padding: 0 5px; } .fh5co-social-icon a i { color: #000; } .fh5co-social-icon a:hover, .fh5co-social-icon a:focus { text-decoration: none; } .heading-section { margin-bottom: 3em; } .heading-section h2 { font-size: 34px; font-weight: 300; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } .js .animate-box { opacity: 0; } ```
yoshinavi

2018/04/02 08:16 編集

質問者さんへ 質問等は編集出来ます。長文コードはコメントでなく、質問文に追加してください。 -追記- 「visibility: hidden;」で見えないだけではないですか?
kszk311

2018/04/02 08:33

確認項目を追加しました。 あと、yoshinaviさんも指摘されていますが、質問文の方にコードを記載してくださいね。
sutosi

2018/04/02 08:37

コード自体が1万文字で質問文に乗せられないんですよね..もともとテンプレートを元にいじっています visibility: hidden;を削除してもときに表示はされませんでした
yoshinavi

2018/04/02 08:49

全てを載せる必要は無く、該当箇所のみで良いと思いますが、デベロッパーツールでの確認等はどうですか? 単純にbodyやnav部分に画像でなく背景色を#000や#fffで指定しても変わらないのでしょうか?
yoshinavi

2018/04/02 08:55

ここは「kszk311」さんのコメント欄なので、私のここでの意見はこれで控えさせて頂きます。 試したことが他にあれば、質問文に編集して記述してもらえれば、他の方からも回答を得られやすくなると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問