atm_09_tdのブックマーク - はてなブックマーク

Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景
CSS珍百景 Calendar 2014 3日目の記事です。日をまたいでしまいましたが、書きます。すいません。今年の9月ごろにChromeとSafariで発現した珍百景です。 Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。ちなみに後述しますがFirefoxではちゃんと適用されます。ということで再現してみた以下の様なHTMLとCSSでこの現象は再現できます。 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. /*css*/ table { box-shadow: 0 0 10px black; padding: 10px; } tr { box-shadow: 0 0 10
atm_09_td 2014/12/04
chrome

css
リンク
今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。接頭辞としてプロジェクト名や世代などを付与
atm_09_td 2014/12/01
css

設計
リンク
BEMツールに触れてみる
BEM Advent Calendar 2013の2日目の記事です。本当はここ最近考えている命名ルールとか書こうかなとか思っていたのですが、「試して欲しい」という声があったのでよくわからないままbem toolを試すことにしました。今回作ったサンプルプロジェクトはgithubにアップしてあります。 BEMとはBEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。概念やルールについては以下を参考に調べてみてください。 http://bem.info/BEM-Methodology Definitionsの日本語訳CodeGridのBEMによるフロントエンドの設計基本概念とルール今回は、概念の部分ではなくbem.infoで提供されているbem tool
atm_09_td 2013/12/02
bem
リンク
もう知らないでは許されない!! 「ずっとjsdo.it使ってる」という人のためのjsdo.it情報まとめ
[追記] Gistに上げたコードをロードすることも出来るけど、日本語化ける。は修正されました！エディタ画面に追記jsdo.itで覚えておきたい10のこと | げことじ。をだいぶ前に書いたのですが、2012/11/01時点での僕が気づいた事を書いておきます。個人的にはSass, Lessが書けるのはいいなーとおもいます。目次ツールバーユーザープロフィール画面コードの詳細画面エディタ画面アカウント設定画面ツールバー(?)右上で日本語と英語の言語切替ができるようになったユーザープロフィール画面(ポートフォリオ)Works 自分の書いたコードからお気に入りをWorksに追加したり並び替えたりできる。Skills Editを押して自分のスキルを選ぶHot tags 自分がコードにつけたタグの比重Categorys 自分がコードにつけたカテゴリの比重HTML/CSS/JavaScript 自分が
atm_09_td 2012/11/01
jsdo.it
リンク
1