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

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

ただいまの
回答率

88.92%

html div class内のh3 h4 pタグのpadding設定について

解決済

回答 2

投稿 編集

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

pinsong

score 26

お世話になっております。

この度、少々htmlとcssを触ってみようと思い基礎の基礎からやっているのですが、
class内に書いている要素をbox化したときclass内に存在するh3 h4 pタグのpaddingを設定するにはどうすれば良いのかで詰まってしまいました。

以下自身の時間割を例に組んでみたものです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift_JIS">
<title>履修科目</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Subjects (履修科目)</h1>
    <h2>平松 勇輝</h2>
  <div class="jugyo">
      <h3>システム分析</h3>
      <h4>月曜日5限</h4>
      <p>問題と要件を獲得・分析し、それらを解決するプロセスとツールを理解する</p>
  </div>
    <div class="jugyo1">
      <h3>情報社会論</h3>
      <h4>火曜日2限</h4>
      <p>高度情報化社会での過去・現在・未来について考えます。</p>
  </div>
    <div class="jugyo2">
      <h3>Webページ制作</h3>
      <h4>火曜日2限</h4>
      <p>Webページの仕組みや作成方法について説明し、実習において講義で学んだことを実践する。</p>
    </div>
    <div class="jugyo3">
        <h3>プロジェクト演習B</h3>
        <h4>火曜日3限</h4>
        <p>「ものづくり」の計画立案と計画通りに進めていくための様々な工夫・手法を実際に授業を通して,実践します.</p>
    </div>
    <div class="jugyo4">
        <h3>経済学入門</h3>
        <h4>火曜日4限</h4>
        <p>需要と供給の均衡分析から始め、魚市場や農産物の市場での取引、政府の農・漁業政策について検討する。</p>
    </div>
    <div class="jugyo5">
      <h3>応用プログラミングA</h3>
      <h4>水曜日3限</h4>
      <p>Javaを用いてオブジェクト指向の考え方に基づき、グラフィックス、スレッド、GUIなどのプログラミングを学ぶ。</p>
    </div>
    <div class="jugyo6">
        <h3>応用プログラミングB</h3>
        <h4>水曜日4限</h4>
        <p>javaを用いてオブジェクト指向の考え方に基づき、グラフィックス、スレッド、GUIなどのプログラミングを学ぶ。</p>
    </div>
    <div class="jugyo7">
      <h3>オフィスソフトウェア入門</h3>
      <h4>木曜日1限</h4>
      <p>オフィスソフトウェアの企業内における主な利用方法を想定して,ワープロソフトを用いた業務文書等の作成,表計算ソフトを用いた数値処理やグラフによる可視化,プレゼンテーションを用いたポスター制作や企画内容の説明等を演習形式で行う</p>
    </div>
    <div class="jugyo8">
        <h3>情報システムの企画と発想</h3>
        <h4>木曜日2限</h4>
        <p>機械と人間との接点であるヒューマンインタフェース(HI)の設計論を中心に,人工物(機械)を扱う人間の心理や生理の理解を深める</p>
    </div>
    <div class="jugyo9">
      <h3>デバッグ入門</h3>
      <h4>金曜日3限</h4>
      <p>Javaを使ったプログラミングにおけるデバッグ作業の基本的な考え方やスキルを学びます.</p>
    </div>
    <div class="jugyo10">
        <h3>オブジェクト指向設計</h3>
        <h4>金曜日4限</h4>
        <p>いくつかの簡単なゲームを題材としてオブジェクト指向の考え方で実際にプログラムを書く練習を行うとともに、UMLによるモデリングについても学ぶ。</p>
    </div>
</body>
</html>
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は現状のコードになっております。

イメージ説明

丸投げと思われるかもしれませんが、どうにもこうにもdiv classの中に含まれるh3 h4 pの個別の設定の仕方が考え付きません。

有識者の皆様、お手数おかけしますが、お教えください。
よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/05/12 00:06

    「box化」とは?

    キャンセル

  • pinsong

    2017/05/12 09:10

    言葉で言い表しにくかったので図に追記しました。

    キャンセル

回答 2

checkベストアンサー

+3

htmlを見ると<div class="jugyo">・・・</div>の繰り返しになっているので、
現在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を使った方がいいのかな、とも思いました。
見た目的にはどう組んでも同じにできますが、
要素の意味や文脈で適したマークアップを考えるとより良いと思います。

<dl>
   <dt>オブジェクト指向設計</dt>
   <dd class="date">金曜日4限</dd>
   <dd class="cont">いくつかの簡単なゲームを題材としてオブジェクト指向の考え方で実際にプログラムを書く練習を行うとともに、UMLによるモデリングについても学ぶ。</dd>
</dl>
<dl>
   <!--繰り返し-->
</dl>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/15 15:11

    この度は、回答ありがとうございました。
    無事、実現できました!

    キャンセル

+3

jugyo が付いているのは、全部同じCSSですよね?
クラスなんぞ、全くつけないでもいけますよ。

<div id="box">
  <h1></h1>
  <h2></h2>
  <ul>
    <li>
      <div>
        <h3></h3>
        <h4></h4>
      </div>
    </li>
    <li>個数分続く</li>
  </ul>
</div>
#box {}
#box h1 {}
#box h2 {}
#box ul {list-style-type:none;}
#box ul li {padding-bottom:/*各角丸との間分*/;}
#box ul li div {/*ここにjugyoシリーズのCSS*/}
#box ul li div h3 {padding:0px;}
#box ul li div h4 {padding:0px;}
#box ul li div p {}


これだけ書けば、<li>~</li>がワンセットでいくらでも追加できます。

追記:お恥ずかしい、誤字の修正。

と、ん?個別に修正するんですか?
ってことは、h3 h4 ともに、10個並べば、10種類?
デザイン的にやらん方が良いということは置いておいて、

こうすれば良いですよ。

#box ul li:nth-child(1) div h3 {/*1つ目のh3*/}
#box ul li:nth-child(1) div h4 {/*1つ目のh4*/}
/*以下()内の数字を個数分追加*/

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/15 15:11

    この度はありがとうございました。
    無事、実現できました!

    キャンセル

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

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

関連した質問

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