日々のWeb制作やWeb開発で気づいたこと、共有したいこと、雑記などをまとめた私的メモブログです。https://www.tak-dcxi.com/https://www.tak-dcxi.com/article/introduce-kiso-css/https://www.tak-dcxi.com/article/introduce-kiso-css/単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSS「kiso.css」をリリースしました。その名が示すように、Webサイト構築の「基礎」として機能します。Mon, 16 Jun 2025 00:00:00 GMThttps://www.tak-dcxi.com/article/promote-spacing-design-using-empty-grid-cells/https://www.tak-dcxi.com/article/promote-spacing-design-using-empty-grid-cells/CSS Gridレイアウトで空のグリッドセルを余白として活用するテクニックを解説します。margin不要論やgap、paddingによる余白設計が主流の中で、この方法がどのように複雑なレイアウトやレスポンシブ対応をシンプルにするのか、具体的なコード例を交えて紹介。marginに代わる新たな余白設計の選択肢として、そのメリット・デメリットを考察します。Thu, 29 May 2025 00:00:00 GMThttps://www.tak-dcxi.com/article/css-only-details-animation-2025/https://www.tak-dcxi.com/article/css-only-details-animation-2025/CSSだけでdetails要素の開閉アニメーションを実装する最新手法を、コード例を交えて解説します。Wed, 28 May 2025 00:00:00 GMThttps://www.tak-dcxi.com/article/background-to-foreground-with-fallback/https://www.tak-dcxi.com/article/background-to-foreground-with-fallback/背景色を前景色として利用する場面は少なくありませんが、そのまま設定するとアクセシビリティ的な問題を起こす可能性があります。背景色を前景色として扱う場合はシステムカラーをフォールバックすると良いでしょう。Tue, 27 May 2025 00:00:00 GMThttps://www.tak-dcxi.com/article/modal-implementation-in-2025/https://www.tak-dcxi.com/article/modal-implementation-in-2025/2025年のモーダルの実装方法を紹介します。JavaScriptを書かなくともWeb標準でアクセシブルなモーダルが実装できます。Mon, 26 May 2025 00:00:00 GMThttps://www.tak-dcxi.com/article/learning-by-example-flex-vs-grid-usage/https://www.tak-dcxi.com/article/learning-by-example-flex-vs-grid-usage/FlexboxとCSS Gridの使い分けについて実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを説明します。Mon, 26 Aug 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/summary-of-css-techniques-posted-on-x-in-june-2024/https://www.tak-dcxi.com/article/summary-of-css-techniques-posted-on-x-in-june-2024/2024年6月にXに投稿したCSSテクニックのまとめです。Wed, 10 Jul 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/example-of-implementation-of-switch-using-switch-attribute/https://www.tak-dcxi.com/article/example-of-implementation-of-switch-using-switch-attribute/スイッチUIはinput[type="checkbox"]要素のswitch属性を使用することでWeb標準で作成することができますFri, 31 May 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable/https://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable/line-heightのハーフ・レディング (上下の余白)を打ち消す`calc((1em - 1lh) / 2)`はグローバルスコープのCSS変数で定義しておくと便利です。Wed, 29 May 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/html-css-techniques-to-improve-usability-and-accessibility-with-minimal-code/https://www.tak-dcxi.com/article/html-css-techniques-to-improve-usability-and-accessibility-with-minimal-code/少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。Sat, 18 May 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/use-hgroup-for-marking-up-the-main-heading-and-subheading/https://www.tak-dcxi.com/article/use-hgroup-for-marking-up-the-main-heading-and-subheading/主題と副題のマークアップの方法には様々な方法が用いられていますが、現在ではhgroup要素を使用するのがおすすめです。Fri, 10 May 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/rgba-function-is-legacy-syntax/https://www.tak-dcxi.com/article/rgba-function-is-legacy-syntax/主に不透明度を伴う色の指定にrgba()関数を使用している方が多い印象ですが、現在では互換性のために残っているレガシーな指定とされています。Wed, 08 May 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/card-component-implementation-example/https://www.tak-dcxi.com/article/card-component-implementation-example/保守性、拡張性、アクセシビリティおよびユーザビリティに配慮したカード型コンポーネントの実装例を紹介します。Fri, 03 May 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/accordion-implementation-example-using-the-name-attribute-of-details/https://www.tak-dcxi.com/article/accordion-implementation-example-using-the-name-attribute-of-details/details要素のname属性を使用した排他的なアコーディオンの実装メモです。details要素で新たに追加されたname属性を使用すればJavaScriptを使用せずともWeb標準で排他的なアコーディオンを実現できます。Tue, 30 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/text-animation-considerations-and-implementation-examples/https://www.tak-dcxi.com/article/text-animation-considerations-and-implementation-examples/テキストを1文字ずつspanで囲んでアニメーションする際の注意点と実装例について纏めました。アクセシビリティや機械翻訳に影響を及ぼすため注意です。Thu, 25 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/grayscale-display-should-be-added-to-post-implementation-checklist/https://www.tak-dcxi.com/article/grayscale-display-should-be-added-to-post-implementation-checklist/グレースケール表示の確認を行うことはアクセシビリティやユーザビリティを向上するために重要です。実装後のチェック項目には「グレースケール表示の確認」を追加したほうがいいでしょう。Wed, 24 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/scroll-linked-animation-implementation-examples/https://www.tak-dcxi.com/article/scroll-linked-animation-implementation-examples/Webサイトの制作においてスクロールに連動して要素が画面内に入った際にアニメーションを行う実装は頻繁に求められます。そのような実装を行う際の注意点とベストプラクティスについて解説します。Tue, 23 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/smooth-scroll-implementation-example/https://www.tak-dcxi.com/article/smooth-scroll-implementation-example/スムーススクロールの実装メモです。現在ではCSSのみでスムーススクロールの実装はできますが、当ブログではそれを使用せずにJSで実装を行っています。Mon, 15 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/implementation-example-of-a-modal-created-using-the-dialog-element/https://www.tak-dcxi.com/article/implementation-example-of-a-modal-created-using-the-dialog-element/dialog要素を使用したモーダルウィンドウの実装例を紹介します。dialog要素を使用すればWeb標準でアクセシブルなモーダルウィンドウを作成できます。Fri, 12 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/accessibility-conscious-tab-menu/https://www.tak-dcxi.com/article/accessibility-conscious-tab-menu/アクセシビリティに配慮したタブメニューの実装メモです。他の技術記事との差別化要素として、タブパネルの非表示の状態管理にはhidden="until-found"を使用しています。Sun, 07 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/use-until-found-for-hiding-tabs-and-accordions/https://www.tak-dcxi.com/article/use-until-found-for-hiding-tabs-and-accordions/タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"属性を使ったほうがメリットがあります。この記事ではその具体例を説明します。Tue, 02 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/recommended-chrome-extensions-for-website-creation-2024/https://www.tak-dcxi.com/article/recommended-chrome-extensions-for-website-creation-2024/私が使用しているChrome拡張機能でWeb制作で役立つものを5つピックアップしました。Mon, 01 Apr 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/scroll-bar-related-etcetera/https://www.tak-dcxi.com/article/scroll-bar-related-etcetera/何かで役立つかもしれないスクロールバーのTipsのまとめですSun, 24 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/if-you-want-to-align-the-heights-of-the-cards-you-can-use-subgrid/https://www.tak-dcxi.com/article/if-you-want-to-align-the-heights-of-the-cards-you-can-use-subgrid/複数箇所の高さを揃えるにはtable要素を使用するかJSで高さを調整するしかアプローチがありませんでしたが、現在ではsubgridを使用すれば適切なマークアップを保ちつつ、CSSのみで解決することができます。Thu, 21 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/use-of-calc-infinity/https://www.tak-dcxi.com/article/use-of-calc-infinity/calc(infinity)は果たして便利なのか？調査してみました！Wed, 20 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/disable-hover-on-mobile-and-hover-implementation-example/https://www.tak-dcxi.com/article/disable-hover-on-mobile-and-hover-implementation-example/タップデバイスでもhoverが動いているWebサイトが多すぎる！hoverを指定するならany-hoverメディア特性を使いなさい！ついでに俺流hover実装例も紹介します。Tue, 19 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/methods-to-quickly-identify-the-source-of-horizontal-scrolling-and-the-latest-prevention-measures/https://www.tak-dcxi.com/article/methods-to-quickly-identify-the-source-of-horizontal-scrolling-and-the-latest-prevention-measures/横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できます。また、横スクロールバーの防止には overflow-x:clip を使うのが良いでしょう。Mon, 18 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/that-css-technique-you-learned-is-outdated/https://www.tak-dcxi.com/article/that-css-technique-you-learned-is-outdated/2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。初学者や教える側の方は必見です。Sat, 16 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/are-you-still-using-the-transform-property/https://www.tak-dcxi.com/article/are-you-still-using-the-transform-property/transformは与えられた要素に移動(transform)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形を適応させるCSSプロパティですが、傾斜以外は現在では独立したプロパティで指定することができます。Thu, 14 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/how-to-handle-alt-text-for-inline-svg/https://www.tak-dcxi.com/article/how-to-handle-alt-text-for-inline-svg/SVGの代替テキストについて自分なりの考えをまとめました。一番確実な方法は`img`要素で読み込んで`alt`属性を付与することだと思いますが、CSSで装飾を変えられるインラインSVGの利点を捨てるのも難しいのでインラインSVGにどうやって代替テキストを含めるか？のみに焦点を当てていきます。Wed, 13 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/accordion-slide-animation-can-be-implemented-in-two-line-of-css/https://www.tak-dcxi.com/article/accordion-slide-animation-can-be-implemented-in-two-line-of-css/jQueryのslideToggle()のような要素をスライドしながら表示非表示切り替えるアニメーションを現在ではCSS2行を用意して、そのうちの1行を切り替えるだけで実装が可能です。全モダンブラウザ対応済みです。Tue, 12 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/optimization-of-google-font-loading/https://www.tak-dcxi.com/article/optimization-of-google-font-loading/当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的には本記事で紹介する方法が最適解だと思っています。Tue, 12 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/avif-format-is-fine-for-astros-images/https://www.tak-dcxi.com/article/avif-format-is-fine-for-astros-images/現在の画像フォーマットの指定は主にAVIFでフォールバックにビルド元のJPEGかPNGで問題ないと思います。AVIFは2024年現在すべてのモダンブラウザでサポート済みで、WebPを超える驚きの圧縮率を持ちます。Mon, 11 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/my-blogs-responsive-coding/https://www.tak-dcxi.com/article/my-blogs-responsive-coding/当ブログのレスポンシブコーディング施策のまとめ。メディアクエリよりもコンテナクエリを優先、font-sizeはclamp()関数で指定、余白や要素の幅の指定はclamp()を基準としたemで組む、375px未満はviewportを固定、srcset属性とsizes属性の最適化はRespImageLintに任せるの5点です。Mon, 11 Mar 2024 00:00:00 GMThttps://www.tak-dcxi.com/article/hello-world/https://www.tak-dcxi.com/article/hello-world/TAKLOG（読み方：たくろぐ）は、フロントエンド開発やWeb制作分野のことを中心に、備忘録や知識のアウトプットの場として運営する予定のブログです。当ブログの内容は原則的に私の個人的な意見や考えを反映することとします。Sun, 10 Mar 2024 00:00:00 GMT