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

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

ただいまの
回答率

90.33%

  • HTML5

    4310questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2215questions

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

[HTML] 要素に一括でクラスを指定したい

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 1,409

neeg

score 54

前提・実現したいこと

HTMLで表のタイトルに、同じクラスを割り当てたいと思っています。
与えられているcssに、以下のようなクラスが用意されています。

.tableTitle {
    color: #ddd;
    background-image: -moz-linear-gradient(top, #334466, #223355);
    background-image: -ms-linear-gradient(top, #334466, #223355);
    background-image: -webkit-linear-gradient(top, #334466, #223355);
    background-image: linear-gradient(top, #334466, #223355);
}


HTML内の全てのテーブルヘッダに以下のように記述してももちろんいいのですが、
非常に冗長でばかばかしい気がしています。

  <table>
    <tr>
      <th class="tableTitle">.....
      <th class="tableTitle">.....
      <th class="tableTitle">.....
      <th class="tableTitle">.....
      <th class="tableTitle">.....


なので、別のcss内で以下のような指定ができればいいと思っています
(以下はあくまで例として提示している私の想像上のコードで、
実際にはこういう記述方法は通りませんが)

th{
   class: tableTitle ;
}


このように、cssを読み込んでいるhtml内の要素全体にクラスを
適用するような記述方法はないでしょうか。
ないわけはないような気がするのですが、どうも検索方法が悪いようで、
これというページにヒットせず、困っています。
以上よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

checkベストアンサー

+5

.tableTitle tr として table にクラスを付けるのが正攻法かなと思います。

CSSの変更が不可能な場合は、JavaScriptで操作するのも手です。


cssを読み込んでいるhtml内の要素全体にクラスを適用するような記述方法はないでしょうか。 

CSSでは出来ません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/31 17:07

    ないわけがないと思っていたのですが、ないのですね! 驚きました。
    なんでないんでしょう。にわかには信じられません。。。。

    cssは残念ながら変更することができません。thだけではなく、
    ブロック要素の背景などにも使用されているので、、、
    ただ、確かにJavaScriptで操作するという方法はあるな、と思いました。
    ちょっと見られたくないソースになってしまいますが。。。

    非常に参考になりました。ありがとうございました。

    キャンセル

  • 2017/03/31 17:37

    > にわかには信じられません。。。。
    CSSはスタイルを指定するためのものです。クラスを動的に割り付けるのはスタイルの指定ではなく構造の変更になるので、当然かと思います。そもそもCSSが変更できれば問題が無いですよね。
    .tableTitleWrap th, .tableTitle {/*指定*/}


    キャンセル

  • 2017/03/31 18:34

    ご回答ありがとうございます。
    自分の中でちょっとしっくり来ていない部分があるので、もしよろしければヒントをいただきたいのですが。。。

    今までcssに対してずっと持っていたわだかまりのようなものがありまして。。。
    学習し始めの頃は、たとえば表の中の、大項目のタイトルと小項目のタイトルがあるとしたら、以下のような記述ができるのが当然だと思っていました。

    .tableTitle { /* 背景と文字色のみ定義 */
    color: #ddd;
    background-image: -moz-linear-gradient(top, #334466, #223355);
    background-image: -ms-linear-gradient(top, #334466, #223355);
    background-image: -webkit-linear-gradient(top, #334466, #223355);
    background-image: linear-gradient(top, #334466, #223355);
    }

    /* 各項目のフォントサイズとパディングを定義 */
    .largeTitle {
    class: tableTitle ;
    font-size: 16pt;
    padding: 5px;
    }

    .midTitle {
    class: tableTitle ;
    font-size: 13pt;
    padding: 3px;
    }

    .smallTitle {
    class: tableTitle ;
    font-size: 10pt;
    padding: 2px;
    }

    ただ、どう調べてもこういう記述方法はなく、どうもcssには「定義の再利用」という概念がないらしい、と。これがどうにも納得できないというかしっくりきません。
    そういうニーズがない、ということだとしたら、こういうことをする必要がないほどシンプルな他の方法があるということだと考えているのですが、どうするのが一般的なんでしょうか。

    たとえば、以下のようなフォントサイズとパディングだけを定義した、別のクラスを作成し

    .largeTitle {
    font-size: 16pt;
    padding: 5px;
    }

    HTMLの方で、その都度以下のように、動的に合成するのでしょうか?

    <div class="tableTitle largeTitle">...
    <div class="tableTitle midTitle">...
    <div class="tableTitle smallTitle">...

    こういうことだと、htmlを書くたびに、どのクラスにどういう定義があって、どれとどれを合成しないとこういうスタイルにならなくて……という、中身を意識しながらの煩雑なコーディングになってしまうため、スタイルの組み合わせをまとめて塊にする、クラスの意味が半減してしまう気がするのですが、そういうものなのでしょうか。
    初学者なもので、なにかとんちんかんなことを言っているかもしれませんが、ご助言をいただければありがたく思います。

    キャンセル

  • 2017/03/31 18:49

    class は複数持つことができるので、個々に小さなクラス定義を用意し、実際に使うに当たっては複数のクラスを組み合わせた方が良い、のです。
    例えば入力フォームで、ある条件が満たされている場合に項目の背景色を変えることを考えます。もし入力フォームが5個あって、width や height も個々に指定しているとしたら、クラス定義が倍の10個になってしまいます。背景色を指定するためだけのクラスを用意しておけば、そのクラスの add/remove だけで済むのですから、クラスの定義数は一つ増えるだけです。
    ※実際には attr を直接弄ってしまうことでそこまでひどくはなりませんが

    キャンセル

  • 2017/03/31 18:58

    To: neegさん
    > どうもcssには「定義の再利用」という概念がないらしい
    スタイルの再利用のために作られたものだと私は思っています。なので何と比べられているかはわかりませんが、実際再利用はしています。CSSフレームワークと呼ばれるものが複数有るので、どういうロジックで組まれているかを見てみてはいかがでしょう。

    > その都度以下のように
    例えば、
    <div class="tableTitle">
    <div class="largeTitle">...</div>
    <div class="midTitle">...</div>
    <div class="smallTitle">...</div>
    </div>
    .tableTitle > div {}
    とか 構造で書くことは減らせますよね。無駄にクラスが増えるのであれば設計の問題かもしれません。

    > htmlを書くたびに、どのクラスにどういう定義があって、どれとどれを合成しないとこういうスタイルにならなくて
    それは書かれている「class: tableTitle ;」が使えたとしても同じことですよ。

    ただ、簡単にCSSを書くためのものとしてSASS / SCSS / LESS などが有るので、興味があれば検索してみてください。

    キャンセル

  • 2017/04/04 15:51

    すみません、私が言ったのはスタイルの再利用ではなく、定義の再利用についてでした。
    どうも私の言いたいことがうまく伝えられないのですが、その過程で非常に得るものがありました。ありがとうございました。

    キャンセル

  • 2017/04/04 16:17

    > tacsheavenさん
    > class は複数持つことができるので、個々に小さなクラス定義を用意し、実際に使うに当たっては複数のクラスを組み合わせた方が良い、のです。
    私は、そのくらいの粒度が適切か、というラインがあるように思っています。
    少なくとも、小さい方が良いということであれば、クラスなど定義せずに、一つ一つの要素に対して、style="....と指定していけば万能のはずですから、それはないように思います。
    で、ではどういう粒度が適切なのか、ということになるのですが、例えば色で分ける、大きさで分ける、、、と言うような直行する分類方法があるとして、実際に使用するときはそれを組み合わせる、、、というのは確かにわかります。
    ただ、実際に指定するときに、
    class="width500 fontsize12 color-111 backcolor-fff"
    という指定をすることが
    style="width:500; fontsize:12pt; color:#111; background-color:#fff;"
    とどれだけ違うのかという疑問があります。
    仮にそれぞれが10通りあるとして、10*10*10*...通りの組み合わせ全部使うのか、というと現実的にはそんなことはなくて、例えば入力画面ではこういう組み合わせ、確認画面ではこういう組み合わせ、、、というように、数種類に落ち着くように思うわけです。
    そういうことなら、デザイン的な特徴を表すような命名されるクラスをいくつも作って組み合わせるより、意味的な命名、例えば、.questionPageTextArea とかというような、意味を表すクラスを少数作った方がわかりやすい。
    ただ、じゃあ別のページの.answerPageTextAreaを作るときに、おそらくはほとんど内容が重複しているであろう.questionPageTextAreaの内容をべったり打つのはばかばかしいし、メンテナンス性が悪くなる。
    ので、
    .baseTextArea{
    .....
    }
    .questionPageTextArea{
    class baseTextArea;
    background-color: #eee;
    }
    .answerPageTextArea{
    class baseTextArea;
    background-color: #ffd;
    }
    ということができるはずだよね?
    という風に思っていた、という次第です。

    キャンセル

  • 2017/09/01 15:26

    かなり日がたってしまいましたが、、kei344さんがおっしゃっている
    意味が腑に落ちたのでアップデートします。

    先日、Web系の友人と話す機会があったので尋ねてみたところ

    - それはお前の言うとおり。
    - cssはその辺がマジでクソ。
    - というわけで、今時cssなんて直で書いているヤツはいない。
    - SCSSとかLESSとか使うのが常識。

    ということでした。

    kei344さんが
    > 簡単にCSSを書くためのものとしてSASS / SCSS / LESS などが有るので、

    とおっしゃっていて、当時その辺を調べたはずなのですが、その時は
    切り口が悪かったのか、自分のニーズに合っているという感じを
    受けませんでした。
    ですが、先日友人に内容を教えてもらったところ、そう!まさにそれ!
    ということになりました。
    改めてお礼申し上げます。ありがとうございました。

    キャンセル

+1

一応 CSS セレクタとしては「*」で「全ての要素」を表すことは表すのですが……まあこれを使うことはまずないですね。なぜなら CSS は Cascading の単語が示す通り、子孫に対して波及しますから、親で指定した属性が子孫に受け継がれます。親とその子孫とで別の属性を付けたい、というときでもない限り使うことがないです。

table {
  padding: 5px;
  margin: 5px;
}
table * {
  padding: 2px;
  margin: 2px;
}


とかくらいですかね。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/31 18:40

    うーん、申し訳ないのですが、ちょっとご回答の意味が理解できません。
    おっしゃっていることはわかるのですが、私の質問のどの部分に対して、これが回答になっているのか、というところが理解できません。
    これをどう使うと、私が困っていることが改善されるのでしょうか。

    キャンセル

  • 2017/03/31 18:51 編集

    > このように、cssを読み込んでいるhtml内の要素全体にクラスを適用するような記述方法はないでしょうか。
    この部分です。「要素全体」という CSS セレクタ定義がある、というだけです。
    body.onLoad のイベントハンドラで CSS セレクタ使って強引に全要素にクラス適用する手もなくはない、という程度です。

    キャンセル

  • 2017/04/04 16:19

    あ、なるほど。
    すみません、書き方が悪かったです。
    要素全体というのは、「tr要素全体」というような意味でした。失礼しました。

    キャンセル

+1

このようなセレクタで指定することもできます

tr:first-child > th {
    color: #ddd;
    background-image: -moz-linear-gradient(top, #334466, #223355);
    background-image: -ms-linear-gradient(top, #334466, #223355);
    background-image: -webkit-linear-gradient(top, #334466, #223355);
    background-image: linear-gradient(top, #334466, #223355);
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/04 16:23

    申し訳ないです。
    「与えられたcssがある」と書いたのは、それは「与えられたものだから変更はできない」という意味を込めておりました。
    プロジェクト全体で使用するものなので、このような変更をすることはできないのです。
    もちろん内容をコピーして別のcssを作っても良いのですが、それでは将来変更があったときに反映されず、共通で使っている意味がないので不可なのです。

    キャンセル

0

classだけで解決出来ない場合にはIDも使って下さい。
child属性やnotなどの疑似要素、oddなど色々組み合わせれば大体のことは出来ます。
が、cssは予め用意されたhtml構造に対してスタイルを定義するための物であって、
html構造の問題を解決するための物ではありません。htmlの構造の問題はhtml側で解決するべきです。
最近のCSSフレームワークなどはフルスクラッチしたくない方には便利かもしれませんが、
cssフレームワークを利用するためにhtml構造に制限を設けられる場合も多く、本末転倒かなと思う場合も多いです。
特に、未だにテーブルなどで複雑な構造をしているhtmlの殆どはhtml側に問題があります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/04 16:27

    うまく表現できていなかったかもしれませんが、私はこれはhtml構造の話をしている意図はありませんでした。
    cssで定義したクラスを、別のクラス定義の中で再利用できないのか?というのがそもそもの疑問です。
    例えばJavaなんかでは、クラスを定義して、それを別のクラスを構成する要素として再利用したり、一つのクラスを基底として別のクラスを作成するというような、定義を再利用して、メンテナンス性を高める仕組みがさまざま用意されているのですが、そういう仕組みはないのだろうか?という疑問を持っていました。

    キャンセル

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

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

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

  • HTML5

    4310questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2215questions

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