[翻訳] MCSS (Multilayer CSS) | Unformed Building

2013/12/19 49 users オリジ フル ドキュメント 翻訳 タイトル

これは BEM Advent Calendar 2013 19日目の記事です。 タイトルに書いてある通り、Robert Haritonov による MCSS のドキュメントを日本語訳しました。 ほぼ同内容のものをプルリクエストしてあるので、そのうち本家でも公開されると思います。 英語版があったので基本的には英語版から日本語訳したのですが、英語版で意味がよく分からない部分があって、そういうのはオリジ... 続きを読む

:nth-* 擬似クラスのおさらいメモ | Unformed Building

2013/05/07 25 users ntH INTEGER 構文 引数 擬似クラス

:nth-* 擬似クラスの引数の理解がいまいちだったのでおさらい。 構文について。 ここでの INTEGER は [0-9]+ である。 nth : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* ; n は 0 もしくは正の... 続きを読む

要素内容に依存する幅の指定について | Unformed Building

2013/04/15 52 users 指定 Safar MdN 草案 Firefox

要素内容に依存する幅の指定についてのメモです。 これらは CSS basic box model (草案) に記載されており、MDN のページ に分かりやすく説明されています。 本来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。 2013年4月現在、幅の指定として使えるブラウザは Firefox と Google Chrome です。Safar... 続きを読む

CSS と SVG で曇りガラスのような効果を作る | Unformed Building

2013/03/01 132 users SVG CSS Firefox カラス ブラウザ

2011年の9月に CSS と SVG filter でガラスっぽい効果をつける というのを書きましたが、これは Firefox のみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品 Frosted glass effect with CSS & SVG 背景画像には WetFoto.com による #246 Wetlook with Beaut... 続きを読む

背景として使用される CSS グラデーションはどの範囲に描画されるか | Unformed Building

2013/01/21 25 users 翻訳 用語 仕様 参考 表記

背景として使われる CSS グラデーションが描画される範囲はどのように決定されるのか、仕様を読みながら考えてみたいと思います。 参考にしたのは 2012年4月17日版の CSS Image Values and Replaced Content Module Level 3 です。非公式の日本語訳 もあります。 この記事に書いている範囲は自分で訳したので、上記の翻訳とは用語の表記などが異なっていま... 続きを読む

CSS 仕様のプロパティ値の構文の読み方 | Unformed Building

2012/11/27 21 users 構文 CSS プロパティ値 仕様 読み方

値の部分のキーワードは文字通りに記述しなければなりません。また、スラッシュ (/) やコンマ (,) も同様に文字通りに記述しなければなりません。 "<" と ">" で囲まれているものはデータ型を表します。基本的にリンクがあるので、その型がどういうものはリンク先の説明を参照すること。 いくつか単語が並置されている場合、その順序通りに全て記述しなければなりません。 バー (|) は2つ以上の選択肢... 続きを読む

CSS の小数点以下の数値を各ブラウザはどのように解釈するか | Unformed Building

2012/11/21 81 users CSS Firefox 単位 数値 バージョン

CSS で小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10 となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づら... 続きを読む

最近の CSS 実装でベンダー接頭辞の外れたもの (2012年11月) | Unformed Building

2012/11/07 69 users ベンダー接頭辞 CSS radial-gradient 実装

Firefox 16, Opera 12.10, そして Internet Explorer 10 がリリースされました (Windows 7 の IE10 はまだですが)。 その中で、CSS のベンダー接頭辞が外れたものをまとめてみます。 CSS Gradients liner-gradient(), repeating-linear-gradient(), radial-gradient(),... 続きを読む

meter 要素のスタイリングについてのメモ 2012年10月 | Unformed Building

2012/10/12 17 users meter WebKit Opera Firefox 要素

2011年1月27日に「meter 要素のスタイリングについてのメモ for webkit & Opera」という記事を書きましたが、先日リリースされた Firefox 16 でも meter 要素に対応し、また Webkit の指定方法も変更されていましたので改めてメモしておきます。 なお、前回同様に Opera についてはスタイリングの方法が分かりませんので(まだないっぽい)、Webkit と... 続きを読む

ボーダーで三角形などを作るときには transparent ではなく rgba() で | Unformed Building

2012/10/03 66 users div borde border-width height

よく CSS のボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういう HTML と CSS で三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div> .test1 { width: 0; height: 0; border-width: 0 200px 200px 0; borde... 続きを読む

CSS の書き方についてのメモ | Unformed Building

2012/09/25 355 users CSS メモ 書き方

どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button cla... 続きを読む

サイト制作時のメモ 2012年前半 | Unformed Building

2012/08/16 259 users サイト制作時

ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、仕事でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般 HTML... 続きを読む

円や多角形をランダムに配置する背景を SVG で作る | Unformed Building

2012/07/19 20 users 多角形 SVG Chr Polygon ブラー

以前に サークルがランダムに配置される背景を SVG で作る というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chr... 続きを読む

CSS の勉強中に困ったら | Unformed Building

2012/07/02 726 users CSS プロパティ 目次 仕様 CSS3

CSS の勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認する とりあえず W3C を見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate 現在の状況と仕様書の目次。 CSS3の日本語訳集 – ... 続きを読む

そのベンダー接頭辞はいつまで書くの？ | Unformed Building

2012/05/14 151 users ベンダー接頭辞 接頭辞 プレフィックス 接頭辞つき CSS

ベンダー接頭辞(プレフィックス)については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状の CSS についての話です。 新しい CSS モジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。... 続きを読む

CSS で使用できる角度の単位 | Unformed Building

2012/03/23 18 users CSS 角度 単位 gon こん

deg degree, 度数法。 360 で円を一周するお馴染みの表し方。 grad グラード。ゴン(gon)、グレード(grade)、グラディアン(gradian) とも。 1直角を 100 とする単位。 つまり 90deg の 1/100 が 1grad になる。360deg は 400grad で表すことができる。 rad ラジアン(radian)。弧度法。 円周上でその円の半径と同じ長さの... 続きを読む

:window-inactive 擬似クラスと animation-play-state | Unformed Building

2012/03/07 12 users 擬似クラス

まあタイトル通りなんですが、ブラウザウィンドウが非アクティブになったらアニメーションを停止したいという話です。 今は Firefox をメインに使っているんですが、要素をアニメーションさせたりすると Chrome や Safari に比べて結構な負荷がかかるのです。 アニメーション回数を無限に指定していると、それを表示しているタブが最前面にある限り、ウィンドウがアクティブであろうとなかろうとアニメ... 続きを読む

CSS Transforms についてのメモ | Unformed Building

2012/01/24 275 users メモ 自信 範囲 デモページ 自分

既に色々なデモページが作られていたり、実用されていたりする CSS Transforms ですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transforms は 2D と 3D とで別になっていますが、将来的には SVG Transforms と合わせて一... 続きを読む

vw, vh, vm(vmin) という単位についての覚え書き | Unformed Building

2011/12/19 35 users vmin 覚え書き 単位

CSS Values and Units Module Level 3 の Viewport-relative lengths (Viewport-percentage lengths) についての覚え書きです。 これは新しく追加された長さの単位です。 CSS Values and Units Module Level 3 – 5.1.2. Viewport-relative lengths CS... 続きを読む

自分用 CSS スタイルガイド | Unformed Building

2011/12/12 40 users CSS インデント セレクタ Media スタイルガイド

2011年12月時点での CSS を書くときの自分内での決まりごとを書いておきます。 まあこういうのは自分(やチーム)が分かりやすければ何でもいいと思いますけどね。 基本的に自分以外は編集することがないので、結構好き勝手に書いてます。 インデント・改行・空白 基本的にセレクタはインデントなし。 宣言(プロパティと値)の部分はセレクタの開始位置から半角スペース2つ分インデントする。 @media 内... 続きを読む

CSS でつまづいたポイント ― transparent, transition, box-sizing | Unformed Building

2011/11/24 84 users transparent Ｔｒａｎｓｉｔｉｏｎ CSS 過去

CSS でつまづいたポイント ― transparent, transition, box-sizing 過去に CSS でつまづいたポイントとかメモしておこうと思います。 このくらい分かっとけと言われそうですが、まあ自分はその程度だということで。 transparent について CSS グラデーションで何か黒くなるなーと思ったら、transparent を使っていないかどうか見てみましょう。 ... 続きを読む

SVG & CSS でアンサガのスキルパネルのようなメニューを作る | Unformed Building

2011/10/28 44 users アンリミテッド SVG サガ ウェブページ CSS

「SVG にチャレンジ！ 第1回」です。第2回があるかは分かりません。 インライン SVG を使って「アンリミテッド：サガ」というゲームのスキルパネル風のメニューを作ります。 実物は "アンリミテッドサガ スキルパネル" とかで画像検索してみてください。 このスクエアさんの「アンリミテッド：サガ」というゲームがすごく好きでですね……以前からこれをウェブページとして作ってみたいと思っていたんですよ。... 続きを読む

CSS アニメーションの基礎 | Unformed Building

2011/10/07 531 users 基礎

今さらながら CSS animation の使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011 CSS animations – MDN 上のは dev.w3.org にある、2011年7月25日版のエディターズドラフトです。 ちなみに... 続きを読む

斜めグリッドを使ったデザインのウェブサイト集 | Unformed Building

2011/09/22 138 users インパクト ウェブサイト集 基準 デザイン サイト集

ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなので Diagonal Grid Based Webdesign とでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica Cal... 続きを読む

CSS3 での背景指定方法のまとめ | Unformed Building

2011/08/23 205 users プロパティ CSS モジュール ボーダー CSS3

CSS であれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3 ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3 現在の仕様です。 CSS 背景 & ボーダー モジュール ... 続きを読む