すべてのカテゴリ

React のスロット機能Vue では、スロットを使って「親」の部品から、「子」の部品にデータを渡す事ができます。React でも似た様な機能を使うことができます。この記事では、React のスロット機能の使い方を紹介します。スロットとは？HTML のタグで囲まれた部分です。<h1>スロット</h1> この例では、「h1」のタグで囲まれた「スロット」の部分です。 この部分のデータを呼び出している「部品」（子）に渡す事ができます。Vue の場合には、呼び出される側の部品（子）の方で、<template>  <slot>子で設定したデータ</slot></template> の様に「slot」のタグで囲んでおくだけで利用できます。 この場合、「子で設定したデータ」は、親でスロットのデータを設定している場合には上書きされる仕組みです。親側でスロットのデータを設定していない場合には、この「子で設定したデータ」が表示される仕組みです。React の場合はどうなっているか？React でも同じ様な機能を利用できます。 React の場合は、このスロットのデータも「プロパティ」の一部として、呼び出される部品（子）に渡されます。React の呼び出される側（子）の「部品」の例です。import React from "react";interface IProps {  children: string | undefined;}export default function Step14Child(props: IPro

Web制作で少し応用的な表現をしたいときに便利なのが、CSSの「mask-image」です。画像やグラデーションを使って、要素の表示範囲をコントロールできるプロパティですが、理解が曖昧なまま使うと意図した見た目にならないことが多いです。この記事では、mask-imageの本質と、実務で正しく使うための考え方を整理します。mask-imageとは何かmask-imageは「表示する部分と隠す部分を定義するプロパティ」です。重要なのは、「色」ではなく「透明度」で制御する点です。白（不透明） → 表示される黒（透明） → 表示されないグレー（半透明） → 半分だけ表示されるつまり、画像を切り抜くというより「どこを見せるかを決めるフィルター」に近い概念です。よくある誤解mask-imageでつまずく原因はほぼこれです。① 色で制御していると思っている違います。見ているのは「透明度」です。たとえば赤でも青でも、不透明なら表示されます。色は関係ありません。② 背景画像と同じ感覚で使っているbackground-imageとは役割がまったく違います。background-image → 見た目を追加するmask-image → 見える範囲を削るここを混同すると、意図がズレます。③ 普通の画像なら何でも同じだと思っているPNGやJPEGをそのままmaskに使うと、思った通りにいかないことがあります。理由はシンプルで、透明情報がないからです。maskとして使うなら以下が適しています。PNG（透過あり）SVGグラデーション（linear-gradientなど）基本的な使い方最もシンプルな例です。要

React で「部品」にデータを渡すには？React の「部品」に呼び出し元（親）からデータを渡すやり方は、Vue と殆ど同じです。プロパティ（property）と呼ばれるアトリビュートを呼び出すモジュールの HTML に相当する部分（JSX）で指定して渡します。プロパティを使って渡すReact でも Vue でも呼び出し元（親）からデータを渡す場合、プロパティ（property）と呼ばれるアトリビュートで指定します。記述方法も似ています。今回は、呼び出される部品（子）では、相当するプロパティ(property)が指定され中たあ場合には、「No props passed yet」を表示して、プロパティ(property)が指定されている場合には、指定されたプロパティの値を表示するようにします。まずは、呼び出される部品（子）の記述です。import React from "react";interface IProps {  msg: string | undefined;}export default function Step12Child(props: IProps): JSX.Element {  return (    <React.Fragment>      <div>        <h2>{props.msg ? props.msg : "No props passed yet"}</h2>      </div>    </React.Fragment>  );} 今回は、Typescri

CSSを書いていると、ときどき見かける inset: 0;。一見シンプルなのに、「何をしているのか分かりづらい…」という声がよくあります。この記事では、inset の役割と、inset: 0; が実際にどんな効果を持つのかをわかりやすく解説します。insetとは？inset は、要素の位置を決めるための ショートハンドプロパティです。本来ならtoprightbottomleftの4つをそれぞれ書く必要がありますが、inset を使うとそれらをまとめて指定できます。inset: 0; が意味することinset: 0; と書かれている場合、これはtop: 0right: 0bottom: 0left: 0を まとめて指定しているのと完全に同じ意味になります。つまり、要素を親要素の四隅にピッタリ貼り付ける配置です。特に、position: absolute や position: fixed と組み合わせて使われることが多いです。何が便利なの？position: absolute; inset: 0; とすると、要素が親の中でいっぱいに広がるbackground用の疑似要素（::before / ::after）を全面に敷けるモーダルのオーバーレイなどを一瞬で全画面化できるといった便利な使い方ができます。わざわざtop: 0; right: 0; bottom: 0; left: 0;と長く書く必要がありません。よくある利用シーン背景装飾用の ::before を全面に広げたいときモーダルの黒い半透明の背景を全画面にしたいときスライダーやカードの上に重ねるレイヤーを作るときメディア要