[CSS3]ボタンメーカー

よく使うのでメモ。

GUIで簡単にボタンcssコードをジェネレートしてくれる。

http://css-tricks.com/examples/ButtonMaker/

ソースは出来たボタンをクリックすると表示される。

ソース例

.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#bfdb21), to(#65a9d7));
background: -moz-linear-gradient(top, #bfdb21, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #000000;
font-size: 12px;
font-family: ‘Lucida Grande’, Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}

2010年6月8日 | No Comments »

IE6でネガティブマージンの適用

固定幅のボックスをfloatし、marginを適用させた際にIE6では素直にネガティブマージンが適用されないのでハックする。

    

  • 

    ダミーの商品名
    

    ダミーの本文、商品の説明をする文章が入ります。￥0,000（税込）
    

    • 

  • 

    ダミーの商品名
    

    ダミーの本文、商品の説明をする文章が入ります。￥0,000（税込）
    

    • 

  • 

    ダミーの商品名
    

    ダミーの本文、商品の説明をする文章が入ります。￥0,000（税込）
    

    • 

  • 

    ダミーの商品名
    

    ダミーの本文、商品の説明をする文章が入ります。￥0,000（税込）
    

    • 




 ul.item_list {  margin: 0 0 0 -8px; }
 ul.item_list { width: 738px; position: relative;}/*IE6*/
.item_list li{ padding: 10px;float: left; width: 340px; margin: 0 0 10px 8px; border: 1px dotted #969696;}
* html .item_list li{  width: 338px; margin: 0 0 10px 8px; display: inline; }/*IE6*/
2010年5月24日 | No Comments »

ie-css3.js

IE5〜8をCCS3の疑似セレクタ対応にするスクリプトです。
これを待っていました。
coliss の記事
ie-css3.js のサイト

下記のCSSセレクタに非対応なIEを何とかしてくれます。

  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
  • :first-child
  • :last-child
  • :only-child
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :empty
現在使用している IE8.js では、今現在IE8に非対応セレクタを追加することができません。
ただし、IE8.js には上記以外にもかなりの追加項目があり（だからIE6での動作が散漫）、
それらを丸々捨てるのも厳しい気がします。
IE8のみ ie-css3.js を使い、それ以下は IE8.js なのか、
共存させるのか。（多分コンフリクト起こしそうな）
どちらにしても色々テストしてみないといけないようです。

2010年1月22日 | No Comments »

CSSで水平垂直で中央位置にする

よく使うが忘れてしまうのでメモ。

ポイント
・高さ 100% の body 要素に position: relative; を指定する。
・ボックスの縦横を min-width、min-height を指定。あとは50% のところに配置してネガティブマージンでボックスの半分戻す。

<body>
<div class="contenier">
  <p>中央寄せ</p>
</div>
</body>

html, body {height: 100%;}  /*高さ100%に指定*/
body {
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 600px;  /*中央配置するボックスの横幅*/
  min-height: 400px;  /*中央配置するボックス縦幅*/
  background-color: #2262aa;
}
.contenier {
  margin: -200px 0 0 -300px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 600px;  /*横幅*/
  height: 400px;  /*縦幅*/
  background-color: #fff;
}
2009年12月18日 | Tags: | No Comments »

[css]IE6、IE7、IE8のCSSの違いまとめ

Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。

この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしていても、規約が想定している動作と違う動きをするものがある。

Louis Lazaris氏がSmashing MagazineにおいてCSS Differences in Internet Explorer 6, 7 and 8のタイトルのもとIE6、IE7、IE8で使えるCSSについてまとめている。すべてのバージョンでサポートされていないものは掲載からはずされている。IEのどのバージョンで使えるのか見やすく参考になる。紹介されている機能は次のとおり。

セレクタと継承

項目 IE6 IE7 IE8 備考
チャイルドセレクタ × ○ ○ IE7では親と子の間にHTMLコメントがある場合にはチャイルドセレクタは機能しない
チェインクラス × ○ ○ IE6は一見サポートしているように見えるがそうではない
属性セレクタ × ○ ○
隣接セレクタ × ○ ○ IE7では隣接する要素の間にHTMLコメントがある場合にはチャイルドセレクタは機能しない
間接セレクタ × ○ ○

擬似クラスと擬似要素

項目 IE6 IE7 IE8 備考
:hover擬似クラスに続く子孫セレクタ × ○ ○
チェイン擬似クラス × ○ ○
非アンカー要素の:hover擬似クラス × ○ ○
:first-child擬似クラス × ○ ○ IE7ではHTML湖面度が最初の子要素の前にある場合には機能しない
:focus擬似クラス × × ○
:before擬似クラスス × × ○
:after擬似クラス × × ○

プロパティ

項目 IE6 IE7 IE8 備考
ポジション指定からの仮想サイズ × ○ ○ 絶対ポジションにおけるtop、right、bottom、left指定でwidthoyおよびheightを提供
min-height × ○ ○
min-width × ○ ○
max-height × ○ ○
max-width × ○ ○
borderの透過指定 × ○ ○
positionの固定指定 × ○ ○
background-attachmentの固定指定 × ○ ○ IE6は誤ったバックグラウンドセットを持った要素の割合指定に関連して想定していない背景画像の固定をおこなう。そのためroot要素いおいてのみ動作する
inherit × × ○ IE6とIE7ではdirectionとvisibilityに対してのみinheritが適用される
テーブルセルにおけるborder-spacing × × ○
テーブルにおける空セルの表示するempty-cells × × ○
テーブルキャプションの縦方向ポジションcaption-side × × ○
クリッピングのエリア指定 × × ○ IE6とIE7ではカンマを使わない非推奨の記述をする場合には機能する
orphans × × ○
widows × × ○
page-break-inside × × ○
outline × × ○
displayにおけるblock, inline, none以外の指定 × × ○
white-space × × ○

その他のテクニック

項目 IE6 IE7 IE8 備考
@importに対するメディアタイプ × × ○ IE6とIE7でも@importは動作するがメディアタイプが指定されていると機能しない
カウンタ値 × × ○ counter-incrementおよびcontentプロパティ
クオート文字列の指定 × × ○



2009年11月10日 | Tags: | No Comments »

[CSS3]ie8.js

IE8.js
IE5~7に実装されていないCSS3を対応させる。
ヘッダに書く↓
＜![if lt IE 8]>
＜script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”>
＜![endif]>

pngファイルはファイル名を「○○-trans.png」。
あとはIE6でこのpngは置換されるので、jsファイルと同ディレクトリにblank.gifを設置する。
ただ背景のrepeatには適用されない。



特に問題なく使用されている報告をみますが、私の使用した限りで発生した事象。

  1. ロードされた後に書き換えるため、IE6の挙動は遅い。
  2. cssファイルを外部ファイルで読み込むときの でmedia=”all”を指定していると印刷アクションでエラーが発生します。
    Netscape Navigator 4.xで読み込ませないというハックでmedia=”all”を使用してきましたが、いまさら気にすることもないのでmedia=”screen”を使用し、印刷用にはmedia=”print”で別対応することでエラーは回避できます。
  3. IE６で実装されていない子セレクタhoge > hoge子　が含まれているcssファイルをメインの外部css以外 import、link要素で読み込むとjsエラーが発生する。

ダウンロードはGoogleCodeより
http://code.google.com/p/ie7-js/

ie8

ie8

2009年11月5日 | Tags: , , | No Comments »