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

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

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

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

CSS

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

Q&A

解決済

1回答

1043閲覧

画像を指定しているのに出てこない。

sugawa

総合スコア24

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/04/10 11:50

SCC

1 2 3 4body{ 5 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "sans-serif"; 6 margin: 0; 7 padding: 0; 8 width: 100%; 9 height: 100%; 10 background-image: url("imagesのコピー/body_border.gif"); 11 background-repeat: repeat-x; 12} 13 14p { 15 font-size: 12px; 16 17 18} 19 20#container { 21 width: 900px; 22 height: 600px; 23 margin: 0px auto 0px auto; 24 float: none; 25} 26 27header{ 28 height: 120px; 29 width: 900px; 30} 31 32header h1{ 33 margin: 0px; 34 padding: 0px; 35 36} 37 38header #Logo_area { 39 float: left; 40 height: 100px; 41 width: 300px; 42} 43 44header #Logo_area h1 { 45 margin-top: 40px; 46} 47 48header #Navi_area { 49 float: right; 50 height: 100px; 51 width: 580px; 52} 53 54header #Navi_area #banner{ 55 float: right; 56 margin-right: 30px; 57 margin: 0px; 58 padding: 0px; 59 60 61} 62 63header #Navi_area ul{ 64 list-style-type: none; 65 font-size: 10px; 66 margin-top: 100px; 67} 68 69header #Navi_area li{ 70 display: inline; 71 float: right; 72 width: 70px; 73 border-left-style: solid; 74 border-left-width: 1px; 75 border-left-color: #050505; 76 padding-left: 8px; 77} 78 79header #Navi_area li a{ 80 text-decoration: none; 81 color: black; 82} 83 84header #Navi_area li a:hover{ 85 color: #09f; 86 text-decoration: underline; 87} 88 89main{ 90 height: 600px; 91 width: 900px; 92 93} 94 95main #Side_navi { 96 height: auto; 97 width: 210px; 98 float: left; 99 margin-top: 30px; 100} 101 102#Side_navi ul { 103 margin: 0px; 104 padding: 0px; 105 list-style-type: none; 106 border-top-width: 1px; 107 border-top-style: solid; 108 border-top-color: black; 109} 110 111#Side_navi ul #navi01 { 112 margin: 0px; 113 padding: 0px; 114 width: 210px; 115 height: 46px; 116 background: url("imagesのコピー/SideNavi_Top_out.gif")no-repeat; 117 border-bottom-width: 1px; 118 border-bottom-style: solid; 119 border-bottom-color: black; 120} 121 122#Side_navi ul #navi02 { 123 margin: 0px; 124 padding: 0px; 125 width: 210px; 126 height: 46px; 127 background: url("imagesのコピー/SideNavi_Event_over.gif")no-repeat; 128 border-bottom-width: 1px; 129 border-bottom-style: solid; 130 border-bottom-color: black; 131} 132 133#Side_navi ul #navi03 { 134 margin: 0px; 135 padding: 0px; 136 width: 210px; 137 height: 46px; 138 background: url("imagesのコピー/SideNavi_Owners_over.gif")no-repeat; 139 border-bottom-width: 1px; 140 border-bottom-style: solid; 141 border-bottom-color: black; 142} 143 144#Side_navi ul #navi04 { 145 margin: 0px; 146 padding: 0px; 147 width: 210px; 148 height: 46px; 149 background: url("imagesのコピー/SideNavi_ModelHouse_over.gif")no-repeat; 150 border-bottom-width: 1px; 151 border-bottom-style: solid; 152 border-bottom-color: black; 153} 154 155#Side_navi ul #navi05 { 156 margin: 0px; 157 padding: 0px; 158 width: 210px; 159 height: 46px; 160 background: url("imagesのコピー/SideNavi_Blog_over.gif")no-repeat; 161 border-bottom-width: 1px; 162 border-bottom-style: solid; 163 border-bottom-color: black; 164} 165 166#Side_navi ul #navi06 { 167 margin: 0px; 168 padding: 0px; 169 width: 210px; 170 height: 46px; 171 background: url("imagesのコピー/SideNavi_Event_over.gif")no-repeat; 172 border-bottom-width: 1px; 173 border-bottom-style: solid; 174 border-bottom-color: black; 175} 176 177#Side_navi ul #navi07 { 178 margin: 0px; 179 padding: 0px; 180 width: 210px; 181 height: 46px; 182 background: url("imagesのコピー/SideNavi_Recruit_over.gif")no-repeat; 183 border-bottom-width: 1px; 184 border-bottom-style: solid; 185 border-bottom-color: black; 186} 187 188#Side_navi ul a:hover img { 189 visibility: hidden; 190} 191 192 193 194#Side_navi ul h2 { 195 margin: 0px; 196 padding: 0px; 197} 198 199main #Main_box { 200 height: auto; 201 width: 450px; 202 float: left; 203 margin: 30px 0px 0px 20px; 204} 205 206#Main_box .MainBox_item { 207 width: 450px; 208 float: left; 209 margin-bottom: 20px; 210} 211 212#Main_box .MainBox_item .MainTitle { 213 background-image: url("imagesのコピー/MainTitle.gif"); 214 width: 450px; 215 height: 25px; 216 margin-top: 0px; 217 margin-bottom: 7px; 218} 219 220#Main_box .MainBox_item .MainTitle h2{ 221 font-size: 12px; 222 color: #4A4A4A; 223 margin: 0 0 0 10px; 224 padding: 1px; 225} 226 227#Main_box .MainBox_item .MainBox_right { 228 font-size: 11px; 229 float: right; 230 width: 250px; 231} 232 233#Main_box .MainBox_item img { 234 float: left; 235} 236 237#Main_box .MainBox_item a { 238 color: #F63; 239 240 241} 242 243#Main_box .MainBox_item .MainBox_news { 244 margin-bottom: 10px; 245 padding-bottom: 10px; 246 border-bottom-width: 1px; 247 border-bottom-color: #747474; 248 border-bottom-style: solid; 249} 250 251main #Banner_box { 252 height:300px; 253 width: 200px; 254 float: right; 255 margin-top: 30px; 256 257 258 } 259 260main #Banner_box .BannerImg_right { 261 width: 92px; 262 float: right; 263 264} 265 266footer{ 267 clear: both; 268 height: 20px; 269 width: 900px; 270 background-color: #000; 271 font-size: 10px; 272 text-align: center; 273 color: #FFF; 274 line-height: 17px; 275 margin: 0 auto 0 auto; 276 277 278} 279 280main #MainBox_sub { 281 width: 650px; 282 height: 600px; 283 float: left; 284 margin: 30px 0px 0px 40px; 285 286} 287 288main #MainBox_sub .SubPage_title { 289 width: 650px; 290 height: 30px; 291 margin-bottom: 10px; 292 background-image: url("imagesのコピー/SubPage_title.gif"); 293 294} 295

CSSの最後の行のbackground-image: url("imagesのコピー/SubPage_title.gif");
を指定しているのにページに反映しません。

HTML

1<!doctype html> 2<html> 3<head> 4<title>住宅設計施工の美浜工務店</title> 5<meta charset="utf-8"> 6<link href="index.css" rel="stylesheet" type="text/css"> 7</head> 8 9<body> 10<div id="container"> 11 <header> 12 <div id="Logo_area"> 13 <h1><a href="#"><img src="imagesのコピー/Logo.gif" alt="美浜設計株式会社"></a></h1> 14 </div> 15 <div id="Navi_area"> 16 <div id="banner"><a href="contact.html"><img src="imagesのコピー/Contact.gif" alt="お問い合わせ"></a></div> 17 <ul> 18 <li><a href="contact.html">資料請求</a></li> 19 <li><a href="#">サイトマップ</a></li> 20 <li><a href="#">リクルート</a></li> 21 <li><a href="#">トップ</a></li> 22 </ul> 23 </div> 24 </header> 25 <main> 26 27 <div id="Side_navi"> 28 <ul> 29 <li id="navi01"> 30 <h2><a href="#"><img src="imagesのコピー/SideNavi_Top_over.gif" alt="トップ" ></a></h2> 31 </li> 32 <li id="navi02"> 33 <h2><a href="#"><img src="imagesのコピー/SideNavi_Guide_out.gif" alt="会社概要" ></a></h2> 34 </li> 35 <li id="navi03"> 36 <h2><a href="#"><img src="imagesのコピー/SideNavi_Owners_out.gif" alt="実例集" ></a></h2> 37 </li> 38 <li id="navi04"> 39 <h2><a href="#"><img src="imagesのコピー/SideNavi_ModelHouse_out.gif" alt="モデルハウス" ></a></h2> 40 </li> 41 <li id="navi05"> 42 <h2><a href="#"><img src="imagesのコピー/SideNavi_Blog_out.gif" alt="匠のブログ" ></a></h2> 43 </li> 44 <li id="navi06"> 45 <h2><a href="#"><img src="imagesのコピー/SideNavi_Event_out.gif" alt="見学会" ></a></h2> 46 </li> 47 <li id="navi07"> 48 <h2><a href="#"><img src="imagesのコピー/SideNavi_Recruit_out.gif" alt="資料請求" ></a></h2> 49 </li> 50 </ul> 51 </div> 52 <div id="MainBox_sub"> 53 <img src="imagesのコピー/CorporateImage.jpg" alt="会社概要イメージ"> 54 <dib class="SubPage_title"><h2>会社概要</h2></dib> 55 </div> 56 57 58 59 </main> 60 <footer>©️2019 Tek-cell.inc All rights reserved.</footer> 61</div> 62</body> 63 64</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

<div id="MainBox_sub"> <img src="imagesのコピー/CorporateImage.jpg" alt="会社概要イメージ"> <dib class="SubPage_title"><h2>会社概要</h2></dib> </div>

htmlファイルのこのSubPage_titleクラスをしているタグがdibではなくdivに修正したら直りませんか?

もしそれで直らないとなると
使用しているブラウザと画像フォルダまでのパスがわからないと
原因の切り分けが難しいかと思います。

投稿2019/04/10 12:07

danof

総合スコア59

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

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

sugawa

2019/04/10 12:11

できました!! ありがとうございます!! 全然気付きませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問