これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
Firefoxを便利にする魔法の呪文「about:config」を使った裏ワザ10選 | ライフハッカー・ジャパン
最近では話題になることの少なくなったFirefoxですが、いまでも、「もっとも自分好みにカスタマイズできるブラウザ」であることに変わりはありません。 そして、この多様なカスタマイズを可能にしているのが、「about:config」にある数々のオプションです。この記事では、1度は試してみたいFirefoxの裏ワザを10個ご紹介します。「そもそもabout:configって何？」という方がいるかもしれませんね。Firefoxのアドレスバーに「about:config」と入力してみてください。すると、Firefoxの動作を変更できる「隠し設定」がたくさん表示されます。 中には、何だかよくわからないものや未設定のままのものもありますが、それ以外は、Firefoxがデフォルトで使用している種々のパラメータを変更できます。 どの項目も、ダブルクリックで変更できます。ただし、変更することによって、「動作
IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
作業を効率化するWindows用フリーソフト５選 | jMatsuzaki
生産性を劇的にあげるWindows用フリーウェア秘蔵の５選 2012年6月16日投稿 2015年1月15日更新 カテゴリ：Windows 著者: jMatsuzaki photo credit: Pörrö via photo pin cc 私の愛しいアップルパイへ お気に入りのソフトウェアをたくさん入れて、パソコンを快適に使いたい。 だからといってソフトウェアを入れすぎると処理が増え、かえって効率が下がることすらあります。あなたはジレンマを感じながらこう呟くわけです。 「私はね、ソフトウェアを入れるなら私のパーソナル・コンピューターに相応しい本当に良質なものだけに厳選したいの。フリーソフトなら特にね。」 Gooooood！それなら良い機会です。今日は私が今まで地べたを這いつくばりながら探しだした、生産性を劇的にあげるWindows用のフリーウェアを５つご紹介しましょう。この記事を読み終わ
無料でPCをオンラインストレージ化できる「TONIDO」がとても簡単に使えることがわかるレビュー - GIGAZINE
「Tonido」はインターネットにつながったノートPCにインストールするだけで簡単にオンラインストレージ化できる無料のソフトウェア。インストール後はIDをパスワード指定するだけで設定が完了し、あとはPCやスマホから中のファイルにアクセス可能になる、というお手軽かつ強力な機能を備えています。実際にサクッと設定を済ませて使用するまでの手順を、以下で確認してみてください。 ◆ダウンロードと設定 以下のページに行くとWindows、Mac OSX、Linuxなどに対応したインストーラーがあるので、自分のOSに合ったものをダウンロード。なお、今回のレビューにはWindows用のものを使用しました。 ダウンロードしたインストーラーをダブルクリック 「Next」を連打すればOK 「Install」をクリック こんな感じで自動でインストールが進行 「Finish」をクリックすると自動でブラウザが起動し、「
本物そっくり！ ウェブブラウザで動くPhotoshopシミュレータ
本物そっくり！ ウェブブラウザで動くPhotoshopシミュレータ2012.01.18 12:00 satomi おお～これは...！ Visual IdiotのプログラマーがPhotoshopの動作をブラウザで完壁に再現するシミュレータを作りました！ ｢FireFox起動するのも待つのもかったるくて｣Chromeでしかテストしてないけど他のブラウザでも使えるはずです。 HTML 5、CSS3、jQuery/Javascriptだけで書いたPhotoshopのウェブ版というわけですね。あのアドビ主力ソフトをMac OS Xで使った時と何から何までおんなじに動作します。Photoshopをインストールしてないパソコンを使う時は、覚えておくと便利かも。ここで動かしてみてね（訳者は落ちまくって使えなかったけど、みなさんはどう？）。 [Visual Idiot via PetaPixel] AND
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アドビ、ブラウザで使えるPDF編集ツールを提供開始