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

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

ただいまの
回答率

89.12%

html,cssでサイトロゴ画像を表示させたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,725

akira_5316

score 8

HTML,CSSにてPAS-POL(http://pas-pol.jp/)というサイトの模写を行なっています。

Header(l-headerクラス)直下にあるh1(m-siteLogoクラス)にサイトロゴ(画像ファイル名;siteLogo-pc@2x.png)を表示させたいのですが、表示させることができません。

エディタはAtom、ブラウザはChromeを使用しています。
PCはMacの最新のOSを使用しています。

元のサイトをデベロッパーツールにて確認しますと、HTMLにimgタグを挿入するのではなく、
h1(m-siteLogoクラス)にCSSのbackground: url()プロパティで画像を挿入しているように見受けられます。
イメージ説明

模写中のデベロッパーツールの画像です。
イメージ説明

ディレクトリ構造の画像です。
イメージ説明

index.html
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>PAS-POL -旅のモノづくりブランド- | TABIPPO </title>
  <meta name="description" content="PAS-POLはTABIPPOのモノづくりブランドです。
  自分と世界を繋げる新しい時代のパスポートのようなモノを作りたいと思い、PAS-POLという名前をつけました。">
  <link rel="stylesheet" href="css/style.css">
</head>
  <body class="p-index" data-gr-c-s-loaded="true">
    <!-- Header -->
    <header class="l-header">
      <h1 class="m-siteLogo">
        <a href="http://pas-pol.jp">PAS-POL -旅のモノづくりブランド- | TABIPPO</a>
      </h1>
      <nav class="m-navigation js-navigation">
        <ul itemscope itemtype="http://schema.org/SiteNavigationElement">
          <li><a href="http://pas-pol.j">TOP</a></li>
          <li><a href="http://pas-pol.jp/product/">PRODUCT</a></li>
          <li><a href="http://pas-pol.jp/about/">ABOUT</a></li>
          <li><a href="http://pas-pol.jp/news/">NEWS</a></li>
          <li><a href="http://pas-pol.jp/contact/">CONTACT</a></li>
        </ul>
      </nav>
    </header>
style.css
/* body */
body.p-index {
  font-family: Helvetica, Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: #13191b;
  line-height: 1.7;
  font-size: 13px;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

/* header */

.l-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

l-header::after {
  clear: both;
  content: "";
  display: block;
}

article, aside, details,figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.1em;
}

h1 {
  font-size: 2em;
}


.l-header .m-siteLogo {
  float: left;
  margin-top: 50px;
  margin-left: 7%;
}

.m-siteLogo {
  margin: 0;
}

.l-header .m-navigation {
  float: right;
  margin-top: 75px;
  margin-right: 7%;
}

.m-siteLogo a {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: no-repeat url(
    ../img/siteLogo-pc@2x.png
    ) ;
  width: 266px;
  height: 72px;
  background-size: 266px 72px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

ロゴ画像は表示されているようです

「旅に出よう」の文字にうっすらと何かが被っているのが見えます.ロゴ画像は,細く白い線で構成されており,かつ透過PNGであるため分かりづらいかもしれませんが,左側に見える楕円が,ちょうどロゴマークの一部と似ています.background: green url("../img/siteLogo-pc@2x.png") 266px 72px no-repeatなどと書いてみれば,簡単に確認できると思います
イメージ説明

表示されていないのは,むしろ,ヒーローイメージの方では?
製作途中の画面のスクリーンショットから察するに,ヘッダーがposition:absolute;になっているせいで,下部の要素が上に移動してきていると考えられます
イメージ説明
本来は,そこにヒーローイメージが挟まれることで,本文を下に押し下げられるようになっているのだと思うのですが,ヒーローイメージの画像がないために,現在のような状況になっているものと考えられます
開発者ツール上で,どの画像が表示されていないのか,警告(たぶん404notFound)が出ているはずなので,ファイル名やパスを確認してみてください

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/21 01:48

    回答ありがとうございます!
    ご指摘の通り、表示されていました。ありがとうございます。
    Atom,Chromeで画面分割しながら、Chromeの方はデベロッパーツールでさらに画面が小さくなっている状態で確認していました。そのため、表示されているうっすらとした画像に気づけなかったです。今後は、ご教示いただいた通り、画像に色をつけながら操作していこうと思います。

    ヒーローイメージについては、画像が大きすぎたのであえてHTMLから削除していました。すぐに画像を挿入して、スタイルで画像を適切な大きさにしようと思います。

    ありがとうございました。

    キャンセル

+1

<img src="../img/siteLogo-pc@2x.png">
で、画像は普通に表示しますでしょうか。
もしこれが表示されなければパスが誤っています!!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/21 01:49

    表示されていたのですが、画像が透過されてしまっていて、確認できなかったようです。

    ご回答ありがとうございました!

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる