teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

2019/03/16 14:01

投稿

rI1F6dG44Eqfinb
rI1F6dG44Eqfinb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,159 @@
1
1
  google chrome、atomを使って独学で参考本を使って勉強していますが、わからないところが発生しました
2
2
 
3
- .pageTitle {
3
+ HTML
4
- font-size: 26px;
5
- background-color: ♯F2F2E5;
6
- padding: 5px 15px;
7
- margin-top: 0;
8
-
9
4
 
5
+ <!DOCTYPE html>
6
+ <html lang="ja">
7
+ <head>
8
+ <meta chareset="utf-8">
9
+ <title>ページのタイトル</title>
10
+ <link rel="stylesheet" href="../common/css/style.css">
11
+ </head>
12
+ <body>
13
+ <div id="page">
14
+ <header id="pageHead">
15
+ <h1 id="siteTitle">komorikomashu</h1>
16
+ <p id="catchcopy">1人じゃできないことも、力を合わせればできる。やってみたいことをカタチにする、3人の楽しいものづくり。</p>
17
+ </header>
18
+ <div id="pagebody">
19
+ <div id="pagebodymain">
20
+ <artuicle class="artuicleDetail">
21
+ <header class="artuicleDetailhead">
22
+  <h1 class="pageTitle">Cafe Debut</h1>
23
+ <img src="images/img_01_01.jpg" alt="" whdth="720" heigth="390">
24
+ <p>baser CMS カフェサイト用テーマ<br>
25
+ baser CMS テーマコンサート2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p>
26
+ </header>
10
27
 
28
+
29
+ CSS
30
+
31
+ 問題のところは一番下の/*見出し*/の
32
+
33
+ .pageTitle{
34
+ font-size: 26px;
35
+ background-color: #F2F2E5;
36
+ padding: 5px 15px;
37
+ margin-top: 0;
38
+ }
39
+
40
+ のmargin-top: 0;です
41
+
42
+
43
+ body { color: #333333; }
44
+ p {
45
+ font-size: 14px;
46
+ line-height: 1.429;
47
+ }
48
+ /*ページ*/
49
+ #page{
50
+ width: 980px;
51
+ margin: 0 auto;
52
+ }
53
+ /*ページボディ*/
54
+ #pagebody::after{
55
+ content: "";
56
+ clear: both;
57
+ display: block;
58
+ }
59
+ #pagebodymain{
60
+ width: 720px;
61
+ float: left;
62
+ }
63
+ #pagebodysub{
64
+ width: 220px;
65
+ float: right;
66
+ }
67
+ /*ページヘッダー*/
68
+ #siteTitle{
69
+ font-size: 30px;
70
+ line-height: 1.2;
71
+ }
72
+ #catchcopy{
73
+ font-size: 12px;
74
+ line-height: 1.5;
75
+ }
76
+ #copyright small{
77
+ font-size: 12px;
78
+ line-height: 1.5;
79
+ }
80
+ #pageFoot{
81
+ font-size: solid 1px #cccccc;
82
+ margin-top: 15px;
83
+ }
84
+ /*区切り線・余白*/
85
+ .artuicleDetailhead{
86
+ border-bottom: solid 1px #CCCCCC;
87
+ margin-bottom: 30px;
88
+ padding-bottom: 15px;
89
+ }
90
+ .artuicleDetailfoot{
91
+ border-top: solid 1px #CCCCCC;
92
+ margin-top: 30px;
93
+ padding-top: 15px;
94
+ }
95
+ .artuicleDetailbody section{
96
+ margin: 30px 0;
97
+ }
98
+ /*撮影情報*/
99
+ .creditUnit{
100
+ padding: 10px;
101
+ border: solid 1px #CCCCCC;
102
+ }
103
+ .creditUnit p{
104
+ font-size: 12px;
105
+ }
106
+ /*リスト*/
107
+ ul li{
108
+ font-size: 14px;
109
+ list-style-type: square;
110
+ }
111
+ /*表*/
112
+ table{
113
+ font-size: 14px;
114
+ border: solid 1px #CCCCCC;
115
+ border-collapse: collapse;
116
+ width: 100%;
117
+ }
118
+ table th,
119
+ table td{
120
+ border: solid 1px #cccccc;
121
+ padding: 5px 10px;
122
+ }
123
+ table th{
124
+ background-color: #EEEEEE;
125
+ text-align: left;
126
+ }
127
+ table caption{
128
+ text-align: left;
129
+ font-size: bold;
130
+ }
131
+ /*画像キャプション*/
132
+ figcaption{
133
+ font-size: 12px;
134
+ }
135
+ /*見出し*/
136
+ .pageTitle{
137
+ font-size: 26px;
138
+ background-color: #F2F2E5;
139
+ padding: 5px 15px;
140
+ margin-top: 0;
141
+ } 
142
+ .heading-type1{
143
+ font-size: 18px;
144
+ color: #349FA6;
145
+ border-bottom: solid 1px #349FA6;
146
+ padding: 5px;
147
+ }
148
+ .heading-type2{
149
+ font-size: 16px;
150
+ border-left: solid 5px #E3E4D9;
151
+ padding-left: 10px;
152
+ }
153
+ .heading-type3{
154
+ font-size: 14px;
155
+ }
156
+
11
157
  と打ったのですが進めていくうちに、ブラウザ表示のマージンが設定されたため、空白ができたので後からmargin-top:0;を打って上書きしようとしたのですが、反映されません
12
158
  ほかのものでも後から付け足したものは反映されず、要素を全て消してまた1から打てば反映されます
13
159
 

1

2019/03/16 14:01

投稿

rI1F6dG44Eqfinb
rI1F6dG44Eqfinb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,25 +1,20 @@
1
- ### 前提・実現
1
+ google chrome、atomを使って独学で参考本を使って勉強ますが、わからないころが発生しました
2
2
 
3
+ .pageTitle {
4
+ font-size: 26px;
5
+ background-color: ♯F2F2E5;
3
- ここに質問の内容を詳しく書いてください。
6
+ padding: 5px 15px;
4
- (例)PHP(CakePHP)で●●なシステムを作っています。
7
+ margin-top: 0;
5
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
8
+
6
9
 
7
- ### 発生している問題・エラーメッセージ
8
10
 
9
- ```
11
+ と打ったのですが進めていくうちに、ブラウザ表示のマージンが設定されたため、空白ができたので後からmargin-top:0;を打って上書きしようとしたのですが、反映されません
10
- エラーメッセージ
12
+ ほかのものでも後から付け足したものは反映されず、要素を全て消してまた1から打てば反映されます
11
- ```
12
13
 
13
- ### 該当ソースコード
14
+ 参考本ではしっかり反映されているですが…
14
15
 
15
- ```ここに言語名を入力
16
+ 私のパソコンが変なのでしょうか?
16
- ソースコード
17
- ```
18
17
 
19
- ### 試したこと
18
+ これだけじゃ判断かねなかっら追記しますので指示をください
20
19
 
21
- ここに問題に対して試したことを記載してください。
22
-
23
- ### 補足情報(FW/ツールのバージョンなど)
24
-
25
- ここにり詳細な情報を記載ださ
20
+ しくお願します