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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

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

Sass

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

HTML

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

CSS

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

解決済

cssで指定した本の形をした指定において本に縁の追加をしたい

nao__funky
nao__funky

総合スコア51

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

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

Sass

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

HTML

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

CSS

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

1回答

0評価

0クリップ

296閲覧

投稿2022/04/19 22:41

編集2022/04/20 13:11

前提

下記サイトを参考に、本の形をした実装を行いました。
.top-novel__book::beforeにおいてbackground-imageを用いて、表紙に画像を用いています。参考サイトでは用いていません。使用の都合によりコードを少し変更しました。
https://webutubutu.com/webdesign/5556

実現したいこと

本の縁を表紙の方は可能にしたが、白紙の方にも追加したい。参考サイトの本の実装を見ると本には内容を書いてある白紙の白い紙の下にも色が少し濃い感じで縁が入っているが、私の指定ではうまく実装できなかった。

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

白紙のページに本の縁の指定ができない。

該当のソースコード

--html-- <div class="top-novel__book"> <div class="top-novel__book-inbox"> <ul class="top-novel__list"> <li class="top-novel__item"> <a href="#"> テストです</a> </li> </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(../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: ""; } .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; } --css--

試したこと

box-shadowで指定すると考えてやろうとしたが、うまくできなかった。

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

ここにより詳細な情報を記載してください。
テストです

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

recal

2022/04/19 22:55

htmlとcssはコードを分けて WordPressのコードはめんどくさがってそのまま貼らずに html化したほうがいいと思いますよ。
nao__funky

2022/04/19 23:04

ご指摘ありがとうございます。削除すべきでした。変更しましたので、よろしくお願いします。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

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

Sass

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

HTML

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

CSS

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