HTMLとCSSのメモ帳

HTML5のサイトでよく利用されているrest.css

sakuralove — Fri, 11 Feb 2011 15:06:08 +0000

HTML5で作成されているサイトではHTML5 Doctorで掲載されているrestファイル(初期化ファイル)が利用されているのをよく見かけます。

ほかにもいくつかあるようですが、これで十分な気がするので他割愛。

HTML5 Reset Stylesheet | HTML5 Doctor

CSS3 グラデーションをつける gradient

sakuralove — Mon, 04 Oct 2010 19:45:45 +0000

グラデーションについては、まだ動作未確認な部分が多いです。

■ 線形グラデーション

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色)); 
-moz-linear-gradient(開始位置, 終了位置, 開始色, 途中色 位置, 終了色);

※色はrgba(Red, Green, Blue, Alpha)で指定する事で透明度を指定できる

	background: -moz-linear-gradient(
		top,
		#fcc800,
		#c70067 50% ,
		rgba(154,13,124,0.5)
    );
    background: -webkit-gradient(
		linear,
		50% 0%,
		50% 100%,
		from(#fcc800),
		color-stop( 0.5  , #c70067 ),
		to(rgba(154,13,124,0.5))
    );

■ 円形グラデーション

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色)); 
-moz-radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);

※色はrgba(Red, Green, Blue, Alpha)で指定する事で透明度を指定できる

	background: -moz-radial-gradient(
		50% 50%,
		circle,
		#fcc800,
		#c70067 50% ,
		#9a0d7c,
		rgba(154,13,124,0.5)
    );
    background: -webkit-gradient(
		radial,
		50% 50%,
		0,
		50% 50%,
		400,
		from(#fcc800),
		color-stop( 0.5  , #c70067 ),
		to(rgba(154,13,124,0.5))
    );

DEMO

CSS3 テキストに影をつける text-shadow

sakuralove — Wed, 29 Sep 2010 13:07:46 +0000

テキストに影をつける場合は、text-shadowを使います。
複数指定することもできます。複数指定する場合は、「,」で区切ります。
※ IE否対応、デモにはPIE.htcを導入

   text-shadow: 縦距離 横距離 ぼかし距離 影の色;

■ 影をつける

   text-shadow: 2px 2px 3px #666;

■ 複数の影をつける

   text-shadow: 0 0 4px #FFE900,
         -1px -1px 4px #FFDD33,
         -2px -2px 6px #FFE900,
         -4px -4px 8px #FF0000;

DEMO

売れるネットショップ開業・運営 eコマース担当者・店長が身につけておくべき新・100の法則。

著者／訳者：坂本悟史川村トモエ
出版社：インプレスジャパン( 2010-05-14 )
単行本：232 ページ
ISBN-10 : 4844328379
ISBN-13 : 9784844328377
定価：￥ 2,520

CSS3 ボックスに影をつける box-shadow

sakuralove — Tue, 28 Sep 2010 15:52:56 +0000

ボックスに影をつけるプロパティがbox-shadowです。
※ IE否対応、デモにはPIE.htcを導入

   box-shadow: [inset] 縦距離 横距離 ぼかし距離 広がり距離 影の色;

[inset]がなければ外側の影、つければ内側の影になります。
縦距離と横距離は影の大きさになります。
ぼかし距離はぼけ方の強さになります。
広がり距離は全方向への広がりになります。

■ 外側の影指定

.bshadow {
   box-shadow: 5px 5px 3px #666;
}

■ 内側の影指定

.bshadow {
   box-shadow: inset 5px 5px #999;
}

■ 内外の両方の影指定

.bshadow {
   box-shadow: 0 0 3px 3px #666, inset 0 0 15px 10px #EC0082;
}

DEMO

CSS3 角丸プロパティ border-radius

sakuralove — Tue, 28 Sep 2010 13:08:23 +0000

CSS3では角丸プロパティがあります。
※ IE否対応、デモにはPIE.htcを導入

■ 一括指定

.bradius {
    border-radius: 50px;
}

■ 部分指定

.bradius {
    border-top-left-radius: 0
    border-top-right-radius: 0
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;

    /*firefoxは記述が異なるので注意*/
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
}

DEMO

CSS3を利用する場合のベンダープレフィックス

sakuralove — Tue, 28 Sep 2010 10:52:00 +0000

CSS3を利用する場合、ブラウザ固有の接頭辞(ベンダープレフィックス※1)のあるCSS3プロパティが存在します。
その各接頭辞に対応するブラウザについてのメモ。

※1 草案段階の仕様やベンダー独自の拡張機能の実装ですよ、ということを明示するために付ける識別子

-webkit = Safari、Google Chrome
-moz = Firefox
-o = Opera
-ms = Internet Explorer

.kadomaru {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
}

IEにもcss3のプロパティを使えるようにするJS

sakuralove — Mon, 27 Sep 2010 16:53:40 +0000

IEはIE9以前は基本的にCSS3にはほぼ対応していないので、ちょこっと角丸使いたいなっていうときはIEにもcss3のプロパティーを使えるようにするJavascriptを導入してみましょう。

見つけたら随時，このページにリンクを追加していきます。

詳しい対応、利用方法は各ページにてご確認を。

■ PIE.htc

「border-radius」「box-shadow」「border-image」「multiple background images」「inear-gradient as background image」に対応している模様(2010年9月現在)。

CSS3 PIE: CSS3 decorations for IE

■ ie-css3.htc

「border-radius」「box-shadow」「text-shadow」に対応している模様(2010年9月現在)。

CSS3 support in Internet Explorer 6, 7, and 8

HTML5&CSS3の主要ブラウザの対応状況

sakuralove — Mon, 27 Sep 2010 15:42:05 +0000

HTML5&CSS3はそろそろ覚えていかないとなー、ということで主要ブラウザの対応状況を調べてたら部分的にまとめられたページをみつけたのでメモ。

こう見るとIEって。。。

■ FindMeByIP

HTML5 & CSS3 Support, Web Design Tools & Support ~ FindMeByIP ~

HTMLとCSSについてちょこちょこメモ

sakuralove — Mon, 27 Sep 2010 08:35:47 +0000

HTMLとCSSについてちょこちょこメモしていきます。