CSS Category Archive

CSS カテゴリの記事一覧。(3 / 13 ページ)

CSS だけで作るタブ切替ユーザインタフェース

CSSタブ切替の UI は、よく使われますが、JavaScript で実装するケースが多いので、今回は全部 CSS のみで実装してみるテスト。目新しいことをやっているわけではありませんので、すでにやられている方もいるかもしれませんが気にせずいきます。

使うのは :target 疑似クラスで、IE9 以降は対応していますので、比較的動作環境も広いし、フラグメント識別子つきのリンク (要するに #hoge がついたリンクです) で、各タブを直接指定したリンクが簡単に張れるので、JavaScript でやるより楽に使い勝手のよいタブ切替が実装できる場合もあります。

Posted by:

HTML5 input type="range" で作る 「へぇボタン」

へぇボタンHTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。

昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作ってみました。完全な再現ではなくて、ボタンを押すと input type="range" で表示したスライダーの数値が上がるっていう、ちょっとだけ実用的 (?) なサンプルです。

Posted by:

Firefox 21 が正式リリース、main 要素などに対応

Firefox本日 (私の環境では 23時ごろ自動更新がきました)、Firefox 21 が正式にリリースされましたが、HTML5 関連では、main 要素への対応、style 要素の scope 属性への対応が行われました。また、JavaScript 関連では E4X が完全に削除され、使用不可になりました。

Posted by:

Firefox 23 より text-decoration: blink; による点滅効果が削除

Firefox4月のはじめに、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration: blink; による点滅エフェクトのサポートをもうやめようぜっていう提案が承認されて、今後リリースされるバージョンに反映されることが確定したようですと書いたのですが、今、Firefox 23 のサイト互換性情報を見ていたら、実際に削除されたようです。

Posted by:

CSS からベンダプレフィックスという仕組みが消える日

Google Chrome本の虫さんで、「Blink、新機能に対して新たなベンダープレフィクスを追加しない決定」 という記事が上がっていた (ちなみに border-radius は現状、-moz- も -webkit- も不要で使えますよ) のですが、これ、確か Blink レンダリングエンジンが発表された時から FAQ とかに書かれていましたよね? なので今さらだと思いますが、当 Blog では当時触れていなかったし、いい機会ですので簡単に書いてみたいと思います。

Google の Chromium プロジェクトにおいて、レンダリングエンジンを Webkit から、Webkit をフォークして開発された新しいオープンソースレンダリングエンジン 「Blink」 に切り替えますよとの発表がされたのは、今年の 4月 4日ですが、その時に Blink プロジェクトのページもあわせて公開されています。

Posted by:

CSS で作る Tumblr モバイルアプリ風メニュー

1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。

Tumbler の Android アプリ (Tumblr for Android) の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript (jQuery 使用) で再現してみました。実際のサンプルは下記に。

Posted by:

text-decoration: blink; と blink 要素終了のお知らせ

Firefox大昔の名残で、Netscape 系ブラウザと Opera しかサポートしていませんので、今どき使っている人の方が珍しいどころか、知ってる人も少ないんじゃないかとは思いますが (携帯サイト作ってる人とかだと使うのかな...)、Bugzilla@Mozilla で、Gecko レンダリングエンジンにおける blink 要素と CSS の text-decoration プロパティに対する blink 値指定のサポート (点滅エフェクト) をやめようぜっていう提案がされ、それが承認されて、今後リリースされるバージョンに反映されることが確定したみたいですね。

Posted by:

HTML5 ロゴがクレイジーに迫ってくる何か。「Golden Hat Contest」 に応募してみた

HTML5hat.io ってサイトで、デベロッパーやクリエイター向けのコンテスト 「Golden Hat Contest (ゴールデンハット コンテスト)」 っていうのが開催されています。

その、1st Contest の方のお題が 「HTML5 ロゴを使ったクレイジーな何か。もしくは、ハット (hat.ioロゴ) を使ったクールな何か。」 とのことでしたので、クールなのは無理だけど、クレイジー (技術的な意味じゃなくて) なやつなら行ける! ってことでちゃちゃっと作って応募してみました。

Posted by:

はてブが使いにくければ User CSS 書けばいいじゃない

はてブはてなブックマーク (はてブ) のリニューアル後、確かにさらーっと一覧を眺めたい場合には見づらくなりましたよね。サムネイル邪魔だとか、色々ありますけども、サービス提供側も色々理由があってデザインを直してるんでしょうし、デザインが大幅に変わったあとは今までのに慣れてた関係もあって使いづらいわ~的なお話が出てくるのは仕方ないこと。

で、文句言っても元のデザインに戻るわけじゃなし、どうしても見づらいっていうなら自分で直しちゃえばいいじゃんってことで、はてブ用の User CSS 書きましたのでシェアします。

Posted by: