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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

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

CSS

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

解決済

background-imageが反映されない

nao__funky
nao__funky

総合スコア51

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

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

CSS

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

1回答

0評価

0クリップ

236閲覧

投稿2022/04/19 07:13

編集2022/04/19 18:10

前提

topページで本の形をしたcssを実装しました。本の表紙を画像に反映しています。

実現したいこと

本の表紙を画像にして、反映させたい。

発生している問題・エラーメッセージ

background-image: url();で指定しているが、ローカル環境で反映されない。

該当のソースコード

--HTML-- <div class="top-novel__book"> <div class="top-novel__book-inbox"> <ul class="top-novel__list"> <?php $paged = get_query_var('paged') ? get_query_var('paged') : 1; $args = array( 'post_type' => 'novel', // 'category_name' => 'all,event,news', 'order' => 'DESC', 'posts_per_page' => 4, 'paged' => $paged, ); $my_query = new WP_Query($args); if ($my_query->have_posts()) : ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <li class="top-novel__item"> <a href="<?php the_permalink(); ?>"> ~ <?php the_title(); ?> </a> </li> <?php endwhile; ?> <?php endif; ?> </ul> </div> <!-- /.top-novel__book-index --> </div> <!-- /.top-novel__book --> --HTML-- --css-- .top-novel__book { -webkit-box-sizing: border-box; -webkit-box-shadow: -2px 0 0 0 #fff, 2px 5px 1px 4px rgba(0, 0, 0, 0.2); -webkit-perspective: 1000px; -webkit-perspective-origin: 0 150%; -webkit-transform-style: preserve-3d; box-sizing: border-box; z-index: 1; position: relative; width: 280px; height: 400px; margin: 0 auto; margin-top: 50px; margin-right: 170px; padding-bottom: 10px; transform-style: preserve-3d; background-color: #fff; box-shadow: -2px 0 0 0 #fff, 2px 5px 1px 4px rgba(0, 0, 0, 0.2); perspective: 1000px; perspective-origin: 0 150%; } @media screen and (max-width: 1100px) { .top-novel__book { margin-right: auto; } } .top-novel__book:hover .top-novel__book-index { -webkit-box-shadow: 0 8px 0 0 #afada3, 0 0 8px 0 rgba(0, 0, 0, 0) inset, -2px 0 0 0 #dbdbdb; box-shadow: 0 8px 0 0 #afada3, 0 0 8px 0 rgba(0, 0, 0, 0) inset, -2px 0 0 0 #dbdbdb; } .top-novel__book::before, .top-novel__book::after { -webkit-transition: all 2.5s ease; -webkit-transform-origin: 0 0; display: block; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 10px); transform-origin: 0 0; transition: all 2.5s ease; } .top-novel__book::before { -webkit-transform: rotateY(0deg) translateZ(1px); -webkit-box-shadow: 0 2px 0 0 #b3b2b2; transform: rotateY(0deg) translateZ(1px); background-image: url(period/img/top/period-novel-top.png); background-position: -47px -49px; background-size: 380px; background-repeat: no-repeat; background-color: #dbdbdb; box-shadow: 0 2px 0 0 #b3b2b2; content: ""; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4); } .top-novel__book::after { -webkit-transform: rotateY(0deg) translateZ(0px); transform: rotateY(0deg) translateZ(0px); background-color: #fff; content: ""; } .top-novel__book.is-active::before, .top-novel__book:active::before { -webkit-transform: rotateY(-185deg) translateZ(1px); transform: rotateY(-185deg) translateZ(1px); } .top-novel__book.is-active::after { -webkit-transform: rotateY(-185deg) translateZ(0px); transform: rotateY(-185deg) translateZ(0px); background-color: #dbdbdb; } .top-novel__book-index { -webkit-box-sizing: border-box; -webkit-transition: all 1.8s ease; -webkit-transition-delay: 0.3s; -webkit-box-shadow: 0 8px 0 0 #afada3, 200px 0 1px 0 rgba(0, 0, 0, 0.4) inset, -2px 0 0 0 #dbdbdb; box-sizing: border-box; height: 100%; padding: 10px; background-color: #e2e1dc; box-shadow: 0 8px 0 0 #afada3, 200px 0 1px 0 rgba(0, 0, 0, 0.4) inset, -2px 0 0 0 #dbdbdb; transition: all 1.8s ease; transition-delay: 0.3s; } .top-novel__item { padding: 20px 15px; } .top-novel__item:first-child { padding-top: 60px; } --css--

試したこと

background-image: url()に絶対パスでは表示されたのだが、ルート相対パスや相対パスでは反映されなかった。また、background-image: image-url();でも反映されなかった。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy

2022/04/19 08:26

Wordpress を使っていませんか?
nao__funky

2022/04/19 08:26

WordPressを使用しています。
Lhankor_Mhy

2022/04/19 08:32

であれば、質問タグに追加することをおすすめします。おそらく、パスの問題だと思いますので、フォルダの設定などに原因があるような気がします。
nao__funky

2022/04/19 09:02

ご指摘ありがとうございます。パスの問題改めて見直したいと思います。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

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

CSS

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