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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1945閲覧

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

pinsong

総合スコア26

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/11 15:00

編集2017/05/12 00:11

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

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

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

html

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

css

1body { 2 margin: 0px; 3 padding: 0px; 4 background: lightgray; 5 color: black; 6} 7h1{ 8 background-color: orange; 9 margin-top: 0px; 10 margin-bottom: 0px; 11 padding-top: 10px; 12 padding-left: 10px; 13} 14h2{ 15 background-color: orange; 16 margin-top: 0px; 17 padding-top: 20px; 18 padding-bottom: 10px; 19 padding-right: 10px; 20 text-align: right; 21} 22.jugyo { 23 width: 500px; 24 height: auto; 25 background: #fff; 26 border: 1px solid #fff; 27 margin: 0 auto; 28 padding-left: 10px; 29 padding-top: 20px; 30 border-radius: 10px; 31 margin-top: 20px; 32 box-shadow: 10px 10px 5px #888; 33 padding-right: 10px; 34 padding-bottom: 20px; 35} 36.jugyo1 { 37 width: 500px; 38 height: auto; 39 background: #fff; 40 border: 1px solid #fff; 41 margin: 0 auto; 42 padding-left: 10px; 43 padding-top: 20px; 44 border-radius: 10px; 45 margin-top: 20px; 46 box-shadow: 10px 10px 5px #888; 47 padding-right: 10px; 48 padding-bottom: 20px; 49} 50.jugyo2 { 51 width: 500px; 52 height: auto; 53 background: #fff; 54 border: 1px solid #fff; 55 margin: 0 auto; 56 padding-left: 10px; 57 padding-top: 20px; 58 border-radius: 10px; 59 margin-top: 20px; 60 box-shadow: 10px 10px 5px #888; 61 padding-right: 10px; 62 padding-bottom: 20px; 63} 64.jugyo3 { 65 width: 500px; 66 height: auto; 67 background: #fff; 68 border: 1px solid #fff; 69 margin: 0 auto; 70 padding-left: 10px; 71 padding-top: 20px; 72 border-radius: 10px; 73 margin-top: 20px; 74 box-shadow: 10px 10px 5px #888; 75 padding-right: 10px; 76 padding-bottom: 20px; 77} 78.jugyo4 { 79 width: 500px; 80 height: auto; 81 background: #fff; 82 border: 1px solid #fff; 83 margin: 0 auto; 84 padding-left: 10px; 85 padding-top: 20px; 86 border-radius: 10px; 87 margin-top: 20px; 88 box-shadow: 10px 10px 5px #888; 89 padding-right: 10px; 90 padding-bottom: 20px; 91} 92.jugyo5 { 93 width: 500px; 94 height: auto; 95 background: #fff; 96 border: 1px solid #fff; 97 margin: 0 auto; 98 padding-left: 10px; 99 padding-top: 20px; 100 border-radius: 10px; 101 margin-top: 20px; 102 box-shadow: 10px 10px 5px #888; 103 padding-right: 10px; 104 padding-bottom: 20px; 105} 106.jugyo6 { 107 width: 500px; 108 height: auto; 109 background: #fff; 110 border: 1px solid #fff; 111 margin: 0 auto; 112 padding-left: 10px; 113 padding-top: 20px; 114 border-radius: 10px; 115 margin-top: 20px; 116 box-shadow: 10px 10px 5px #888; 117 padding-right: 10px; 118 padding-bottom: 20px; 119} 120.jugyo7 { 121 width: 500px; 122 height: auto; 123 background: #fff; 124 border: 1px solid #fff; 125 margin: 0 auto; 126 padding-left: 10px; 127 padding-top: 20px; 128 border-radius: 10px; 129 margin-top: 20px; 130 box-shadow: 10px 10px 5px #888; 131 padding-right: 10px; 132 padding-bottom: 20px; 133} 134.jugyo8 { 135 width: 500px; 136 height: auto; 137 background: #fff; 138 border: 1px solid #fff; 139 margin: 0 auto; 140 padding-left: 10px; 141 padding-top: 20px; 142 border-radius: 10px; 143 margin-top: 20px; 144 box-shadow: 10px 10px 5px #888; 145 padding-right: 10px; 146 padding-bottom: 20px; 147} 148.jugyo9 { 149 width: 500px; 150 height: auto; 151 background: #fff; 152 border: 1px solid #fff; 153 margin: 0 auto; 154 padding-left: 10px; 155 padding-top: 20px; 156 border-radius: 10px; 157 margin-top: 20px; 158 box-shadow: 10px 10px 5px #888; 159 padding-right: 10px; 160 padding-bottom: 20px; 161} 162.jugyo10 { 163 width: 500px; 164 height: auto; 165 background: #fff; 166 border: 1px solid #fff; 167 margin: 0 auto; 168 padding-left: 10px; 169 padding-top: 20px; 170 border-radius: 10px; 171 margin-top: 20px; 172 box-shadow: 10px 10px 5px #888; 173 padding-right: 10px; 174 margin-bottom: 20px; 175}

もしかすると、もっとcssに関しては簡略化できるのかもしれませんがhtmlのdiv classをそれぞれ1つのボックスとして分けることができなかったのでcssは現状のコードになっております。

イメージ説明

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/05/11 15:06

「box化」とは?
pinsong

2017/05/12 00:10

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

回答2

0

ベストアンサー

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/12 01:40

hatoQ

総合スコア45

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pinsong

2017/05/15 06:11

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

0

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

HTML

1<div id="box"> 2 <h1></h1> 3 <h2></h2> 4 <ul> 5 <li> 6 <div> 7 <h3></h3> 8 <h4></h4> 9 </div> 10 </li> 11 <li>個数分続く</li> 12 </ul> 13</div>

CSS

1#box {} 2#box h1 {} 3#box h2 {} 4#box ul {list-style-type:none;} 5#box ul li {padding-bottom:/*各角丸との間分*/;} 6#box ul li div {/*ここにjugyoシリーズのCSS*/} 7#box ul li div h3 {padding:0px;} 8#box ul li div h4 {padding:0px;} 9#box ul li div p {}

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

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

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

こうすれば良いですよ。

CSS

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

投稿2017/05/11 16:00

編集2017/05/12 00:56
LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pinsong

2017/05/15 06:11

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問