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

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

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

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

CSS

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

解決済

user agent stylesheetが表示され、CSSに書いたdisplay blockが打ち消されます。

tina0928
tina0928

総合スコア1

HTML

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

CSS

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

1回答

0グッド

0クリップ

216閲覧

投稿2022/12/08 01:16

前提

現在Webサイトを作成中です。

display blockを実行させたいのですが、user agent stylesheetが表示されて打ち消されてしまいます。(下記のような感じで↓)
どうしたらいいでしょうか?

          user agent stylesheet
div {
display: block;
}

下の動画を参考にしながらBootstrapを使って、複数画像を表示させるカルーセルを作っています。
1分49秒あたりでdisplay blockが出てくるのですが、自分で実装してみると打ち消されてしまい画像が横に並んで表示されず困ってます。
https://youtu.be/nS_Ht0lT-uQ

実現したいこと

display blockを効かせる。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>slide</title> 8 <link rel="stylesheet" href="css/styles.css"> 9 10 <!-- Bootstrapを使って実装しています↓ --> 11 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 12 integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 13</head> 14 15 16<body> 17 <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> 18 <div class="carousel-inner"> 19 <div class="carousel-item active"> 20 <div class="card"> 21 <img src="" class="card-img-top" alt="1"> 22 <div class="card-body"> 23 <h5 class="card-title">Card title</h5> 24 <p class="card-text">Some quick example text to build on the card title and make up the bulk of 25 the card's content.</p> 26 <a href="#" class="btn btn-primary">Go somewhere</a> 27 </div> 28 </div> 29 </div> 30 <div class="carousel-item"> 31 <div class="card"> 32 <img src="" class="card-img-top" alt="2"> 33 <div class="card-body"> 34 <h5 class="card-title">Card title</h5> 35 <p class="card-text">Some quick example text to build on the card title and make up the bulk of 36 the card's content.</p> 37 <a href="#" class="btn btn-primary">Go somewhere</a> 38 </div> 39 </div> 40 </div> 41 <div class="carousel-item"> 42 <div class="card"> 43 <img src="" class="card-img-top" alt="3"> 44 <div class="card-body"> 45 <h5 class="card-title">Card title</h5> 46 <p class="card-text">Some quick example text to build on the card title and make up the bulk of 47 the card's content.</p> 48 <a href="#" class="btn btn-primary">Go somewhere</a> 49 </div> 50 </div> 51 </div> 52 <div class="carousel-item"> 53 <div class="card"> 54 <img src="" class="card-img-top" alt="4"> 55 <div class="card-body"> 56 <h5 class="card-title">Card title</h5> 57 <p class="card-text">Some quick example text to build on the card title and make up the bulk of 58 the card's content.</p> 59 <a href="#" class="btn btn-primary">Go somewhere</a> 60 </div> 61 </div> 62 </div> 63 <div class="carousel-item"> 64 <div class="card"> 65 <img src="" class="card-img-top" alt="5"> 66 <div class="card-body"> 67 <h5 class="card-title">Card title</h5> 68 <p class="card-text">Some quick example text to build on the card title and make up the bulk of 69 the card's content.</p> 70 <a href="#" class="btn btn-primary">Go somewhere</a> 71 </div> 72 </div> 73 </div> 74 </div> 75 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 76 data-bs-slide="prev"> 77 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 78 <span class="visually-hidden">Previous</span> 79 </button> 80 <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" 81 data-bs-slide="next"> 82 <span class="carousel-control-next-icon" aria-hidden="true"></span> 83 <span class="visually-hidden">Next</span> 84 </button> 85 </div> 86 87</body> 88 89 90<script src="js/main.js"></script> 91<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 92 integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 93 crossorigin="anonymous"></script> 94 95</html>

該当のソースコード

CSS

1@media screen and (min-width:576px) { 2 .carousel-inner { 3 display: flex; 4 } 5 6 .carousel-item { 7 display: block; 8 margin-right: 0; 9 flex: 0 0 calc(100%/3); 10 } 11}

試したこと

リセットCSSを使用。HTML5とChrome推奨のCSSを使いましたがダメでした。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

maisumakun

2022/12/08 01:18

> display blockを実行させたいのですが、user agent stylesheetが表示されて打ち消されてしまいます。 それは、単にuser agent stylesheetのほうが打ち消されているだけではありませんか?
tina0928

2022/12/08 01:30

なるほど デベロッパーツールを見ると 自分がCSSに書いたdisplay blockに打ち消し線がついているのですが、それはuser agent stylesheetによって打ち消された訳ではなく、他に原因があるということですか?
maisumakun

2022/12/08 01:38

> display blockを効かせる。 それはもとからのような気がするのですが、現在は何が適用されているのか確認しましたか?
tina0928

2022/12/08 02:02

user agent stylesheetでdisplay blockはdivタグに適用されています。 私は.carousel-itemというクラスにdisplay blockを効かせたいのですが、それが打ち消されてしまうのは、div自体にdisplay blockが適用している事とは無関係なのでしょうか?
miyabi_takatsuk

2022/12/08 02:10

div要素はもともと(user agent)display: blockが適用されている要素なので、 わざわざCSSで指定しても意味がありません。 (デフォルトでは、display: noneを適用しておき、クラス付与によってdisplay: blockを効かせたいのならば、意味がある) そのようなこともあり、CSSの記述の方は適用されないのかと。
int32_t

2022/12/08 02:12

.carousel-item の display が打ち消されているなら、user agent stylesheet の display も打ち消されているはずです。質問文の .carousel-item の指定よりも詳細度の高いルールが他にあるのでしょう。開発ツールで調べられるはずです。
tina0928

2022/12/08 02:20

なるほどやっと理解できました! 御三方、ありがとうございました。 int32_tさんのおっしゃる通り、もっと詳細度の高いルールを探してみます。
miyabi_takatsuk

2022/12/08 04:07

解決した時は、どうか自己解決の投稿をお願いします。

回答1

0

自己解決

display: block!important; としたら解決しました。

どうやらBootstrapのSCSSが打ち消していたようでした。
回答して頂いた皆さん、ありがとうございます。

投稿2022/12/08 05:25

tina0928

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML

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

CSS

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