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

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

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

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

CSS

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

Q&A

解決済

4回答

1148閲覧

CSSの背景が表示されません。

kgsu

総合スコア1

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/30 15:25

編集2020/05/30 15:38

前提・実現したいこと

HTML,CSSの勉強中でホームページの作成をしています。
CSSで背景を挿入しようとしているのですが、上手くいきません。

HTMLのコード

<!DOCTYPE html><!--!DOCTYPE 宣言--> <html lang="ja"><!--日本語の文章である事を表現--> <head><!--head部分 HTMLページの情報が入る--> <meta charset="utf-8"><!--文字コードの指定--> <title>Sunny Side Island</title><!--タイトル--> <meta name="description" content=" 元無人島 が提供する最高の遊びと癒し。"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <!--ress.cssの指定--> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <!--googleフォントの指定--> <link href ="css/style.css" rel ="stylesheet"> <!--これから指定するCSS relはファイルとの関係性 hrefファイルのURL--> </head> <body> <!--表示するホームページの中身--> <div id="home" class="big-bg"> <header class ="page-header wrapper"> <!--ヘッダーの作成HPの上部のメニューなどを表示--> <h1><a href="index.html"><img class="logo" src="images/sunnyside logo.jpeg" alt="SunnySide ホーム"></a></h1> <!--ロゴの配置、クリックしたらトップページになるように、リンクの指定、srcで画像の貼り付け、altで画像が表示されなかった時の処理を書く--> <nav> <!--ナビゲーションタグの配置--> <ul class="main-nav"> <!--ヘッダーの設定 リストの作成 liは項目--> <li><a href="sightseeing-spot.html">観光</a></li> <li><a href="member.html">スタッフ紹介</a></li> <li><a href="inquiry.html">お問い合わせ</a></li> </ul> </nav> </header> <div class="home-content wrapper"> <h2 class="page-title">SunnySide Island</h2> <p>日常を忘れて、自然と遊びが調和する”元無人島”に遊びに来ませんか?</p> <br></br> <a class="button" href="sightseeing-spot.html">おすすめスポットを見る</a>       </div> </div> </body>

###CSS

@charaset "UTF-8"; /*文字化防止*/ html { font-size: 100% /*文字サイズの設定*/ } body{ font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif; /*書体の指定*/ line-height: 1.7; /*行の高さの指定*/ color: #432;   /*色の指定*/ } a{ text-decoration: none; /*aタグの傍線の指定 線は引かない*/ } img{ max-width: 15%; /*画像の大きさの指定*/ } .logo{ width: 210%;/*幅の指定*/ margin-top: 14px;/*要素の外側の余白 topの上側だけ指定*/ } .main-nav{ display: flex; /*横並び 要素の並びのカスタマイズを下記に示している*/ font-size: 1.25rem;/*文字の大きさ*/ text-transform: uppercase;/*文字の大文字か小文字の指定*/ margin-top: 34px; list-style: none;/*リストの先頭に置くマーカーの設置 今回は無し*/ white-space: nowrap; /*文字を横書きにする*/ } .main-nav li{ margin-left: 36px; } .main-nav a{ color: #432; } .main-nav a:hover{ color: #0bd; /*a:hoverリンクテキストにカーソルを合わせたときの装飾を指定 合わせた文字色を指定*/ } .page-header{ display: flex; justify-content: space-between; /*大きい括りでロゴとヘッダーを横並びにする                     各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ } .wrapper{ max-width: 1100px; /*横幅の指定*/ margin: auto; /*画面の中央に配置*/ padding: 0 4%; /*スマートフォン向けの余白の指定*/ } .home-content{ text-align: center; /*画面中央と余白の指定*/ margin-top: 10px; } .home-content p { font-size: 1.125rem; /*pタグへのフォントサイズと余白の指定*/ padding-bottom: 40px; } .page-title{ font-size: 5rem; font-family: 'Philosopher',serif; text-transform: uppercase; /*全部大文字*/ font-weight: normal;/*文字の太さ標準*/ } .button{/*ボタンのクラスに余白や角丸色の指定*/ font-size: 1.375rem; background: #0bd; color: #fff; border-radius: 5px; padding: 18px 32px; margin-left: 80px; } .button:hover{ background: #0090aa; } .big-bg{ background-size: cover; background-position: center top; background-repeat: no-repeat; } #home{ background-image: url(../images/logo.jpeg); min-height: 100vh; } #home .pagetitle{ text-transform: none; }

試したこと

パスを絶対パスに変更。
ディレクトリも色々なパスを試しました。

補足情報(FW/ツールのバージョンなど)

imagesのあるフォルダはCSSフォルダ、HTMLファイルと並んで格納されています。
写真のファイル名はlogo.jpegです。

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

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

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

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

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

hope_mucci

2020/05/30 15:28

cssのコードもhtmlのコードと同じように<code>ボタンでくくってください。読みやすくなります。
kgsu

2020/05/30 15:39

コードで括りました! ご指摘ありがとうございます。
guest

回答4

0

ベストアンサー

ええと、張り付けられたHTMLとCSSがそのまま編集中のファイルと同一だと仮定すると、日本語を書いてはいけない場所に何か所か全角空白が混入しているのが原因ではないでしょうか。

ちなみに、今回のURLだと、url()内は'や"で囲まなくても行けますし、CSS文書からの相対パスで書くので「../images/logo.jpeg」という指定で合っています。

投稿2020/05/30 16:02

Daregada

総合スコア11990

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

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

kgsu

2020/05/30 16:42

回答ありがとうございます。 確かにいくつか全角でスペースを開けてコメントアウトしていたりしたので修正いたしました。 まだミオといている部分があるのか、それでも反映がされません、、、
Daregada

2020/05/30 16:47

お使いになられているアプリの検索機能を使って、全角空白を検索するか、いっそのこと半角空白に置換してしまえばいいのでは。なお、提示されたCSSの全角空白をすべて取り除いたところ、こちらの環境では背景画像が表示されました。
kgsu

2020/05/30 17:04

ATOMの全角入力が可視化できるようになるものをインストールして確認し修正しましたがまだ出現されません。 まだ全角スペースを見落としているのかもしれません。また明日確認してみます。ありがとうございます。
guest

0

※内容を勘違いしていました。修正します。

ディレクトリ構成はどうなっているんですか?

そのhtml css/ └そのcss images/ └ logo.jpeg

となっているなら、background-image: url(../images/logo.jpeg);で良いはずですが、ディレクトリ構成やファイル名を一度見直してみてください。また画像ファイルが壊れていないかも確認してみてください。
あと、URLの文字列は念のためシングルクォートで括ったほうが良いです。
html内で出てくる画像のようにファイル名にスペースが入っているなら、クォートしないとエラーになるはずです。

投稿2020/05/30 15:43

編集2020/05/30 16:12
hope_mucci

総合スコア4447

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

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

kgsu

2020/05/30 16:31

回答ありがとうございます!おっしゃる通りのディレクトリ構成なのでその記述で問題ないかと思います。 シングルクオートで囲みました。 このファイル名にはスペースは挿入しておりません。
guest

0

動くサンプル:https://jsfiddle.net/Lwt4h37v/


CSSの全角空白を削除したらとりあえず背景にはなっているので、パスが違うのでしょう。フォルダ名、ファイル名、ファイルパスを確認してみましょう。
ちなみに<br></br>は文法的に間違っています。<br>は空要素なので閉じタグが不要です。

投稿2020/05/30 16:50

kei344

総合スコア69364

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

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

kgsu

2020/05/30 23:42

とじタグいらないのですね!知らなかったです。ご指摘ありがとうございます。 前の回答者さんがおっしゃられているように そのhtml css/ └そのcss images/ └ logo.jpeg このようなディレクトリになっているのですが、、、 もう一度全角の見落としないか確認してみます。
kei344

2020/05/31 02:26

logo.jpegをブラウザにドロップしたら、アドレスバーでフルパスが確認できます。つづりが間違っていないかや、拡張子が違わないかを確認しましょう。(CSSフォルダも同様につづりの確認をしましょう)
guest

0

background-image: url("../images/logo.jpeg");
じゃないですか?

投稿2020/05/30 15:44

annaPanda

総合スコア130

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

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

kgsu

2020/05/30 16:32

’や”などで囲って試してみておりますが実装されません、、、 ご丁寧に回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問