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

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

ただいまの
回答率

88.91%

CSSのクラス内において、任意のタグに一括で装飾を行う方法はありますでしょうか?

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 171

soi

score 10

質問したいこと

HTMLのh1タグを装飾したい場合、例えば、

h1{
    color:blue;
}


以上のような書き方でh1タグ内の言葉を装飾できるかと思います。
では、クラス内の特定のタグのみ装飾したい場合はどのようにすればいいのでしょうか?

具体例

 <div class="log-form">
  <form>
    <input type="text" title="username" placeholder="username" />
    <input type="password" title="password" placeholder="password" />
    <button type="submit" class="btn">Login</button>
  </form>
</div>

例えば以上のようなコードで、log-formクラスのinputのみをCSSにより一括で装飾したいのですが、いまいち方法が分かりません。色々試しましたが、全く出来そうになかったです。
inputのみに適用する別のクラスを立てるべきなのでしょうか?
どのような方法が一般的か、ご教示ください。よろしくお願いします。

環境

macOS Catalina 10.15.5
Google Chromeバージョン: 83.0.4103.116
Apacheを使いローカル環境で確認しています

追記

.log-form input{}により選択できるとの指摘を多く受けたので、こちらの場合の不具合の詳細について追記いたします。

.log-form input{
  background-color: red;
}


このようにCSSで記入した場合、パスワードの欄だけが赤塗りになります。

イメージ説明

HTMLには問題がないと思うのですが。。

 <div class="log-form">
  <form>
      <ul>
        <li class="log-form-username">
            <label for="name">ユーザーID</label>
            <input type="text" title="username" placeholder="username" />
        </li><br>
        <li class="log-form-password">
            <label for="name">パスワード</label>
            <input type="password" title="password" placeholder="password" />
        </li><br>
        <li class="log-form-button">
             <button type="submit" class="btn">Login</button>
        </li><br>
  </form>

ゴールとしては、usernameとpasswordそれぞれの入力フォームを同じ形にした上で、CSSで触れるようにしたいです。
見落としてる箇所わかる方いましたら、ご助言お願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gogoweb_ikeda

    2020/07/07 14:16

    background-colorの色指定の個所を
    red !important;
    に変更してみてください。
    それで色が変わるようでしたら他のセレクタで上書きされています。

    キャンセル

  • soi

    2020/07/07 14:26

    ありがとうございます! 確かに色が変わりました、他のスタイルが適用されてしまっていたようです。
    他のCSSを確認してみます!

    キャンセル

  • Daregada

    2020/07/07 14:53

    HTMLの内容をできるだけ隠そうとするから、回答が求めているものではなくなるのです。
    今回の件で言えば、head要素内でCSSを複数読み込んでいる部分が質問文に含まれていれば、「別のCSSファイルの設定が影響しているのでは」という回答が早めに出てきたでしょう。

    キャンセル

回答 3

checkベストアンサー

+2

.log-form inputセレクタで当該のものを選択できます。

ただし、inputtypeによって全く挙動が変わってしまうという特徴がありますので、inputにまとめてスタイルを適用するのには要注意です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/07 14:07

    ご回答ありがとうございます。恐らくご指摘のtypeによる挙動の違いだと思います、そちらについて調べて見ます。

    キャンセル

  • 2020/07/07 14:09 編集

    ユーザー名の方に別なスタイルが適用されていたりはしませんでしょうか?(他に何かしらのスタイルを適用しているなら、それを提示していただければと思います)

    キャンセル

  • 2020/07/07 14:18

    仰る通り、他の既存のスタイルによってユーザー名のように別のスタイルが適用されていたようです! 一度他のスタイルを全て消してみたらユーザー名の方にも赤塗りが当たりました。
    他のCSSは量があるので、何が当たっているか探すのはこちらでやろうと思います。大変助かりました、ありがとうございます!

    キャンセル

+2

.log-form input {
  /* かけたいスタイル */
}


のように 親要素 と 子要素(指定タグ) をスペースでつなげば
親要素内の指定タグに一括してスタイルを当てられます^^

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/06 18:39

    セレクタを使えば、もっと細かい指定も可能です。
    css セレクタ
    でググってみて下さい^^

    キャンセル

  • 2020/07/07 14:08

    ご回答ありがとうございます。
    細かい指定が必要になりそうなので、調べて頭に入れてみます。

    キャンセル

+2

普通に子孫セレクターを使って、

.log-form input {
  background-color: wheat;
}


みたいにすればできるんだけど、やってみましたか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/07 14:08

    ご回答ありがとうございます。
    そちらはやってみましたが、追記の通り挙動がおかしく今回該当しないものなのかなと考えていました。他で見落としがあるようなので、調べております。

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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