CSSだけでtableを縦並びにする

CSS

ブラウザがCSS2に正しく対応していればCSSだけでテーブルを縦並びに変えられるおこの表組み内の全セルを，縦並びに変更したいとする。 table要素でレイアウトした場合，このような変更はしんどい。 HTMLソースを書きなおして，テーブルの全行を２行ずつに分…

2012-03-05

nth-of-type、nth-childの使い方

CSS

週末、Jenkinsをさらに痛く改造するためCSSを弄っていて、テーブルの行にスタイルを当てようとしたのだが、一行目のtrがヘッダ行になっていて、class指定やtheadタグも無いのでヘッダ行とそれ以外を区別する術がなくて困った。なんとか２つ目以降のtrタグに…

2011-06-29

CSS Animation

CSS

Webkitブラウザに続いてFirefoxがCSSアニメーションに対応したらしい。以下のように書くとページロード時にアニメーションが発動する。試しに→に仕込んでみた。 .hatena-moduletitle { -webkit-animation: fadeSlideIn 500ms ease-in 0s 1 normal; -moz-anim…

2011-06-24

Firefoxでボタンの点線を消す

CSS

こういうボタンの内側の点線を消したい。 input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border:0px; }

2011-03-09

Web FontsをHTML Canvasで使う

HTML JavaScript CSS

といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。 @font-face{ font-family: MadoMagi; src: url('./MadokaRunes.ttf') format("truetype"); } ctx.textAlign = "center"; ctx…