記事一覧
自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話
こんにちは。イチマルイチデザイン株式会社でフロントエンドエンジニアをしている長谷川です。
この度、自社コーポレートサイト（https://101de-sign.com/）のアクセシビリティ向上の取り組みを始めました。
今回の記事では、アクセシビリティ向上に取り組み始めた経緯や取り組み内容を、備忘録として書いています。
アクセシビリティ周りのちょっとした解説も交えていますが、がっつり解説はして
Webアクセシビリティの向上に取り組むための準備
こんにちは。イチマルイチデザインでフロントエンドエンジニアを担当している長谷川です。
ここ最近、企業からのWebアクセシビリティの向上や改善といった言葉をよく目にするようになりました。
様々な活動事例を見て、誰もが利用できるWebサイトやWebサービスを作ることの大切さを感じ、これを機にWebアクセシビリティの向上に真剣に取り組んでみようと考えました。
ただ最初から、セマンティックなマークア
Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する
こんにちは。
イチマルイチデザインのフロントエンドエンジニアの高橋です。
今回は、Body scroll lockを使用したカスタムフックを作成して、ドロワーメニューやモーダルの展開時に、背面の要素を固定する処理を簡単かつシンプルに実装する方法を共有します。
実装方法と解説
こちらが実際のコードの全体像となります。
// useBodyScrollLock.tsimport { RefObj
Chakra UIとReact Hook FormとYupを使ってフォームを作成する
こんにちは。イチマルイチデザインのフロントエンドエンジニアの高橋です。
今回は、Chakra UIとReact Hook FormとYupを使用して、ユーザビリティ高めのフォームを比較的簡単に作成する方法を共有します。
使用するライブラリ実装方法こちらが実際のコードの全体像となります。
import { Button, Container, FormControl, FormErrorMes
Mac に Yarn をインストールする
イチマルイチデザインでフロントエンドを担当している河口です。
今回は Yarn を Mac にインストールする手順を紹介します。
Yarn は js のパッケージを管理できるパッケージマネージャーです。
Node.js をインストールした際に、自動でインストールされる npm と役割は同様になります。
Command Line Tools for Xcode をインストールまずは、動作環境を整