Skip to content

Commit 997ab2a

Browse files
nojimanojima
committed
[play-with-css] add
1 parent 1eeef01 commit 997ab2a

File tree

3 files changed

+210
-0
lines changed

3 files changed

+210
-0
lines changed

‎play-with-css/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Play with CSS</title>
6+
<link rel="stylesheet" href="main.css">
7+
</head>
8+
<body>
9+
<ul class="tableview">
10+
<li class="tableview_item">リスト</li>
11+
<li class="tableview_item">リスト</li>
12+
<li class="tableview_item">
13+
<a href="#" class="tableview_target">
14+
リスト
15+
</a>
16+
</li>
17+
</ul>
18+
19+
<hr>
20+
21+
<div class="grid">
22+
<div>
23+
<div class="grid_item grid_item_4 has_gutter"><div>1</div></div>
24+
<div class="grid_item grid_item_4 has_gutter"><div>2</div></div>
25+
<div class="grid_item grid_item_4 has_gutter"><div>3</div></div>
26+
</div>
27+
</div>
28+
<div class="grid">
29+
<div>
30+
<div class="grid_item grid_item_3 has_gutter">4</div>
31+
<div class="grid_item grid_item_3 has_gutter">5</div>
32+
<div class="grid_item grid_item_3 has_gutter">6</div>
33+
<div class="grid_item grid_item_3 has_gutter">7</div>
34+
</div>
35+
</div>
36+
</body>
37+
</html>

‎play-with-css/main.css

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@import url("reset.css");
2+
3+
body {
4+
padding: 2em;
5+
width: 720px;
6+
margin: 0 auto;
7+
}
8+
9+
.tableview {
10+
overflow: hidden;
11+
border-radius: 8px;
12+
border: 1px solid #999;
13+
14+
--tableview_padding: 1em;
15+
}
16+
.tableview_item {
17+
padding: var(--tableview_padding);
18+
background-color: #DDD;
19+
}
20+
.tableview_item + .tableview_item {
21+
border-top: 1px solid #EEE;
22+
}
23+
.tableview_target {
24+
display: block;
25+
margin: calc(-1 * var(--tableview_padding));
26+
padding: var(--tableview_padding);
27+
text-decoration: none;
28+
position: relative;
29+
padding-right: 2.4em;
30+
}
31+
.tableview_target:after {
32+
display: inline-block;
33+
content: "▶";
34+
position: absolute;
35+
top: 0;
36+
bottom: 0;
37+
right: 0.6em;
38+
margin: auto;
39+
height: 1em;
40+
color: #999;
41+
}
42+
43+
.grid {
44+
margin-left: -5px;
45+
margin-right: -5px;
46+
}
47+
.grid > div {
48+
background-color: #5A9;
49+
}
50+
.grid:after {
51+
content: "";
52+
display: block;
53+
clear: both;
54+
}
55+
.grid_item {
56+
float: left;
57+
box-sizing: border-box;
58+
}
59+
.grid_item > div {
60+
background-color: #489;
61+
}
62+
.grid_item_3 {
63+
width: 25%;
64+
}
65+
.grid_item_4 {
66+
width: 33.333%;
67+
}
68+
.has_gutter {
69+
padding-left: 5px;
70+
padding-right: 5px;
71+
}

‎play-with-css/reset.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
html5doctor.com Reset Stylesheet
3+
v1.6.1
4+
Last Updated: 2010-09-17
5+
Author: Richard Clark - http://richclarkdesign.com
6+
Twitter: @rich_clark
7+
*/
8+
9+
html, body, div, span, object, iframe,
10+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11+
abbr, address, cite, code,
12+
del, dfn, em, img, ins, kbd, q, samp,
13+
small, strong, sub, sup, var,
14+
b, i,
15+
dl, dt, dd, ol, ul, li,
16+
fieldset, form, label, legend,
17+
table, caption, tbody, tfoot, thead, tr, th, td,
18+
article, aside, canvas, details, figcaption, figure,
19+
footer, header, hgroup, menu, nav, section, summary,
20+
time, mark, audio, video {
21+
margin:0;
22+
padding:0;
23+
border:0;
24+
outline:0;
25+
font-size:100%;
26+
vertical-align:baseline;
27+
background:transparent;
28+
}
29+
30+
body {
31+
line-height:1;
32+
}
33+
34+
article,aside,details,figcaption,figure,
35+
footer,header,hgroup,menu,nav,section {
36+
display:block;
37+
}
38+
39+
nav ul {
40+
list-style:none;
41+
}
42+
43+
blockquote, q {
44+
quotes:none;
45+
}
46+
47+
blockquote:before, blockquote:after,
48+
q:before, q:after {
49+
content:'';
50+
content:none;
51+
}
52+
53+
a {
54+
margin:0;
55+
padding:0;
56+
font-size:100%;
57+
vertical-align:baseline;
58+
background:transparent;
59+
}
60+
61+
/* change colours to suit your needs */
62+
ins {
63+
background-color:#ff9;
64+
color:#000;
65+
text-decoration:none;
66+
}
67+
68+
/* change colours to suit your needs */
69+
mark {
70+
background-color:#ff9;
71+
color:#000;
72+
font-style:italic;
73+
font-weight:bold;
74+
}
75+
76+
del {
77+
text-decoration: line-through;
78+
}
79+
80+
abbr[title], dfn[title] {
81+
border-bottom:1px dotted;
82+
cursor:help;
83+
}
84+
85+
table {
86+
border-collapse:collapse;
87+
border-spacing:0;
88+
}
89+
90+
/* change border colour to suit your needs */
91+
hr {
92+
display:block;
93+
height:1px;
94+
border:0;
95+
border-top:1px solid #cccccc;
96+
margin:1em 0;
97+
padding:0;
98+
}
99+
100+
input, select {
101+
vertical-align:middle;
102+
}

0 commit comments

Comments
 (0)