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

質問編集履歴

2

さらに広い部分のコードをコピペしました。

2019/09/12 08:52

投稿

shunsaku87
shunsaku87

スコア39

title CHANGED
File without changes
body CHANGED
@@ -28,8 +28,56 @@
28
28
  color: white;
29
29
  }
30
30
 
31
+ さらに広い部分のコードをコピペします。
32
+ html↓
33
+ <div class="lesson-wrapper">
34
+ <div class="container">
35
+ <div class="heading">
36
+ <h2>Learn Where to Get Started!</h2>
37
+ </div>
38
+ <div class="lessons">
39
+ <div class="lesson">
40
+ <div class="lesson-icon">
41
+ <img src="https://prog-8.com/images/html/advanced/html.png">
42
+ <p>HTML & CSS</p>
43
+ </div>
31
44
 
45
+ css↓
46
+ .lesson-wrapper {
47
+ height: 500px;
48
+ padding-bottom: 80px;
49
+ background-color: #f7f7f7;
50
+ text-align: center;
51
+ }
32
52
 
53
+ .heading {
54
+ padding-top: 60px;
55
+ padding-bottom: 30px;
56
+ color: #5f5d60;
57
+ }
58
+
59
+ .heading h2 {
60
+ font-weight: normal;
61
+ }
62
+
63
+ .lesson {
64
+ float: left;
65
+ width: 25%;
66
+ }
67
+
68
+ .lesson-icon {
69
+ position: relative;
70
+ }
71
+
72
+ .lesson-icon p {
73
+ position: absolute;
74
+ top: 90px;
75
+ width: 100%;
76
+ color: white;
77
+ }
78
+ さらに広い部分のコードをコピペしました。ひょっとして、lesson-wrapperのtext-align:center;が関係ありますか?しかし、width100%というコードを入力すると同時にプレビューでpタグのテキスト(HTML & CSS)がシュッと中央に寄りますので。。。よくわからないです。
79
+
80
+
33
81
  (例)PHP(CakePHP)で●●なシステムを作っています。
34
82
  ■■な機能を実装中に以下のエラーメッセージが発生しました。
35
83
 

1

htmlとcssの該当部分をコピペしました。すみません初心者で質問にもなれていませんのでうまく伝わるかわからないです。

2019/09/12 08:52

投稿

shunsaku87
shunsaku87

スコア39

title CHANGED
File without changes
body CHANGED
@@ -9,9 +9,27 @@
9
9
  leftで左右の位置を指定するなら理解できるのですが、width100%でちょうど真ん中になる原理が理解できません。
10
10
  なぜそうなるのか、教えてください。
11
11
 
12
+ html↓
13
+ <div class="lesson-icon">
14
+ <img src="https://prog-8.com/images/html/advanced/html.png">
15
+ <p>HTML & CSS</p>
16
+ </div>
12
17
 
13
18
 
19
+ css↓
20
+ .lesson-icon {
21
+ position: relative;
22
+ }
14
23
 
24
+ .lesson-icon p {
25
+ position: absolute;
26
+ top: 90px;
27
+ width: 100%;
28
+ color: white;
29
+ }
30
+
31
+
32
+
15
33
  (例)PHP(CakePHP)で●●なシステムを作っています。
16
34
  ■■な機能を実装中に以下のエラーメッセージが発生しました。
17
35