February 2012
1 post
IE6,7 で a < div したとき img をクリックできない場合の対処
原因は、a の中で float や position を使うことにある。float が原因の場合は以下で解決可能
html
<a href="#">
<div class="imgContainer">
<img src="http://dummyimage.com/100" />
</div>
</a>
css
<style>
a{
/*some codes ...*/
}
div.imgContainer{
float:left; /* a element which is applying float */
background:url(transparent.png); /* applying transparent image for IE6, 7 when using float...
January 2012
1 post
classやidに-を使うとか使わないとか のついでに
ずどさんがはまろぐってたからついでに。
昔いろいろ悩んでいた頃があって、前の会社にいたころいろいろ試してました。キャンペーンページのような、すぐ消えるであろうページだったのでいろいろやってました。
例えば「.」でつなげてみるとか。
<div class="mod.sample.vertical">サンプル縦長版</div>
でもCSSも一手間加えないといけないのでやめました。CSSでは、「.」は普通には使えませんが、エスケープすれば使えます。
.mod\.sample\.vertical{
(snip)
}
あと、マルチバイト文字をクラス属性値にしてみたり。
<div class="大見出し">大見出し</div>
.大見出し{
(snip)
}
マルチバイト文字は普通に使えます。たしか。
...
September 2011
1 post
ウェブフォントに使えそうなライセンス和文フォント追加分
はんなり明朝 http://typingart.net/ IPAライセンス
フォントポ日本語 http://yoshihisa.que.jp/fontopo/font.html IPAライセンス
XANO明朝フォント http://www.asahi-net.or.jp/~sd5a-ucd/freefonts/XANO-mincho/ このフォントは、印刷・表示、電子文書への埋め込み等の目的で、誰もが自由に無償で用いることができます。 このフォントの配布・再配布は、自由に無償で行うことができます。 このフォントを、より大きな規模のソフトウエアパッケージの一部として販売するなどしても構いません。
Oradano Mincho フォント http://www.asahi-net.or.jp/~sd5a-ucd/freefonts/Oradano-Mincho/...
August 2011
1 post
SVGのFilterなどで行列を書くときに気をつけること
SVG の原始フィルターの <feColorMatrix> などの値は 5 * 5 の行列なので見やすくするために属性内を開業すると Webkit だとエラーになる。FxやOperaは見れる。
例えば、
<filter id="invert">
<feColorMatrix in="SourceGraphic" result="ColorMatrix" type="matrix" values="-1, 0, 0, 0, 1 0,-1, 0, 0, 1 0, 0,-1, 0, 1 0, 0, 0, 1, 0"/>
</filter>
ならOK。
でも
<filter id="invert">
<feColorMatrix in="SourceGraphic" result="ColorMatrix"...
July 2011
1 post
仕事でつくられたHTML5のサイトが意外とある。
仕事でつくられたHTML5のサイトが意外とある。
メイン
http://www.lawson.co.jp/
http://www.nissui.co.jp/
http://www.tv-asahi.co.jp/
http://www.muji.net/
http://www.kirishima.co.jp/
http://www.wizardry-online.jp/
http://www.jwt.co.jp/
http://www.cocacola.co.jp/
http://olympuspen.com/jp/
http://www.united-arrows.co.jp/
大手ドメイン配下
http://www.nhk.or.jp/connect/
http://recruit.softbank.jp/
...
June 2011
2 posts
jquery easing の引数
x: null 不要。応用時はなしでおｋ
t: current time
b: beginnIng value (start value)
c: change In value (end value)
d: duration (total time) = fps
s: stress? 任意。反動などの強さの調整
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
を抜き出したなら、↓みたいにするといい
var easeInBack = function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return...
IE6,7 で a>div>img:floated なときのimgクリック出来ない問題
「a要素>div>フローとした画像やらテキストやら」みたいなとき、IE6,7だと画像部分が反応しないから、こうする。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>無題ドキュメント</title>
<style>
a{
*zoom:1;
background:url(http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif);
}
.container{
position:relative;
*z-index:-1;
border:1px solid...
May 2011
3 posts
SVG の色指定で気をつけること
SVGで色を使うとき、#FF0000みたいに16進またはSVGで許可されたキーワードにしないといけない。
#000みたいな短縮形はCSS固有の形式だとIE9で表示できない。一応SVGのSpecにはCSS2.1の色は使えることにはなっている。 http://www.w3.org/TR/SVG/types.html#DataTypeColor
つまり<circle cx=”0” cy=”0” r=”100” fill=”#00F“>はIE9では無理。外のブラウザは多分おｋ
IE9でもCSS固有の色指定を使いたいときはstyle属性を経由して使う。
もしかしたら...
PIEで気をつけること
PIEでbox-shadowを使う場合、背景をあわせて指定しないといけない。そうしないと、IEのとき影となるvmlが透けて見えてしまう。
div{
width:400px;
height:200px;
border:6px solid #090;
border-radius:30px;
behavior: url(PIE.htc);
}
じゃなくて
div{
width:400px;
height:200px;
border:6px solid #090;
border-radius:30px;
background:#fff;
behavior: url(PIE.htc);
}
みたいにする。
CSS3PIE効かないとき
CSS3PIE の css3-container はデフォルトで z-index:-1 だから場合によっては祖先要素の背景より裏に表示されることになり、角丸や背景部分が表示されないことがある。解決するためには、behavior 適用時に合わせて relative を明示しておく必要あり。
たとえば、htmlとbodyの両方に背景を適用している場合が該当。
あとでブログとかに…するかもね
html{background:red;}
body{background:blue;}
div{
width:400px;
height:200px;
border:6px solid #090;
border-radius:30px;
-pie-background: linear-gradient(#fff, #0F3);
background-image:...