みなさんは、CSSを書くときに管理のしやすさを意識していますか？　CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設

説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka

デスクトップやアプリケーション、ブラウザの画面を友人や知人に見せたり、共有したりする事って結構ありますよね。また、ブログとかを書いている方でも、結構頻繁に画面キャプチャをしていると思います。 静止画の画像キャプチャなんかだと、私は『Nimbusスクリーンショット』というアプリを使っています。 静止画のキャプチャツールは探せば色々とあるんですが、動画のキャプチャが欲しい時にツールを探しても中々いいのが見つからなかったんです。（PCにインストールして使うものや、キャプチャ動画にクレジット表記が入ってしまうものなど） そんな中、久々に動画キャプチャーツールを探したら、手軽に使え、ロゴの表記も無し、画質もいい『loom』というキャプチャーツールを見つけたのでご紹介します。 『loom』の特徴 動画キャプチャはブラウザ以外にも起動しているアプリケーションも選択できるので、ゲーム画面のキャプチャをした