アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
やりたいこと ブラウザで録音するアプリケーションを作ります。 Vue2.xやOptions API で書かれたサンプルコードは色々見つけましたが、Vue3 のComposition API で書かれたコードは見つからなかったので、参考に共有します。 基本 ブラウザでの録音はMediaStream Recording APIを使います。 基本的には以下のソースコードと解説を参考にしました。 MediaStream Recording API の使用 - Web API | MDN 全コード 短いので、テンプレートの全コードを掲載します。 <template> <button @click="startRecording()" v-if="!record.state"> 録音 </button> <button @click="stopRecording()" v-if="record.sta
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy’s website. The other day I stumbled upon this really nice hover effect on buōy’s website. It shows a tilted image that’s pixelated, with an awesome glitch effect. I totally love this and wanted to created my own CSS-only version, using the CSS glitch effect. In the first demo, we rotate the ima
オランダの画家ヨハネス・フェルメールの代表作といえば、「牛乳を注ぐ女」を思い浮かべる人も多いだろう。1657年から1658年にかけて描かれたとされるこの作品について、所蔵するオランダ・アムステルダム国立美術館はこのほど新たな発表を行った。 これによると、「牛乳を注ぐ女」に関して新たな調査を行い、いくつかの驚くべき発見があったという。その発見とは、絵画の下に「水差しホルダー」と「籠」が描かれていて、のちにそれらが塗りつぶされていた、ということだ。 ▲The Milkmaid, Johannes Vermeer, c. 1660. Rijksmuseum, Amsterdam, Purchased with the support of the Vereniging Rembrandt 今回の調査では最新のスキャン技術を使用。「水差しホルダー」は、女性の頭部の後ろにある壁に描かれているそうで、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
