操作できます➡️無限のマーキー・カルーセル 繰り返し要素なし Blog Card Design

無限のマーキー・カルーセル css :デザイン
操作できます➡️無限マーキー・カルーセル
記事内に広告が含まれています。

CSS Design

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

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

  • 3D化:☑でカルーセルが左斜め上に移動
  • Overflow:☑でカルーセルのはみ出し表示
  • Speed:スライダーを動かしてスクロール速度調整

カード・ホバーでスクロール停止、クリックで記事へ、「切替」でダークモード

PR広告

Design

3D Normal表示

3D Normal
3D Normal

3D Overflow表示

3D Over
3D Over

2D Normal表示

2D Normal
2D Normal

2D Overflow表示

2D Over
2D Over

ダークモード表示切替

3D表示比較

Overflow表示比較

2D表示比較

2D Overflow比較

PR広告

実際のコンテンツ

操作してみてください

各「カード」・「ボタン」のクリックで、実際のページにジャンプします。
「カード」へのカーソル・ホバーでスクロールが停止します。
を付けたり、外したり

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

ソースコード

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;">5年前のパソコンでも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( Container2)*/
.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>