safari4 betaで実装されたCSS Animationを使ってみました。
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves ‘Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
なつかしのHTMLタグ「marquee」--CSS 3のマーキーを検証してみる - builder by ZDNet Japan
HTMLのマーキー マーキーの機能はInternet Explorerがバージョン2.0の時代に独自拡張したもので、<marquee>というHTMLタグで文字のスクロールを設定する仕組みになっている。現在でも、<marquee>タグはバージョン8（ベータ版）を含むInternet Explorerや、Firefox、Safari、Operaといった主要なブラウザでサポートされている。 しかし、W3CのHTMLやXHTMLの標準規格には含まれておらず、実際に利用される機会はほとんどないのが現状だ。 たとえば、<marquee>〜</marquee>でマークアップした文字は次のように右から左にスクロールを繰り返す。
contentプロパティでコンテンツを追加する（2）：FirefoxとSafariのCSS - builder by ZDNet Japan
IT部門のDXはこれだ！ IT運用管理新時代における最適な運用管理 の現場作り Microsoft 365のデータは安全か？ クラウド型アプリを採用する企業のための 包括的なデータ保護のありかたを解説 EDRトップランナー対談：後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る 中小企業のひとり情シスの現実 夢か幻か、はたまた現実か？ ヘルプデスク業務の週休4日制を考える アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる 次の一手はこれだ！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス 身近な改善の第一歩！ ニューノーマルな働き方を前提にした これからの時
テキストの書字方向に合わせて罫線や余白を挿入する--FirefoxとSafariのCSS - builder by ZDNet Japan
テキストの書字方向に合わせて罫線を表示する Firefoxは、Firefox 3から-moz-border-startと-moz-border-endというプロパティをサポートした。これらはテキストの書字方向に合わせて罫線を表示するプロパティで、-moz-border-startでは文頭の側に、-moz-border-endでは文末の側に罫線を表示する。 たとえば、-moz-border-startと-moz-border-endで罫線を表示すると次のように表示される。日本語のテキストは左から右に書き進むため、-moz-border-startで指定した赤色の罫線は左側に、-moz-border-endで指定した青色の罫線は右側に表示される。
フォームのインタフェースデザイン（3）--チェックボックスとラジオボタンのデザイン - builder by ZDNet Japan
チェックした項目のデザインを設定する 複数の選択肢から項目を選んでもらうときには、フォームのチェックボックスやラジオボタンを利用することができる。このとき、:checkedセレクタを利用すれば、チェックを付けて選択した項目のデザインを設定することが可能だ。 :checkedセレクタはCSS 3の勧告候補「Basic User Interface Module」で提案されており、これまではFirefoxとOperaが対応していたが、Safariでもバージョン3以降で利用できるようになった。Internet Explorerはバージョン8ベータ版でも対応していない。 セレクタとブラウザの対応 セレクタFirefoxSafariOperaInternet Explorer
フォームのインタフェースデザインを考える（1） - builder by ZDNet Japan
フォームのインターフェースデザイン フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。 CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxやSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。 ユーザーのアクションに応じてフォームのデザインを変更する :hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の３種類となっている。 :hover 項目にカーソル（マウスポインタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
