HTML/CSS – colopixie

[IE6/7] 複数 class を指定したのに適用されない [Advent Calendar 2015]

chinatsu — Thu, 17 Dec 2015 00:59:53 +0000

本エントリーは「CSS 昔話 Advent Calendar 2015」17日目のエントリーです。

自分がちゃんとCSSを触ったのは、８年くらい前でしょうか。
当時は、IE6真っ盛りでぼちぼちIE7がで始めた頃でした。
海外ではNetscape Navigator 9が出ていたものの、日本ではNetscape 7.1 止まりだったことが記憶にあります。

昔話ということで、IE6の時にお世話になっていたCSSについて書きたいと思います。
複数のclass 指定をしている場合、一番最後の class が適用されてしまうバグについて。
IE6 と IE7 が対象です。

ネット接続をしていない、WinXPの環境を使ってためしてみました。

.content01.content {
  background-color: red;
}

.content02.content {
  background-color: blue;
}

と指定した場合、IE6/IE7では、background-color: blue;が適用されてしまいます。

その対策

.content.content01 {
  background-color: red;
}

.content.content02 {
  background-color: blue;
}

としていすると、IE6/IE7ではきちんと適用できます。
今の話をすと、Scss のネストで書いておけば、対策ですね！

.content {
  &.content01 {
    background-color: red;
  }

  &.content02 {
    background-color: blue;
  }
}

今となっては、セレクタの順番をそれほど気にしなくてもいいですが、昔は気にしてCSSを書かないといけなかったので、
今よりは慎重にCSSを書いていましたね…

久しぶりにWindows XPを使ってみたけど、使いづらすぎて困った。キャプチャー時に使ったペイントがWin7あたりから進化してて違いにビビる。
XPの方メモリ256MBだけど、メインは32GBなので差すごい。

投稿[IE6/7] 複数 class を指定したのに適用されない [Advent Calendar 2015]はcolopixieの最初に登場しました。

Webkit系ブラウザでの印刷・box-shadowのバグ？

chinatsu — Mon, 20 Feb 2012 14:00:07 +0000

File View

(実際にChromeやSafariなどでプリントプレビューしてみてください)

何があったのか

Chromeで960pxがあるコンテンツのPrint CSSを書いていて、印刷プレビューすると途中でコンテンツが切れてしまうという現象にぶち当たりました(-_-)/~~~ピシー!ピシー!

そこで、Box-Shadow(inset)を使ってどこまで印刷（なんpx）できるのか試していたのです！

以下ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>


<style type="text/css">

div {
	height: 500px;
	font-size: 24px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #fff;
	line-height:50px;
}
#w750 {
	background-color: #3FB8AF;
	width: 750px;
	box-shadow: 0 0 5px #3FB8AF inset;
	-o-box-shadow: 0 0 5px #3FB8AF inset;
}

#w800 {
	background-color: #7FC7AF;
	width: 800px;
	box-shadow: 0 0 5px #7FC7AF inset;
}


#w850 {
	background-color: #DAD8A7;
	width: 850px;
	box-shadow: 0 0 5px #DAD8A7 inset;
}

#w900 {
	
	background-color: #FF9E9D;
	width: 900px;
	box-shadow: 0 0 5px #FF9E9D inset;
}


#w950 {
	background-color: #FF3D7F;
	width: 950px;
	box-shadow: 0 0 5px #FF3D7F inset;
}

</style>

</head>

<body>

<div id="w950">
950px

<div id="w900">
900px
<div id="w850">
850px
<div id="w800">
800px
<div id="w750">
750px
</div>
</div>
</div>
</div>
</div>

</body>
</html>

しかし

分かりやす行く色分けしていたのですが、印刷プレビューをみると・・・・・！？

あれ…

全部一番内側のBox-shadowの色になってね…

どういうことなんでしょうね…

ふしぎです。

何か

このソースおかしくね。バカじゃねーの。まじありえなーい。などありましたら@puzzeljpまでリプライくれると、やべーまじ感謝だわー。といって喜びます。
これまじバグ！とかくれると、てへぺろ〜〜〜〜といって納得してバグ発見かも〜と喜びます。

File View

(実際にChromeやSafariなどでプリントプレビューしてみてください)

投稿Webkit系ブラウザでの印刷・box-shadowのバグ？はcolopixieの最初に登場しました。

HTMLソースからCSSセレクターを吐き出してくれるウェブサービス

chinatsu — Fri, 06 Jan 2012 11:15:46 +0000

膨大なHTMLをZen-Codingでbody#body>div#container>(div#header>h1#sitetitle+div#headermenu>ul>li*5>a)+(div#contents>(div#content>div.entrylist*5>(h2.entrytitle>a)+span.date+p.entrytext+span.entryfooter)+(div#aside>div.side*5>h3.sidetitle+p))+(div#footer>(ul.footermenu>li*5>a)+p.copyright+span.pagetop>a)みたいなのを書いてCmd+Eで展開したのはいいけど、CSSのセレクターを書くのが面倒になってしまったときは下で紹介するサービスが便利ですよ。
2つサービスがあるのですが、ちょっと仕様が異なるので用途によって分けるといいと思います。
サンプルにてヘッダーだけを生成して見ました。

<div id="header">
	<h1 id="sitetitle"></h1>
	<div id="headermenu">
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
</div>
</div>

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

さっきのZen-codingしたやつをしてみると

@charset "UTF-8";

/* ///////////////////////////////////////////////////////////////////

[header]
	[headermenu]

/////////////////////////////////////////////////////////////////// */

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

/* =========================================================
header
========================================================= */
div#header {
}

div#header h1#sitetitle {
}

/* =========================================================
headermenu
========================================================= */
div#header div#headermenu {
}

div#header div#headermenu ul {
}

div#header div#headermenu ul li {
}

div#header div#headermenu ul li a {
}

PrimerCSS

さっきのZen-codingしたやつをしてみると

/* CSS Generated by Primer - primercss.com */

div#header {
	
}

h1#sitetitle {
	
}

div#headermenu {
	
}

ID,CASSSをつけてくれないのとつけてくれないっていう違いが大きですね。
CSS Selector Generatorhはオプションが選べたり。
ただシンプルにID,CLASSだけのセレクターを生成したければ、PrimerCSSでいいと思います。

ちなみに全部展開したHTMLはこちら

<body id="body">
	<div id="container">
		<div id="header">
			<h1 id="sitetitle"></h1>
			<div id="headermenu">
				<ul>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
				</ul>
			</div>
		</div>
		<div id="contents">
			<div id="content">
				<div class="entrylist">
					<h2 class="entrytitle"><a href=""></a></h2>
					<span class="date"></span>
					<p class="entrytext"></p>
					<span class="entryfooter"></span>
				</div>
				<div class="entrylist">
					<h2 class="entrytitle"><a href=""></a></h2>
					<span class="date"></span>
					<p class="entrytext"></p>
					<span class="entryfooter"></span>
				</div>
				<div class="entrylist">
					<h2 class="entrytitle"><a href=""></a></h2>
					<span class="date"></span>
					<p class="entrytext"></p>
					<span class="entryfooter"></span>
				</div>
				<div class="entrylist">
					<h2 class="entrytitle"><a href=""></a></h2>
					<span class="date"></span>
					<p class="entrytext"></p>
					<span class="entryfooter"></span>
				</div>
				<div class="entrylist">
					<h2 class="entrytitle"><a href=""></a></h2>
					<span class="date"></span>
					<p class="entrytext"></p>
					<span class="entryfooter"></span>
				</div>
			</div>
			<div id="aside">
				<div class="side">
					<h3 class="sidetitle"></h3>
					<p></p>
				</div>
				<div class="side">
					<h3 class="sidetitle"></h3>
					<p></p>
				</div>
				<div class="side">
					<h3 class="sidetitle"></h3>
					<p></p>
				</div>
				<div class="side">
					<h3 class="sidetitle"></h3>
					<p></p>
				</div>
				<div class="side">
					<h3 class="sidetitle"></h3>
					<p></p>
				</div>
			</div>
		</div>
		<div id="footer">
			<ul class="footermenu">
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
			<p class="copyright"></p>
			<span class="pagetop"><a href=""></a></span>
		</div>
	</div>
</body>

紹介したもの

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

PrimerCSS

投稿HTMLソースからCSSセレクターを吐き出してくれるウェブサービスはcolopixieの最初に登場しました。

Checkboxを綺麗にするん

chinatsu — Thu, 15 Dec 2011 15:01:49 +0000

Checkboxにあるチェックをなくしてなんかクリックしてこれ選択してるんじゃいって感じにできるようにしてみた。

⇒⇒⇒⇒⇒Checkboxを綺麗にするん

▼こんな感じです

HTML

<form action="" id="form" method="post">
<label for="checkbox1">
	<input type="checkbox" name="Checkbox" value="Checkbox" id="checkbox1" checked="checked" />Checkbox
</label>
......

CSS

label input {
	width: 500px !important;
	position: absolute;
	display: block;
	padding: 5px 15px;
	height: 20px !important;
	left: -20px
}
label{	
	position: relative;
	height: 20px !important;
	
	border: 1px solid #ddd;
	display: block;
	float:left;
	margin: 5px;
	line-height: 20px !important;
	border-radius: 3px;
	padding: 5px 15px;
	background: url(check.png);
   	overflow: hidden; 
}

checkbox部分はleft:-20pxでぶっ飛ばしてから親のlabelにoverflow:hiddenして消し去ってます

jQuery

使ってます。
自分で頑張って売っていたのですが、諦めてグーグル先生に聞いてみたら
jQuery – チェックボックスがチェックされたらスタイルを変更する | 1：n – DETELU Blogの記事にありましたので、使わせて頂きました。ありがたやありがたや…

$(function(){
	$("#form :checked").each(function(){
		var isl = $(this).attr("id");
		$("label[for="+isl+"]").css({"border":"1px solid #cb003a","color":"#fff","background":"url(checked.png)","text-shadow":"-1px -1px 0px #a4002f"});
	});
	$("#form :checkbox").click(function() {
		var isl = $(this).attr("id");
		if($(this).attr('checked') == true) {
			$("label[for="+isl+"]").css({"border":"1px solid #cb003a","color":"#fff","background":"url(checked.png)","text-shadow":"-1px -1px 0px #a4002f"});
		} else {
			$("label[for="+isl+"]").css({"border":"1px solid #ddd","color":"","background":"url(check.png)","text-shadow":""});
		}
	});
});

jQueryの方は元サイトをみた方がいいと思います。

とりあえず、Checkboxの見た目をがらーんと変えたい人へ。
押す場所が大きくなる（できる）ので押しやすい！というメリットがあるような。

サンプルです：Checkboxを綺麗にするん

投稿Checkboxを綺麗にするんはcolopixieの最初に登場しました。

スタイルシートを読み込むだけでul,h1などが綺麗になる Cool CSS

chinatsu — Sun, 04 Sep 2011 12:12:04 +0000

リストやｈ１やテーブルなどを簡単に（CSSを１つ読み込ませるだけ）で綺麗にできるCSSです。

使い方

[html] [/html]
をに入れるだけ！
Dropboxばん
[html] [/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]

ご自由にお使いください。

投稿スタイルシートを読み込むだけでul,h1などが綺麗になる Cool CSSはcolopixieの最初に登場しました。