今回はFirefox 3が新しく対応したアニメーションPNGについて紹介する。スタイルシートに直接関連するものではないが、Webページのデザインに活用できるアイテムの1つとしてチェックしておきたい。なお、アニメーションPNGの表示には、Firefox 3の他にOpera 9.5（ベータ版）も対応している。 アニメーションPNGとは アニメーションPNGはThe Animated Portable Network Graphicsの略で、APNGとも呼ばれている。静止画像のPNGフォーマットを拡張して、動画を扱えるようにしたフォーマットだ。本格的な動画の再生には適していないが、アニメーションGIFと同じように、パラパラ漫画の要領で手軽に動画を作成することができる。 また、アニメーションGIFが256色しか扱うことができないのに対して、アニメーションPNGは24bitフルカラーでアルファチャン

Microsoftは、いまだに新たなモバイルブラウザ「Internet Explorer（IE） 6 for Windows Mobile」のリリース段階には至っていないものの、筆者は、米国時間9月10日にMicrosoftが開催したイベントにて、このブラウザを事前にチェックする機会に恵まれた。 IE 6 for Windows Mobileの最大の利点は、「IE 6」と同じフルレンダリングエンジンが採用されている点にあり、PC上のIE 6で、正しくレンダリングされたホームページであれば、どれでも問題なくWindows Mobile上で閲覧できるということを意味している。MicrosoftのWindows Mobile部門シニアディレクターであるTim McDonough氏は、標準的なMSNのホームページを、IE 6 for Windows Mobile上で見せてくれた。 筆者は今回、タッ

HTML 5のドラッグ＆ドロップAPI HTML 5では新たにDrag and drop APIが追加される。これによって、オブジェクトがドラッグ／ドロップされた際に発生するイベントを処理する標準の方法が提供されることになる。 Firefox 3でもドラッグ＆ドロップに関するイベントがサポートされているが、Forefox 3.1ではHTML 5のAPIがサポートされ、標準的な方法でドラッグ＆ドロップが処理できるようになる予定だ。 HTML 5のDrag and drop APIでは、オブジェクトがドラッグおよびドロップされた際のイベントを表すDragEventインタフェースが定義される。DragEventはドラッグの開始元から送出されるものと、ドラッグのターゲットから送出されるものがあり、それぞれ表1、表2に示すイベントがある。 表1 ドラッグの開始元のエレメントから送出されるイベント イ

前回、「JavaScriptで作るミュージックプレイヤー：moonlinxを支えるOSS」では、JavaScriptで作るミュージックプレイヤーについて説明しました。今回は、TextMate＋Flex 3 SDK＋rascutを利用したActionScript開発環境について説明したいと思います。 ActionScriptの統合開発環境（IDE）は、まだまだこれだというものが登場していないと個人的には思っています。最初はFLASH CS3やCS4を使っていても、いずれはビルドにしか使わなくなってしまうという人がほとんどではないでしょうか（間違っていたらすみません）。 Windowsに関しては、FlashDevelopという素晴らしいオープンソースのIDEが存在しますが、Mac OS Xで利用するにはVMWareやParallels Desktop上で動かすなど、なにかと制約がつきまといます

欧文のテキストは半角スペースの位置で改行される。そのため、半角スペースが入らない長い単語は途中で改行されることがない。レイアウトスペースの横幅が狭い場合、長い単語ははみ出してしまい、レイアウトを崩す原因となる。 とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長いURLを表記した場合だ。 URLは半角スペースを含まないので、ブラウザにとっては1つの長い単語と同じ扱いになる。特に、ブログなどのコメントで長いURLを記述されると、制作者の予期しないところでレイアウトが崩れる原因になってしまう。 そこで今回は、ブラウザごとのURLの改行処理の違いを確認して、長い単語やURLの改行をコントロールするword-wrapプロパティを紹介したい。 ブラウザごとのURLの改行処理 次のサンプルは、横幅が300ピクセルのボックス内に長い単語やUR

高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 コマース広告の大変動 プライバシー保護とパーソナライズの狭間で マーケティングの効果を最大化するためには 仮想デスクトップサービスの最新事情 複数の選択肢のあるMSのVDIサービス どう違うのかをわかりやすく解説 すぐに実践できる仕事効率アップ術 驚きの効果をもたらす外付けディスプレイ なんと最大50％の業務効率アップも！ Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 サービスを止めない！ サイバーエージェントに聞く高可用性の実現 そこにピュア・ストレージが選ばれた理由 勝つためのクラウド活用術 New Value on Azure ビジネスを次のステージへ！ 新OSのWin11はどう進化したか ビ

CSS 3のセレクタ「:target」を利用すれば、リンクをタブメニューの形で表示して、1ページ内に記述したコンテンツを切り替えて表示するように指定することが可能だ。HTMLとCSSだけでタブメニューを作成する場合、これまではコンテンツごとにページをわけて作成する必要があったため、1ページで実現できるメリットは大きいと言える。 ここでは、positionプロパティを指定して「テキスト1」から「テキスト5」を同じ位置に重ねて表示している。その上で、リンクをクリックしてターゲットとして表示されたときにだけz-indexプロパティを適用して、手前に表示するように設定した。 div{ position: absolute; top: 17px; left: 20px; } #text1:target{ z-index: 2; } #text2:target{ z-index: 2; } #text