質問編集履歴

4 ファイルの構成を見やすくしました。

mohun

mohun score 12

2019/03/08 19:42  投稿

初心者です。cssのbackground-image設定でつまずいてます。
## cssのbackground-image設定
ドットインストールでcssの学習をしています。
headerに背景画像を埋め込みたいのですが成功しません。
ファイルは「プログラミング」フォルダ内に「css」フォルダと「my portfolio」フォルダがあり、「css」フォルダ内に
「styles.css」が、「my portfolio」フォルダ内に「header.png」がある状態です。
ファイル構成は以下のような感じです。
①css
→styles.css
②my portfolio
→header.png
③index.hml
## 発生している問題
backlground-imageが反映されません。
header内の他のプロパティ?は問題なく動いています。
 
 
##当該ソースコード
html
```
<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta chrset="utf-8">
   <title>太郎のポートフォリオサイト</title>
   <link rel="icon" href="my portfolio/favicon.ico">
   <meta name="description" coment="太郎のポートフォリオサイトです。">
   <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
  <header>
    <nav>
      <ul>
        <li>
          <a href="index.html">HOME</a>
        </li>
        <li>
          <a href="about.html">ABOUT</a>
        </li>
        </ul>
    </nav>
   </header>
```
css(css/style.css内)
```
header {
 background-color: pink;
 text-align: right;
 padding: 10px;
 background-image:
 url(../my portfolio/header.png);
}
header ul {
 margin: 0;
 list-style-type: none;
 padding-left: 0;
}
```
## 試したこと
相対パスが怪しいと思いググってみましたが、どこに問題点があるのか分かりませんでした。
  • CSS

    17447 questions

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

  • Chrome

    1697 questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • Atom(言語)

    65 questions

    Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

3 コードブロックで囲みました

mohun

mohun score 12

2019/03/08 19:27  投稿

初心者です。cssのbackground-image設定でつまずいてます。
## cssのbackground-image設定
ドットインストールでcssの学習をしています。
headerに背景画像を埋め込みたいのですが成功しません。
ファイルは「プログラミング」フォルダ内に「css」フォルダと「my portfolio」フォルダがあり、「css」フォルダ内に
「styles.css」が、「my portfolio」フォルダ内に「header.png」がある状態です。
## 発生している問題
backlground-imageが反映されません。
header内の他のプロパティ?は問題なく動いています。
##当該ソースコード
(html、header部分)
html
```
<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta chrset="utf-8">
   <title>太郎のポートフォリオサイト</title>
   <link rel="icon" href="my portfolio/favicon.ico">
   <meta name="description" coment="太郎のポートフォリオサイトです。">
   <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
  <header>
    <nav>
      <ul>
        <li>
          <a href="index.html">HOME</a>
        </li>
        <li>
          <a href="about.html">ABOUT</a>
        </li>
        </ul>
    </nav>
   </header>
```  
(css/styles.css内)  
eader {
css(css/style.css内)
```
header {
 background-color: pink;
 text-align: right;
 padding: 10px;
 background-image:
 url(../my portfolio/header.png);
}
header ul {
 margin: 0;
 list-style-type: none;
 padding-left: 0;
}
```
## 試したこと
相対パスが怪しいと思いググってみましたが、どこに問題点があるのか分かりませんでした。
  • CSS

    17447 questions

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

  • Chrome

    1697 questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • Atom(言語)

    65 questions

    Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

2 header部分といいながらhead部分しか表示してませんでした…。失礼しました。

mohun

mohun score 12

2019/03/08 19:11  投稿

初心者です。cssのbackground-image設定でつまずいてます。
## cssのbackground-image設定
ドットインストールでcssの学習をしています。
headerに背景画像を埋め込みたいのですが成功しません。
ファイルは「プログラミング」フォルダ内に「css」フォルダと「my portfolio」フォルダがあり、「css」フォルダ内に
「styles.css」が、「my portfolio」フォルダ内に「header.png」がある状態です。
## 発生している問題
backlground-imageが反映されません。
header内の他のプロパティ?は問題なく動いています。
##当該ソースコード
(html、header部分)
<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta chrset="utf-8">
   <title>太郎のポートフォリオサイト</title>
   <link rel="icon" href="my portfolio/favicon.ico">
   <meta name="description" coment="太郎のポートフォリオサイトです。">
   <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>  
  <header>  
    <nav>  
      <ul>  
        <li>  
          <a href="index.html">HOME</a>  
        </li>  
        <li>  
          <a href="about.html">ABOUT</a>  
        </li>  
        </ul>  
    </nav>  
   </header>  
 
 
(css/styles.css内)
eader {
 background-color: pink;
 text-align: right;
 padding: 10px;
 background-image:
 url(../my portfolio/header.png);
}
header ul {
 margin: 0;
 list-style-type: none;
 padding-left: 0;
}
## 試したこと
相対パスが怪しいと思いググってみましたが、どこに問題点があるのか分かりませんでした。
  • CSS

    17447 questions

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

  • Chrome

    1697 questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • Atom(言語)

    65 questions

    Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

1 ご指摘を受け、htmlコードを追加しました

mohun

mohun score 12

2019/03/08 19:03  投稿

初心者です。cssのbackground-image設定でつまずいてます。
## cssのbackground-image設定
ドットインストールでcssの学習をしています。
headerに背景画像を埋め込みたいのですが成功しません。
ファイルは「プログラミング」フォルダ内に「css」フォルダと「my portfolio」フォルダがあり、「css」フォルダ内に
「styles.css」が、「my portfolio」フォルダ内に「header.png」がある状態です。
## 発生している問題
backlground-imageが反映されません。
header内の他のプロパティ?は問題なく動いています。
##当該ソースコード(css/styles.css内のもので、リンクは機能しています)
header {
##当該ソースコード
(html、header部分)
<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta chrset="utf-8">
   <title>太郎のポートフォリオサイト</title>
   <link rel="icon" href="my portfolio/favicon.ico">
   <meta name="description" coment="太郎のポートフォリオサイトです。">
   <link rel="stylesheet" href="css/styles.css">
 </head>
(css/styles.css内)
eader {
 background-color: pink;
 text-align: right;
 padding: 10px;
 background-image:
 url(../my portfolio/header.png);
}
header ul {
 margin: 0;
 list-style-type: none;
 padding-left: 0;
}
## 試したこと
相対パスが怪しいと思いググってみましたが、どこに問題点があるのか分かりませんでした。
  • CSS

    17447 questions

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

  • Chrome

    1697 questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • Atom(言語)

    65 questions

    Atomはハードウェア記述言語で、集積回路を設計するためのコンピュータ言語です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る