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

回答編集履歴

1

実装、スクリーンショットを更新。

2015/04/25 01:14

投稿

katoy
katoy

スコア22328

answer CHANGED
@@ -1,4 +1,46 @@
1
1
  完全ではありませんが、こんな感じではどうでしょう?
2
2
  jsdo.it 上で作ってみました。
3
3
  [http://jsdo.it/katoy/wNhv](http://jsdo.it/katoy/wNhv)
4
+
4
- ![イメージ説明][WIDTH:600](88b72298378f6c63eb633ba19bef9e5b.png)
5
+ ![イメージ説明][WIDTH:600](1c7faeab313afedd5b20d4580aabbd3c.png)
6
+ ```lang-css
7
+ * {
8
+ margin: 0;
9
+ padding: 0;
10
+ border: 0;
11
+ }
12
+
13
+ body {
14
+ background: #ddf;
15
+ font: 24px sans-serif;
16
+ }
17
+
18
+ ul {
19
+ //display: table;
20
+ width: 80%;
21
+ margin: auto;
22
+ }
23
+
24
+ .data {
25
+ display: table-cell;
26
+ color: white;
27
+ background-color: green;
28
+ text-align: center;
29
+ border: medium solid;
30
+ }
31
+
32
+ li:first-child {
33
+ display: block;
34
+ color: white;
35
+ border-bottom: 0;
36
+ background-color: red;
37
+ }
38
+ li:last-child {
39
+ display: block;
40
+ color: white;
41
+ background-color: red;
42
+ border-top: 0;
43
+ }
44
+ ```
45
+
46
+ 現状では 2段目の部分のセルの幅の制御ができていない。。。