はてなブックマーク

同じ事を書いている記事は他にもありますが、個人的に一番わかりやすくて細かいと思っていた記事が消えていたので。 というわけで、細かい話 は、ほぼ table系にはposition:relativeが効かない ( http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/ ) にあった内容を引っ張ってきて、文調と表現を若干変えてうちのブログに合わせただけです。許可も取ってませんが、お許し下さい。 Firefoxが正しい <td> や <div style=”dispaly:tablec-cell”> の中身を絶対位置で指定したいなー ↓ 親の<td> や <div style=”dispaly:tablec-cell”> に position:relative を指定 ↓ chrome や IE で確認

追記：2013年3月19日現在、Google Chrome 27.0.1438.7 dev では以下に書いてある不具合は既に解決されているようです。 タイトルが長いです。 今、手元にホイールのついたマウスがないのでサンプルが探しにくいのですが、こういう感じ（jQueryで横スクロールのアニメーションするサイトを作る方法 – ウェブロケッツマガジン）のものをnoJSでやってみたら、色々な仕様なのかバグなのかよくわからないことを発見した、というお話。 作り方は簡単でtransformである要素をグルっと270°回転させて（スクロールバーが上にあると気持ちが悪いので更にY軸で180°回転）擬似インラインフレーム化し、更にその中の要素を親要素と逆に回転させて綺麗に並べてやれば出来上がり。図などを書けば物凄く簡単に理解できると思いますが、もはやこれは本題ではないので割愛。 始めにつくったやつ （ちな

2度あることは３度あります。CSS Programming Advent Calendar 2012の24日目、1026です。Merry Christmas! 予告どおりギャンブルの定番スロットゲームです。 前回のフリースローで学んで、回転速度を相当遅くしてみたのですがどうでしょうか？ MAXBETボタンとコイン枚数の表示は飾りです。1枚しかbetできませんし、コインは返って来ません。そんな飾りはあるのにコイン投入口はありません。 大当たり（大したことないですが一応）は777だけです。謎の小当り的なもの（パネルの表示がちょっと変わる程度）が結構あります。 いつも通りChromeのみの動作確認です。 適当な解説 基本的にはフリースローと同じ 小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば

CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか？ さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない（という言い訳で若干面倒くさい）ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画

CSS Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です（今自分で考えました）。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput（ここでは其れに対応するlabel）を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重

全てと言いましたが、当方アンドロイドはあまり詳しくないので、そこで崩れたらゴメンナサイ。 HTML5を捨てる HTML5なんて使うのはやめましょう。HTML4.01 Transitional、XHTML1.0 Transitionalあたりでいいです。 CSSを捨てる cssなんてブラウザごとに違いが出るものを使うのをやめましょう。テーブルレイアウト最高です。 裏ワザ カンプをjpg1枚で書き出し→後はmapでリンクをつけよう！ これであなたもハッピーコーディングライフがおくれるよ！

CSSプログラミングの新作としてインベーダーゲームを作っていたんですが、途中で心が折れて中途半端なまま投げました。 [ incomplete ] CSS Invaders インベーダーを作りたかったというのはわかっていただけると思います。 敵の横移動が絡むと予想以上に自機の動きや位置が綺麗にできず、面倒くさくなって投げちゃったってとこです。 打つシステムとしては、敵をラッピングしているlabelを縦長に伸ばして、敵を直接クリックせずとも、その延長線上をクリックすると打った風になるという感じです。 この説明では何を言ってるか全くわからないと思うので、ソース見てください。 こういった、クラス名だけ変えて延々繰り返しみたいなコードを書くときはSCSSはほんとうに便利ですね。人力では絶対書きたくないです。 お暇な方、興味のある方は、forkして調整・機能追加してみませんか？ 『皆で作ろう、CSSイ

あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです

アドベントカレンダー以外の記事を書かなくなってしまったブログです、こんばんは。 そんな訳で、もっとチラシの裏っぽいところが欲しくてtumblrで書いてみたりもしていたのですが、結局自分で作りました。 1026.tv tvに特に意味はなく、たまたま他所に取得されてなかっただけです。本... webの中心でスタイルガイドの必要性が叫ばれていまして、あのCodeGridでもStyleDocco、KSSの導入方法が立て続けに紹介されている今日このごろ。 そんな中、StyleDocco、KSSはともかく、kss-nodeのデフォルトテンプレートが非常に残念な感じになっており、「悪くないの...

アドベントカレンダー以外の記事を書かなくなってしまったブログです、こんばんは。 そんな訳で、もっとチラシの裏っぽいところが欲しくてtumblrで書いてみたりもしていたのですが、結局自分で作りました。 1026.tv tvに特に意味はなく、たまたま他所に取得されてなかっただけです。本... webの中心でスタイルガイドの必要性が叫ばれていまして、あのCodeGridでもStyleDocco、KSSの導入方法が立て続けに紹介されている今日このごろ。 そんな中、StyleDocco、KSSはともかく、kss-nodeのデフォルトテンプレートが非常に残念な感じになっており、「悪くないの...

アドベントカレンダー以外の記事を書かなくなってしまったブログです、こんばんは。 そんな訳で、もっとチラシの裏っぽいところが欲しくてtumblrで書いてみたりもしていたのですが、結局自分で作りました。 1026.tv tvに特に意味はなく、たまたま他所に取得されてなかっただけです。本... webの中心でスタイルガイドの必要性が叫ばれていまして、あのCodeGridでもStyleDocco、KSSの導入方法が立て続けに紹介されている今日このごろ。 そんな中、StyleDocco、KSSはともかく、kss-nodeのデフォルトテンプレートが非常に残念な感じになっており、「悪くないの...