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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

5009閲覧

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

akira_5316

総合スコア8

Chrome

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/08/18 12:32

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()プロパティで画像を挿入しているように見受けられます。
イメージ説明

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

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

lang

1index.html 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>PAS-POL -旅のモノづくりブランド- | TABIPPO </title> 6 <meta name="description" content="PAS-POLはTABIPPOのモノづくりブランドです。 7 自分と世界を繋げる新しい時代のパスポートのようなモノを作りたいと思い、PAS-POLという名前をつけました。"> 8 <link rel="stylesheet" href="css/style.css"> 9</head> 10 <body class="p-index" data-gr-c-s-loaded="true"> 11 <!-- Header --> 12 <header class="l-header"> 13 <h1 class="m-siteLogo"> 14 <a href="http://pas-pol.jp">PAS-POL -旅のモノづくりブランド- | TABIPPO</a> 15 </h1> 16 <nav class="m-navigation js-navigation"> 17 <ul itemscope itemtype="http://schema.org/SiteNavigationElement"> 18 <li><a href="http://pas-pol.j">TOP</a></li> 19 <li><a href="http://pas-pol.jp/product/">PRODUCT</a></li> 20 <li><a href="http://pas-pol.jp/about/">ABOUT</a></li> 21 <li><a href="http://pas-pol.jp/news/">NEWS</a></li> 22 <li><a href="http://pas-pol.jp/contact/">CONTACT</a></li> 23 </ul> 24 </nav> 25 </header>

lang

1style.css 2/* body */ 3body.p-index { 4 font-family: Helvetica, Helvetica, Arial, sans-serif; 5 background-color: #fff; 6 color: #13191b; 7 line-height: 1.7; 8 font-size: 13px; 9} 10 11body { 12 margin: 0; 13} 14 15* { 16 box-sizing: border-box; 17} 18 19/* header */ 20 21.l-header { 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 100%; 26 z-index: 1; 27} 28 29l-header::after { 30 clear: both; 31 content: ""; 32 display: block; 33} 34 35article, aside, details,figcaption, figure, footer, header, hgroup, main, nav, section, summary { 36 display: block; 37} 38 39h1, h2, h3, h4, h5, h6 { 40 letter-spacing: 0.1em; 41} 42 43h1 { 44 font-size: 2em; 45} 46 47 48.l-header .m-siteLogo { 49 float: left; 50 margin-top: 50px; 51 margin-left: 7%; 52} 53 54.m-siteLogo { 55 margin: 0; 56} 57 58.l-header .m-navigation { 59 float: right; 60 margin-top: 75px; 61 margin-right: 7%; 62} 63 64.m-siteLogo a { 65 display: block; 66 overflow: hidden; 67 text-indent: 100%; 68 white-space: nowrap; 69 background: no-repeat url( 70 ../img/siteLogo-pc@2x.png 71 ) ; 72 width: 266px; 73 height: 72px; 74 background-size: 266px 72px; 75} 76

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

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

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

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

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

guest

回答2

0

ベストアンサー

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

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

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

投稿2018/08/18 13:48

編集2018/08/18 13:49
liveasnotes

総合スコア1284

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

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

akira_5316

2018/08/20 16:48

回答ありがとうございます! ご指摘の通り、表示されていました。ありがとうございます。 Atom,Chromeで画面分割しながら、Chromeの方はデベロッパーツールでさらに画面が小さくなっている状態で確認していました。そのため、表示されているうっすらとした画像に気づけなかったです。今後は、ご教示いただいた通り、画像に色をつけながら操作していこうと思います。 ヒーローイメージについては、画像が大きすぎたのであえてHTMLから削除していました。すぐに画像を挿入して、スタイルで画像を適切な大きさにしようと思います。 ありがとうございました。
guest

0

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

投稿2018/08/18 13:15

TakeshiOnaga

総合スコア60

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

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

akira_5316

2018/08/20 16:49

表示されていたのですが、画像が透過されてしまっていて、確認できなかったようです。 ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問