cssで作る動きのあるWebサイト・デザイン

Design

3D Normal表示

3D Overflow表示

２D Normal表示

２D Overflow表示

ダークモード表示切替

3D表示比較

Overflow表示比較

2D表示比較

2D Overflow比較

実際のコンテンツ

操作してみてください

スライダ を操作してみてください。右下の「切替」でダークモードの切替

ソースコード Copyできます

HTML Source解説付き

コード枠にカーソルを置くと表示される アイコンのクリックでクリップボードにCopyできます。

<!-- Container1 -->
<div class="j_container_body">
<!-- Container2 -->
<div class="j_container_main"><!-- .j_container_mainタグは、ページの主要なコンテンツを表します。-->
<!-- Control:コントロールボックス➡️移動➡️j_header内へ -->
 <!-- Contents -->
 <div class="j_article"><!-- .j_articleタグは独立したコンテンツを表します。-->
  <!-- Header -->
  <div class="j_header">
   <!--装飾--> 
   <p class="j_h2"><span>Blog</span><span>List 「10」</span></p>
<p style="text-align: left;">
    <a href="https://xn--ecka7j.biz/" target="_blank" rel="noreferrer noopener"><i class="bi bi-align-top"></i>op Page</a>
</p>
    <!--Control--> 
    <div class="j_controls">
      <label for="dimension">3D化(斜め表示)</label><!--3Dチェックボックス-->
      <input type="checkbox" id="dimension" checked /><!--inputタグは、データ入力を受け取る。type属性で入力タイプ指定、id属性で要素を一意に識別 -->
      <label for="overflow">Overflow：表示</label><!-- オーバーフロー -->
      <input type="checkbox" id="overflow"/>
      <label for="speed">Speed(s)：看板速度</label><!-- スピードレンジスライダー -->
      <input type="range" min="7" step="1" max="30" value="22" id="speed22"/>
    </div>
  </div>
  <!--  -->
 <div class="j_window">
  <div class="j_scene">
   <!-- アイコンとテキストを含むグリッドリスト -->
   <ul class="j_grid01" style="list-style-type: none;">

<!-- Card01---------------- -->
<li class="j_li1"><div class="j_item">
<a href="https://xn--ecka7j.biz/toolboox/1800/">
 <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/05/sz6-1280-797-148-120x68.png" alt="Let's note sz6" />
 <p style="font-size: 16px;">５年前のパソコンでもWindows11は動くのか？ Let's note sz6 <b>i5-7200U</b>　　　　　　　　</p></a></div></li>
<!-- 02---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/security/99/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-wp2-640-400-53-120x68.jpg"  alt="" />
  <p style="font-size: 16px;">WordPress <b>脆弱性</b>とバージョン推移 v.6.x.x</p></a></div></li>
<!-- 03---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/3843/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/win11-07-120x68.gif"  alt=""  />
  <p style="font-size: 16px;"> Windows Update <b>いつまでも進まない時の</b>たった一つの対処方法</p></a></div></li>
<!-- 04---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/security/1242/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/09/WordPress-768-432_18.1mb-120x68.gif"   alt=""  />
  <p style="font-size: 16px;">使っちゃいけない<b>プラグイン</b> 146本＋ [発見次第更新]使ってはいけないWordPress Plugin</p></a></div></li>
<!-- 05---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/keyboard/6094/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/G913TKL-120x68.png"  alt=""  />
  <p style="font-size: 16px;"> G913TKL <b>字欠け</b>発生キートップ交換品依頼したら なんと新品のキーボードが送られてきた</p></a></div></li>
<!-- 06---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/windows11/9399/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2024/04/WindowsUpdate-KB5036893-1-120x68.png"   alt=""  />
  <p style="font-size: 16px;"> Windows 11 Update<b>月例</b> KB5036893 2024/04　　　　　　</p></a></div></li>
<!-- 07---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/trackball/6199/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/04/Slimblade_Pro-02-1200-0675-120x68.png"   alt=""  />
  <p style="font-size: 16px;">これぞ トラックボール <b>Slimblade Pro</b>この大玉は、他とは別物!　</p></a></div></li>
<!-- 08----------------  -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/security/452/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2020/03/plugin1-600-400-096-404-120x68.png"  alt=""  />
  <p style="font-size: 16px;">実験で分かった事xxx<b>プラグイン</b>は使ってはいけない　</p></a></div></li>
<!-- 09 -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/maneuver/6655/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/03/s4443_1200x675-1-120x68.jpg"   alt=""  />
  <p style="font-size: 16px;">330円リモコンでN700Sの車室内照明を自由に操作できる！<b>改造</b>プラレールで</p></a></div></li>
<!-- 10 -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/530/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-md-1024-584-77-2-120x68.jpg"  alt=""  />
  <p style="font-size: 16px;">モバイルモニタを使って作業効率<b>42%アップ</b>（デスクトップで） </p></a></div></li>
<!-- Card end -->
   </ul>
  </div>
 </div>

<!-- 移動：Check-Box : ダークモード・テーマの切り替えを行うためのチェックボックス -->
<label for="theme"><!--labelタグは、フォームコントロールにラベルを付けるために使用され、for属性で指定されたIDを持つ要素に関連付ける-->
  <span class="sr-only">Toggle Theme</span>
  <input class="sr-only" type="checkbox" id="theme" /><!-- チェックボックスは、ページのテーマを切り替える為に使用。隠されたラベル(class="sr-only">)は、スクリーンリーダー用。-->
  <p style="font-size: 16px;">切替</p><!-- 以下のSVGは、チェックボックスのビジュアル表現として機能 -->
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
  <!-- SVG内のpath要素は、アイコンの異なる部分を表す -->
  <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"/>
  <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd"/>
  </svg>
 </label>
</div><!-- .j_article -->
</div><!-- .j_container_main -->
</div><!-- .j_container_body -->

Javascript Source解説付き

コード枠にカーソルを置くと表示される アイコンのクリックでクリップボードにCopyできます。

<script>
// レンジスライダー要素を取得: #speed22 IDを持つ要素（レンジスライダー）を取得して、    rangeSliderという変数に格納。
const rangeSlider = document.getElementById('speed22');
// スピード更新関数: speedUpdate 関数は、レンジスライダーの値が変更されたときに呼び出す。
const speedUpdate = () => {
// CSS変数(カスタムプロパティ)を更新: ‘−−speed‘というCSSカスタムプロパティ(変数)の値を、レンジスライダーの値に設定。
// ‘{rangeSlider.value}s` は、レンジスライダーの値と単位（秒）を組み合わせた文字列です。
document.documentElement.style.setProperty('--speed', `${rangeSlider.value}s`);
 };
// レンジスライダーの入力イベントリスナーを追加: レンジスライダーの入力イベントに対して、speedUpdate 関数をリスナーとして登録。
// ユーザーがスライダーを操作するたびに speedUpdate 関数が実行されます。
rangeSlider.addEventListener('input', speedUpdate);
</script>

CSS Source解説付き

コード枠にカーソルを置くと表示される アイコンのクリックでクリップボードにCopyできます。

<style>
/* フォント設定: @font-face でカスタムフォント “Geist Sans” を定義しウェブフォントとして読み込む */
@font-face {font-family: "Geist Sans"; src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");}
/* ボックスモデル: 全ての要素に box-sizing: border-box; を適用し、パディングとボーダーを要素の幅に含めるように設定 */
*,
*:after,
*:before {box-sizing: border-box;} /* 全ての要素のボックスサイジングをborder-boxに設定 */
/* カスタムプロパティ: :root にカスタムプロパティ（変数）を定義し、アニメーションの速度やトランジションの時間を管理 */
:root {
    --speed: 22s; /* カスタムプロパティspeedを10秒➡️16s➡️22sに設定変更 */
    --transition015: 0.15s; /* カスタムプロパティtransition:遷移を0.15秒に設定 */
}
/*
.j_h2を定義（h2の代用）サイトの他のh2に影響を及ばさない様にする */
.j_h2 {
    display: flex; /* フレックスコンテナとして要素を表示。子要素を横並びに配置 */
    gap: 0.25ch; /* 子要素間の隙間を指定 */
    font-size: clamp(1.5rem, 4cqi + 1rem, 3rem); /* フォントサイズを範囲内で可変に設定 */
    font-weight: 160; /* フォントの太さ */
    margin: 0; /*  */
    grid-column: 1 / -1; /* グリッドアイテムの列の範囲を指定 */
}
/*
.j_h2要素（h2要素の代用）の最後の子要素（span）に対してのスタイルを指定 */
.j_h2 span:last-of-type {
    display: inline-block; /* インラインブロック要素として表示 */
    background: linear-gradient(to right, rgb(0, 0, 255), rgb(0, 255, 255), rgb(0, 0, 255)) 0 0 / 400% 100% no-repeat;
    background-clip: text; /* テキストの範囲内に背景をクリップ */
    color: transparent; /* テキストの色を透明に設定 */
    animation: shade 4s infinite linear;}
@keyframes shade {  to {background-position: 100% 0;}}
/*
.j_container_body（ Container1）*/
.j_container_body {
  display: grid; /*.j_container_body要素をグリッドコンテナとして表示 */
  place-items: center; /* グリッドアイテムを中央に配置 */
  min-height: 100％;   /* 最小の高さをビューポートの100%に修正設定:min-height:100vh;➡️100％; */
  color: rgb(26, 26, 26);
  font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; /* フォントファミリーを指定 */
  background-image: /* 背景画像を複数の放射状グラデーション指定 */
    radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 0%), 
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.15) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.15) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.15) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(038, 60%, 74%, 0.15) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.15) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.15) 0px, transparent 50%);
  background-color: rgb(255, 255, 255);
  font-weight: 80;       /* フォントの太さ指定 */
  transition: background-color 0.25s, color 0.25s; /* 背景色と文字色の変化にトランジション:遷移を設定 */
}
/*
.j_container_main（ Container２）*/
.j_container_main {padding:2rem 0; width: 100%;}
/* ダークモード:root:has(#theme:checked) セレクタを使用してダークモードのスタイルを適用し、背景色やテキストの色を変更 */
/*
:root:has(#theme:checked)は、
      テーマがチェックされている場合にルート要素（<html>）と特定のクラス（.j_container_body、.j_controls、.j_item）にスタイルを適用 */
:root:has(#theme:checked) :is(.j_container_body,) {
    background-color: rgb(000,016,080); /* .j_container_bodyの背景色 */
    color: hsl(0 0% 100%);
}
:root:has(#theme:checked) :is( .j_controls, .j_item) {
    background-color: rgb(002,012,075); /* .j_controls, .j_itemの背景色を分離 */
    color: hsl(0 0% 100%);
    border-width: 1px 2px 2px 1px; /* 上|右|下|左 */
    border-color: rgb(015,126,250);  /* 枠の色 */
}
/* 　　　　　　　　　　　 .j_article要素に対して、テーマがチェックされている場合のスタイルを指定 */
:root:has(#theme:checked) .j_article {
    background-color: rgba(007,038,164,0.75); /* 中の枠の背景色 */
    color: rgb(255,255,255);
    border-width: 1px 3px 3px 1px; /* 上|右|下|左 */
    border-color: rgb(096,106,219); /* 枠の色 hsl(0 0% 25%); */
    box-shadow: 0 10px 20px -5px rgb(000,016,080);
}
/* 　　　　　　　　　　　 .j_itemクラスに対して、テーマがチェックされている場合の背景色を指定 */
:root:has(#theme:checked) .j_item {background-color: rgb(000,016,080);}
/* 　　　　　　　　　　 　li要素の疑似要素（::before）に対して、テーマがチェックされている場合の背景色を指定 */
:root:has(#theme:checked) li::before {background-color: rgb(000,016,080);}
/*
.j_headerクラスに対してのスタイルを指定 */
.j_header {
    display: grid; /* グリッドコンテナとして要素を表示 */
    grid-template: auto 1fr / 6fr 4fr; /* グリッドの行と列のテンプレートを指定 */
    gap: 1rem; /* グリッドアイテム間の隙間を指定 */
    margin-bottom: 2rem; /* 下側のマージンを指定 */
    transition: opacity 0.5s; /* 要素の不透明度の変化にトランジション:遷移を設定 */
}
/*
.j_article要素に対して、共通のスタイルを指定 */
.j_article {
    padding: 2rem;  /* paddingは内側の余白を指定 */
    margin: 0 auto; /* marginは外側の余白を指定 */
    width: 100%;
    box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5);
    border: 3px solid hsl(0 0% 90%); /* border: 1px solid */
    border-radius: 6px;  /*border-radius: 6px;*/
    background: rgb(255,255,255);
    resize: horizontal;
    overflow: hidden;
    max-width: min(calc(600px + 8rem), calc(100vw - 2rem));
    min-width: 340px;
    container-type: inline-size;
    transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
}
/*
.j_article要素内のa要素に対してのスタイルを指定 */
.j_article a {
    align-self: start;    /* 垂直方向の配置を開始位置に設定 */
    text-decoration: none; /* テキストの下線をなくす */
    justify-self: end;    /* 水平方向の配置を終了位置に設定 */
    border-radius: 10px;  /* ボーダーの角 border-radius: 100px;➡️10px;*/
    padding: 0.5rem 2rem;
    border: 0;
    color: rgb(255,255,255);
    font-weight: 120;
    cursor: pointer;
    background: linear-gradient(to right, rgb(000,000,255), rgb(000,255,255)) 0 0 / 200% 100% no-repeat;
    transition: background-position 0.15s;
}
/*
.j_article要素内のa要素がホバーされたりフォーカスされた場合のスタイルを指定。背景位置を右端に移動 */
.j_article a:is(:hover, :focus-visible) {background-position: 100% 0;}
/* 
p要素のマージンを0に設定。段落の上下の余白をなくす */
p {margin: 0;}
/*
.sr-onlyクラスに対してスクリーンリーダー向けのスタイルを指定。このクラスは画面上では見えないがスクリーンリーダーに読み上げられる要素 */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/*
[for=theme]属性セレクタを使用してthemeというIDを持つ要素に対して   スタイルを指定。この要素はテーマ切り替えのためのコントロール */
[for=theme] {width:48px;aspect-ratio:1;position:fixed;bottom:1rem;right:1rem;display:grid;place-items:center;}

/*
[for=theme]属性セレクタの内部のsvg要素(ダークモード切替)に対して幅を75%に設定 */
[for=theme] svg {width:75%;}

/*
#themeがチェックされている場合に、
      それぞれの条件に応じてSVG内のパス要素の不透明度を設定 */

#theme + svg path:first-of-type,
#theme:checked + svg path:last-of-type {opacity: 0;}
#theme:checked + svg path:first-of-type {opacity: 1;}

/*
.j_controlsクラスに対して、スタイルを指定 */
.j_controls {
    display: grid; /* グリッドレイアウトを使用して要素を配置 */
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid rgb(230,230,230);
    border-radius: 6px;
    background: rgb(255,255,255);
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
/*
labelとinput要素に対してアクセントカラーとカーソルのスタイルを指定 */
label,
input {accent-color: rgb(14, 248, 255); cursor: pointer;} /* #db2777;➡️rgb(14, 206, 255);➡️rgb(14, 248, 255); */
/*
.j_sceneクラスに対して、スタイルを指定 */
.j_scene {
    --buff: 3rem; /*--buffはカスタムプロパティでマスク境界を制御 */
    height: 100%;
    width: 100%;
    mask: /* maskは2つの線形グラデーションを使用してマスクを作成。1つは水平方向もう1つは垂直方向 */
        linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
        linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
    mask-composite: intersect; /* intersect;はマスクの合成方法を指定。現在のマスクレイヤーとその下のマスクレイヤーとの重なり部分を表示 */
}

/* 　　#overflowがチェックされている場合.j_sceneクラスのマスクを解除 */
:root:has(#overflow:checked) .j_scene {mask: unset;}
/* 　　#overflowがチェックされている場合.j_windowクラスに対してアウトラインを追加 */
:root:has(#overflow:checked) .j_window {outline: 4px dashed rgb(0, 106, 255); }  /* #db2777;➡️rgb(0, 106, 255); */
/* 　　#overflowがチェックされている場合.j_headerクラスの不透明度を0.2に設定 */
:root:has(#overflow:checked) .j_header {opacity: 0.2;}
/*
:root要素が#dimensionがチェックされている場合.j_grid01クラスに対して--rotateカスタムプロパティを1に設定 */
:root:has(#dimension:checked) .j_grid01 {--rotate: 1;}

/* li 要素に対してのスタイルを指定:サイトの他のliに影響を及ばさない様にする */
.j_li1 {
    min-height: 60px;
    transform-style: preserve-3d;
    width: 100%;
    z-index: calc(1 + var(--active));
    list-style-type: none;
}
.j_li2 {list-style-type: none;} /*箇条書きのマーカーや数字を消す:none; */
/* li::before擬似要素に対してのスタイルを指定 */
.j_li1::before {
    content: "";  /* 擬似要素の内容を空に設定 */
    position: absolute;  /* 絶対位置に配置 */
    inset: 4px 4px -2px -2px;  /* 位置を指定➡️ */
    border-radius: 6px;  /* 角丸➡️ */
    background: rgba(0, 0,250, 0.22);
    filter: blur(calc(var(--active, 0) * 8px));
    z-index: -1;
    transition: scale var(--transition015), opacity var(--transition015), translate var(--transition015), filter var(--transition015);  /* 遷移のスタイルを指定 */
    transform-origin: 50% 0;  /* 変形の原点を指定 */
    scale: 1 calc(1 + (var(--active, 0) * 0.05)); /* スケールを設定 */
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 250, 0.1), 0 2px 4px -2px rgba(0, 0, 250, 0.21);  /* ➡️ */
  box-shadow: 0 0 rgba(0, 0,250, 0.1), 0 0 rgba(0, 0, 250, 0.21), var(--tw-shadow); /*#0000,➡️rgba(0, 0, 250, 0.21);*/
}

/*
.j_windowクラスに対して、高さ、幅、アウトライン、トランジションなどのスタイルを指定 */
.j_window {
   height: 250px;  /* height:250px;➡️350px;➡️400px;➡️250px; */
   container-type: inline-size; /* コンテナのタイプを指定 */
   transform-style: preserve-3d;  /* 3D変換のスタイルを指定 */
   width: 100%;
   outline: 4px dashed transparent; /* 要素のアウトラインを指定 */
   transition: outline 0.5s; /* トランジション:遷移のスタイルを指定*/
}

/*
.j_grid01クラスは、Cardの枠：グリッドのスタイルを指定 */
.j_grid01 {
    --count: 5; /* --countはカスタムプロパティで、アイテムの縦の数を制御 */
    --inset: 0; /* --insetと--outsetはアニメーションのオフセットを制御 */
    --outset: 2.5;
    height: 100%; /* ➡️ .j_itemも、100%; */
    width: 100%;
    margin: 0;
    list-style-type: none; /* 箇条書きのマーカーや数字を消す:none; or 二桁の数字:decimal-leading-zero; */
    position: relative;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr; /* grid-template-columnsはグリッドの列のテンプレートを指定 */
    gap: 0 2rem;     /* gapはグリッドアイテム間の隙間を指定 */
    transition: transform 0.5s; /* トランジション:遷移のスタイルを指定 */
    transform:       /* transformは3D変換を指定 */
        rotateX(calc(var(--rotate, 0) * 20deg))
        rotateZ(calc(var(--rotate, 0) * -20deg))
        skewX(calc(var(--rotate, 0) * 20deg));
}
/*
.j_grid01クラス内のli要素がホバーされた場合、アニメーションの再生状態を一時停止 */
.j_grid01:hover li {animation-play-state: paused;}

/*
.j_grid01クラスに対して、スタイルを指定 */
.j_grid01 {transform-style: preserve-3d; gap: 1rem;} /* gap:グリッドアイテム間の隙間指定 */

/*
.j_itemクラスは、Cardスタイルを指定 */
.j_item {
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    color: hsl(0 0% 10%);
    border-radius: 6px;   /* border-radius: 6px; */
    cursor: pointer;      /* カーソルをポインターに変更 */
    display: flex;       /* フレックスコンテナとして要素を表示 */
    gap: 1rem;            /* 子要素間の隙間を指定 */
    height: 100%;        /* height:100%;➡️.j_grid01も、100%; */
    justify-content: start; /* アイテムを開始位置に配置 */
    overflow: hidden;      /* 要素のオーバーフローを制御 */
    align-items: left;   /* align-items:center;アイテムを中央揃配置➡️ */
    text-align: left;    /* center;➡️left; */
    width: 100%;
    transition: transform var(--transition015), scale var(--transition015), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
    scale: calc(1 + (var(--active, 0) * 0.05));  /*scaleはスケールを設定*/
    transform: translate3d(0, 0, calc(var(--active, 0) * 24px));  /* transformは3D変換を指定*/
    float: left;   /* 画像に回り込む文字 add */
    clear:both;  /* float: left;属性の次はclearの記述は使用しないと画面内容が崩れやすい */
}
.j_item img {
    float: left;  /* 画像に回り込む文字 img部分は要別定義 add */
    clear:both;   /* float: left;属性の次はclearの記述は使用しないと画面内容が崩れやすい */
    padding-right: 2px; /*  7px; add➡️ */
    margin-left: -25px; /* -17px; add➡️ */
}

/*
li:nth-of-type(n:10枚のCard)は、兄弟要素の中で指定された型（タグ名）のn番目の要素を選択。
                     --indexはカスタムプロパティで要素の位置を指定 */
li:nth-of-type(01) { --index: 0; }
li:nth-of-type(02) { --index: 0; }
li:nth-of-type(03) { --index: 1; }
li:nth-of-type(04) { --index: 1; }
li:nth-of-type(05) { --index: 2; }
li:nth-of-type(06) { --index: 2; }
li:nth-of-type(07) { --index: 3; }
li:nth-of-type(08) { --index: 3; }
li:nth-of-type(09) { --index: 4; }
li:nth-of-type(10) { --index: 4; }

/*
@container (width < 400px)は、ウィンドウの幅が400px未満の場合に適用されるメディアクエリ。
  .j_grid01クラスに対してグリッドのテンプレートを指定。
  --countはカスタムプロパティでアイテムの数を制御。
  --durationと--delayはアニメーションの時間と遅延を制御 */
@container (width < 400px) {
    .j_header {grid-template: auto 1fr / 1fr;  }
    .j_header a {justify-self: start;  }
    .j_grid01 {--count: 10; --inset: 0; --outset: 3; grid-template-columns: 1fr; }
    li:nth-of-type(01) { --index: 0; }
    li:nth-of-type(02) { --index: 1; }
    li:nth-of-type(03) { --index: 2; }
    li:nth-of-type(04) { --index: 3; }
    li:nth-of-type(05) { --index: 4; }
    li:nth-of-type(06) { --index: 5; }
    li:nth-of-type(07) { --index: 6; }
    li:nth-of-type(08) { --index: 7; }
    li:nth-of-type(09) { --index: 8; }
    li:nth-of-type(10) { --index: 9; }

    li {--duration: calc(var(--speed) * 1); /* @mediaと同じスピードに変更--duration:calc(var(--speed) * 2);➡️ */
        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8)); }
}

@keyframes slide {100% {translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));}}

/*
@media(prefers-reduced-motion: no-preference)は、ユーザがアニメーションを好むかどうかをチェックするメディアクエリ */
@media(prefers-reduced-motion: no-preference) {
    .j_grid01 {gap: 0 2rem;}

    li {--duration: calc(var(--speed) * 1);
        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
        animation: slide var(--duration) var(--delay) infinite linear;
        translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%); }

        li:hover {--active: 1;}

    @container (width < 400px) {
        li {--duration: calc(var(--speed) * 2);
            --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));  }
    }
}
</style>

3D

hoop:輪っか

輪っか：正転

<div class="main_wrapper_sj">
 <div class="sphere_wrapper_sjy">
  <img alt decoding="async" class="img-300_sj" src="/wp-content/uploads/2021/12/circle_900-900-12.png">
 </div>
</div>

<style type="text/css">
.img-300_sj { width: 300px;}

.main_wrapper_sj {
  display:flex;
  position:relative;
  transform-style:preserve-3d;
  perspective:300px;
  left:0;top:0;bottom:0;right:0;
  align-items: center;  justify-content: center;
}
.sphere_wrapper_sjy {
  transform-style:preserve-3d;
  width:300px;height:300px;
  position:relative;
  animation:rotate3d_10sjy 10s linear infinite; }
 @keyframes rotate3d_10sjy {
  0%   {transform: rotateX(0) rotateY(0); }
  100% {transform: rotateX(0) rotateY(360deg); }
}
</style>

疑似球体に近づける

輪っかを疑似球体に近づける為に回転させる為に、複数の輪っかを15度毎に配置して回転を付けました。（Y軸：0～360）

輪っかの反転

輪っかの周りに簡単な飾りをつけて、X軸：0～-360deg、Y軸：０～360degで、反転させています。

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

15度・75度・135度で交差

概要

輪っか3枚の画像を60度で交差させ反転させて
輪っかの内外周には、飾りを設けRainbow表示をさせています。
この部分のSource Codeの内容は、それぞれ下の　部分で公開しています。
➡ Codeエリアのマウスホバーで アイコンが表示されます。この アイコン　クリックでSourceをクリップボードにコピーできます。

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

Source 公開

HTML Source

概要に戻る

上記回転図形と内容(HTML ＆ CSS)を少し変更しています。

<div class="background_custom9 pt_x">

<div class="main_wrapper_xy">
  <div class="sphere_wrapper_xy">
    <div class="plane_xy plane_01"><!--15度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
    </div>
    <div class="plane_xy plane_05"><!--75度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
    </div>
    <div class="plane_xy plane_09"><!--135度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
    </div>
  </div>
</div>
<div>
<p class="text_3x Rainbow_t">
  <i class="bi bi-filetype-css"></i>  CSSでDesign</p>
</div>

</div>

.css Source

概要に戻る

<style>
.background_custom9 {

      color: white;
      background-color: #1111b2;
      font-size: 1.5em;
}
.pt_x {
  padding-top:100px;
  margin-left: 10px;
  }

.img-300_xy {width:300px; height:300px;}

.main_wrapper_xy {
  display:flex;
  position:relative;
  transform-style:preserve-3d;
  perspective:300px;
  left:0;top:0;bottom:0;right:0;
  align-items: center;  justify-content: center;}

.plane_xy{
  position:absolute;
   transform-style:preserve-3d;
   top:0; right:0; bottom:0; left: 0; }

.plane_xy.plane_01 { transform: rotateY(15deg);}
.plane_xy.plane_02 { transform: rotateY(30deg);}
.plane_xy.plane_03 { transform: rotateY(45deg);}
.plane_xy.plane_04 { transform: rotateY(60deg);}
.plane_xy.plane_05 { transform: rotateY(75deg);}
.plane_xy.plane_06 { transform: rotateY(90deg);}
.plane_xy.plane_07 { transform: rotateY(105deg);}
.plane_xy.plane_08 { transform: rotateY(120deg);}
.plane_xy.plane_09 { transform: rotateY(135deg);}
.plane_xy.plane_10 { transform: rotateY(150deg);}
.plane_xy.plane_11 { transform: rotateY(165deg);}
.plane_xy.plane_12 { transform: rotateY(180deg);}

.spoke_xy{
  transform-origin: 0% 0%;
  transform-style:preserve-3d;
  position:absolute;
  color: rgba(127, 255, 255, 0.5);  /*水色*/
  left:  50%;  top: 50%;  height:150px;  width: 0px;
}
.spoke_xy.spoke_01 { transform: rotateZ(10deg);}
.spoke_xy.spoke_02 { transform: rotateZ(20deg);}
.spoke_xy.spoke_03 { transform: rotateZ(30deg);}
.spoke_xy.spoke_04 { transform: rotateZ(40deg);}
.spoke_xy.spoke_05 { transform: rotateZ(50deg);}
.spoke_xy.spoke_06 { transform: rotateZ(60deg);}
.spoke_xy.spoke_07 { transform: rotateZ(70deg);}
.spoke_xy.spoke_08 { transform: rotateZ(80deg);}
.spoke_xy.spoke_09 { transform: rotateZ(90deg);}
.spoke_xy.spoke_10 { transform: rotateZ(100deg);}
.spoke_xy.spoke_11 { transform: rotateZ(110deg);}
.spoke_xy.spoke_12 { transform: rotateZ(120deg);}
.spoke_xy.spoke_13 { transform: rotateZ(130deg);}
.spoke_xy.spoke_14 { transform: rotateZ(140deg);}
.spoke_xy.spoke_15 { transform: rotateZ(150deg);}
.spoke_xy.spoke_16 { transform: rotateZ(160deg);}
.spoke_xy.spoke_17 { transform: rotateZ(170deg);}
.spoke_xy.spoke_18 { transform: rotateZ(180deg);}
.spoke_xy.spoke_19 { transform: rotateZ(190deg);}
.spoke_xy.spoke_20 { transform: rotateZ(200deg);}
.spoke_xy.spoke_21 { transform: rotateZ(210deg);}
.spoke_xy.spoke_22 { transform: rotateZ(220deg);}
.spoke_xy.spoke_23 { transform: rotateZ(230deg);}
.spoke_xy.spoke_24 { transform: rotateZ(240deg);}
.spoke_xy.spoke_25 { transform: rotateZ(250deg);}
.spoke_xy.spoke_26 { transform: rotateZ(260deg);}
.spoke_xy.spoke_27 { transform: rotateZ(270deg);}
.spoke_xy.spoke_28 { transform: rotateZ(280deg);}
.spoke_xy.spoke_29 { transform: rotateZ(290deg);}
.spoke_xy.spoke_30 { transform: rotateZ(300deg);}
.spoke_xy.spoke_31 { transform: rotateZ(310deg);}
.spoke_xy.spoke_32 { transform: rotateZ(320deg);}
.spoke_xy.spoke_33 { transform: rotateZ(330deg);}
.spoke_xy.spoke_34 { transform: rotateZ(340deg);}
.spoke_xy.spoke_35 { transform: rotateZ(350deg);}
.spoke_xy.spoke_36 { transform: rotateZ(360deg);}

.Rainbow_t {
  width:      100%;
   color: transparent;
   -webkit-background-clip: text;   /* -webkit-が無いと、虹色グラデーションにみになる 2022/01/10 */
   background-clip: text;
   background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
   animation : animation_Rainbow32 32s linear infinite;}
  @keyframes   animation_Rainbow32 {
    0% {background-position: 0 0 }
    100%{ background-position: 600px 0px }}

.text_3x {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 3em;
  font-weight: bolder;}

.Background_Text17 {
   width:      100%; 
   color: transparent; 
   -webkit-background-clip: text;
   background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
  animation : animation_Rainbow17 17s linear infinite;}

  @keyframes  animation_Rainbow17 {                    
     0% { background-position: 0 0 } 
   100% { background-position: 600px 0px }
}

/* 次は、平面円形を回転させるための.cssの一部*/
.sphere_wrapper_xy {
  transform-style:preserve-3d;
  width:300px;height:300px;
  position:relative;
  animation:rotate3d_10s-xy 10s linear infinite; }

 @keyframes rotate3d_10s-xy {
  0%   {transform: rotateX(360deg) rotateY(0); }
  100% {transform: rotateX(0) rotateY(360deg); } }
/*　x軸0～0deg：y軸0～360deg
 @keyframes rotate3d_10s-xy が無いと静止した状態 */  


</style>

平面円形

角度を付け複数配置

同じ平面円形をY軸に10度毎ずらして配置

@keyframesで回転

.css定義の.sphere_wrapper_sjy-x {内に定義した
animation:rotate3d_10sjy-x 10s linear infinite; 部分「rotate3d_10sjy-x」に対して
@keyframes で、
「rotate3d_10sjy-x」の動き「x軸0～0deg：y軸0～360deg」を定義する。
@keyframesが無いと静止した状態になります。

.sphere_wrapper_sjy-x {
　transform-style:preserve-3d;
　width:300px;height:300px;
　position:relative;
　animation: rotate3d_10sjy-x 10s linear infinite; }
@keyframes rotate3d_10sjy-x {
　0% {transform: rotateX(-45deg) rotateY(0); }
　100% {transform: rotateX(-45deg) rotateY(360deg); } }
※．ｘ軸は-45degで固定　（前方向に傾ける）　

dot sphere 10s

ドット（点）で球体を表してみました。

Copilot

“Chat GPT” で、”Bootstrap 5“化の質問をしてみる

今回は、
Bootstrap３のCodeで書かれたWebサイトのフェードイン動作のBootstrap５への置き換え。（横３個のそれぞれのアイコンクリックで、真上に吹き出しフェードインを実現するもの。)

自力でやりたかったのですが、アイコンの真上ではなく左端にフェードインしてしまい、Bootstrap３の時の様にならないので、ChatGPTで検索してみた結果をお伝えしたいと思います。

Chat GPT

筆者もOpenAIに申請(無料で)して
「Chat GPTのAPI key generatedから」API keyを4/5に入手していたのですが、
とある事情から放置状態だったのです。
（OPEN AI社のサイト内にある、『loginChatGPTページ』から、メールアドレスと電話番号を登録することで利用できます。）

無料で使えるChatGPTですが、世界的に人気が集中したことによって、
「無料プランだと動作が遅い…」という声も多く上がっている様です。

ChatGPTの有料サブスクリプション版『ChatGPT Plus』価格は月額20ドル（約2,600円）
① 混雑ピーク時にアクセスしやすい。
② レスポンスの時間が短縮されたりというメリットがある様です。

“Chat GPT” on Edge

でも、無料でGPT-4をEdgeから、簡単に利用できます。
この記事は、Edge の「チャット GPT」で、試した結果をまとめたものです。

まれに以下の様にエラー（下の画像）になることもありますが、
同じ内容（執筆分野の内容）で、プレビュー内の 下書きの生成アイコンをクリックすることでも動作を再開してくれます。

また、長さを長いでリクエストした場合、
以下の様に途中でプレビューが止まってしまうこともありますが、
全体的には問題と言うほどのものではなく、この様な場合は改めてリクエストをすれば良いと思います。
（この様な場合でも、 コピーアイコンは有効ですので、このまでの内容でクリップボードにコピーすることもできます。）

繰り返し同じ内容（執筆分野エリアに記載した内容）で、
下書きの生成をクリックした場合でも、帰ってくる答え（プレビューの内容）が異なった内容になったりもします。

私の場合では、
Bootstrap 5に関することで、
「一切日本語を含まない簡単な英文字単語の羅列」のみで「リクエスト」しても、
ブラウザのベースが日本語であることからか？
回答（プレビュー）表示は日本語混じりになっています。これはスゴイ！

また、ChatGPT相手でも
丁寧に「please」とか「thank you.」を含ませると、
より丁寧な回答が返ってくる様？です。
これもまたChatGPT（AI）の素晴らしいところだと思ます。

Edgeでの使い方

EdgeのCopilot機能でほしい答えを瞬時に入手する方法

操作開始

Edgeの右上にある 　 　 b アイコンをクリックすると、　(又はアイコン)
右側ペインにCopilotのサイドバーが現れます。
（Copilotは、副操縦士(Google翻訳)）
今回は、文章を執筆する機能を試してみます。

右ペイン上部の左から２つめのアイコン 作成アイコンをクリックし、
「執筆分野」に聞きたいこと(検索・質問)について入力します。
例えば、
Bootstrap5 Fade-in HTML and .js all more code please thank you.

pleaseと thank you.を付けたのは、ChatGPT相手により丁寧に書いた方が有効な結果が得られてたからです。

トーン
プロフェッショナル　カジュアル　熱狂的　ニュース　おもしろい
の5パターンから選択できます。

形式

段落　
メール　
ブログの投稿　
アイディア

長さ
短い 　中　長い
3段階から選べます。
欲しい内容の原稿に近いスタイルで生成してくれるのがすごい。

「執筆分野」に適切な長さの文言(日本語もOK)を入力すると、
下書きの生成　が 下書きの生成　に変化します。
下書きの生成　ボタンをクリックすると、すぐに下のプレビューにテキストが生成されます。

生成し終わったら、プレビュー内の下側にある 「Copy」アイコンをクリックしてコピーできます。

ブログの作成ツールなどがEdgeで開いている場合は、「サイトに追加」をクリックするだけで直接貼り付けられ便利です。

環境により（詳細は不明ですが、）出力が1200文字くらいでストップしてしまいます。

回答が気に入らなければ、再度「下書きの生成」をクリックすると、再チャレンジできます。

プレビュー内の、 [下書きを再生成]アイコンのクリックでも再生成してくれます。

実際の操作

執筆分野

「執筆分野」
Bootstrap5 Fade-in code and all HTML and .js code please.

トーン

トーン　プロフェッショナル

形式

長さ

下書きの生成

「執筆分野」内容に、 HTML and .js codeを入れました。
初回の回答は簡単なHTMLと.jsでした。（は含まれていません。）

日本語で答えてくれた！

「執筆分野」に、一言も日本語を入れていないのに、
日本語で答えてくれた。

プレビューに「結果」が表示される。これをコピペした結果が以下の内容です。

回答１

こんにちは、このメールでは、Bootstrap5を使ってフェードインのエフェクトを実現する方法について説明します。必要なHTMLと.jsのコードもすべて示しますので、参考にしてください。 まず、Bootstrap5のCDNをHTMLのheadタグに追加します。 これは、Bootstrap5のスタイルシートとJavaScriptファイルにアクセスするために必要です。

<!-- Bootstrap 5のCDNをHTMLのheadタグに追加(.css & .js)-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css">
<!-- JavaScriptファイルにアクセス -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.bundle.min.js"></script>
</head>　 

次に、フェードインさせたい要素にdata-bs-toggle=”fade”とdata-bs-target=”#id”の属性を追加します。 data-bs-targetは、フェードインさせたい要素のidを指定します。 例えば、以下のようになります。

<button type="button" class="btn btn-primary" data-bs-toggle="fade" data-bs-target="#myDiv">フェードイン</button>
<div id="myDiv" class="fade">ここに何か書く</div>

最後に、フェードインの動作を制御するJavaScriptのコードを書きます。以下のようになります。

<script>
// フェードインさせる要素を取得
var fadeElements = document.querySelectorAll('[data-bs-toggle="fade"]');
// 各要素にイベントリスナーを設定
fadeElements.forEach(function (element) {
// クリックされたときの処理
element.addEventListener('click', function () {
// data-bs-targetの値を取得
var target = element.getAttribute('data-bs-target');
// 対象の要素を取得
var targetElement = document.querySelector(target);
// 対象の要素が存在する場合
if (targetElement) {
// 対象の要素にshowクラスを追加または削除
targetElement.classList.toggle('show');
}
});
});
</script> 

以上で、Bootstrap5を使ってフェードインのエフェクトを実現する方法の説明を終わります。 不明な点がありましたら、お気軽にご連絡ください。よろしくお願いします。

もう少し詳細が知りたかったので、
同じ内容で、「執筆分野」を少し丁寧に
Bootstrap5 Fade-in code and all HTML and .js more code please thank you. として、再度下書きの生成をクリック

thank youを入れたら、「ありがとうございました」が帰ってきました（中々面白いです）。

回答２

Bootstrap5は、CSS と JavaScript のフレームワークで、レスポンシブなウェブサイトやアプリケーションを作成するためのツールを提供します。 Bootstrap5では、フェードインやスライドインなどの様々なアニメーション効果を使って、フモーダルやアイコンなどのコンポーネントに動きを与えることができます。 フェードインのアニメーションを使うには、data-mdb-toggle=”animation” とdata-mdb-animation=”fade-in” という属性をコンポーネントに追加します。例えば、以下のようにボタンにフェードインのアニメーションを適用することができます。

<button type="button" class="btn btn-primary" data-mdb-toggle="animation" data-mdb-animation="fade-in">フェードインするボタン</button>

このようにして、Bootstrap5を使って、コードを書いてフェードインや他のアニメーション効果を実現することができます。 もっと詳しく知りたい場合は、公式ドキュメント を参照してください。ありがとうございました。

[公式ドキュメント を参照してください。]とあり、
１回目の内容に対して<buttunの説明が新たに出てきただけなので、
ダメもとで、さらにもう一度、
同じ内容に、 .cssを追加して、
Bootstrap5 Fade-in code and all HTML and .css and .js more code please thank you.
再度下書きの生成をクリック
今度は、HTML部分と、cssの要素やクラスの説明と合わせて.cssまで答えてくれました。

回答３

Bootstrap5は、Webサイトやアプリケーションの開発に便利なフレームワークです。
Bootstrap5では、CSSやJavaScriptのコードを使って、レスポンシブでモダンなデザインを実現できます。
例えば、Fade-inという効果を使って、要素を徐々に表示させることができます。
Fade-inのコーディングは、以下のように行います。
1. Fade-inさせたい要素に、fadeとshowというクラスを付けます。
2. 要素に、data-bs-toggle=”fade”という属性を付けます。
3. 要素の親要素に、fade-containerというクラスを付けます。
4. fade-containerのCSSに、opacity: 0;とtransition: opacity 0.5s ease;というスタイルを付けます。
5. JavaScriptで、fade-containerのopacityを1に変更します。
以上で、Fade-inのコーディングが完了です。Bootstrap5を使って、Webサイトやアプリケーションの開発を楽しみましょう。
Bootstrap5は、Webサイトやアプリケーションの開発に役立つフレームワークです。
Bootstrap5では、Fade-inというコードを使って、要素を徐々に表示させることができます。
Fade-inコードの例は以下の通りです。

<div class="container">
  <div class="row">
    <div class="col">
      <div class="fade-in">ここにテキストを入力します。</div>
    </div>
  </div>
</div> 

このコードでは、fade-inクラスを持つdiv要素が、ページが読み込まれたときに徐々に表示されます。 fade-inクラスのスタイルは、CSSで定義する必要があります。 例えば、以下のように書くことができます。

<style>
.fade-in {
  opacity: 0;
  transition: opacity 1s;
}
.fade-in.show {
  opacity: 1;
}
</style>

さらにもう一度、同じ内容で、再度下書きの生成をクリック
➡　内容を変更しなくても[下書きの生成]クリックを行うたびに返答内容が変わってくる様です。
➡　人間であれば、「しつこい」と嫌われて無視されるところですが、 流石「ChatGPTです。」

今度は、HTML部分に<!–で注釈付きです。–>

回答４

Bootstrap5は、Webサイトやアプリケーションの開発に便利なフレームワークです。 Bootstrap5では、CSSやJavaScriptのコードを使って、さまざまなデザインや機能を実装できます。 例えば、Fade-in というエフェクトは、要素が徐々に表示されるアニメーションを作ることができます。 Fade-in のコードは、以下のように書くことができます。

<div class="fade-in">
  <p>ここにテキストを入れます。</p>
</div>

<style>
.fade-in {
  opacity: 0;
  transition: opacity 1s;
}
.fade-in:hover {
  opacity: 1;
}
</style>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

このように、Bootstrap5を使えば、簡単にフェードインのアニメーションをコードに追加することができます。もっと詳しく知りたい場合は、公式ドキュメントやチュートリアルを参照してください。

「執筆分野」を微妙に変更した場合、
どの様になるかを確かめたくて、少しだけ「執筆分野」を変えてみました。

Bootstrap5 Fade-in code and all more code thank you please.

回答５

Bootstrap5では、フェードインのアニメーションを使ってモーダルや通知などの要素を表示することができます。 フェードインのアニメーションは、CSS の transition プロパティを使って実現されており、ブラウザの互換性も高いです。 フェードインのアニメーションを適用するには、data-mdb-toggle=”animation” と　data-mdb-animation=”fade-in” という属性を要素に追加します。 例えば、以下のようなコードでボタンをクリックしたときにフェードインするモーダルを作成できます。

<!-- ボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダルを表示
</button>
<!-- モーダル -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">モーダルの内容</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

同じ内容で、形式を
メールに設定した場合。
➡ 下書きの生成部分の出だしが
「こんにちは、」です。まるでメールです。(気付くのが遅かったですが、)

回答６

こんにちは、このメールでは、Bootstrap5を使ってフェードインのアニメーションを実装する方法について説明します。まず、Bootstrap5のCDNをHTMLファイルに追加します。次に、フェードインさせたい要素に.fadeと.showのクラスを付けます。例えば、以下のようなコードになります。モーダルウィンドウをフェードインさせるコードをBootstrap5で書いてみました。モーダルウィンドウは、画面の中央に表示される小さなウィンドウで、ユーザーに何かを伝えたり、入力を求めたりするときに便利です。Bootstrap5では、モーダルウィンドウを作成するためのコンポーネントが用意されています。以下のコードは、ボタンをクリックするとモーダルウィンドウがフェードインして表示される例です。ありがとうございます。よろしくお願いします。

<div class="fade show"><p>ここにフェードインするテキストが入ります。</p></div>

これで、ページを読み込んだときにテキストがフェードインするようになります。もし、クリックやホバーなどのイベントでフェードインさせたい場合は、JavaScriptのコードを書く必要があります。例えば、以下のようなコードになります。

<script>
// フェードインさせたい要素を取得
var fadeElement = document.querySelector(".fade");
// クリックしたときにフェードインする関数を定義
function fadeIn() {
fadeElement.classList.add("show");
}
// フェードインさせたい要素にクリックイベントを追加
fadeElement.addEventListener("click", fadeIn);
</script>

これで、要素をクリックしたときにテキストがフェードインするようになります。他のイベントやオプションについては、Bootstrap5の公式ドキュメントを参照してください。以上が、Bootstrap5でフェードインのアニメーションを実装する方法の説明です。もし、質問や不明点がありましたら、お気軽にご連絡ください。ありがとうございました。

同じ内容で、形式を
アイディア に設定した場合。
　➡　下書きの生成に要点の　 箇条書きがあります。

ただ、続けて同じ質問をしたせいか？
HTML、.css、.jsは省略されました。
➡　前に「メールで答えたよね？」・・・とでも言う様に「人間的な返答です。」

回答７

Bootstrap5のフェードインコードについて
– Bootstrap5では、モーダルやアラートなどのコンポーネントにフェードインのアニメーション効果を適用できます。
– フェードインのアニメーションは、CSSのtransitionプロパティとopacityプロパティを使って実現されています。
– フェードインのアニメーションを有効にするには、コンポーネントのクラス名にfadeクラスを追加します。
– フェードインのアニメーションを無効にするには、fadeクラスを削除します。
– フェードインのアニメーションの速度やタイミングなどをカスタマイズするには、CSS変数やカスタムプロパティを使って調整できます。
以上がBootstrap5のフェードインコードに関する説明です。ご参考になれば幸いです。ありがとうございます。

Error

次はErrorの例です。
　最初から動きが他とは異なっていました。

このコードでは、fade-in というクラスを作り、その中にテキストを入れています。スタイルシートでは、fade-in クラスの要素に透明度とトランジションを設定しています。マウスを要素の上に乗せると、透明度が1になり、テキストが表示されます。これで、Fade-in のエフェクトが完成です。Bootstrap5では、フェードインするアニメーションを使って、ウェブページに動きを加えることができます。フェードインするアニメーションは、要素が徐々に透明度を増して表示される効果です。フェードインするアニメーションを適用するには、data-mdb-toggle=”animation”という属性と、data-mdb-animation=”fade-in”という属性を要素に追加します。さらに、data-mdb-animation-reset=”true”という属性を追加すると、アニメーションを繰り返すことができます。以下は、フェードインするアニメーションのコード例^※です。 Bootstrap5では、 フェードインのアニメーション効果を使って、モーダルやカルーセルなどのコンポーネントをより魅力的に見せることができます。 フェードインのアニメーションは、CSSのtransitionプロパティとopacityプロパティを組み合わせて実現されています。 フェードインのアニメーションを適用するには、対象の要素に.fadeクラスを付けるだけです。 また、.showクラスを付けると、要素が表示された状態になります。 以下は、フェードインのアニメーションを使ったモーダルのコード例^※です。

※.コード部分はプレビュー内ではなく」
実行途中に、プレビューの上部に順次表示されていました。
最終的には、プレビューの中に以下の様なエラーが表示されて、コピペは出来ない状態になりました。」
コピペ出来たのは以下の内容です。

「申し訳ございません。プロンプトに応答できません。他の方法をお試しください。」

回答８

Error表示

執筆分野を
Bootstrap5 Fade-in code and all HTML and .js more code please thank you.に

文章のトーンは、熱狂的を選びました。 形式を
メールで

ただ、回答の内容の何が「熱狂的」なのかはわかりませんでした。

回答９

こんにちは、Bootstrap5の使い方についてメールを送ります。Bootstrap5は、ウェブサイトのデザインを簡単にするためのフレームワークです。Bootstrap5では、さまざまなコンポーネントやユーティリティを使って、レスポンシブでモダンなウェブページを作成できます。今回は、Bootstrap5でフェードイン効果を実現する方法について説明します。フェードイン効果とは、ウェブページに要素が徐々に表示されるアニメーションのことです。Bootstrap5では、fadeクラスとshowクラスを使って、フェードイン効果を簡単に実装できます。例えば、以下のようなHTMLコードがあるとします。

<div class="container">
  <h1>Bootstrap5でフェードイン効果を作る</h1>
  <div id="fade-in" class="alert alert-primary fade">これはフェードインする要素です。</div>
</div>

このコードでは、containerクラスでコンテナを作り、h1タグで見出しを作ります。
そして、fade-inというidとalertクラスとfadeクラスを持つdivタグを作ります。
alertクラスはBootstrap5のコンポーネントで、メッセージを表示するためのものです。
fadeクラスはBootstrap5のユーティリティで、フェードイン効果を適用するためのものです。

このコードだけでは、フェードイン効果は発生しません。
フェードイン効果を発生させるには、JavaScriptのコードが必要です。
以下のようなJavaScriptのコードを追加します。

<script>
  // fade-inというidの要素を取得する
  var fade_in = document.getElementById("fade-in");
  // ウィンドウが読み込まれたら、showクラスを追加する
  window.addEventListener("load", function() {
    fade_in.classList.add("show");
  });
</script>

このコードでは、fade-inというidの要素を取得し、ウィンドウが読み込まれたらshowクラスを追加します。
showクラスはBootstrap5のユーティリティで、要素を表示するためのものです。 fadeクラスとshowクラスを組み合わせることで、フェードイン効果が実現できます。
以上が、Bootstrap5でフェードイン効果を作る方法です。
Bootstrap5では、他にも多くのアニメーションやエフェクトが用意されています。
ぜひ試してみてください。ありがとうございました。

執筆分野を
Bootstrap5 Fade-in HTML and .js all more code please thank you.に

文章のトーンは、熱狂的 を選びました。 形式は
ブログの投稿で

ここで、文字数制限からか？・・・以下の様に出力が途中で止まってしまいました。
もし画面内に　で止まっています。幸いにも、途中までコピペできました。

回答10

こんにちは、Bootstrap5のファンの皆さん！今日は、Bootstrap5でFade-in HTMLと.jsを使って、素敵なアニメーションを作る方法をご紹介します。このテクニックは、ウェブサイトやアプリに動きと魅力を加えるのに最適です。さらに、Bootstrap5はとても使いやすく、コードもシンプルで効率的です。では、早速始めましょう！まず、HTMLファイルに以下のコードを書きます。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card fade-in" data-delay="0">
        <img src="img1.jpg" class="card-img-top" alt="Image 1">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">This is a card with a fade-in effect.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card fade-in" data-delay="500">
        <img src="img2.jpg" class="card-img-top" alt="Image 2">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">This is another card with a fade-in effect.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

このコードでは、Bootstrap5のグリッドシステムとカードコンポーネントを使って、2つのカードを作っています。
それぞれのカードには、fade-inというクラスと、data-delayという属性を付けています。
fade-inクラスは、カードにフェードイン効果を与えるためのもので、
data-delay属性は、フェードインが開始されるまでの時間（ミリ秒）を指定するためのものです。
この例では、左のカードは0ミリ秒（すぐに）、右のカードは500ミリ秒（0.5秒）後にフェードインが始まります。
次に、.jsファイルに以下のコードを書きます.

<script>
$(document).ready(function() {
  // フェードイン要素を非表示にする
  $(".fade-in").hide();
  // スクロールイベントを監視する
  $(window).scroll(function() {
    // フェードイン要素を順番にチェックする
    $(".fade-in").each(function() {
      // フェードイン要素の位置を取得する
      var position = $(this).offset().top;
      // ウィンドウの高さとスクロール量を取得する
      var windowHeight = $(window).height();
      var scroll = $(window).scrollTop();
      // フェードイン要素が画面内に入ったら
      if (position < windowHeight + scroll) {
        // フェードイン要素のディレイ時間を取得する
        var delay = $(this).data("delay");
        // ディレイ時間後にフェードインする
        $(this).delay(delay).fadeIn(1000);
      }
    });
  });
});
</script>

このコードでは、jQueryを使って、フェードイン効果を実現しています。 まず、フェードイン要素を非表示にしておきます。 次に、ウィンドウがスクロールされたときに発生するイベントを監視します。 その中で、フェードイン要素を順番にチェックして、その位置が画面内に入ったかどうかを判定します。 もし画面内に

執筆分野を
Bootstrap5 Fade-in HTML and .js all more code please thank you.
のまま、

トーン　熱狂的　 形式　
ブログの投稿　 再度　下書きの生成をクリックしてみました。
➡　結果は、途中までで、前回のものとは異なりますが、今回分と合わせることによって利用できるのではないかと思います。

回答11

こんにちは、Bootstrap5の素晴らしい機能の一つであるフェードイン効果についてお話ししたいと思います。フェードイン効果とは、HTML と JavaScript を使って、モーダルやアラートなどのコンポーネントをページにスムーズに表示させることができるアニメーション効果です。Bootstrap5では、jQuery を使わずにこの効果を実現できます。どのようにしているのでしょうか？それでは見ていきましょう。まず、フェードイン効果を使いたいコンポーネントに .fade クラスを追加します。例えば、以下のようなモーダルの場合です。

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

次に、JavaScript を使って、モーダルを表示するトリガーとなる要素にdata-bs-toggle=”modal” と data-bs-target=”#exampleModal” のような属性を追加します。例えば、以下のようなボタンの場合です。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

これで、ボタンをクリックすると、モーダルがフェードインして表示されます。同様に、アラートやトーストなどの他のコンポーネントにもフェードイン効果を適用できます。詳しくは、Bootstrapの公式ドキュメントを参照してください。フェードイン効果は、ページに動きと魅力を加えるだけでなく、ユーザーの注意を引くのにも役立ちます。Bootstrap5 を使って、フェードイン効果を簡単に実装できることがわかりましたね。ぜひ試してみてください。ありがとうございました。

“Chat GPT” on Edgeで得られた結果

僅かなヒントは得られたものの、実現にはもっと調査・検証が必要です。
その為には、もっと的確（ChatGPTに分かる様な）なキーワードが必要と思われます。
ただ、完璧な答えを求めるつもりもなく・過度な期待も未だできない、
しかし、もっと適切なキーワードを使えば良いヒントが得られるかも知れません。
ChatGPTは、GPT-4まで来ており、今後ますます進化してくると思います。
次回は、日本語も含めて行ってみたいとも考えています。

実現したいのはこれ

アニメーション.gifで表示しています

実際のサイト：[conctere 5(v.8)]&[Bootstrap 3]で実現

ブログカード

柔軟な編集最適表示と操作性あなたのホームページを自然な形で制作

コンテンツの投稿差替え変更が柔軟にできあなたのホームページから自然な形でマーケティングできます。最適な表示と操作性であなたのお客様にアピールできるオウンドメディアのホームページは地域ビジネスに最適です。売り込みではなく自然な形で・あなたのお...

a-itc.info

開発環境

アニメーション.gifで表示しています

テスト・サイト：[Conctere CMS(v.9)]&[Bootstrap 5]で実現

おわかり戴けるでしょうか？
下記画像の様に一瞬だけ正しい位置に吹き出しが現れ

その後すぐに、 下記画像の様に左端に吹き出しが固定表示（どのアイコンのhoverでも）

まとめ

結論は、この様なアプローチでは、解決に至る為の、ヒントはえられなかったこと。

ただ、Bootstrap 5になって新しくなった定義方法が見つかったことが成果ともいえる。

Bootstrap5では、「フェードインのアニメーションは、CSSのtransitionプロパティを使って実現され」
フェードインのアニメーションを適用するには、
data-mdb-toggle=”animation” と
data-mdb-animation=”fade-in” という属性を要素に追加という事が分かったこと。

ChatGPTは未だ進化の途中であるので、今後より詳しい内容の回答が得られる様になってくるのでしょう。
現時点では多くは望めないかも知れません。
切り口を変えて、様々な「執筆分野」の内容を変えてアプローチしてみるのが良いかも知れません。

例えば、
Bootstrap5 Fade-in HTML and .js all more code please thank you.ではなく

Fade-in .css Full Code “Bootstrap5” vs “Bootstrap3” please.とか、

Fade-in HTML and .css and .js Full Code “Bootstrap5” vs “Bootstrap3” please.など・・・

理由は、[開発環境]でも示している通り、既にフェードイン自体は実現しており、
Edgeの「ChatGPT」で得られた情報だけでは、解決に至るヒントが得られていないこと、
上に上げたアプローチでは、明確に「ChatGPT」に伝えきれていない、というか、
まだ「ChatGPT」にそこまでの内容で理解(的確な回答を）を求めるのは無理な様な気がしていることと、

もっと的確なアプローチがあるはずだと思えるるからです。

結果は、進展があれば、またBlogで報告したいと思っています。

Copilotに聞いてみた（１）

追加の質問 　➡

関連記事

生成AI：Copilotより扱いやすいBingGPT。無料でGPT-4 ! Edge不要でWindowsだけでなく、macOSやLinuxでも利用できる。

ブラウザの狭い右ペインでなく、Window画面にそのまま大きく展開できること タスクバーにピン留めでき、いつでも呼び出せる。ChatGPT(無料版)より優秀なGPT-4(改)を利用し無料。Copilotと違ってEdge起動も不要。Windowsだけでなく、macOSやLinuxでも利用できる。

イイネ.biz

2023.07.25

生成AI：ChartGPTの有用性を無料で➡ GPT-4 Copilotで、 プラグインを評価：日本語で検索

すごいぞChatGPT（これは、場合によっては 検索エンジンを圧倒し、遥かに強力な利用者の為のエンジンになる！）。項目ごとに詳細を記入して質問するとちゃんとした日本語で答えてくれた。正しい言い回しでしかもスムーズに文書が返ってくる。アイデアを選べば、項目ごとに箇条書きもしてくれる。但し、専門的な内容では元になるBigDataが古い様で要注意。質問内容もさることながら、質問する文書の組み立て、前提条件、回答要件などの内容が大事です。

イイネ.biz

2023.10.19

生成AI：無料でGPT-4 日本語で検索してみる Copilot（WordPressプラグイン を探す）

何も評価項目を付けずに除外条件のみで、「ワードプレスで有効なreCAPTCHAプラグインを50個教えてください。但し、有料版、Add-On、ContactForm系、複合プラグインは除外してください。」で検索してみる。次に、評価項目を付けて、更に、https://ja.wordpress.org/plugins/search/reCAPTCHA/ で調べたPluginを順に提示し、提示分を含め評価項目順に評価し、未提示Pluginを含めBest20を求めてみた。「検索結果がスムーズに、驚くべき速さで反映され関心する」半面、相互に限界も感じる。 「記載内容・順序・正確性、条件」などが大事なこと。正確な日本語表現を心がけていても、重複する内容が返ってきたりする。もちろん「執筆分野」への記載内容の工夫、改善の余地があること、改善の方法を模索する必要があることは認識している。

イイネ.biz

2023.10.19

生成AI：Copilot（GPT-4）に .cssデザインの改善を尋ねてみた（無料）

今回の場合、ChatGPTから提供された回答（スケルトン）を少し修正・変更するだけで、実用になる（使える）ものを入手することができました。ただ、今回の様に必ず旨く通用するもの入手できるか？というと、そうでもない様です。肝心なことは、「執筆分野」に投稿する内容・質（適語表現であることも含め）・難易度だろうと思います。また、技術的なものであった場合、ChatGPTが保有するBigDataが最新のものでは無いため、特に進化の早いIT関連技術では、最新の情報やテクニックは入手し辛いものになっている様です。筆者が、別の切り口で「執筆分野」に投稿したものは、未だ有効な情報の入手が出来ないでいるのが現状です。

イイネ.biz

2023.06.03

生成AI：Copilot(GPT-4)にInvisible reCAPTCHA for WordPressの代替を問う．しかも無料で

あなたは調べ物をする場合、どの様な手段で行いますか？Google検索などで様々なサイトに訪れて探すのが一般的であったかも知れません。ところが今はChatGPTに代表される便利なツールがあります。私は、改良※GPT-4の「Copilot」を使...

イイネ.biz

2024.07.30

#ChatGPT, #GPT-4, “ChatGPT in Edge”, “ChatGPT on Edge”, “#Chat GPT for Edge”
#Bootstrap 5, #Bootstrap3, #Tool, #ConcreteCMS

Bootstrapは、ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されています。
GitHubで四番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。
「特徴」
HTML5やCSS3では比較的サポートが不完全であるが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。

ウキペディア

Bootstrapのグリッドシステム

ブレイクポイントによる切り替え

(max12Column)

　Bootstrap ５　

Bootstrapフレームワーク

主なアイコンフォントは Bootstrapのものです。(FontAwesomeではありません)

レスポンシブ グリッドシステム

3カラム グリッド

※．テーブルではありません。

　 自動折り返し

３カラムグリッドは、以下の様に定義しています。
　　部分的なHTML

    <div class="col">01 <i class="bi bi-bootstrap-fill" style="color: #563d7c;"></i>123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･</div>
    <div class="col">02 <i class="bi bi-bootstrap" style="font-size: 2rem;color: #563d7c;"></i></div>
    <div class="col">03 <i class="bi bi-alarm-fill" style="font-size: 2.5rem;color: #563d7c;"></i></div>
  

12カラム グリッド (max12Column)

　 　自動折り返し

①Bootstrap5の２分割グリッド表示

2分割:　 自動折り返し無し

以下の２分割表示グリッドは、折り返ししていない（特に指定していないが）為、コンテンツがグリッドからいずれも、はみ出しています。

col-sm-8は、col-smの8個分、col-sm-4は、col-smの4個分、つまり、

8+4で全部で12個分のColumnを（bootstrap.css）で、割り当てています。

text-truncateクラスで長い文字列を省略記号表示指定

こちらは、Bootstrapのtext-truncateクラス指定で、グリッドからはみ出す部分は省略記号表示 されています。

①Bootstrap5の２分割グリッドのHTMLソースコード表示

以下が、実際のコンテンツ部分のHTMLコードです。
Classで定義しているものは、いずれも「bootstrap.min.css」のものです。
“container”,”row”,”col-sm-8″,”col-sm-4″,”text-truncate”,
この、”container“,”row“,”col*”が、グリッドシステムを支える3つのCSSクラスです。
　　HTML

  <p>2分割:　<i class="bi bi-check2-square" style="color: #ff563d;"></i> 自動折り返し無し</p>
  <div class="container">
    <div class="row">
    　<div class="col-sm-8">col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:</div>
    　<div class="col-sm-4">col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
    </div>
  <p>text-truncateクラスで長い文字列を省略記号表示指定</p>
    <div class="row">
    　<div class="col-sm-8 text-truncate">col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:</div>
    　<div class="col-sm-4 text-truncate">col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
    </div>
  </div>

②Bootstrap5の3分割グリッド表示

3分割:　 自動折り返し無し

以下の３分割表示グリッドは、折り返ししていない為、
コンテンツがグリッドからいずれもはみ出しています。
また、１行(row)に収まらず、結果３分割目が２行目にはみ出してしまっています。

text-truncateクラス指定で長い文字列を省略記号表示
こちらは、Bootstrapのtext-truncateクラス指定で、
グリッドからはみ出す部分は省略記号表示 されています。
更に、省略記号表示で1行(row)内に収まっています。

②Bootstrap5の3分割グリッドHTMLソースコード表示

Class＝”col-sm”も、「bootstrap.min.css」のものです。
　　HTML

  
  <p>Max3分割:自動折り返し無し	</p>
  <div class="container">
  　<div class="row">
  　　<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
  　　<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
  　　<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
  　</div>

  <p>text-truncateクラス指定で長い文字列を省略記号表示</p>
    <div class="row">
      <div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
      <div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
      <div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
    </div>
  </div>

コンテンツ以外のHTMLソースコードを表示しておきます。

　　HTML

  <!doctype html>
  <html lang="ja">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
  <title></title>
  </head>
  
  <body class="body">
  <h1></h1>
  <h2></h2>
  <h3></h3>
  

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
  </html>

ネスト：第二階層

ネスト:不連続文字(自動折り返し)

ネスト:アイコン文字2.2em

ネスト:svg画像256

Bootstrapを使ったサイト

Bootstrapを使った具体的なサイトはこちらからどうぞ！

タップで電話がすぐできるスマホ最適サイト制作横浜

来店型地域ビジネスに最適なホームページを ご提供。スマホ最適サイトが選ばれる理由①分かりやすい②使いやすい③見やすい④利用者のベネフィットがある⑤利便性がある⑥利用者が見つけやすい⑦安心できる・安心して個人情報を入れられる。ライバルを表示し...

a-itc.info

Bootstrapアイコンサンプル

v1.8.0：フリー、高品質、オープンソース、そして1500以上のアイコンを持つアイコンライブラリです。
SVG や SVG スプライト、Web フォントなど多様な方法で利用できます。
Bootstrapと合わせても、合わせなくても使えます。

Bootstrapアイコン　”activity“は、 です。
.svg記述では、 <svg xmlns=”http://www.w3.org/2000/svg” width=”16″ height=”16″ fill=”currentColor” class=”bi bi-activity” viewBox=”0 0 16 16″> <path fill-rule=”evenodd” d=”M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z”/> </svg> です。
class記述では、 <class=”bi bi-activity”> </i> です。
cssでは、 content: “\F66B”; と記述しています。

以下、アイコンの一部ご紹介します。<div class=”row” style=”font-size: 2em;color: #7952b3;”>で

Bootstrap Table

responsive Table hover

Table-hoverクラスを使用して、マウスオーバー表示をしています。

div class=”container”
div class=”table-responsive”
table class=”table table-hover table-dark”
th scope=”col” class=”text-nowrap“
td class=”text-nowrap“

折り返し無しを確認する

以下は折り返し無しを確認する為のresponsive Table です。

画像の位置合わせ

Floatユーティリティークラスを使用した配置例

画像の間で文書表現する為には、範囲内に収まる文字数での記載が必要です。

画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。

主なcodeは、以下の様な内容です。

  <div class="container">
    <div class="clearfix">
      <p>画像の間で文書表現をするために必要なこと。・・・・・</p>  
      <img src="/img/b1-200x200.svg" class="float-start" alt="左揃え画像">
      <img src="/img/b2-200x200.svg" class="float-end"   alt="右揃え画像">
      <p>画像の間で文書表現をするために必要なこと。・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。</p>
    </div>
  </div>

<style>
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
  .float-start {
    float: left !important;
  }
  .float-end {
    float: right !important;
  }
  .float-none {
    float: none !important;
  }
</style>

　※ 注01

スマホでの表示（例）

パソコンで表示幅を最小にした場合（Chrome）

BootstrapでFontAwesome Brands

Bootstrap5ブランドアイコン