CSS Stopwatch (CSS Programming Advent Calendar 2012)
CSS Programming Advent Calendar 2012の2日目です。 まだ2日目ですし、あんまりややこしくないものをやろうと思ってストップウォッチを作ってみました。 CSS Stopwatch ダウンロード 右上のボタンでスタート、ストップ、リセットです。 上部中央のランプは色なしがリセット状態、青がスタート（カウント中）、赤が停止中を表します。 左のスイッチでは数字部分のカウントスタイルの変更ができます。これはリセット状態でないと変更できません。 :checked擬似クラス間接兄弟セレクタCSS CountersCSS 3D TransformsCSS AnimationsCSS GradientsRoot emViewport percentage lengthpointer-eventscalc()などを使っています。 IE 10, Firefox（17で確認）,
Internet Explorer 10のCSS 3D Transforms
とうとうWindows 7向けのIE 10が公開されましたね！（これを書いている時点ではRelease Previewですが） IE 10ではCSS 3D Transforms, Animations, Transitionsなどが-ms-なしで使えるようになりました。素晴らしい！ というわけでさっそく試してみたわけですが、どうもおかしい。表示はできるんですが、アニメーションやトランジションしたときに立体的に見えない。 調べてみるとMSDNに次のような記述が。 Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer
CSSの小数点以下の数値を各ブラウザはどのように解釈するか
CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づらいかもしれませんが、我慢してください。 なお、これはどうレンダリングされるかなどは考慮していません。 その指定がどう解釈されるかだけを調べたものです。 指定した値についてですが、但し書きがない場合は1.5555555555です。 Percentageフォントサイズをパーセンテージ指定。
WordPressで任意の文字列から投稿やタームのURLを取得
WordPressの「Wiki Page Links」というプラグインを改造していたのですが、そのときのメモです。 このプラグインは[[キーワード]]という書式で固定ページのタイトルに同じものがあれば自動でリンクしてくれるのですが、これの検索範囲を任意の投稿タイプにしたかったのです。 それと、違う書式で（たとえば{{キーワード}}みたいな感じ）で任意のタクソノミーからタームを検索してリンクする、というのもやりたかった。 文中からの検索や置換は元のプラグインのものを流用するとして、問題はキーワードから投稿のURLとタームのURLを探し出すところでした。 // キーワード $link_target_title = html_entity_decode('探したいキーワード', ENT_QUOTES); // リンク先URL $url = null;投稿の場合 // 公開されている投稿タイプ $
WordPress のプラグイン「Types」の日本語ファイル | Unformed Building
WordPress のカスタム投稿タイプ、カスタムタクソノミー、カスタムフィールドをまとめて管理できるプラグイン「Types」の日本語ファイルを作ったので公開しておきます。 Types Plugin – WordPress Custom Post Types and Custom Fields WordPress › Types – Custom Fields and Custom Post Types Management « WordPress Plugins このプラグインは 大曲さん (@jim0912) に教えてもらいました。 試してみると結構使いやすそうだと思いました。 が、日本語ファイルはあるものの何故かすごく中途半端だったので、できる範囲を翻訳しておきました。 ダウンロードは以下からどうぞ。 Types 1.0.4 向け日本語ファイル 注意事項など 翻訳ファイルへのパスは
meter要素のスタイリングについてのメモ 2012年10月
2011年1月27日に「meter要素のスタイリングについてのメモ for Webkit & Opera」という記事を書きましたが、先日リリースされたFirefox 16もmeter要素に対応し、またWebkitの指定方法も変更されていましたので改めてメモしておきます。 なお、前回同様にOperaについてはスタイリングの方法が分かりませんので（まだないっぽい）、WebkitとFirefox向けの指定方法となります。 時間のある方は前の記事も読んでおくと理解しやすいかと思います。 Webkit向け::-webkit-meter-inner-elementこれはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。 meter要素の中の部分を指定します。::-webkit-meter-barメーター自体を指す擬似要素です。バーの背景などはここで指定します。 以
GoogleモバイルサイトやDisney.comのオフキャンバスっぽいメニュー
Googleのスマートフォンサイトがリニューアルされたというので見てみたら、メインメニューの表示方法が面白い感じになっていたので自分でも作ってみました。 ちなみに、先日レスポンシブウェブデザインに変更したDisney.comも、表示幅が1024px以下だと似たようなメニューの表示方法になります。 作ったものは以下。 オフキャンバスメニュー サンプルなのでHTMLは適当に。 実際にはもっと複雑になるでしょうが、動きを試すためのものなのでこんな感じで。 <div id="nav" class="globalnav"> <a href="#">Navigation</a> </div> <div id="main" class="content"> <div class="switcher"> <button id="toggleMenu">☰</button> </div> Mai
auto heightなCSS Transitions
要素の高さを0からautoまでCSSでトランジションさせたいと思って色々試してみました。 試した順に書いていきます。 例として横並びのドロップダウンナビゲーションを使います。 こういうのはユーザビリティ的にどうなのとかそういう話は今回の本題じゃないので置いておきます。 動作サンプルとして違いが分かりやすいので選んだだけです。 HTMLは次のようにしました。最小構成だと大体こんな感じになるかと思います。 <nav class="global"> <ul> <li class="dropdown"> <a href="#">Lorem</a> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <!-- 3つまで繰り返し --> </ul> </li> <li class="dropdown"> <a href="#">Ipsum<
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
円や多角形をランダムに配置する背景をSVGで作る
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
datalist要素
テキストボックスに入力するとき、ユーザーに入力候補を表示してあげることのできる要素です。 個人的には早く普及するといいなと思っています。 4.10.10 The datalist element — HTML5 ブラウザの対応状況Internet ExplorerIE 10から対応。datalist object (Internet Explorer)Mozilla FirefoxFirefox 4から対応。datalist - MDNGoogle ChromeChrome 20から。Changeset 114545 – WebKitこのへんかなあ。 「datalist landed in Chrome Canary - HTML5Rocks Updates」に、Canaryで使えるようになったときの告知もある。Safariまだ。たぶん次のSafari 5.2ですかね。Opera一番古いの
そのベンダー接頭辞はいつまで書くの？
ベンダー接頭辞（プレフィックス）については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない（使われることもない）であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった（終わりつつある）のに、なんでそれしか書いてないの」と思うことが結構あります
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
