タグ

ブックマーク / no1026.com (3)

  • 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

    kyaido
    kyaido 2013/12/18
  • 要素の重なりについて本気出して考えてみた(z-indexとか何とかとか) – No.1026

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

    kyaido
    kyaido 2013/08/26
  • CSSのみ画像不要の影付き吹き出しの作り方3種を全然丁寧じゃなく列挙してみる – No.1026

    CSSのみ画像不要の吹き出しの作り方 昨日ゴロドクさんが改めて丁寧に解説にしていましたCSSのみ画像不要の吹き出しの作り方。 せっかく丁寧に説明されているので、基的な作りからはそちらを御覧ください。 CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる 影の付け方 せっかく吹き出しなので「影も付けて更にそれっぽくしたいたい!」と思う方もいらっしゃるかと思います。 ただ、これには割と癖がありませして単純にdrop-shadowをかければいいというわけではありません。吹き出しの▼部分に影がなかったり、影が被ったり、ずれたりしてしまいす。 パターン1:影を隠す 「影が▼と被ってしまうなら、被ってしまう部分を上から隠そう」という方法です。 こちらは以前Zumaさんが紹介していた方法です。 以下Zumaさんのブログを御覧ください。 影付きの吹き出しをスマフォ向けにCSSだけで作る方法 パタ

    kyaido
    kyaido 2012/10/05
    ボーダーで矢印つくるやつ
  • 1