人によって書き方が異なり負債化するためか、あまり下記のような指定を実際のホームページのソースなどで見かけることはありませんが、自分で作る時には非常に有用なため、書き残しておこうと思います。 ✅ :is() / :not() / :has() / :where() CSSの最新セレクター × 英語の意味で理解する 🔹 :is() — 「〜で… 続きを読む
CSS セレクターの紹介(is,not,has,where)
IT
デジタル庁デザインシステムを紐解く
以下は「デジタル庁デザインシステムβ版」（design.digital.go.jp）のサイト構成を整理したものです。 おおよそWebサイトやWebアプリの作成の際に必要な考え方がきれいにまとめられています。 🌐 サイト構成一覧 1. はじめに（Introduction） 2. ガイダンス（Guidance） 3. 基本デザイン（Found… 続きを読む
毎日の学びをブログに記録する、をLinuxコマンド風にすると？
ちょっとした冗談をAIに投げかける遊び第一弾。 ✅ シンプル & 実用的な表現： 意味：learn –today で今日の学びを取得し、それを learning.log に追記する。 ✅ cronジョブ風（毎日記録）： 意味：毎晩21時に今日の学びを記録する自動処理。 ✅ Git風に記録管理： 意味：ブログファイルをバージョン管… 続きを読む
HTML 使用頻度の高いタグ
📌 はじめに（段落ブロック） HTMLはWebページの構造を定義するための基本的な言語です。この記事では、よく使われるHTMLタグをカテゴリ別に紹介し、それぞれの実用的なコードサンプルも掲載します。 🏗️ ページ構造系タグ ✅ header, main, footer（見出しブロック） 💡 解説（段落ブロック） <header>… 続きを読む
Webデザインの参考
Webデザインの細かい部品の参考資料をまとめるページです。 様々なWebサイト部品ごとにデザインの参考をまとめます。 ツール使い方 デベロッパーツール(開発者ツール)の使い方 エディタ メニュー サイトマップデザイン グローバルナビゲーション ハンバーガーメニュー サイドバーメニュー フッター パンくずリスト レイアウト レイアウトパター… 続きを読む
DockerによるNextCloudの導入
下記のサイトを参考に、Dockerを使用して自宅サーバーにNextCloudを導入しました。 これで外出先でも自宅のHDDにファイルをアップロードすることができます。 自宅やオフィスや外出先で読んだPDFなどが一か所にまとまらないことをなんとなく不満に思っていましたが、 これを導入したことで情報の一元管理が簡単になり、端末の利用の巾が広が… 続きを読む
DockerによるGiteaの導入
以下のサイトを参考にGitを自宅サーバーに導入できました。 これでSourcetreeなどのツールからURLを指定するだけで、自宅サーバーのgitに対してプッシュなどができるようになります。 また、URLを知っている知り合いと共同でプログラムを作成することも可能です。 私の場合は、Giteaの外部公開設定を行い、外出先からもG… 続きを読む
Mermaid記法の活用について
この記事では、Mermaid記法の概要と、その実装方法、ソフトウェアエンジニアが仕様や思考の整理にどのように利用できるのかを説明します。特に、円滑な開発プロセスを促進するための具体例を交えながら解説します。 前提条件 特に特殊なハードウェア環境やソフトウェアバージョンは必要ありません。WebベースのツールやMarkdownエディタがあれば… 続きを読む
DockerのYAMLファイルとCompose V2について
DockerのYAMLファイル（docker-compose.yml）は、複数のコンテナをまとめて定義し、起動・管理できる便利な仕組みです。この記事では、その書き方と内容を詳しく解説します。 役割としては、コンテナを構成する設定を、記述しているものです。 ✅ 前提条件 YAMLファイルの主要構成 Docker Compose の YAML… 続きを読む
次世代のブラウザ描画技術「WebGPU」とは？Three.jsやスマホとの関係
Webブラウザ上でリッチな3Dグラフィックスを描く技術といえば、長年「WebGL」が主流でした。しかし、2023年頃から注目を集めているのが**「WebGPU」です。これは、従来のWebGLに代わる次世代のグラフィックスAPI（WebAPIの一種）**で、より低レベルかつ高性能なアクセスを提供するのが特徴です。 WebGPUの正体とは？ … 続きを読む