Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
コード ```### 前提・実現したいこと background-imageを用いて背景画像を表示したい CSS #about{background-image}が作動しない原因を探りたいです。 HTMLCSSを用いてシングルカラムサイトを作ろうとしましたが、background-imageのurlに コードを書いてもサイトに反映されません。 ### 発生している問題・エラーメッセージ 追記 デベロッパーツールで確認したところ、エラーメッセージが出ました ```エラーメッセージ Failed to load resource: net::ERR_FILE_NOT_FOUND
CSSにおいてbackground-imageが作動しない
該当箇所と思われる部分は #about{background-image~
です。
該当のソースコード
ソースコード
CSS
1コード@charaset "utf-8"; 2 3body{ 4 margin: 0; 5 padding: 0; 6 background-color: #cccccc; 7 color: #333333; 8 font-size: 15px; 9 line-height: 2; 10} 11p,h1,h2,h3,h4,h5,h6{ 12 margin-top: 0; 13} 14img{ 15 vertical-align: bottom; 16} 17ul{ 18 margin: 0; 19 padding: 0; 20} 21a{ 22 color: #3583aa; 23 text-decoration: none; 24} 25a:visited{ 26 color: #788d98; 27} 28a:hover{ 29 text-decoration: underline; 30} 31header{ 32 width: 960px; 33 height: 100px; 34 margin: 0 auto; 35} 36.logo{ 37 float: left; 38 margin-top: 50px; 39} 40.global-nav{ 41 float: right; 42 margin-top: 60px; 43} 44.global-nav li { 45 float:left; 46 margin: 0 20px; 47 font-size: 20px; 48 list-style:none; 49} 50.global-nav li a{ 51 color: #ffffff; 52} 53.global-nav li a:hover{ 54 border-bottom: 2px solid #ffffff; 55 padding-bottom: 3px; 56 text-decoration: none; 57} 58#wrap{ 59 clear: both; 60 background-color: #ffffff; 61 margin-top: 220px; 62 padding: 35px 0; 63} 64 65.content{ 66 width: 960px; 67 margin: 0 auto; 68} 69footer{ 70 text-align: center; 71 color:#ffffff; 72 padding: 20px 0; 73 background-color: #767671; 74} 75footer small{ 76 font-size: 12px; 77} 78#about{ 79 background-image: url(../imagess/bding.jpeg); ←作動しない 80 background-repeat: no-repeat; 81 background-position: center top; 82 background-attachment: fixed; 83 background-size: 100% auto; 84} 85.main-center{ 86 width: 940px; 87 margin: 0 auto; 88} 89h1{ 90 font-family: 'Bitter',serif; 91 font-size: 36px; 92 border-bottom: 1px solid #cccccc; 93} 94h2{ 95 font-family: 'Bitter',serif; 96 font-size: 24px; 97} 98.icon:before{ 99 content: ""; 100 padding-right: 10px; 101 border-left: 7px solid #9cb4a4; 102} 103#about .profile-txt{ 104 width: 540px; 105 float: left; 106} 107#about .profie-image{ 108 float: right; 109} 110.clearfix:after{ 111 content:""; 112 display:block; 113 clear: both; 114} 115section{ 116 margin-bottom: 35px; 117} 118#about .career th{ 119 width: 240px; 120 background-color: #f0f0f0; 121 padding: 12px 0; 122 border: 1px solid #cccccc; 123} 124#about .career td{ 125 width: 660px; 126 padding: 12px 40px; 127 border: 1px solid #cccccc; 128} 129table{ 130 border-spacing: 0; 131 border-collapse:collapse; 132} 133#index #wrap{ 134 background-color: transparent; 135 margin-top: 0; 136 padding: 0; 137}
試したこと
・別のファイルを開いていないか
・ファイル名に誤りがないか
補足情報（FW/ツールのバージョンなど）
sample.htmlというフォルダの中にcss,imagessという二つのファイルがあり、bding.jpegという画像をimagessファイルから引用したいです。
フォルダの構造はこのようになっています
sample.html (ディレクトリ)
├ css
├ imagess--bding.jpeg
├ single.html
../imagess/bding.jpeg
また、該当画像のプロパティはこのようになっています
使用しているツールはATOMです。別のサイトを作ったときは正常にbackground-imageが作動しましたが、新しくフォルダを作ってから作動しません
HTML
<!DOCTYPE html> <html> <head> <meta charaset="UTF=8"> <title>XXX株式会社公式</title> <link href="css/style.css" rel="stylesheet"> </head> <body id="about"> <header> <div class="logo"></div> <nav class="global-nav"> <ul> <li>Portfolio</li> <li>About</li> <li>Contact</li> </nav> </header> <div id="wrap"> <div class="content"> <div class="main-center"> <h1>About</h1> <p>株式会社XXXの紹介ページです。</p> <section class="profile clearfix"> <div class="profile-txt"> <h2 class="icon">Profile</h2> <p>株式会社XXXはコンサルティングを請け負うファームです。戦略部門、IT部門の二つの部門があり、クライアントの皆様のご要望に応えています。 近年のグローバル化した社会には、迅速かつ適切な経営判断が求められます。株式会社XXXでは、最新のテクノロジーを駆使した先進的な情報を駆使し、アウトプット し続けています。</p> </div> <img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350" alt=""> </section> <section class="career"> <h2 class="icon">Career and Job</h2> <table> <tr> <th>1995年</th> <td>株式会社XXX設立。資本金2000万円</td> </tr> <tr> <th>2000年</th> <td>IT部門設立。アメリカ合衆国カリフォルニア州に支部設立。</td> </tr> <tr> <th>2005年</th> <td>代表取締役に山田花子が就任。</td> </tr> </section> </div> </div> </div> <footer> <small>シングルカラムサイト</small> </footer> </body> </html>＊デベロッパーツールで確認したところ、
Failed to load resource: net::ERR_FILE_NOT_FOUND というエラーコードがでました
よろしくお願いします。
またそれぞれのファイルの構成、フォルダ階層を分かりやすく表現してください。文章だけでは限界があります。
画像の指定が「記述されているcssからの相対パスになっているか」も確認してくださいね。
mtsさん、ご教示いただきまして誠にありがとうございます。わかりにくくてすみません。ご指摘いただいた部分の修正を行います。アドバイスいただきありがとうございます。
デベロッパーツールのconsoleなどは確認しましたか？？
拡張子は「jpg」じゃなくて「jpeg」で合っていますか？？
imagessフォルダに画像はちゃんと入ってますか？あと「images」じゃなくて「imagess」にするのは何か意味があるのでしょうか…
一番最初の指摘が反映されていませんが・・
あとこの提示内容では実際のフォルダ構成”全て”が分かるわけではありません。画像、css、関係する全てのファイルが文章通りの場所にあるかどうかはこれでは分かりませんよ。あと、試してもらいたいのはbodyのbackground-colorの記述の削除ですね。#aboutはbodyにつけられている属性のようですが、bodyへの指定と#aboutへの指定が干渉しあってませんか？
easy_no_easyさん、ご指摘ありがとうございます。ご指摘いただきましたとおりconsoleを確認したところ、エラーメッセージが表示されまして、手掛かりになるかもしれません。
takopoさんご指摘ありがとうございます。「image」ではなく「imagess」にする理由はもしかしたら同じ名前のファイルで重複しないだろうかという初心者心からくる試みです
mtsさん、ご指摘ありがとうございます。再度編集いたしました。また、ご指摘にあるbodyのbackground-color記述の削除を行いましたが背景色が消えたのみで画像は相変わらず表示されませんでした。
推測ですが、「body背景に全面表示の画像を使用したいが表示されない」との理解で良いのでしょうか？
回答4件
0
ベストアンサー
background-image: url("../imagess/bding.jpeg.jpeg");
に書き換えたら表示されるかもしれないですねぇ・・・
隣の"office"って画像に拡張子が表示されていないのがすごく気になる
投稿2018/08/04 12:42
総合スコア4447
0
simple.html/simple が HTML ファイルとすると、
imagessディレクトリへのパスは ../imagess でなく ./imagess (./は無くてもいい)ですね。
あと、ディレクトリに html 拡張子があったり、
HTMLファイルに html 拡張子が無いのは違和感があります。
simple (ディレクトリ) ├ simple.html ├ css ├ images (もしくは img)
投稿2018/08/04 02:29
総合スコア784
あなたの回答
tips
プレビュー
