Tmaeda13web Design Coding Operations Thrive

タグ: chatGPT

2026年時点で「実務で使える／使い始めたい新しめのCSS

2026/01/6 , , ,

2026年時点で「実務で使える／使い始めたい新しめのCSSとして、Web制作の現場（特にコーディング・WordPress案件）を想定しています。
サンプルコード付き

1. CSS Nesting（ネイティブ入れ子）【実用段階】

Sass不要で、素のCSSにネストが書けるようになりました。

Before（従来）

.card {}
.card .title {}
.card .text {}

After（CSS Nesting）

.card {
  padding: 16px;

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .text {
    color: #666;
  }
}

✅ 2026年はほぼ安心して使用可
👉 WordPressのテーマCSSでもかなり読みやすくなります

2. :has() 擬似クラス【レイアウト制御の革命】

「子要素を条件に親をスタイル」できる、待望の機能。

例：画像を含むカードだけ装飾

.card:has(img) {
  border: 2px solid #4da3ff;
}

例：エラー文言がある場合だけフォームを赤枠に

.form:has(.error) {
  border: 1px solid red;
}

💡 JSを書かずに状態管理が可能
👉 フォーム・カードUI・管理画面系で超便利

3. Container Queries（本格普及）

「画面サイズではなく、親コンテナのサイズでレスポンシブ」

コンテナ定義

.card-list {
  container-type: inline-size;
}

コンテナ幅に応じたスタイル

@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

📱 WPのブロック・再利用コンポーネントと相性抜群

4. :where() / :is()【詳細度コントロール】

:where()（詳細度0）

:where(h1, h2, h3) {
  margin-bottom: 0.5em;
}

:is()（詳細度あり）

.card :is(h2, h3) {
  color: #333;
}

✅ CSS設計（BEM / FLOCSS）がかなり楽に
👉 reset・共通スタイルに最適

5. @layer（CSSレイヤー管理）

CSSの読み込み順問題を構造的に解決。

レイヤー定義

@layer reset, base, layout, component, utility;

各レイヤー

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer component {
  .btn {
    background: blue;
    color: white;
  }
}

📦 プラグインCSS・自作CSSの衝突対策に最強

6. 新しい単位 dvh / svh / lvh【SP対応改善】

iOSのアドレスバー問題を解決。

.hero {
  min-height: 100dvh;
}
単位意味
dvh動的ビューポート
svh最小
lvh最大

👉 スマホファースト案件では必須級

7. accent-color【フォームUI統一】

チェックボックスやラジオを簡単にブランドカラー化。

input[type="checkbox"],
input[type="radio"] {
  accent-color: #0a7cff;
}

💡 JS・画像不要で実装可能
👉 管理画面・フォーム系におすすめ

8. @scope（これから伸びる・一部対応）

スタイルの影響範囲を明示できる新構文。

@scope (.card) {
  h2 {
    color: navy;
  }
}

⚠️ 2026年は限定利用 or フォールバック前提
👉 将来のCSS設計に備えて知っておくと◎

実務向けおすすめ優先度（2026）

優先機能
★★★Nesting / :has() / Container Queries
★★☆@layer / dvh系 / accent-color
★☆☆@scope

WordPressコーダーの対しての情報 まとめ

  • Sass不要構成が現実的に可能
  • ブロックテーマ × Container Queries は相性抜群
  • @layerで「テーマCSS vs プラグインCSS」の事故防止
  • 管理画面・フォームは:has()でJS削減

chatGPTよりまとめ

IllustratorとAffinity Designer の用語の違い

2025/12/18 , ,

IllustratorからAffinity Designerへ移行する際、用語の違いに戸惑うことがあるかもしれません。
デザインでよく使う用語について、IllustratorとAffinity Designerの対応と簡単な説明をまとめました。

IllustratorAffinity Designer説明
アウトライン化境界線の展開文字やオブジェクトの形状をパス（ベクターデータ）に変換すること。編集可能なテキストではなくなり、図形として扱えるようになります。
マスククリッピングマスク / マスクオブジェクトの一部を別のオブジェクトの形状で切り抜いて表示する機能。Affinity Designerでは、クリッピングマスクとマスクの2種類があります。クリッピングマスクはIllustratorと同様の動作で、マスクはより柔軟な編集が可能です。 
整列配置複数のオブジェクトの位置を揃える機能。水平方向や垂直方向の中央揃え、端揃えなどが可能です。Affinity Designerでは「配置」パネルで細かく設定できます。
パスファインダー図形演算複数のオブジェクトを組み合わせて、新しい形状を作成する機能。合体、交差、切り抜き、背面オブジェクトで前面オブジェクトを削除などの操作が可能です。
レイヤーレイヤーオブジェクトをグループ化して管理する機能。Affinity Designerでもレイヤー構造は同様ですが、レイヤーパネルの操作性や機能が若干異なります。
グループグループ複数のオブジェクトをまとめて一つのオブジェクトとして扱う機能。Affinity Designerでも同様にグループ化できます。
効果エフェクトオブジェクトに影、ぼかし、光彩などの視覚効果を適用する機能。Affinity Designerでも同様のエフェクト機能があり、リアルタイムプレビューで確認しながら調整できます。
スポイトツールカラーピッカーツール画像やオブジェクトから色を抽出するツール。抽出した色を別のオブジェクトに適用できます。
ブラシツールペイントブラシツール自由な線を描画するツール。Affinity Designerでは、豊富な種類のブラシが用意されており、テクスチャやパターンを適用することも可能です。
グラデーション塗りつぶし (グラデーション) 色が徐々に変化する表現。Affinity Designerでもリニア、放射状、円錐形など様々な種類のグラデーションを作成できます。
変形パースペクティブ / 歪みオブジェクトの形状を変形する機能。Illustratorの自由変形ツールと同様の操作が可能です。Affinity Designerでは、パースペクティブツールや歪みツールなど、より高度な変形も可能です。
アピアランスレイヤースタイルオブジェクトに複数の効果（線、塗り、影など）を重ねて適用し、外観をカスタマイズする機能。Affinity Designerでは、レイヤースタイルパネルで同様の操作が可能です。
シンボルアセット繰り返し使用するオブジェクトを登録しておき、インスタンスとして配置する機能。Affinity Designerではアセットパネルで管理します。

これらの用語の違いを把握しておくと、Affinity Designerへの移行がスムーズに進むはずです。
Affinity Designerのヘルプやチュートリアルも参考にしながら、新しいツールに慣れていきましょう。

chatGPTよりまとめ

CSS BEM コーディング

2024/10/8

CSS BEM コーディングとは、「Block, Element, Modifier」の略で、CSSクラス名の命名規則を指す手法の一つです。BEMは、コードの可読性を向上させ、CSSの構造を明確にし、大規模なプロジェクトやチーム開発において管理しやすくするために使われます。この方法は、再利用性が高く、コンポーネントベースの開発に非常に適しています。

BEMの3つの基本要素

  1. Block（ブロック）:
    • ページ内で独立して存在できる意味的に独立したコンポーネントです。ナビゲーションバー、ボタン、フォームなどが例です。
    • 例: nav, button, form
  2. Element（エレメント）:
    • ブロックの一部であり、ブロックと意味的に関連するものです。エレメントはブロックの一部として定義され、単独では意味を持ちません。
    • 例: button__icon, nav__item, form__input
  3. Modifier（モディファイア）:
    • ブロックやエレメントの外観や動作を変更するためのクラスです。たとえば、ボタンの色やサイズ、ナビゲーションバーの表示状態などを変更します。
    • 例: button--large, nav__item--active, form__input--error

BEMの命名規則

  • ブロック: block
  • エレメント: block__element
  • モディファイア: block--modifier または block__element--modifier

具体例

<div class="card">
  <div class="card__header">
    <h2 class="card__title">Title</h2>
  </div>
  <div class="card__content">
    <p class="card__text">Some content here</p>
  </div>
  <button class="card__button card__button--primary">Click me</button>
</div>
  • card はブロック
  • card__header, card__title, card__content, card__button はエレメント
  • card__button--primary はモディファイア

まとめ

BEMは、このようにCSSクラスを構造化し、クラス名がその役割を説明するため、直感的で保守しやすいコードが書けるようになります。

ChatGPTの著作権について

2024/06/24

ChatGPTの著作権に関する情報を以下にまとめました。これは、ChatGPTの利用時に注意すべき法律的側面や著作権に関連する事項について説明します。

1. 著作権の帰属

  • ユーザーの著作権: ChatGPTによる出力は、OpenAIからユーザーに提供されるもので、ユーザーが利用できます。OpenAIの利用規約に従い、ユーザーはその出力を複製、変更、配布する権利を持ちます。
  • OpenAIの権利: OpenAIは、モデル自体および関連技術に対する知的財産権を保持しています。ユーザーが生成するコンテンツに対して、OpenAIは著作権を主張しません。

2. 生成コンテンツの利用

商用利用

  • 商用利用: ユーザーは、ChatGPTによって生成されたコンテンツを商用目的で使用することができます。たとえば、ブログ記事、マーケティング資料、製品マニュアルなどに利用できます。
  • クレジット: 商用利用において、ChatGPTをクレジットする必要はありません。ただし、ChatGPTによる生成であることを明示することで透明性が保たれる場合があります。

個人的な利用

  • 個人的な利用: 個人的な使用（学習、アイデアの生成、趣味のプロジェクトなど）でも、ChatGPTの生成コンテンツを自由に利用できます。

3. 著作権侵害の注意

  • 元データの著作権: ChatGPTは広範なインターネット上のテキストを学習に使用していますが、特定の著作物の再現はしません。それでも、生成されたテキストが元のデータに似た場合、注意が必要です。ユーザーは生成されたコンテンツが第三者の著作権を侵害しないように注意しなければなりません。

4. ライセンスと規約

  • 利用規約の確認: OpenAIの利用規約を確認し、ChatGPTの利用に関する最新のルールや制約を理解することが重要です。これには、利用可能なライセンスの詳細や制限事項が含まれます。 OpenAIの利用規約
  • APIの利用: APIを介してChatGPTを利用する場合も、商用利用や生成されたコンテンツの扱いについてのガイドラインが設けられています。これもOpenAIの利用規約に記載されています。

5. データのプライバシーとセキュリティ

  • プライバシー: ユーザーが提供する入力データ（プロンプト）は、一般的にはOpenAIによって保存されたり再学習に使用されることはありませんが、API利用や特定のサービスの場合にはデータの使用についてのポリシーが適用されます。 プライバシーポリシー
  • セキュリティ: 提供するデータが安全であることを確認するため、データセキュリティのガイドラインを守ることが推奨されます。

まとめ

  1. 著作権: ChatGPTの出力に対する著作権はユーザーに帰属し、商用・個人用ともに自由に利用できます。
  2. 利用規約: OpenAIの利用規約に従う必要があります。規約は利用者に法的に拘束力があります。
  3. プライバシー: データのプライバシーに注意を払い、セキュリティのガイドラインを守ることが推奨されます。

ユーザーがChatGPTを利用する際には、著作権や利用規約に関するルールを理解し、それに基づいて生成されたコンテンツを適切に活用することが重要です。