yto7142022/10/14 07:12

CSSの複数のコードが反映されないです。

3-6 背景色と背景画像を設定する のところで
背景サイズを指定しながら、背景画像の繰り返しと表示位置を制御しようと思っているのですが、複数のコードを入れるとうまく作動しません。

こちらCSSの基本的なところを見ても理解しきれずお聞きした次第です。
よろしくお願いいたします。

<当方の希望しているイメージ>
サイズを調整しながら、背景画像を1枚にする

<当方が入力しているCSSコード>
body{
background-image : url(antonino-visalli-RNiBLy7aHck-unsplash.jpg) ;
background-size : 200px 100px ;
.repeat{
background-repeat : repeat-y ;
}
.position{
background-repeat: no-repeat;
background-position: center center;
}
}

回答

  • shirako2022/10/29 13:20

    通りすがりです><
    解決済みであれば申し訳ないです。

    ```css
    body {
    background-image: url(antonino-visalli-RNiBLy7aHck-unsplash.jpg);
    background-size: 200px 100px;
    .repeat {
    background-repeat: repeat-y;
    }
    .position {
    background-repeat: no-repeat;
    background-position: center center;
    }
    }
    ```

    記載いただいているcssの
    .repeat
    .position
    セレクタに関して、
    bodyセレクタのブロック内({}の内側)に定義されているため、
    コードが反映されていないように見えます。

    ```css
    body {
    background-image: url(antonino-visalli-RNiBLy7aHck-unsplash.jpg);
    background-size: 200px 100px;
    }
    .repeat {
    background-repeat: repeat-y;
    }
    .position {
    background-repeat: no-repeat;
    background-position: center center;
    }
    ```
    上記のようにbodyの{}の外に出したあと、
    HTMLのbodyタグにclassをふってあげるとcssが反映されると思います。

    repeat-yを確認したい場合
    ```html

    背景画像を設定する

    ```
    no-repeatを確認したい場合
    ```html

    背景画像を設定する

    ```

    https://chot.design/html-css-beginner/fef3bfcc3dd6/
    > IDとクラスの指定方法
    クラスとセレクタに関しては上記に記載がありそうです。

    > 3-6 背景色と背景画像を設定する
    この章にはHTMLにclassをつける手順が記載なかったので
    反映されない事象が起きたかもしれません。

  • shirako2022/10/29 13:22

    >上記のようにbodyの{}の外に出したあと、
    >HTMLのbodyタグにclassをふってあげるとcssが反映されると思います。
    こんなです><
    repeat-yを確認したい場合

    no-repeatを確認したい場合

  • shirako2022/10/29 13:23

    htmlの例が消えてます、申し訳ないです。

  • roliloli72023/01/18 17:49

    お役立ち情報

  • roliloli72023/01/18 17:50

    お疲れさまでした。https://www.google.com/

  • croydon2023/01/23 21:50

    最近、自分のMacの調子が悪くて色々試したんだけどあんまり効果なくて買い替えの時期かなとか思ってつぶやいたら友達が、見てくれてCleanMyMac Xっていうアプリでパソコンの健康診断を一緒にしたんだが、Mac ストレージ その他 減らす https://cleanmymac.jp/blog/fix-macos-ventura-problems 作業をしてくれて、その後に使ってみたら新しい感じに戻ってお金無駄に済んで本当によかった!簡単にアプリ使えたしマジで助かるわ!

  • DarrellRasmussen2023/06/26 19:20

    CSSのコードがうまく反映されないというのは困りますね。背景色や背景画像の設定に関して、複数のコードを試したところうまくいかなかったとのことですね。基本的なCSSを理解するのにも苦労しているので、質問させていただきたいです。よろしくお願いします。

  • DarrellRasmussen2023/06/29 07:08

    詐欺って自分がしっかり注意していたら無縁の事だと思っていたんですが、私のお客様が私のサイトを利用してオンライン詐欺に合いました。とってもショックだったし、まさかでした。対策としてはセキュリティーも強化したんですが、それ以外ではSNSやウェブサイトで注意喚起をして、あとは日本列島詐欺警報というサイトのインフォグラフィックを利用して視覚で詐欺の啓発をしています。日本列島詐欺警報はサイト自体のかなりしっかり情報をだして啓発をしてくれているし、インフォグラフィックも簡単にサイトに貼れるので、お困りの方にはおススメです。( https://www.xn--y8j5g219lchh0q3by7a.com/scams-in-japan-infographic/ )

回答する

新規登録してログインすると質問にコメントがつけられます