質問: お世話になっております。 この度、少々htmlとcssを触ってみようと思い基礎の基礎からやっているのですが、 class内に書いている要素をbox化したときclass内に存在するh3 h4 pタグのpaddingを設定するにはどうすれば良いのかで詰まってしまいました。 以下自身の時間割を例に組んでみたものです。 ``` 履修科目 Subjects (履修科目) 平松 勇輝 システム分析 月曜日5限 問題と要件を獲得・分析し、それらを解決するプロセスとツールを理解する 情報社会論 火曜日2限 高度情報化社会での過去・現在・未来について考えます。 Webページ制作 火曜日2限 Webページの仕組みや作成方法について説明し、実習において講義で学んだことを実践する。 プロジェクト演習B 火曜日3限 「ものづくり」の計画立案と計画通りに進めていくための様々な工夫・手法を実際に授業を通して,実践します. 経済学入門 火曜日4限 需要と供給の均衡分析から始め、魚市場や農産物の市場での取引、政府の農・漁業政策について検討する。 応用プログラミングA 水曜日3限 Javaを用いてオブジェクト指向の考え方に基づき、グラフィックス、スレッド、GUIなどのプログラミングを学ぶ。 応用プログラミングB 水曜日4限 javaを用いてオブジェクト指向の考え方に基づき、グラフィックス、スレッド、GUIなどのプログラミングを学ぶ。 オフィスソフトウェア入門 木曜日1限 オフィスソフトウェアの企業内における主な利用方法を想定して,ワープロソフトを用いた業務文書等の作成,表計算ソフトを用いた数値処理やグラフによる可視化,プレゼンテーションを用いたポスター制作や企画内容の説明等を演習形式で行う 情報システムの企画と発想 木曜日2限 機械と人間との接点であるヒューマンインタフェース(HI)の設計論を中心に,人工物(機械)を扱う人間の心理や生理の理解を深める デバッグ入門 金曜日3限 Javaを使ったプログラミングにおけるデバッグ作業の基本的な考え方やスキルを学びます. オブジェクト指向設計 金曜日4限 いくつかの簡単なゲームを題材としてオブジェクト指向の考え方で実際にプログラムを書く練習を行うとともに、UMLによるモデリングについても学ぶ。 ``` ``` body { margin: 0px; padding: 0px; background: lightgray; color: black; } h1{ background-color: orange; margin-top: 0px; margin-bottom: 0px; padding-top: 10px; padding-left: 10px; } h2{ background-color: orange; margin-top: 0px; padding-top: 20px; padding-bottom: 10px; padding-right: 10px; text-align: right; } .jugyo { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo1 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo2 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo3 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo4 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo5 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo6 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo7 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo8 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo9 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; padding-bottom: 20px; } .jugyo10 { width: 500px; height: auto; background: #fff; border: 1px solid #fff; margin: 0 auto; padding-left: 10px; padding-top: 20px; border-radius: 10px; margin-top: 20px; box-shadow: 10px 10px 5px #888; padding-right: 10px; margin-bottom: 20px; } ``` もしかすると、もっとcssに関しては簡略化できるのかもしれませんがhtmlのdiv classをそれぞれ1つのボックスとして分けることができなかったのでcssは現状のコードになっております。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/3f6f77b68656a25c4d991a1117b90e73.png) 丸投げと思われるかもしれませんが、どうにもこうにもdiv classの中に含まれるh3 h4 pの個別の設定の仕方が考え付きません。 有識者の皆様、お手数おかけしますが、お教えください。 よろしくお願いします。
回答: htmlを見ると・・・の繰り返しになっているので、 現在jugyo1、jugyo2、jugyo3・・・と全て異なるクラス名になっているものを 全て同じjugyoに統一して、cssは.jugyoというひとつのクラスに対してのみ記述すれば、 すべてのdivに共通のcssが適用されますよ。 (ちなみに現在のhtmlだとdiv要素を他に使用していないので、クラス名はなくても大丈夫です) 例えばひとつだけ背景を赤にしたい、など個別のスタイルをあてたい場合に jugyoという共通のクラスに、異なるクラス名jugyo_redなどを追加で付けるのが良いと思います。 今回の質問の本題、入れ子になっている要素(子要素)にスタイルをあてたい時は、 要素の後ろに半角スペースを挟んで次の要素を記述していきます。 また、同じスタイルを別の要素にあてたい時は、コロンでいくつでも要素を併記できます。 ``` div h3 { padding: 0px;}/*divの中のh3にスタイルをあてる*/ li div p { font-size: 12px;}/*liの中のdivの中のpにスタイルをあてる*/ .jugyo h3, .jugyo h4 { padding: 10px;}/*.jugyoの中のh3と.jugyoの中のh4にスタイルをあてる*/ ``` 今回のhtmlではdivとh3、h4、p要素で組んでいますが、 内容的にdlを使った方がいいのかな、とも思いました。 見た目的にはどう組んでも同じにできますが、 要素の意味や文脈で適したマークアップを考えるとより良いと思います。 ``` オブジェクト指向設計 金曜日4限 いくつかの簡単なゲームを題材としてオブジェクト指向の考え方で実際にプログラムを書く練習を行うとともに、UMLによるモデリングについても学ぶ。 ```