リストやｈ１やテーブルなどを簡単に（CSSを１つ読み込ませるだけ）で綺麗にできるCSSです。
使い方
[html]<link rel="stylesheet" type="text/css" href="http://puzzel.jp/css/coolcss.css" /> [/html]
を<head>に入れるだけ！
Dropboxばん
[html]<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/5840617/coolcss.css" /> [/html]
CSS
[css]
@charset “UTF-8”;
/* CSS Document */
ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ddd;
border-radius: 2px;
}
ul li {
border-bottom: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 5px 10px;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
}
ul li a {
display: block
}
ul li:hover {
background: -moz-linear-gradient(#eeeeee, #f2f2f2);
background: -ms-linear-gradient(#eeeeee, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#eeeeee, #f2f2f2);
background: -o-linear-gradient(#eeeeee, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2)”;
background: linear-gradient(#eeeeee, #f2f2f2);
background-color: #eeeeee;
}
ol {
border: 1px solid #ddd;
marign: 0;
padding: 0;
list-style-position: inside;
border-radius: 2px;
}
ol li {
border-bottom: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 5px 10px;
margin: 0;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
}
ol li:hover {
background: -moz-linear-gradient(#eeeeee, #f2f2f2);
background: -ms-linear-gradient(#eeeeee, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#eeeeee, #f2f2f2);
background: -o-linear-gradient(#eeeeee, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2)”;
background: linear-gradient(#eeeeee, #f2f2f2);
background-color: #eeeeee;
}
table {
border: 1px solid #ddd;
border-radius: 5px;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 5px 10px;
margin: 0;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
}
td:hover {
background: -moz-linear-gradient(#eeeeee, #f2f2f2);
background: -ms-linear-gradient(#eeeeee, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#eeeeee, #f2f2f2);
background: -o-linear-gradient(#eeeeee, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2)”;
background: linear-gradient(#eeeeee, #f2f2f2);
background-color: #eeeeee;
}
.firstTd {
background: -moz-linear-gradient(#dddddd, #cccccc) !important;
background: -ms-linear-gradient(#dddddd, #cccccc) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #cccccc)) !important;
background: -webkit-linear-gradient(#dddddd, #cccccc) !important;
background: -o-linear-gradient(#dddddd, #cccccc) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dddddd’, endColorstr=’#cccccc’) !important;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dddddd’, endColorstr=’#cccccc)” !important;
background: linear-gradient(#dddddd, #cccccc) !important;
background-color: #dddddd !important;
}
tr td:first-child {
border-right: 1px solid #ddd;
}
tr td:nth-child(2) {
border-left: 1px solid #fff;
}
h1,h2,h3,h4,h5,h6 {
border: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-top: 1px solid #eee;
padding: 5px 10px;
margin: 0;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
font-weight: normal;
border-left-style: solid;
border-left-width: 3px;
}
h1:hover,h2:hover,h3:hover,h4:hover,h5:hover,h6:hover{
background: -moz-linear-gradient(#eeeeee, #f2f2f2);
background: -ms-linear-gradient(#eeeeee, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#eeeeee, #f2f2f2);
background: -o-linear-gradient(#eeeeee, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#f2f2f2)”;
background: linear-gradient(#eeeeee, #f2f2f2);
background-color: #eeeeee;
}
h1 {
font-size: 1.7em;
border-left-color: #39C
}
h2 {
font-size: 1.6em;
border-left-color: #6C9
}
h3 {
font-size: 1.5em;
border-left-color: #F99
}
h4 {
font-size: 1.4em;
border-left-color: #FC6
}
h5 {
font-size: 1.3em;
border-left-color: #66C
}
h6 {
font-size: 1.2em;
border-left-color: #F69
}
dl {
border-radius: 5px;
box-shadow: 0 1px 1px #9f9f9f, 0 1px 0 rgba(255,255,255,0.3) inset;
}
dt {
padding: 5px 10px;
margin: 0;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
font-weight: normal;
border-bottom: 1px solid #ddd;
font-size: 1.2em;
}
dd {
background-color: #eee;
padding: 5px 10px;
margin: 0;
border-bottom: 1px solid #ddd;
}
pre {
font-size: 1em;
padding: 20px;
font-family: “Courier New”, Courier, monospace;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
border-radius: 5px;
}
blockquote {
margin: 0;
padding: 20px 30px;
background: -moz-linear-gradient(#f9f9f9, #f2f2f2);
background: -ms-linear-gradient(#f9f9f9, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#f9f9f9, #f2f2f2);
background: -o-linear-gradient(#f9f9f9, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#f2f2f2)”;
background: linear-gradient(#f9f9f9, #f2f2f2);
background-color: #f0f0f0;
position:relative;
border-radius: 5px;
}
blockquote:before {
content: ‘”‘;
display:block;
font-size: 100px;
position:absolute;
top: -40px;
left: -10px;
color: #ccc;
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif
}
blockquote:after {
content: ‘”‘;
display:block;
font-size: 100px;
position:absolute;
bottom: -25px;
right: -10px;
color: #ccc;
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif
}
.button {
padding: 5px 0;
font-size: .9em;
display:block;
width: 150px;
text-align: center;
border-radius: 25px;
cursor: pointer;
margin-bottom: 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
box-shadow: 0 1px 1px #ddd, 0 1px 0 rgba(255,255,255,0.3) inset;
}
.button:hover {
opacity: 0.8;
-moz-opacity:0.8;
filter: alpha(opacity=80);
}
.button:active {
box-shadow: 0 2px 2px rgba(0,0,0,0.3) inset
}
.button1 {
background: -moz-linear-gradient(#f9f9f9, #efefef);
background: -ms-linear-gradient(#f9f9f9, #efefef);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #efefef));
background: -webkit-linear-gradient(#f9f9f9, #efefef);
background: -o-linear-gradient(#f9f9f9, #efefef);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#efefef’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f9f9f9′, endColorstr=’#efefef)”;
background: linear-gradient(#f9f9f9, #efefef);
background-color: #f0f0f0;
border: 1px solid #ddd;
text-shadow: -1px 1px 0 #fff;
}
.button2 {
background: -moz-linear-gradient(#3fbfff, #3399cc);
background: -ms-linear-gradient(#3fbfff, #3399cc);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fbfff), color-stop(100%, #3399cc));
background: -webkit-linear-gradient(#3fbfff, #3399cc);
background: -o-linear-gradient(#3fbfff, #3399cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#3fbfff’, endColorstr=’#3399cc’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#3fbfff’, endColorstr=’#3399cc)”;
background: linear-gradient(#3fbfff, #3399cc);
color: #fff;
border: 1px #3399cc solid;
text-shadow: 1px 1px 0 #3399cc;
}
.button3 {
background: -moz-linear-gradient(#78f0b4, #66cc99);
background: -ms-linear-gradient(#78f0b4, #66cc99);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #78f0b4), color-stop(100%, #66cc99));
background: -webkit-linear-gradient(#78f0b4, #66cc99);
background: -o-linear-gradient(#78f0b4, #66cc99);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#78f0b4′, endColorstr=’#66cc99′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#78f0b4′, endColorstr=’#66cc99)”;
background: linear-gradient(#78f0b4, #66cc99);
color: #fff;
border: 1px #66cc99 solid;
text-shadow: 1px 1px 0 #66cc99;
}
.button4 {
background: -moz-linear-gradient(#e78b8b, #b86e6e);
background: -ms-linear-gradient(#e78b8b, #b86e6e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e78b8b), color-stop(100%, #b86e6e));
background: -webkit-linear-gradient(#e78b8b, #b86e6e);
background: -o-linear-gradient(#e78b8b, #b86e6e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e78b8b’, endColorstr=’#b86e6e’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e78b8b’, endColorstr=’#b86e6e)”;
background: linear-gradient(#e78b8b, #b86e6e);
color: #fff;
border: 1px #b86e6e solid;
text-shadow: 1px 1px 0 #b86e6e;
}
.button5 {
background: -moz-linear-gradient(#eebf60, #b49048);
background: -ms-linear-gradient(#eebf60, #b49048);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eebf60), color-stop(100%, #b49048));
background: -webkit-linear-gradient(#eebf60, #b49048);
background: -o-linear-gradient(#eebf60, #b49048);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eebf60′, endColorstr=’#b49048′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eebf60′, endColorstr=’#b49048)”;
background: linear-gradient(#eebf60, #b49048);
border: 1px #b49048 solid;
text-shadow: 1px 1px 0 #eebf60;
}
.button6 {
background: -moz-linear-gradient(#7d7dff, #6666cc);
background: -ms-linear-gradient(#7d7dff, #6666cc);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7dff), color-stop(100%, #6666cc));
background: -webkit-linear-gradient(#7d7dff, #6666cc);
background: -o-linear-gradient(#7d7dff, #6666cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#7d7dff’, endColorstr=’#6666cc’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#7d7dff’, endColorstr=’#6666cc)”;
background: linear-gradient(#7d7dff, #6666cc);
color: #fff;
border: 1px #6666cc solid;
text-shadow: 1px 1px 0 #6666cc;
}
.button7 {
background: -moz-linear-gradient(#f05f8f, #c55077);
background: -ms-linear-gradient(#f05f8f, #c55077);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f05f8f), color-stop(100%, #c55077));
background: -webkit-linear-gradient(#f05f8f, #c55077);
background: -o-linear-gradient(#f05f8f, #c55077);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f05f8f’, endColorstr=’#c55077′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f05f8f’, endColorstr=’#c55077)”;
background: linear-gradient(#f05f8f, #c55077);
color: #fff;
border: 1px #c55077 solid;
text-shadow: 1px 1px 0 #c55077
}
.button8 {
background: -moz-linear-gradient(#ff2b2b, #ca2424);
background: -ms-linear-gradient(#ff2b2b, #ca2424);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff2b2b), color-stop(100%, #ca2424));
background: -webkit-linear-gradient(#ff2b2b, #ca2424);
background: -o-linear-gradient(#ff2b2b, #ca2424);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff2b2b’, endColorstr=’#ca2424′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff2b2b’, endColorstr=’#ca2424)”;
background: linear-gradient(#ff2b2b, #ca2424);
color: #fff;
border: 1px #ca2424 solid;
text-shadow: 1px 1px 0 #ca2424
}
.button9 {
background: -moz-linear-gradient(#ccff00, #afdb00);
background: -ms-linear-gradient(#ccff00, #afdb00);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccff00), color-stop(100%, #afdb00));
background: -webkit-linear-gradient(#ccff00, #afdb00);
background: -o-linear-gradient(#ccff00, #afdb00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ccff00′, endColorstr=’#afdb00′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ccff00′, endColorstr=’#afdb00)”;
background: linear-gradient(#ccff00, #afdb00);
border: 1px #afdb00 solid;
text-shadow: 1px 1px 0 #ccff00
}
.button10 {
background: -moz-linear-gradient(#009cff, #0086db);
background: -ms-linear-gradient(#009cff, #0086db);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009cff), color-stop(100%, #0086db));
background: -webkit-linear-gradient(#009cff, #0086db);
background: -o-linear-gradient(#009cff, #0086db);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#009cff’, endColorstr=’#0086db’);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#009cff’, endColorstr=’#0086db)”;
background: linear-gradient(#009cff, #0086db);
color: #fff;
border: 1px #0086db solid;
text-shadow: 1px 1px 0 #0086db
}
.button11 {
background: -moz-linear-gradient(#eb00c2, #c700a4);
background: -ms-linear-gradient(#eb00c2, #c700a4);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb00c2), color-stop(100%, #c700a4));
background: -webkit-linear-gradient(#eb00c2, #c700a4);
background: -o-linear-gradient(#eb00c2, #c700a4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eb00c2′, endColorstr=’#c700a4′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eb00c2′, endColorstr=’#c700a4)”;
background: linear-gradient(#eb00c2, #c700a4);
color: #fff;
border: 1px #c700a4 solid;
text-shadow: 1px 1px 0 #c700a4
}
.button12 {
background: -moz-linear-gradient(#00ccff, #00a7d1);
background: -ms-linear-gradient(#00ccff, #00a7d1);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00ccff), color-stop(100%, #00a7d1));
background: -webkit-linear-gradient(#00ccff, #00a7d1);
background: -o-linear-gradient(#00ccff, #00a7d1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00ccff’, endColorstr=’#00a7d1′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00ccff’, endColorstr=’#00a7d1)”;
background: linear-gradient(#00ccff, #00a7d1);
color: #fff;
border: 1px #00a7d1 solid;
text-shadow: 1px 1px 0 #00a7d1
}
[/css]
ご自由にお使いください。
コメントを残す