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

質問編集履歴

2

修正

2019/08/02 06:00

投稿

avicii
avicii

スコア49

title CHANGED
File without changes
body CHANGED
@@ -69,6 +69,8 @@
69
69
  max-width: 1230px;
70
70
  *zoom: 1;
71
71
 
72
+ }
73
+
72
74
  div.contents.center, .sign_up, .life, .free, .info, .own, .avicii {
73
75
  h2 {
74
76
  @include boxBase(20px 0, 0);

1

修正

2019/08/02 06:00

投稿

avicii
avicii

スコア49

title CHANGED
File without changes
body CHANGED
@@ -52,4 +52,91 @@
52
52
 
53
53
  </div>
54
54
  </div>
55
+ ```
56
+
57
+ ```CSS
58
+ .mainpage {
59
+ background-color: #fff;
60
+ height: 2000px;
61
+ }
62
+
63
+ .center {
64
+ width: 100%;
65
+ margin-left: 90px;
66
+ margin-right: 80px;
67
+ margin-top: 0;
68
+ margin-bottom: 0;
69
+ max-width: 1230px;
70
+ *zoom: 1;
71
+
72
+ div.contents.center, .sign_up, .life, .free, .info, .own, .avicii {
73
+ h2 {
74
+ @include boxBase(20px 0, 0);
75
+ font-weight: normal;
76
+ strong {
77
+ font-weight: bold;
78
+ padding-right: 5px;
79
+ font-size: 1.2em;
80
+ }
81
+ }
82
+ }
83
+
84
+ .posts {
85
+ width: 300px;
86
+ height: 300px;
87
+ display: inline-block;
88
+ }
89
+
90
+ div.content_post, .edm_post, .ichiran{
91
+ @include boxBase(30px 0px, 15px);
92
+ position: relative;
93
+ height: 100%;
94
+ color: #fff;
95
+ border-radius: 3px;
96
+ box-shadow: 0 0 1px rgba($black,0.2);
97
+ display: inline-block;
98
+ width: 100%;
99
+ &:after {
100
+ content: '';
101
+ position: absolute;
102
+ top: 0;
103
+ bottom: 0;
104
+ left: 0;
105
+ right: 0;
106
+ @include filter-gradient(#000000, #a60000, vertical);
107
+ @include background-image(linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,0.85) 100%));
108
+ z-index: 1;
109
+ border-radius: 3px;
110
+ }
111
+ .more {
112
+ position: absolute;
113
+ z-index: 2;
114
+ height: 300px;
115
+ width: 300px;
116
+ top: 2px;
117
+ right: 2px;
118
+ &:hover ul.more_list {
119
+ display: block;
120
+ }
121
+ ul.more_list {
122
+ position: absolute;
123
+ text-align: left;
124
+ width: 300px;
125
+ height: 300px;
126
+ right: 0;
127
+ display: none;
128
+ border-radius: 3px;
129
+ li {
130
+ border-bottom: 1px solid #ddd;
131
+ &:last-child {
132
+ border-bottom: 0;
133
+ }
134
+ a {
135
+ display: block;
136
+ width: 150px;
137
+ height: 150px;
138
+ }
139
+ }
140
+ }
141
+ }
55
142
  ```