【CSSのみ】detailsで作ったアコーディオンにアニメーションをつける
はじめに この記事の概要 前回の記事で、detailsの基本的な使い方とJavaScriptを使用したカスタマイズ方法を紹介しました。 detailsを使用することで、HTMLのみで簡単にアコーディオンを作成することができるとお分かり頂けたかと思います。 ただ、前回も紹介しましたが、detailsで作成したアコーディオンをそのまま表示すると味気ないものになってしまうので、 CSSを用いて見た目をカスタマイズすることをおすすめします。 今回はその応用で、CSSのみを使用して簡単に見栄えを良くする方法をご紹介します！ 前回の記事はこちらになります↓ 2023年5月27日【CSSのみ】detailsで作ったアコーディオンにアニメーションをつける 対象読者 HTMLやCSSを使用したコーディングを勉強中の方detailsを使用してアコーディオンを実装したい方detailsで作成したアコーディオンの
details・summaryタグで開閉アニメーション付きアコーディオンUIを作ろう
記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありましたらご指摘いただけると幸いです。 FAQなんかのUIでよく使われる、クリックしたら関連するコンテンツがニュッと表示されるアレ。 みなさんは普段どのように実装されていますか？ アコーディオンUIを実装するにあたって、マークアップに最適なタグとしてdetailsとsummaryがあると知りまして、このタグを使って実装してみたいと思います。 実装してみた まずは結論から。 実際に今回実装していくアコーディオンUIのソースコードはこちらです。 details・summaryタグは何が良いの？ details summaryタグを使用しない実装では、アクセシビリティな実装をする場合、考慮する事項が多く、網羅しようと思うと工数がかかります。 ですが、details summary要素を使用することでアクセ
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
DX Criteria (v202104)/企業のデジタル化とソフトウェア活用のためのガイドライン
DX Criteria( DX基準 )は、日本CTO協会が監修・編纂している企業のデジタル化とソフトウェア活用のためのガイドラインです。 本基準は、デジタル技術を企業が活用するために必要な要素を多角的かつ具体的に体系化したものです。ソフトウェアエンジニアリング組織の健全な成長・経営目標の可視化・パートナーとのコミュニケーションなどに使っていただくことを目的に作成されています。 また、本基準は絶対ではありません。誰かを攻撃したり、アセスメント結果の数字のみに注目して本質的な改善をおろそかにするためのものではありません。極めて実践的で具体的な項目で構成されているため、定期的に最新動向に併せてCTO協会のWG内で議論をおこないながら、適宜アップデートをしていくものです。
PHPでスナップショットテストをやってみる
はじめに PHPUnitとPestのそれぞれでスナップショットテストをやってみる。 環境 PHP 8.3.10 スナップショットテストとは 指定された期待値と保存した同じ値のスナップショットを比較してコードをテストする。 何もしていないのに壊れたなど予期していない変更を早期に発見する場合に便利な方法です。 やってみる では、それぞれやってみます。 サンプルコード 今回のスナップショットテストで使うコードです。 適当なjsonを返すだけのコードです。 <?php declare(strict_types=1); function json_render(): string { $values = [ [ 'name' => 'りんご', 'price' => 150, "stock" => 10, ], [ 'name' => 'バナナ', 'price' => 200, "stock" =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
