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

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

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

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

CSS

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

解決済

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

kgsu
kgsu

総合スコア0

HTML

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

CSS

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

4回答

0評価

0クリップ

637閲覧

投稿2020/05/30 15:25

編集2022/01/12 10:58

前提・実現したいこと

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です。
div idのCSSの記述はシャープを入力すると見出しになってしますので(シャープ)と書かせていただいております。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hope_mucci
hope_mucci

2020/05/30 15:28

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

2020/05/30 15:39

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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