公開日2013-12-25タグAdvent CalendarBEMBEM Advent Calendar 2013 23 日目のエントリです。初日から日をまたいで公開しているので今さら日付通りに書けなくてもなんの罪悪感もありません。本当にすみませんでした。 突然ですが、BEM にロゴがあることをみなさんご存知でしたか？ bem.infoのトップページにロゴが載っているのですが、何種類かのロゴがリロードするたびに変わります。今回はそのロゴをざざっとご紹介しようと思います。 なんなんですかね、このセンス。面白いです。 僕が 100 回くらいリロードして出てきたロゴはこれが全部でした。もしかしたらまだ他にもあるかもしれません。その時は@o_tiまで教えていただければと思います。 もしかして公式ロゴって存在してない？ 上記でご覧頂いたように、BEM のロゴってだいぶ自由です。なので、僕も BEM
(Photo by sada_h) この記事は CSS Property Advent Calendar 2013 18日目のエントリです。 今回はCSSのテストについて書きます。 仕様と実装 CSSの仕様はW3Cによって策定が進められ、その仕様を元にブラウザベンダが実装を行います。 仕様がどうあれ、CSSのプロパティがどういった風に振る舞うかを決めるのはブラウザの実装次第です。 「同じスタイルを当ててるのにブラウザによって表示が違う…」なんて経験をしたことはありませんか？ 各ブラウザにCSSが正しく実装されるには、その仕様に対してのテストケースが必要です。仕様とそのテストケースを元に実装が行われれば、どのブラウザでも同じ様に表示されることが期待できるようになります。 仕様が勧告に至るにはテストケースをパスする必要があります。テストがなければいつまで経っても勧告に至りません。 CSSの仕様
CSS Property Advent Calendar 19日目のエントリ。 最近自分の中でホットなCSSアニメーションについて。 なぜCSSアニメーションか jQuery.animateでもアニメーションは出来るのに、わざわざCSSでやる理由は何か？ という内容で書こうと思っていたのだけど、11日目の Toshimaru さんのエントリと内容が丸被りしてしまった。 しかも俺の書く拙い文章よりもはるかに詳しくわかりやすく書かれていて申し分無い。 つまり俺はお呼びでないというわけだ。 仕方がないので、一発芸します。 CSSアニメーション一発芸 Snowfall!! クリックすると雪が降るよ。 JavaScript不使用 PCは Firefox, Chrome, Safari で動作確認済 スマホは未確認 雪にマウスオーバーすると・・・？ ソースコードはこちら おまけ 作ったはいいけど没にな
CSS Custom Properties for Cascading Variables ModuleはCSSで変数を使うために、その変数を定義するためのプロパティについての仕様だ。 これが先日Firefox Nightly 29で実装されたらしく、ちょっとお触りしてみた。これについては同じようにお触りされた記事、Playing around with CSS variables - "custom properties"が良かったのでこっちも参照するのをおすすめする。 基本的な使い方 CSSで変数というと、SassやLESSなどのプリプロセッサとして使うことができ、そのあたりで使ったことがあるのであれば、CSSerの人でもなんとなく馴染みやすい仕様かもしれない。とはいえ定義とその参照方法はSassやLESSのそれとは全然異なる。 /* 変数を定義する。 `var-`の後が参照する時のキ
この記事はBEM Advent Calendar 2013の22日目の記事です。 こちらの記事を読んで、初めてBEMを知りました。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。 とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。 よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
21日も遅くになりましたが、BEM Advent Calendar 2013の20日目の記事です。 モディファイアをどうやって付けるのがいいかなーとか悩んでるので書いておきます。 悩んでるだけなので、特に「これにしろ！！」とかはありません。 画像が左に来て、右にテキストが来るようなブロックを作った際に、画像の左右を反転させるモディファイアを作るとします。 方法1.マルチクラス関係無いですが、マルチクラスする際の区切りの半角スペースを２つにすると気持ち見やすいです。 1-1.元の名前にハイフン２つ付けて、その後に意味を付けます（この時はreverse）他のブロック、エレメントで使用させないように元の名前にプラスする。 JavaScriptで操作する時は、元の名前を書かないといけないので、ちょっと面倒かもしれない。 1-2.元の名前にハイフンを２つ付けて、key-value的な感じにするkey
【CSS Property Advent Calendar 2013 — 22日目】 最近background-clipを愛用しているので何ができるのか実例を紹介。 background-clipとは background-clipは背景の適用範囲を指定するプロパティです。 指定は至ってシンプルなもので、 要素にborderとpaddingとbackgroundが設定されている場合に backgroundをどこに表示するか決めることしかできません。 border-box 背景をボーダーボックスに適用する（初期値） borderに重なる位置からコンテントボックスにかけて padding-box 背景をパティングボックスに適用する borderを避けてpaddingの位置からコンテントボックスにかけて content-box 背景をコンテントボックスに適用する borderとpaddingを避
![[CSS3] background-clipの実例紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbe468e6e3c1d88abdb0fc13eff84e8e41bd795/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2013%2F12%2Fbackground-clip1.png)
CSS Property Advent Calendar 2013 の15日目です！ 今回は、 現在 Technical Report 段階の CSS-Speech Module を紹介します！ CSS-Speech Moduleってなに？ CSS （ Cascading Style Sheets ）は、（ HTML や XML などの）マークアップ文書から， スクリーン, 紙, 発話（ speech ）, 等々 の媒体への具現化（ rendering ）を記述するための言語である。 Speech モジュールは、作者が，発話合成を通して, 加えて 随意で音声指示も利用して，文書の音声化（ rendering ）を宣言的に制御できるようにするための、聴覚 CSS プロパティを定義する。 この標準は Voice Browser Activity との協同の下，開発された。 扱いとしては、med
BEM Advent Calendar 2013 1よ…13日目の記事です。 BEM Advent Calendar 2013が14日時点で18日の記事がアップされていたり、逆に13日の記事が14日にアップされたりと時空が歪んていますが、気にしないことにします。 この記事では、BEMを取り入れたマークアップがどんなものになるのか、Qiitaのホーム画面(ログイン後)を元に考えていきます。 なお、BEM自体についての説明は、BEM Advent Calendarの各記事やBEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号、CodeGridのBEMによるフロントエンドの設計 - 基本概念とルールを見ていただけるようお願いします。 これから載せるソースのガイドライン BlockとElementの区切りにはアンダースコア2個(__)を使用 block__elemen
メリークリスベム。 BEM Advent Calendar 2013 の14日目の記事です。 わざわざBEMを持ちださなくても、クラス名には 可読性を高めるためだけの区切り 親子間を示す区切り 修飾句との区切り の3種類の区切りが発生するこはままあることかと思います。 2つ目の区切りのあるクラスは、親に依存したパーツであったり、3つ目の区切りのあるクラスは、拡張されたパーツであったりするため、3種類の区切りを区別させたい欲求を持ったことあるマークアッパーは少なくないんじゃないかと思います。 いつだか僕はこれを解決するために 親子間は ハイフン2つ ・・・ parent--child 修飾句は ハイフン1つ ・・・ element-modifire 可読性を高めるための区切りはキャメル ・・・ className というBEMに似た命名規則を夢想まではしましたが、こんなの他人が見たら、キモが
CSS Property Advent Calendar 2013 14日目の記事。 明日は @watilde さん。 先日のHTML5 CONFERENCE 2013 の中で "CSS Regionsを使った新しいCSSレイアウトを作る方法" というセッションを聞いて依頼、CSS レイアウトが気になったので少し調べてみました。 今回は Flexible Box Layout, Multi-column Layout, CSS Regions, CSS Shapes を調べました。 各 CSS レイアウト の概要を書く際、Microsoft Developer Network の CSS セクション を参考にさせて頂きました。 参考サイトにデモが上げられているものが、こちらに関しては Google Chrome Canary 動作を確認しました。 また、Canary で各サイトのデモを確認
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
というわけでHTML5 Advent Calendar 2013の記事です。忙しいので昔書きかけた記事を完成させただけなのは内緒です★ 本題はよく読んでツッコミを入れようからです。 Schema.orgがやっている「分類すること」のスゴさ Microdataという仕様で主に使われるSchema.orgというものがあります。これのWebサイトを見てるとそんなことまで考えてるのか…と思うことが書いてあるので紹介しようと思います！ このSchema.orgという取り組み、なにげにすっごい面白いです。細かい説明は置いておいて、私の考えというか着目しているところを書きますね★ 要はこのSchema.orgというものは私の解釈した限り、全てのWebページそれぞれが扱っている内容がなんというジャンルに分類されているのかを決め、更にその内容の情報一つ一つも何らかのルールに当てはめていこうというものです。分
![[ネタ]細かすぎるSchema.orgの仕様にツッコミを入れていくよ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e45bf127619701d1fb1c7a65c8a932689f3db0c/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F12%2Fwelcometo-schemaorg-world-01-150x150.png)
CSS Property Advent Calendar 2013の12日目の記事です。 もともと:futureや:pastなどを考えていたのですが、9日目にTime-dimensional擬似クラスについて調べてみたで書かれています*1ので、今日はSVG 2で検討されているプロパティを2つ見てみます*2。 paint-orderプロパティ SVGの描画モデルでは、図形やテキストは、まずfillが描画され、次にstrokeが描画され、その上にmarkersが描画されます（SVG 1.1ではRendering ModelのPainting shapes and textを参照）。 ですが、時と場合によってはこの順番を変えたい時があります。特にfillとstrokeの順番を変えたいときがあります。strokeは、strokeの中心がオブジェクトの縁（アウトライン）にあうように描画されるので、太
目次 なぜCSSアニメーションなのか？ パフォーマンス的観点 CSS vs jQuery1. CSSによるアニメーション2. jQueryによるアニメーションブラウザ対応状況CSSアニメーションの書き方どこからアニメーションの着想を得るか最後に参考CSS Property Advent Calendar 2013の11日目の記事としてCSSアニメーションのプロパティを紹介をします。 なぜCSSアニメーションなのか？さて本ブログでもタイトルやアイキャッチ画像のイメージの表示にちょっとしたCSS3アニメーションを採用しています。ほんのちょっとのCSSの記述なんですがサイトがイイ感じにリッチに見えてとても気に入ってます。 jQueryなんかでも.animate()を使えばアニメーションができますね。ではなぜCSS3アニメーションなのか？ そこからエントリを始めてみたいと思います。 パフォーマンス
追記（2018年4月13日）：紹介した機能の実装が進みました（Can I use：allプロパティ、initial、unset）。 一方で文中で取り上げたScoped Stylesheetsは仕様から削除されてしまいました。 このエントリはCSS Property Advent Calendar 2013の10日目のものです。 すみませんすみません日付勘違いしてました。ほんと申し訳ありません…… 今回はradial-gradient()のMixin…は作りません。プロパティじゃないしね。ふつうのプロパティと値についてご紹介しようかと。 CSS Cascading & Inheritanceのall, initial, unset Firefox 27あたりからallプロパティとunset値なんてものが実装されました。CSSのCascading and Inheritanceモジュールで定義
この記事は BEM Advent Calendar 2013 の１２日めの記事です。 BEM は優れた方法論だと思うが、大変めんどうくさいことを強いてくることがある。この記事ではそんなめんどうくさい BEM を、少しでもめんどうくさくない BEM に変えられるかどうかを思索するものである。なお、めんどうくさくなくする過程で「それは既に BEM ではな」くなっている面もあると思うが、そこは承知の上なので念頭に置かれたし。 CSS セレクターにタグを書くのは本当にダメなのか 例えば以下のコードがある。 <section class="item-list"> <h1>アイテム一覧</h1> <ul> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </section> 上記のコードはシンプルなので、各要素にスタイルを当てるとしたらこのような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
