kss-nodeのテンプレート作った – No.1026
webの中心でスタイルガイドの必要性が叫ばれていまして、あのCodeGridでもStyleDocco、KSSの導入方法が立て続けに紹介されている今日このごろ。 そんな中、StyleDocco、KSSはともかく、kss-nodeのデフォルトテンプレートが非常に残念な感じになっており、「悪くないのにこれじゃあ導入しにくい」なんて方もいらっしゃるのではないでしょうか。 かくいう私も、先日twitterにて「kss-nodeのデフォルトテンプレートが微妙すぎるのに、探しても全然見つからない。もっと、みんな作って公開すればいいのに。githubのとかいいよねぇ」的なことを話していたところ、CSSプログラマーに「おぬしがつくれば」と言われてしまいました。 その場では聞こえないふりをしたのですが、結局作ってしまいました。 kss-node-template-such-as-github kss-node
displayについて本気出してW3Cの仕様書読んでみた – No.1026
こんばんは。 CSS Property Advent Calendar 2013 8日目のエントリーです。 非常に地味な display のお話です。 なお、flexboxの話をし出すと、それだけで1エントリーくらいの分量になってしまうので、css2.1までの話をします。 flexbox関係は昨日担当の富田さんがまとめてくれてるので、そちらを参考にしましょう。 flexboxの旧仕様、改定仕様、現行仕様の一覧 « LINE Engineers’ Blog では、まずブロックとインラインを理解するためにボックスモデルから復習していきます。 ボックスの種類 w3cの仕様書では先に「ブロックレベル要素とブロックボックス」次に「インラインレベル要素とインラインボックス」といった感じで説明されていますが、ちょっと趣向を変えて、ブロックとインラインを対比しながら見てみます。 ブロックレベル要素とインラ
table系にはposition:relativeが効かない – No.1026
同じ事を書いている記事は他にもありますが、個人的に一番わかりやすくて細かいと思っていた記事が消えていたので。 というわけで、細かい話 は、ほぼ 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 で確認
noJSでもマウスホイールでスクロールできる横長のコンテンツを作ってみたら色んなことに出会った – No.1026
追記：2013年3月19日現在、Google Chrome 27.0.1438.7 dev では以下に書いてある不具合は既に解決されているようです。 タイトルが長いです。 今、手元にホイールのついたマウスがないのでサンプルが探しにくいのですが、こういう感じ（jQueryで横スクロールのアニメーションするサイトを作る方法 – ウェブロケッツマガジン）のものをnoJSでやってみたら、色々な仕様なのかバグなのかよくわからないことを発見した、というお話。 作り方は簡単でtransformである要素をグルっと270°回転させて（スクロールバーが上にあると気持ちが悪いので更にY軸で180°回転）擬似インラインフレーム化し、更にその中の要素を親要素と逆に回転させて綺麗に並べてやれば出来上がり。図などを書けば物凄く簡単に理解できると思いますが、もはやこれは本題ではないので割愛。 始めにつくったやつ （ちな
CSS SLOT – A GAME, noJS, ONLY CSS & HTML – No.1026
2度あることは３度あります。CSS Programming Advent Calendar 2012の24日目、1026です。Merry Christmas! 予告どおりギャンブルの定番スロットゲームです。 前回のフリースローで学んで、回転速度を相当遅くしてみたのですがどうでしょうか？ MAXBETボタンとコイン枚数の表示は飾りです。1枚しかbetできませんし、コインは返って来ません。そんな飾りはあるのにコイン投入口はありません。 大当たり（大したことないですが一応）は777だけです。謎の小当り的なもの（パネルの表示がちょっと変わる程度）が結構あります。 いつも通りChromeのみの動作確認です。 適当な解説 基本的にはフリースローと同じ 小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば
CSS Loupe（おまけ）とCSSプログラミングの制作について – No.1026
CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか？ さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない（という言い訳で若干面倒くさい）ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画
CSS FreeThrow – a game, noJS, only CSS and HTML – No.1026
CSS Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です（今自分で考えました）。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput（ここでは其れに対応するlabel）を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重
全てのブラウザで表示崩れをなくす魔法のコーディング方法 – No.1026
全てと言いましたが、当方アンドロイドはあまり詳しくないので、そこで崩れたらゴメンナサイ。 HTML5を捨てる HTML5なんて使うのはやめましょう。HTML4.01 Transitional、XHTML1.0 Transitionalあたりでいいです。 CSSを捨てる cssなんてブラウザごとに違いが出るものを使うのをやめましょう。テーブルレイアウト最高です。 裏ワザ カンプをjpg1枚で書き出し→後はmapでリンクをつけよう！ これであなたもハッピーコーディングライフがおくれるよ！
CSSプログラミング新作出来ませんでした – No.1026
CSSプログラミングの新作としてインベーダーゲームを作っていたんですが、途中で心が折れて中途半端なまま投げました。 [ incomplete ] CSS Invaders インベーダーを作りたかったというのはわかっていただけると思います。 敵の横移動が絡むと予想以上に自機の動きや位置が綺麗にできず、面倒くさくなって投げちゃったってとこです。 打つシステムとしては、敵をラッピングしているlabelを縦長に伸ばして、敵を直接クリックせずとも、その延長線上をクリックすると打った風になるという感じです。 この説明では何を言ってるか全くわからないと思うので、ソース見てください。 こういった、クラス名だけ変えて延々繰り返しみたいなコードを書くときはSCSSはほんとうに便利ですね。人力では絶対書きたくないです。 お暇な方、興味のある方は、forkして調整・機能追加してみませんか？ 『皆で作ろう、CSSイ
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
No.1026
No.1026
No.1026