2024年9月
子要素に関連づいた親要素に対して、スタイルを適用(:has())
子要素に紐づいた親要素に対してのみ、CSSを適用するには、:has()という疑似要素を使用する。 例えば、チェックボックスやラジオボタンの選択状態に応じて、スタイルを変更することが手軽に出来たりするので、便利。 今回は、 […]
マウスでクリックやドラッグし、選択した要素へスタイルを適用させる(::selection)
とある要素をクリックもしくはドラッグした際に、デザインを変更したい時がある。 cssの疑似要素で実装することも可能なため、今回はその方法についてまとめていく。 HTMLソースの準備 以下のようなHTMLソースを準備する。 […]
HTML/CSS : データ属性(data-**)の使用
特定のデータが渡された場合に、柔軟にCSSの切り替えを行いたい時がある。 例えば、APIから渡された値に応じて、表示されるアイコンを切り替えたい場合や同じコンポーネント内で用途ごとにデザインを変えたい場合などが挙げられる […]
CSS : テキストが設定した幅を超えた場合、「...」を表示させる (text-overflow)
テキストを設定する要素に限らずではあるが、その要素に設定した横幅よりもテキストの長さの方が長い場合に、末尾に「...」(エリプシス)を表示させる方法についてまとめる。 HTMLファイル 以下のようなHTMLコードを用意す […]
Next.js 14 環境変数の設定を切り替える
開発作業を行っていると、様々な環境で作業を行うことがある。 例えば、実際に開発作業を行う「ローカル環境」、開発したソースの動作等の確認をデモデータを使用し行う、行う「開発環境」, 本番に近い状態でテスト等を行う「QA環 […]
Next.js 14 ナビゲーションの利用 (404ページ)
遷移したいページが見つからない場合に、４０４ページが表示される。 本投稿では、どのようなページが表示されるかと４０４ページのカスタマイズ方法についてまとめる。 デフォルトの404ページ アプリケーションを起動 作業フォル […]
Next.js 14 ナビゲーションの利用 (動的ルーティング)
https://〇〇〇.com/1 や https://〇〇〇.com/200のように動的にパラメータの値が変化するようなルーティングを実現する方法をまとめる。 今回は、何かしらの投稿を管理するページがあるとし、投稿一覧 […]
Next.js 14 ナビゲーションの利用 (グループ化)
Nextjsでは、用途に合わせてページをグループ化することが出来る。本投稿内では、認証にまつわるページを１つのグループにまとめてみる。 認証用のグループを作成 前回作成したdemoフォルダ配下については全て削除し、新しく […]
Next.js 14 ナビゲーションの利用 (ページ遷移)
新規のページの作成 appフォルダ配下に以下のようにdemoフォルダを作成し、その中にpage.tsxを作成します。 app - demo - page.tsx 完了したら、page.tsx内に以下のような記述を追加する […]
Next.js14 環境構築(Windows)
新規アプリケーション作成 以下、コマンドを実行することで新規のアプリケーションが作成できるが、Node.jsのインストールが済んでいないと実行出来ないため、注意。 npx create-next-app 以下、コマンド実 […]