お世話になっております。
この度、少々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の個別の設定の仕方が考え付きません。
有識者の皆様、お手数おかけしますが、お教えください。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー