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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/20 16:48