HTML/CSS Category Archive

HTML/CSS カテゴリの記事一覧。(4 / 17 ページ)

CSS だけで作るタブ切替ユーザインタフェース (float 使用版)

CSS1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。

先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。

Posted by:

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

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

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

Posted by:

Google が Microdata による組織ロゴの意味づけに対応したそうなので

GoogleGoogle ウェブマスター向け公式ブログで紹介されていましたが、Microdata (schema.org) による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。

ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。

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:

Google Drive に Web ページから簡単にファイルを保存するボタン

Google ドライブGoogle Developers Blog で、Web ページ上にある画像やファイルを、ワンクリックで Google Drive に保存できるボタン、「Save to Drive」 ボタンが紹介されていました。

ボタンを設置する簡単なコードを追加するだけで、すぐに自分の Web ページに、このボタンを設置することが可能です。

Posted by:

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

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

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

Posted by:

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

HTML5ちょっと前に 「hgroup 要素が HTML5 の勧告候補 (Candidate Recommendation) から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね (Editor's Draft では)。

ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。

Posted by: