先日、徳丸本（正式名称: 安全なWebアプリケーションの作り方 第2版）の実習環境 Docker 対応バージョンが公開されました。 こちら、M1/M2 Mac にも対応したものになっています。 リリース内容を確認してみましたが、解説されている内容は既存の部分からの変更点のみとなっています。 せっかくなので、1から新規で M1 Mac 環境に構築した方法の記録です。 前提条件 初心者向けではありません。 ある程度の知識がある方向けに、簡略化して記載しています。 初心者向けに記事を寄稿しました。 初心者の方は、リンク先の記事をご確認ください。 ウェブ・セキュリティ学習のため徳丸本を読んでみた 第3回　M1/M2 Mac に対応！Docker 環境で実習環境を構築しよう https://www.school.ctc-g.co.jp/columns/mikumo/mikumo03.html Hom

ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用