Design ユーザーによる要素の編集が出来る .htmlも.cssもCopyできます。

Dragonfly css ：デザイン
シオカラトンボ
記事内に広告が含まれています。

contenteditable グローバル属性は、ユーザーによる要素の編集を可能にする列挙型属性です。

Thank you for reading this post, don't forget to subscribe!

今回は、<div>タグに「contenteditable」を使用し、配下のコンテナ内に配置したカード内のテキストを編集できる様にしました。
カードで隠された背景画像を、表示／非表示にする為に、
カード上のテキストを「DEL」キーや「Back Space」キーで削除したり、
「F5」キーで再表示できる様にした「デザイン」の「デモ」表示です。

Code欄に👍(カーソル)を置くことで現れる、のクリックでクリップボードにCopyできます。

PR広告
PR広告

編集できる

Editable:1

水辺の鳥たち

背景画像付きコンテナに、半透明カード

背景画像は、
D7000 + TAMRON 大口径望遠ズームレンズ(SP 70-300mm F4-5.6 Di VC USD)で、橋の真上から撮影した翡翠です。
カードのテキストは、編集できます。

翡翠 カワセミ
Kawasemi
Kingfisher
　　

HTML 1

HTMLは、のクリックでクリップボードにCopyできます。

<div class="container-kawasemi">  
 <!--　　　                  　contenteditable グローバル属性は、ユーザーによる要素の編集が可能にする列挙型属性です。 -->
 <div class='card_transparent' contenteditable>翡翠 カワセミ<br>Kawasemi<br>Kingfisher<br>　　</div>
</div>

CSS 1

cssは、のクリックでクリップボードにCopyできます。

例示している.cssは、各プロパティ部分に/**/で、解説を入れています。

/* カワセミ・コンテナ */
.container-kawasemi {
  min-height: 100%; /*要素最小高を親要素の高さの100%に。コンテンツが少ない場合に要素が縮みすぎるのを防ぐ*/
  height: 100vh;    /*要素高をビューポート高さの100%に設定。画面全体を覆う要素を作成する際に使用*/
  box-sizing: border-box;
  display: grid;    /* グリッドレイアウトを適用 */
  place-items: center; /* グリッドアイテムを中央に配置（垂直方向と水平方向） */
  place-content: center;
  /* グリッドコンテナ内のコンテンツを中央に配置（垂直方向と水平方向）。コンテナ内に余白がある場合に有効 add */
  grid-gap: 1.75em; /* グリッドアイテム間のギャップを設定 */
/*grid-template-columns: repeat(auto-fit, Min(100%, 10em)); 下の指定に変更 */
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
/*列のテンプレートを設定（自動フィット、最小幅10em、最大幅1fr） 
  repeat(auto-fit, ...): 列の数を自動的に調整。auto-fitは、空のトラックを削除。
  minmax(10em, 1fr): 各列の最小幅を10em、最大幅を1fr（利用可能なスペースの1単位）に設定。
  これにより、レスポンシブな列配置を実現。*/

  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif;
/* フォント設定: 300: フォントの太さを300に設定。
    clamp(.875em, 5vw, 2.5em): フォントサイズを可変に。
    最小サイズを0.875em、推奨サイズを5vw（ビューポート幅の5%）、最大サイズを2.5emに設定。
    saira, sans-serif: フォントファミリーを「saira」に設定、代替フォント「sans-serif」を指定。*/  
  color: #dedede;   /* #fff;真っ白でなく */
  text-align: center; /* テキストを中央揃え */
  text-wrap: balance; /*  テキストの折り返しを調整し、よりバランスの取れた表示に */
  text-shadow: 1px 1px 2px; 
/* テキストに影を設定。影の水平方向のオフセットを1px、垂直方向のオフセットを1px、ぼかしを2pxに設定 */
/* 背景の設定 background: #1d031f;*/
  background-blend-mode: multiply;
/*background-blend-mode: multiply;: 背景画像のブレンドモードを「乗算」に設定。
  これにより、背景画像と背景色が組み合わさって表示される。*/
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/kawasemi-1450-773-432kb.jpg) 50% 50% /cover transparent;
/*url(...): 背景画像のURLを指定。
  背景画像の水平/垂直方向の位置を50%/50%に設定。
  cover: 背景画像が要素全体をカバーするように拡大縮小。
  transparent: 背景色を透明に設定。*/
  background-repeat: no-repeat; /*画像を繰り返さないように*/
}	

/* クラス.card_transparent */
.card_transparent {
  /* 疑似要素を絶対配置するために必要 */
  position: relative; /* 相対配置を基準にする */
  max-width: 15em;    /* 最大幅を15emに設定 コンテンツや親要素のレイアウトで寸法が与えられない場合にのみ寸法を設定 */
  aspect-ratio: 3/2;  /* アスペクト比を3:2に設定 */
  border: solid 16px rgba(0,0,250,0.0350); /* 境界線を設定し、透明度を与える 透明にしてスペースを確保するだけ */
  padding: 0.75em;    /* 境界線とテキストの間にスペースを設ける */
  border-radius: 1em; /* 角を丸くする */
  background: rgba(0,120,255,0.25313);
  /* 半透明の背景色を設定し、透明なストップを持つグラデーションも可能 */
  /* 疑似要素のレイヤーを光彩にする */
  z-index: 10;        /* 背景よりも大きい値を設定 */
  display: flex;      /* フレックスボックスを使用 */
  flex-direction: column; /* 垂直方向に要素を配置 */
}

.card_transparent::before, 
.card_transparent::after {
  /* ボックス全体を完全に覆う */
 --full: conic-gradient(red 0 0); /* 完全な円錐グラデーションを定義 */
 /* グリッドは、積み重ねられたアイテムがテキストノードの場合、積み重ねには機能しない */
 position: absolute;      /* 絶対配置にする */
 /* 境界線の幅と同じ値でマイナスにする */
 inset: -6px;             /* 親要素の境界線から内側に配置 */
 /* 親要素のボックスモデルと角の丸みを継承 */
 border: inherit;         /* 親要素の境界線を継承 */
 border-radius: inherit;  /* 親要素の角の丸みを継承 */
 /* 光彩のためにクリップされないスペースを確保 */
 box-shadow: 0 0 6em rgba(0, 0, 0, 0.001); /* 影を設定し、光彩効果を出す */
 background: conic-gradient(from var(--alpha), #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #277da1, #577590, #f94144) border-box;
 /* 円錐グラデーションの背景を設定し、アニメーションの開始角度をカスタムプロパティ--alphaから取得 */
 /* パディングボックスをノークリップボックスから減算して、パディングボックス内のすべてを透明にする */
 mask: var(--full) no-clip subtract, var(--full) padding-box; /* マスクを設定し、内側を透明にする */
 /* テキストの選択を妨げないようにする */
 pointer-events: none;  /* ポインターイベントを無効にする */
                        /* グラデーションの開始角度をアニメーション化 */
 content: "";           /* 疑似要素に内容を設定しない */
 animation: alpha4s 4s linear infinite;/* アニメーションを適用し、4秒ごとに線形で無限に繰り返す */
}

@keyframes   alpha4s {
 to {--alpha: 1turn ; } /* アニメーションの終了時に--alphaを1回転させる */
}

/* カスタムプロパティ--alphaを登録し、アニメーション可能にする */
@property --alpha {
  syntax: "<angle>";    /* 値の型を角度に指定 */
  initial-value: 0deg;  /* 初期値を0度にする */
                        /* 疑似要素でのみ使用され、継承されないようにする */
  inherits: false;      /* 継承を無効化し、パフォーマンスを向上させる */
}

.card_transparent::after {
  filter: blur(2em); /* ぼかしフィルターを適用し、光彩効果を強調 */
}

Editable:2

水辺の鳥たち2

絶妙のシャッターチャンスでした。

何が隠れている？➡テキストは編集できます。➡テキストを編集して隠れているものを確認できます。
テキストを「DEL」キーで削除するか、←「Back Space」キーを押すことで、背景が現れます。
「F5」キーで元の表示に戻ります。

ジョウビタキ
jyoubitaki………………………../
Daurian
redstart

HTML 2

<div class="container-jyoubitaki">
 <div class="rounded_corners3" contenteditable>ジョウビタキ
  <div class="rounded_corners2" contenteditable>jyoubitaki............................./
   <div class="rounded_corners1" contenteditable>Daurian<br>redstart</div>
  </div>
 </div>
</div>

CSS 2

cssは、のクリックでクリップボードにCopyできます。

/* ジョウビタキ・コンテナ */
.container-jyoubitaki {
  min-height: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  place-content: center;
  grid-gap: 1.75em;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif; 
  color: #dedede;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 1px 2px;
  background-blend-mode: multiply;
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/jyoubitaki-1450-976-328KB.jpg) 55%/cover transparent;
}	

/* クラス.rounded_corners1 */
.rounded_corners1 {
	--list1: rgba(255,188,0,0.55), rgba(255,0,88,0.05);
  /* カスタムプロパティ--list1(orange&red)を定義し、グラデーションの色リストを設定 */
	--grad1: linear-gradient(45deg, var(--list1)); 
  /* カスタムプロパティ--gradを定義し、45度の線形グラデーションを設定。--list1の値を参照 */
	position: relative; /* 相対配置を設定し、疑似要素の絶対配置の基準にする */
	border: solid 4px #0000;/* 透明な4pxの境界線を設定。スペース確保用 */
	aspect-ratio: 7/ 10; /* アスペクト比を7:10に設定 */
	border-radius: 1em; /* 角を1emで丸くする */

/* conic-gradient円錐グラデーションをpadding-boxに設定し、背景のベースにする */
/* カスタムプロパティ--gradの線形グラデーションをborder-boxに設定し、境界線部分の背景にする */
	background: conic-gradient(rgba(2, 74, 243, 0.29) 0 0) padding-box,var(--grad1) border-box; 
	&:nth-child(2) { --list1: #03a9f4, #ff0058 } 
           /* 2番目の.box要素にのみ適用  --listの値を上書きし、別のグラデーション色を設定 */
	&:nth-child(3) { --list1: #4dff03, #00d0ff } 
           /* 3番目の.box要素にのみ適用 --listの値を上書きし、別のグラデーション色を設定 */
	/* 疑似要素::beforeにスタイルを適用 */
	&::before {
		position: absolute;       /* 絶対配置を設定 */
		inset: 0;                 /* 親要素のpadding-box全体を覆うように配置 */
		z-index: -1;              /* 親要素よりも背面に配置 */
		background: var(--grad1);  /* 背景にカスタムプロパティ--grad1のグラデーションを設定 */
		filter: blur(.75em);      /* 0.75emのぼかしフィルターを適用し、光彩効果を出す */
		content: "";              /* 疑似要素の内容を空にする */
	}
}

/* クラス.rounded_corners2 */
.rounded_corners2 {
	--list2: rgba(0,255,255,0.55), rgba(0,0,255,0.05);
	--grad2: linear-gradient(45deg, var(--list2)); 
	position: relative; 
	border: solid 4px #0000;
	aspect-ratio: 7/ 10;
	border-radius: 1em;
	background: conic-gradient(rgba(2,74,243,0.29) 0 0) padding-box,
		var(--grad2) border-box;
	&:nth-child(2) { --list2: #03a9f4, #ff0058 }
	&:nth-child(3) { --list2: #4dff03, #00d0ff } 
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--grad2);
		filter: blur(.75em);
		content: ""; 
	}
}

/* クラス.rounded_corners3 */
.rounded_corners3 {
	--list3: rgba(0,255,0,0.55), rgba(0,128,0,0.05);
	--grad3: linear-gradient(45deg, var(--list3));
	position: relative;
	border: solid 4px #0000;
	aspect-ratio: 7/ 10;
	border-radius: 1em;
	background: conic-gradient(rgba(2, 74, 243, 0.29) 0 0) padding-box,var(--grad3) border-box;
	&:nth-child(2) { --list3: #03a9f4, #ff0058 }
	&:nth-child(3) { --list3: #4dff03, #00d0ff }
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--grad3);
		filter: blur(.75em);
		content: "";
	}
}

Editable:3

ズームレンズで撮影したシオカラトンボ

編集できます。➡テキストを削除して透き通ったトンボの羽根を見てみませんか？

dragonfly

シオカラトンボ ･･････････････････････････････

HTML 3

HTMLは、のクリックでクリップボードにCopyできます。

<div class="container-ShiokaraTonbo">
 <div class="rounded_corners2" contenteditable>シオカラトンボ ･･････････････････････････････</div>
</div>

CSS 3

cssは、のクリックでクリップボードにCopyできます。

(CSS 2)で既に定義済のものは省略しています。

/* シオカラトンボ・コンテナ */
.container-ShiokaraTonbo {
  min-height: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif; 
  color: #dedede;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 1px 2px;
  background-blend-mode: multiply;
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/Dragonfly-1450-960-664kb.jpg) 55%/cover transparent;
}
PR広告
GEEKOM
タイトルとURLをコピーしました