ふろんと遠藤https://front-endo.comSat, 23 Aug 2025 22:27:14 +0000jahourly1https://front-endo.com/wp-content/uploads/2024/01/cropped-f9efdf74cb6842cb69a6dbcacfff4149-32x32.pngふろんと遠藤https://front-endo.com3232 【超初学者向け】WebGL超入門〜WebGLの基本を徹底解説〜https://front-endo.com/webgl-beginner/?utm_source=rss&utm_medium=rss&utm_campaign=webgl-beginnerSat, 23 Aug 2025 22:27:13 +0000https://front-endo.com/?p=321

記事内に広告を含みます もくじ WebGLの基本概念 GPUとCPU シェーダー（Shader） 頂点、プリミティブ、テクスチャ レンダリングパイプラインの概要 WebGLプログラミングの基礎 canvasの準備 Jav ... ]]>

記事内に広告を含みます

もくじ

  1. WebGLの基本概念
    1. GPUとCPU
    2. シェーダー（Shader）
    3. 頂点、プリミティブ、テクスチャ
    4. レンダリングパイプラインの概要
  2. WebGLプログラミングの基礎
    1. canvasの準備
    2. JavaScriptファイルの準備とWebGLコンテキストの取得
    3. シェーダーの作成とコンパイル
    4. プログラムのリンクと使用
    5. 頂点データの準備
    6. 描画

WebGLの基本概念

WebGLプログラミングを始める前に、いくつかの重要な基本概念を理解しておくことが重要です。これらは3Dグラフィックスを扱う上で共通する考え方であり、WebGLも例外ではありません。

GPUとCPU

コンピュータの頭脳であるCPU（Central Processing Unit）は、汎用的な計算処理を得意とします。一方、GPU（Graphics Processing Unit）は、その名の通りグラフィックス処理に特化したプロセッサです。特に、3Dグラフィックスの描画に必要な大量の並列計算（例えば、何百万もの点の位置や色を同時に計算する）を高速に処理する能力に優れています。

WebGLは、このGPUの能力を最大限に引き出すことで、ウェブブラウザ上で滑らかな3Dグラフィックスを実現しています。CPUは描画に必要なデータ（モデルの形状、テクスチャなど）を準備し、GPUに描画命令を送る役割を担います。GPUはそれらの命令を受け取り、実際に画面に描画する処理を行います。

シェーダー（Shader）

シェーダーは、GPU上で実行される小さなプログラムのことです。WebGLでは、主に2種類のシェーダーを使用します。

•頂点シェーダー（Vertex Shader）: 3Dモデルを構成する「頂点」の位置を計算し、画面上のどこに表示するかを決定します。例えば、モデルを回転させたり、拡大縮小したりといった変形処理は、この頂点シェーダーで行われます。

•フラグメントシェーダー（Fragment Shader）: 画面上のピクセル（フラグメント）ごとに色を計算します。光の当たり具合やテクスチャの色などを考慮して、最終的なピクセルの色を決定します。これにより、リアルな質感や陰影が表現されます。

これらのシェーダーは、GLSL（OpenGL Shading Language）というC言語に似た専用の言語で記述されます。WebGLでは、JavaScriptからこれらのGLSLプログラムをGPUに送り込み、実行させます。

頂点、プリミティブ、テクスチャ

3Dグラフィックスは、非常にシンプルな要素の組み合わせでできています。

•頂点（Vertex）: 3D空間における点の位置情報です。通常、X、Y、Zの3つの座標で表されます。頂点には、色や法線（面の向きを表すベクトル）、テクスチャ座標などの情報も付加されます。

•プリミティブ（Primitive）: 頂点を組み合わせて作られる基本的な図形のことです。WebGLでは、主に以下の3種類のプリミティブを扱います。

•点（Points）: 1つの頂点からなる点。

•線（Lines）: 2つの頂点からなる線分。複数の線分を連結して線を描くこともできます。

•三角形（Triangles）: 3つの頂点からなる面。3Dモデルは、この三角形の集合体として表現されます。複雑な曲面も、非常に小さな三角形の集まりとして表現されます。

•テクスチャ（Texture）: 3Dモデルの表面に貼り付ける画像のことです。これにより、モデルに色や模様、質感を与えることができます。例えば、木の板のモデルに木のテクスチャを貼り付けることで、よりリアルな木の質感を表現できます。

レンダリングパイプラインの概要

WebGLが3Dグラフィックスを描画する一連の流れは、「レンダリングパイプライン」と呼ばれます。これは、3Dデータを入力として受け取り、最終的に2Dの画像として画面に出力するまでの各段階を指します。大まかな流れは以下の通りです。

1.データ準備: CPUが3Dモデルの頂点データ、テクスチャ、シェーダープログラムなどを準備します。

2.頂点処理: 頂点シェーダーが各頂点の位置を計算し、3D空間から2Dスクリーン上の位置に変換します。

3.プリミティブアセンブリ: 変換された頂点から、点、線、三角形などのプリミティブを組み立てます。

4.ラスタライズ: 組み立てられたプリミティブを、画面上のピクセルに変換します。この段階で、どのピクセルがどのプリミティブに属するかが決定されます。

5.フラグメント処理: フラグメントシェーダーが各ピクセルの最終的な色を計算します。テクスチャの適用や光の計算などが行われます。

6.フレームバッファへの書き込み: 計算されたピクセルの色が、最終的に画面に表示される「フレームバッファ」に書き込まれます。

このパイプラインを高速に処理することで、WebGLはリアルタイムでの3Dグラフィックス描画を可能にしています。

WebGLプログラミングの基礎

ここからは、実際にWebGLを使って簡単な図形を描画するための基本的な手順を見ていきましょう。WebGLプログラミングは、HTMLとJavaScriptを使って行います。

canvasの準備

まず、WebGLの描画領域となるcanvas要素をHTMLファイルに用意します。このcanvas要素が、WebGLが3Dグラフィックスを描画するための「キャンバス」となります。

HTML
<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebGL基本サンプル</title>
</head>
<body> <canvas id="webgl-canvas" width="400" height="400"></canvas> <script src="webgl-sample.js"></script>
</body>
</html>

JavaScriptファイルの準備とWebGLコンテキストの取得

次に、JavaScriptファイルでWebGLの処理を記述します。最初に、HTMLで用意したcanvas要素を取得し、そのcanvasからWebGLの描画コンテキストを取得します。このコンテキストを通じて、WebGLのAPIを呼び出してグラフィックスを描画します。

JavaScript
// Canvas要素を取得
const canvas = document.getElementById('webgl-canvas');
// WebGLコンテキストを取得
const gl = canvas.getContext('webgl');
// WebGLがサポートされているかチェック
if (!gl) { alert('WebGLがサポートされていません'); throw new Error('WebGL not supported');
}

シェーダーの作成とコンパイル

WebGLでは、前述の通り「頂点シェーダー」と「フラグメントシェーダー」が必要です。これらのシェーダーのソースコードをJavaScript内で文字列として定義し、WebGLにコンパイルさせます。

JavaScript
// 頂点シェーダーのソースコード
const vertexShaderSource = ` attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
`;
// フラグメントシェーダーのソースコード
const fragmentShaderSource = ` precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色 }
`;
// シェーダーをコンパイルする関数
function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('シェーダーのコンパイルエラー:', gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader;
}

プログラムのリンクと使用

コンパイルされた頂点シェーダーとフラグメントシェーダーをリンクして、一つの「プログラム」を作成します。このプログラムが、GPU上で実行される実際の描画処理の単位となります。

JavaScript
// シェーダーを作成
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
// プログラムを作成してシェーダーをリンク
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// リンクが成功したかチェック
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error('プログラムのリンクエラー:', gl.getProgramInfoLog(program)); throw new Error('Program link failed');
}
// プログラムを使用
gl.useProgram(program);

頂点データの準備

描画したい図形（例えば三角形）の頂点データをJavaScriptの配列で定義し、それをGPUが扱える形式（バッファオブジェクト）に変換してGPUに送ります。

JavaScript
// 三角形の頂点データ（x, y座標）
const vertices = new Float32Array([ 0.0, 0.5, // 上の頂点 -0.5, -0.5, // 左下の頂点 0.5, -0.5 // 右下の頂点
]);
// バッファを作成して頂点データを送信
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 属性の位置を取得
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
// 属性を有効にして設定
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

描画

最後に、準備したデータとプログラムを使って、実際に図形を描画します。ここでは、クリアカラーの設定や、描画するプリミティブの種類（三角形など）を指定します。

JavaScript
// ビューポートを設定
gl.viewport(0, 0, canvas.width, canvas.height);
// 背景色を設定（黒色）
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 画面をクリア
gl.clear(gl.COLOR_BUFFER_BIT);
// 三角形を描画
gl.drawArrays(gl.TRIANGLES, 0, 3);

これらのステップを経て、ウェブブラウザ上に3Dグラフィックスが表示されることになります。最初は複雑に感じるかもしれませんが、一つ一つのステップを理解していくことで、WebGLプログラミングの面白さがわかってくるでしょう!

]]>【CSS】height:0→autoにtransitionさせる方法まとめhttps://front-endo.com/interpolatesize/?utm_source=rss&utm_medium=rss&utm_campaign=interpolatesizeTue, 19 Aug 2025 22:28:24 +0000https://front-endo.com/?p=325

これまでは、CSSでheight: autoやwidth: autoといった「自動調整」のサイズをアニメーションさせるのは、とても難しいことでした。例えば、ボタンにマウスを合わせると幅が広がったり、アコーディオンメニュー ... ]]>

これまでは、CSSでheight: autoやwidth: autoといった「自動調整」のサイズをアニメーションさせるのは、とても難しいことでした。例えば、ボタンにマウスを合わせると幅が広がったり、アコーディオンメニューが開くときに高さがスムーズに伸びたりする動きです。

しかし、最近のCSSの進化によって、この「自動調整」のサイズも驚くほど簡単に、そしてスムーズにアニメーションさせることができるようになりました！その秘密は、新しく登場したinterpolate-sizeプロパティとcalc-size()関数にあります。今回は、これらの便利な機能がどのようなもので、どのように使えるのかを、初心者の方にもわかりやすく解説していきます。

記事内に広告を含みます

もくじ

  1. 新機能！interpolate-sizeとは？
  2. これも新機能！calc-size()とは？
  3. 対応ブラウザについて
  4. SafariやFirefoxではどうする？
    1. max-height（width）をトランジションさせる
    2. grid-templateをトランジションさせる
  5. まとめ

新機能！interpolate-sizeとは？

これまでCSSでheight: autoやwidth: autoのような「自動調整」のサイズをアニメーションさせようとすると、アニメーションが途中でガクッと止まってしまったり、全く動かなかったりすることがほとんどでした。これは、autoのようなキーワード値が、具体的な数値とは異なり、アニメーションの途中の値を計算するのが難しかったためです。

そこで登場したのが、interpolate-sizeプロパティです。このプロパティをCSSの:root要素にallow-keywordsという値を指定することで、autoやmin-content、max-contentといったキーワード値と数値の間で、スムーズなアニメーションが可能になります。

CSS
:root { interpolate-size: allow-keywords; }

この設定をすることで、例えば「幅が56pxからautoに変わる」といったアニメーションが、途切れることなく滑らかに動くようになります。ただし、注意点として、異なるキーワード値同士（例: autoからmin-contentへ）のアニメーションは、このプロパティだけでは補間できません。

こんな時に便利！

•文字量に応じた幅のトランジション: ボタンやテキストエリアの幅を、中身の文字量に合わせて自動で広げたり縮めたりする際に、スムーズなアニメーションを実現できます。

•アコーディオンメニューの開閉: アコーディオンメニューを開閉する際、中身のコンテンツの量に合わせて高さをautoで調整し、滑らかなアニメーションで表示・非表示を切り替えることができます。

これらの例のように、コンテンツの量によってサイズが変動する要素のアニメーションを、より自然でユーザーフレンドリーなものにするために、interpolate-sizeは非常に役立ちます。

これも新機能！calc-size()とは？

interpolate-sizeがキーワード値と数値の間のアニメーションを可能にする全体的な設定だったのに対し、calc-size()関数は、autoやmin-contentといったキーワード値に、具体的な数値を足したり引いたり、掛けたり割ったりして、より細かくサイズを制御したい場合に使う関数です。

例えば、「autoの幅にさらに100pxを足したサイズ」や、「max-contentの幅の80%のサイズ」といった計算を、アニメーションの中で行えるようになります。この関数を使うことで、より複雑で柔軟なサイズのアニメーションを実現できます。

CSS
button { width: 72px; /* アニメーション前のサイズ */ transition: width 0.4s; &:hover { width: calc-size(auto, size + 100px); /* auto + 100px のサイズ */ }
}

calc-size()の最初の引数には、autoやmin-contentなどのアニメーション可能なキーワード値を指定します。2つ目の引数には計算式を記述し、この中でsizeというキーワードを使うと、最初の引数で指定したキーワード値（例: auto）を参照することができます。

こんな時に便利！

•メニューの開閉アニメーション: メニューを開く際に、中身のコンテンツの幅に合わせてmin-contentの幅を基準にしつつ、さらに余白分の幅をcalc-size()で追加するといった、より洗練されたアニメーションが可能です。

calc-size()は、interpolate-size: allow-keywords;の設定がなくても単独で動作します。これは、calc-size()がキーワード値と数値の計算を部分的に行うための関数だからです。これにより、より細かいデザインの要求に応えることができます。

対応ブラウザについて

残念ながら、これらの新しいCSSプロパティや関数は、まだすべてのブラウザで利用できるわけではありません。2025年8月現在、interpolate-sizeプロパティとcalc-size()関数は、主にGoogle Chrome 129以上、Microsoft Edge 129以上でサポートされています。

SafariやFirefoxといった他の主要なブラウザでは、まだサポートされていませんので、これらの機能を使う際は、対象となるユーザーのブラウザ環境を考慮する必要があります。もし、すべてのブラウザで同じアニメーションを実現したい場合は、残念ながら他の方法を検討する必要があります。

https://caniuse.com/?search=interpolate-size

https://caniuse.com/?search=calc-size

SafariやFirefoxではどうする？

では、これらのプロパティに対応していないSafariやFirefoxではどうしたらいいでしょうか。

max-heightをトランジションさせるか、CSS Gridを用いた方法が現実的な解になるでしょう。

max-height（width）をトランジションさせる

こちらは古典的な方法ですね。max-heightをトランジションさせることによって、擬似的にheight:0→autoを実現します。

例えばアコーディオンを実装するとして、閉じた状態のアコーディオンにmax-height:50px;、開いた状態のアコーディオンにmax-height:300px;としておけば、50px〜300pxの範囲内ではコンテンツ量に合わせて高さがトランジションします。

CSS
.accordion{ max-height:50px; transition: max-height 0.3s ease-in; &.is-open{ max-height:300px; transition: max-height 0.3s ease-in; }
}

ただし、中のコンテンツ量が増えてmax-heightの値を超えると動作しません。また、max-heightの値をコンテンツ量よりも大きくしすぎるとトランジションの動きが不自然な感じになります。

grid-templateをトランジションさせる

heightを使わずgrid-templateをトランジションさせることで、コンテンツ量に応じた可変な高さをトランジションさせることができます。コンテンツ量に左右されないので、max-heightより柔軟なアプローチです。

CSS
.accordion{ grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in; &.is-open{ grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease-in; }
}

まとめ

今回は、CSSアニメーションの新しい可能性を広げるinterpolate-sizeプロパティとcalc-size()関数についてご紹介しました。

これらの機能を使うことで、これまで難しかった「コンテンツの量に合わせてサイズが変動する要素」のアニメーションを、非常に簡単に、そして美しく実装できるようになります。紹介した例ではtransitionプロパティを使ったアニメーションが主でしたが、もちろんanimationプロパティでも同様に利用できます。

まだすべてのブラウザで利用できるわけではないので実務で使用する際は注意が必要ですが、全ブラウザがサポートするまではmax-heightやgrid-templateを使いつつ、早くSafariやFirefixにも実装されることを祈りましょう！

]]>【Splide】autoplayや自動スクロールするスライダーはビューポート外では再生を止めよう！https://front-endo.com/should-pause-autoplay-outof-viewport/?utm_source=rss&utm_medium=rss&utm_campaign=should-pause-autoplay-outof-viewportThu, 31 Jul 2025 10:52:14 +0000https://front-endo.com/?p=209

Splideを使えば、スライダーの自動再生や自動無限スクロールが簡単に実装できます。その際、スライダーがビューポートの外に出た際の処理まで考慮して実装できていますか？この記事では、その理由と実装方法を解説していきます。 ... ]]>

Splideを使えば、スライダーの自動再生や自動無限スクロールが簡単に実装できます。その際、スライダーがビューポートの外に出た際の処理まで考慮して実装できていますか？この記事では、その理由と実装方法を解説していきます。

記事内に広告を含みます

もくじ

  1. autoplayおよび自動スクロール（無限再生）をビューポート内だけにすべき理由
    1. UX的観点
    2. パフォーマンスを落とさない
  2. autoplayや自動スクロールをビューポート外で一時停止する方法
  3. まとめ

autoplayおよび自動スクロール（無限再生）をビューポート内だけにすべき理由

スライダーの再生やループの描画は、ビューポート内だけに留めるべきです。理由は大きく２つあります。

UX的観点

例えばページの中段に自動再生のスライダーがあるとします。ユーザーとしては、スライダーは１枚目から再生されることを期待しますが、自動再生が初めからアクティブになっていると、ビューポート内にスライダーが入る前から動いているためスライドが途中からになってしまう可能性があります。そのため、ビューポートの外ではスライダーを止めておいて、ビューポートに入った瞬間に（または少し余裕を持たせて）スライダーを動かすようにすべきです。

スクロールしてスライダーがビューポートから出た際も同様で、ビューポートから出た瞬間にスライダーを止めておいて、逆スクロールで再度ビューポートに入った際に、最後にアクティブだったスライダーから再生を再開すべきです。

パフォーマンスを落とさない

もう一つは、パフォーマンスを落とさないようにするためです。スライダーの描画処理にはそれなりに負荷がかかっていますので、ずっとスライダーをアクティブにしておくとローエンドな環境でページが重くなる可能性があります。特に、１ページに複数の自動再生スライダーを配置している場合や他に重めの処理がある場合にはより顕著になります。負荷を下げてページのパフォーマンスを高く保つためにも、スライダーのアクティブ/非アクティブは適切にコントロールしてあげる必要があります。

autoplayや自動スクロールをビューポート外で一時停止する方法

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

具体的に、コードの各部分が何をしているか、順を追って詳しく解説します。

AutoScroll: スライダーを自動でスクロールさせるための拡張機能です。

Intersection: スライダーが画面に表示されているかどうかを判定するための拡張機能です。

JavaScript
 autoplay: 'pause', intersection: { inView: { autoplay: true, }, outView: { autoplay: false, }, },

autoplayおよび自動スクロール（無限再生）をビューポート内だけに限定する記述です。

autoplay:pause で初期状態を停止状態にしておきます。

そしてinView（ビューポートに入った時）とoutView（ビューポートから出た時）でautoplayを切り替えるだけです。

JavaScript
 new Splide(document._autoSlider, splideOptions).mount({ AutoScroll, Intersection });

AutoScrollやIntersectionといったプラグインのマウントもお忘れなく。

まとめ

以上、スライダーの自動再生をビューポート内に限定した方がいい理由とその実装方法についてでした！細かいことだけど、気を配っていきたいところですね。

]]>FileZillaの⚫︎⚫︎⚫︎で隠されたパスワードを確認&コピペする方法https://front-endo.com/show-ftp-password/?utm_source=rss&utm_medium=rss&utm_campaign=show-ftp-passwordMon, 28 Jul 2025 23:55:40 +0000https://front-endo.com/?p=284

FileZillaに保存しているFTPパスワードを共有したいけど、⚫︎⚫︎⚫︎で隠されててコピペができない！パスワードも控えてなくて忘れちゃた！どうしよう… そんなときにFileZillaでパスワードを確認する方法をご紹 ... ]]>

FileZillaに保存しているFTPパスワードを共有したいけど、⚫︎⚫︎⚫︎で隠されててコピペができない！パスワードも控えてなくて忘れちゃた！どうしよう…

そんなときにFileZillaでパスワードを確認する方法をご紹介します。

記事内に広告を含みます

もくじ

  1. FileZillaの設定ファイルをエクスポートする
  2. XMLファイルの内容から探す

FileZillaの設定ファイルをエクスポートする

画面上部メニューバーの「ファイル」→「エクスポート」→「サイト　マネージャー　エントリをエクスポート」で設定ファイルをエクスポートします。

FileZillaの画面
xmlファイルとしてエクスポートする

XMLファイルの内容から探す

エクスポートしたxmlファイルをvscodeなどのエディタで開きます。

各サーバーの設定がそれぞれ<Server>タグのなかにまとまっています。FileZillaの全てのFTP設定がこのファイルにまとまっています。

XML
<Server>	<Host>111.111.111.111</Host>	<Port></Port>	<Protocol>1</Protocol>	<Type>0</Type>	<User></User>	<Pass encoding="base64">abcdefghijk</Pass>	<Logontype>1</Logontype>	<EncodingType>Auto</EncodingType>	<BypassProxy>0</BypassProxy>	<Name>プロジェクト１</Name>	<LocalDir></LocalDir>	<RemoteDir></RemoteDir>	<SyncBrowsing>1</SyncBrowsing>	<DirectoryComparison>0</DirectoryComparison>
</Server>

お目当てのサーバーと紐づく<Server>タグを探し、その中の<Pass>タグを見てみます。

これがFTPパスワードなわけですが、encoding="base64"とあるように、base64エンコードされているので、以下のサイトなどを使ってデコードします。

https://www.luft.co.jp/cgi/base64-encoding-decoding.php

以上、FileZillaの黒塗りパスワードを確認する方法でした。FTPパスワードをうっかり忘れてしまった場合などにぜひ試してみてください。

]]>【コピペでOK】開閉するトグルリストのチートコードhttps://front-endo.com/togglelist/?utm_source=rss&utm_medium=rss&utm_campaign=togglelistSun, 11 May 2025 04:26:56 +0000https://front-endo.com/?p=266

今回は、Webサイトでよく見かける「トグルリスト」を実装してみましょう。 この記事で学べることクリックすると開閉するリスト形式のUIコンポーネント（色々な名称があると思いますが、ここではトグルリストと呼びます）の実装方法 ... ]]>

今回は、Webサイトでよく見かける「トグルリスト」を実装してみましょう。

この記事で学べること
クリックすると開閉するリスト形式のUIコンポーネント（色々な名称があると思いますが、ここではトグルリストと呼びます）の実装方法

記事内に広告を含みます

もくじ

  1. コード詳細
  2. トグルリストの要件
  3. Cssの重要ポイント
  4. JavaScriptの重要ポイント

コード詳細

See the Pen トグルリスト by toshihide (@toshihide2000) on CodePen.

（記事上では0.5xで見た方がいいかも）

今回は、こんなトグルリストを作ります

・クリックで開閉

・シンプルなCSSのみでアニメーション効果

・シンプルなJavaScriptで動作

それでは、実装方法を順番に見ていきましょう！

トグルリストの要件

このトグルリストに必要な機能を分解してみましょう：

・デフォルトでは全て閉じた状態

・各リストの見出しをクリックすると、リストが開閉。

・開閉時には「＋」「－」のアイコンが切り替わる

Cssの重要ポイント

style.css
 .toggle-content { transition: max-height 0.3s ease, padding 0.3s ease; }

max-heightとpaddingにトランジションを設定することで、開閉時にスムーズなアニメーションが実現できます。

style.css
 .toggle-item:not(.closed) .toggle-content { max-height: 800px; padding: 15px 20px; } .toggle-item.closed .toggle-content { max-height: 0; padding: 0 20px; }

closedクラスの有無によって、コンテンツ部分の高さと余白を調整しています。

JavaScriptの重要ポイント

トグルリストの開閉動作をJSで実装します。

main.js
document.addEventListener('DOMContentLoaded', () => { // すべてのトグルヘッダーを取得 const toggleHeaders = document.querySelectorAll('.toggle-header'); // 各ヘッダーにクリックイベントリスナーを追加 toggleHeaders.forEach(header => { header.addEventListener('click', () => { // 親要素（toggle-item）にclosedクラスを切り替え const toggleItem = header.parentElement; toggleItem.classList.toggle('closed'); // ボタンのテキストを更新 const button = header.querySelector('.toggle-button'); if (toggleItem.classList.contains('closed')) { button.textContent = '＋'; button.classList.remove('open'); button.classList.add('closed'); } else { button.textContent = '－'; button.classList.remove('closed'); button.classList.add('open'); } }); });
});
💡ポイント

・すべてのトグルヘッダーに対して、クリックイベントリスナーを追加。

・クリックイベントで、クリックされたヘッダーの親要素（`toggle-item`）のclosedクラスを切り替える。

・ついでに「+」「-」の表示も切り替える。

トグルリストの実装はシンプルですが、Q&AなどWebサイト制作では頻出の重要なUIコンポーネントです。ぜひ自分なりにカスタマイズしてみてください！

]]>【Pug】パンくずリストのテンプレートhttps://front-endo.com/pug-breadcrumb/?utm_source=rss&utm_medium=rss&utm_campaign=pug-breadcrumbMon, 05 May 2025 23:22:43 +0000https://front-endo.com/?p=260

パンくずリストのPugミックスインを作成しました。どんなWebサイト制作でも使うと思うのでボイラープレートに入れておいてもいいかも。 呼び出し側では、パンくずの構造を変数で持っておき、mixinを呼び出すだけです。 ミッ ... ]]>

パンくずリストのPugミックスインを作成しました。どんなWebサイト制作でも使うと思うのでボイラープレートに入れておいてもいいかも。

記事内に広告を含みます

もくじ

  1. 呼び出し側の記述
  2. ミックスインの記述

呼び出し側の記述

呼び出し側では、パンくずの構造を変数で持っておき、mixinを呼び出すだけです。

/hoge/index.pug
 - const PAGE_META = { BREADCRUMB_LIST: [ { name: 'HOME', item: '/', }, { name: 'ほげ', item: '/hoge/', }, ], }
/hoge/index.pug
+TheBreadCrumb()

ミックスインの記述

ミックスイン側では、パンくず用の変数をもとにnav要素を作成します。

TheBreadCrumb.pug
mixin TheBreadCrumb() .l-theBreadCrumb(data-the-bread-crumb='root')&attributes(attributes) nav.nav(aria-label='パンくずリスト') ol.breadcrumbList each item, index in PAGE_META.BREADCRUMB_LIST li.breadcrumbItem //- 最後の要素はspanで表示 if index === PAGE_META.BREADCRUMB_LIST.length - 1 span.breadcrumbText= PAGE_META.BREADCRUMB_LIST[index].name else a.breadcrumbLink.c-linkText(href=PAGE_META.BREADCRUMB_LIST[index].item) span.breadcrumbText= PAGE_META.BREADCRUMB_LIST[index].name

パンくずリストの最後の要素（=現在のページ）はaタグを外すようにしています。

]]>【GSAP】スクロールに応じて下からふわっとフェードインするパララックスアニメーションを作ろう！https://front-endo.com/gsap-scroll-parallax/?utm_source=rss&utm_medium=rss&utm_campaign=gsap-scroll-parallaxTue, 29 Oct 2024 05:07:08 +0000https://front-endo.com/?p=198

下のサンプルのように、スクロールすると下から要素がふわっと現れるアニメーション、よく見かけますよね。 See the Pen Untitled by toshihide (@toshihide2000) on CodeP ... ]]>

下のサンプルのように、スクロールすると下から要素がふわっと現れるアニメーション、よく見かけますよね。

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

高級感やモダン感を効果的に演出できるため、Webサイト制作の際にはぜひ取り入れたい動きです。

この記事では、GSAPのScrollTriggerを使ってこのパララックスアニメーションを実現する方法について解説します。

記事内に広告を含みます

もくじ

  1. コード概要
    1. HTML
    2. CSS
    3. JS
  2. まとめ

コード概要

まずは全体のコードをお見せします。

HTML（Pug）
.box.parallaxTarget
.box.parallaxTarget
.box.parallaxTarget
CSS
.parallaxTarget{ opacity: 0; filter: blur(4px); transform: translateY(50px);
}
JS
//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';
class gsapParallax { constructor(){ // gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => { gsap.to(parallaxTarget, { scrollTrigger: { trigger: parallaxTarget, start: "top 80%", toggleActions: "play none none reverse" }, opacity: 1, filter: "blur(0px)", duration: 1.5, y:0, ease: "power3.out" }); }); // }
}
export { gsapParallax }
new gsapParallax();

パララックスを付与したい要素にクラスをつけて、そのクラスを持つ要素に対してGSAPで操作を加えています。

コードの詳細解説に移る前に、今回作る「スクロールすると下から要素がふわっと現れるアニメーション」の要件についてもう少し深掘りしてみていきましょう。

アニメーション要件
  • 「スクロールすると」→要素がビューポート内に入ったらアニメーションが発火する→scrollTrigger
  • 「下から現れる」→下から上に動くアニメーション→translateY
  • 「ふわっと現れる」→ボンヤリからハッキリ→透明度操作→opacity
  • 「ふわっと現れる」→ボンヤリからハッキリ→ブラー操作→blur（なくてもいい）

つまり、スクロールすると下から要素がふわっと現れるパララックスアニメーションを実現するには、scrollTriggerでビューポートと要素の交差判定をしつつ、translateとopacity、blurを操作できればいいという訳ですね。これを踏まえて、コードの詳細をみていきましょう。

HTML

HTML（Pug）
.box.parallaxTarget
.box.parallaxTarget
.box.parallaxTarget

パララックスを付与したい要素全てに.parallaxTargetを付与するだけです。

動いている感を出すために、セクションの枠組み自体は動かさず、テキストや画像などセクションの中身の要素を動かすと効果的です。

CSS

CSS
.parallaxTarget{ opacity: 0; filter: blur(4px); transform: translateY(50px);
}

パララックスさせたい要素にアニメーションの初期スタイルを当てておきます。gsap.set()でも同じことができますが、PCとSPでアニメーションの度合いを変化させたい場合でもメディアクエリを追加するだけでいいことを考えると、アニメーションのスタイルはCSS側に持たせておいた方が便利でしょう。

Tips💡
opacityだけでなくblurを設定しておくことで、より「ボンヤリからハッキリ」感を演出できます

JS

JS
//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';
class gsapParallax { constructor(){ // gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => { gsap.to(parallaxTarget, { scrollTrigger: { trigger: parallaxTarget, start: "top 80%", toggleActions: "play none none reverse" }, opacity: 1, filter: "blur(0px)", duration: 1.5, y:0, ease: "power3.out" }); }); // }
}
export { gsapParallax }
new gsapParallax();

yarnなどでGSAPとScrollTriggerをインストールしていることが前提となります。インストール方法についてはこちらをご覧ください。

GSAPのあるきかた GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

ScrollTriggerで交差判定をして、スタイルの付与/除去を行うというのがこのコードの基本的な仕組みとなっています。

  • gsap.registerPlugin(ScrollTrigger);→ScrollTriggerをアクティベートさせます。
  • gsap.utils.toArray(".parallaxTarget").forEach()→.parallaxTargetを持つすべての要素にアニメーションを適用させます。
  • start: "top 80%",→要素がビューポートに入って少ししたところでアニメーションを発火させます。ビューポートに入った瞬間アニメーションを発火させると動きが一部見えなくなるため、少し遅らせます。
  • toggleActions: "play none none reverse"→行ったり来たりしてもアニメーションが毎回発火するようにします。
  • opacity: 1, filter: "blur(0px)", duration: 1.5, y:0,→.parallaxTargetに指定したスタイルを打ち消すように指定します。durationはお好みで調整してください。
  • ease: "power3.out"→ease-outのイージングを設定しています。

durationやイージングを除く、アニメーションの動き自体はCSS側で設定し、GSAP側では’元の状態に戻す’指定だけにすることで、動きを調整する際にCSSを変えるだけで良くなり、メンテナンス性が向上します。

パララックスを一度だけ適用したい場合
scrollTriggerにonce:trueとtoggleactions:”play none none none”を指定することで、パララックスの適用を一度だけに限定することができます。

JS
//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';
class gsapParallax { constructor(){ // gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => { gsap.to(parallaxTarget, { scrollTrigger: { trigger: parallaxTarget, start: "top 80%", //パララックスを一度だけ適用したい場合👇 once:true, toggleActions: "play none none none" }, opacity: 1, filter: "blur(0px)", duration: 1.5, y:0, ease: "power3.out" }); }); // }
}
export { gsapParallax }
new gsapParallax();

まとめ

この記事では、GSAPのScrollTriggerを使ってパララックスアニメーションを実現する方法について解説しました。

高級感のある演出を手軽に実現できますので、ぜひ案件に取り入れてみてください。そのほかにもGSAPの基本的な使い方やScrollTriggerについても解説していますので、よければ参考にしてください！

それでは、ふろんと遠藤でした。👋

GSAPのあるきかた GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

]]>GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！https://front-endo.com/gsap-basic/?utm_source=rss&utm_medium=rss&utm_campaign=gsap-basicMon, 28 Oct 2024 10:15:10 +0000https://front-endo.com/?p=157

gsapを使うには、yarnやnpmでinstallするか、CDNで引っ張ってくる必要があります。 それぞれのインストール方法は以下のページの「Install Helper」を確認してください。 あとは、JSファイルでi ... ]]>

記事内に広告を含みます

もくじ

  1. GSAPの基本の使い方
    1. GSAPのインストール方法
    2. まずgsap.to()ってどういう意味?
    3. 複数の要素に一括でgsap.set()するには？
    4. Timelineをマスターする
  2. ScrollTriggerを使ってみよう！
    1. ScrollTriggerのインストール方法
    2. ScrollTriggerが動かない!? あるある原因
  3. pinすると余計なpaddingができてしまう！余白を取る方法
    1. pinの代わりにtoggleClassでpinを実現する
  4. gsap.matchMedia()でメディアクエリを指定してレスポンシブ対応が可能！
    1. gsap.matchMedia()が効かない!?

GSAPの基本の使い方

GSAPのインストール方法

gsapを使うには、yarnやnpmでinstallするか、CDNで引っ張ってくる必要があります。

それぞれのインストール方法は以下のページの「Install Helper」を確認してください。

参考
Installation | GSAP | Docs & Learning

あとは、JSファイルでimport { gsap } from 'gsap';するだけです。

まずgsap.to()ってどういう意味?

gsap.to()はGSAPのTween（トゥイーン）の一つであり、「現在の状態からアニメーションする」ことを表しています。

Tweenとは、betweenから来た用語でアニメーションをどの状態からどのように開始させるかを設定します。

  • gsap.to()：現在の状態からアニメーション
  • gsap.from()：現在の状態に戻るアニメーション
  • gsap.fromTo()：指定した初期状態から指定した完了状態にアニメーション
  • gsap.set()：初期状態を指定

複数の要素に一括でgsap.set()するには？

複数の要素に同じgsap.set()を適用したい場合、配列で指定することで実現できます。

main.js
gsap.set(['.apple', '.orange', '.banana'], { opacity: 0
});

Timelineをマスターする

※後日追加予定

ScrollTriggerを使ってみよう！

ScrollTriggerのインストール方法

ScrollTriggerはGSAPの主要なプラグインで、名前の通りスクロール量をトリガーにいろんなことができます。Intersection Observerの超便利版みたいな感じです。

プラグインなので、GSAP本体とは別にScrollTriggerをインストールする必要があります。

以下のページの「Install Helper」で、ScrollTriggerにチェックを入れるとインストール方法を確認できます。

importした後にgsap.registerPlugin(ScrollTrigger);するのを忘れないようにしましょう。

参考
Installation | GSAP | Docs & Learning

ScrollTriggerが動かない!? あるある原因

main.js
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
const _init = () => { //scrolltrigger gsap.registerPlugin(ScrollTrigger); gsap.to('.target',{ x:400, ScrollTrigger:{ trigger:'.target', start:'top top', end:'bottom top', scrub:1, pin:true, markers:true } });
}
onReady(_init)

このコードを見てください。

一見何の問題もないようなこのコード。しかしこのコードではスクロールトリガーが動きません。

なぜだかわかりますか？

インポート順は間違えてないし、registerPluginでScrollTriggerを登録しているし・・・

はい。原因は、ScrollTriggerのSを大文字で書いてしまっているからです。gsap.to()の中のScrollTriggerを見てください。最初のSが大文字になってしまっていますね。これが原因で動いていなかったのです。小文字にしてscrollTriggerと書きましょう。

pinすると余計なpaddingができてしまう！余白を取る方法

結論：pinSpacingもしくはtoggleClass

pinをすると、デフォルトでは、ピン留め要素にpaddingが追加されます。ピン留めが解除されたときに後に続く要素が追いつくように、paddingで下の要素とのスペースを確保しているのです。

ただし、要件によってはこの余白が邪魔な場合があります。この余白をトルためには、pinSpacing:falseを設定します。これにより、ScrollTriggerにpaddingを追加しないようにすることができます。pinSpacing: "margin"と書くことで、paddingの代わりにmarginを使用することもできます。

pinの代わりにtoggleClassでpinを実現する

もっと良い解決方法は、そもそもScrollTriggerのpinを使わないことです。pinは結局のところstartからendまでposition:fixed;しているだけですので、自前で.pinなどのclassを作り、それをScrollTriggerのtoggleClassでつけ外しする方がシンプルで分かりやすいです。

pinは便利ですが、JSで動的にインラインスタイルを付与するため既存のスタイルとの噛み合わせが悪く、意図せぬ挙動をすることがあります。toggleClassを使うことでインラインスタイルを使わずに済むので、スタイルの管理がしやすくなります。

toggleClassでpinを実現する例
 gsap.to('.target',{ ScrollTrigger:{ trigger:'.trigger', start:'top top', end:'bottom top', toggleClass:'fadeIn', markers:true } });

gsap.matchMedia()でメディアクエリを指定してレスポンシブ対応が可能！

gsapのmatchMediaを指定すると、メディアクエリごとにgsapアニメーションを設定できます。PCとSPで異なるアニメーションを使用したい時やPCだけにアニメーションを使用したい場合に便利です。

main.js
 let mm = gsap.matchMedia(); mm.add('(min-width:960px)',() => {})

gsap.matchMedia()が効かない!?

gsap.matchMedia()が効かない場合は、gsapのバージョンが古い場合があります。

matchMediaは「3.11.0」以降に追加された機能のため、gsapのバージョンがこれより古いと機能しません。

バージョンを指定して、再度yarn add gsapしてあげましょう。

package.json
 "dependencies": { "gsap": "^3.12.5", },
ターミナル
 yarn add gsap

]]>【@media (hover: hover) 】ホバーアクションをPCだけに限定する最もスマートな方法https://front-endo.com/media-hover/?utm_source=rss&utm_medium=rss&utm_campaign=media-hoverSun, 27 Oct 2024 23:48:53 +0000https://front-endo.com/?p=111

@media (hover: hover)は、 マウスなどのポインティングデバイスでホバー操作が可能な環境かどうか を判別するためのCSSのメディアクエリです。 従来のレスポンシブ対応では、画面幅によってPC/SPのスタ ... ]]>

記事内に広告を含みます

もくじ

  1. CSSのホバー用メディアクエリ@media (hover: hover)について解説します。
    1. 基本的な動作
    2. Can I Use
    3. 使用例
    4. コードスニペット
    5. 使用上の注意点
    6. まとめ

CSSのホバー用メディアクエリ@media (hover: hover)について解説します。

@media (hover: hover)は、 マウスなどのポインティングデバイスでホバー操作が可能な環境かどうか を判別するためのCSSのメディアクエリです。

従来のレスポンシブ対応では、画面幅によってPC/SPのスタイルを出し分けていました。しかし、画面幅による制御だけでは、PCサイズの画面幅を持つタッチデバイスでホバーアクションが効いてしまうという問題が残ります。例えばタブレットの横向きなどが該当します。

画面幅での制御に加えて、ホバーできるかどうかという制御も加えることで、ホバーアクションの最適化が簡単にできるようになります。

画面サイズのみのメディアクエリではタッチデバイスのホバーアクションを制御しきれない

基本的な動作

  • @media (hover: hover)は、ユーザーがデバイスを使用して要素にホバー（マウスオーバー）できるかどうかを判定します。
  • ホバー操作が可能な環境では、@media (hover: hover)内のCSSが適用されます。
  • ホバー操作が不可能な環境（タッチパネルデバイスなど）では、@media (hover: hover)内のCSSは無視されます。

Can I Use

@media (hover: hover)はSafari 9から対応しており、実案件でも懸念なく使用できます。

使用例

/* PCサイズかつホバー操作が可能な環境でのみ適用されるスタイル */
@media screen and (min-width:1024px){ .button{ background-color: #ccc; } @media (hover: hover) { .button:hover { background-color: #f0f0f0; } }
}

上記の例では、マウス操作が可能な環境では、ボタンにマウスオーバーした際に背景色が#f0f0f0に変化します。タッチパネルデバイスなどでは、ホバー操作はできないため、ホバースタイルは適用されません。

PCサイズのメディアクエリの中で、ホバーのスタイルのみにホバーのメディアクエリを指定するのがポイントです。

コードスニペット

vscodeやcursorに以下のスニペットを登録しておくことで、mqHoverとタイプするだけでスムーズにホバーメディアクエリを指定できます。

.code-snippetsファイルに以下を追記

 "mqHover": { "prefix": "mqHover", "body": [ "@media (hover: hover) {", " $0", "}" ], "description": "sass snippet for media query" },

スニペットのテキストはmqHoverとしていますが呼び出しやすいテキストに変更して使ってください。

使用上の注意点

タッチパネルデバイスの中には、マウスも接続して使用できるものがあります。このような環境では、 @media (hover: hover) は true と評価されます。マウス接続下かつユーザーがタッチパネルで操作している場合は、ホバー効果が効いてしまいます。

まとめ

  • @media (hover: hover)は、ホバーアクションのスタイルを、ホバー可能な環境にだけ適用できる便利なメディアクエリ。
  • PCサイズのメディアクエリの入れ子にして、さらに:hoverスタイルだけに@media (hover: hover){}を適用する。
  • Safari 9 から対応なので案件でも心配なく使える。
  • タッチパネルデバイスにマウスを接続し、かつタッチパネル操作をしている場合はホバー効果が効いてしまう。

]]>【ブックマーク推奨】番号付きリスト（ol）の番号をカスタマイズする方法大全https://front-endo.com/ol-customize/?utm_source=rss&utm_medium=rss&utm_campaign=ol-customizeMon, 22 Jul 2024 11:58:56 +0000https://front-endo.com/?p=107

Web制作をしていると、番号付きリストの数字のフォーマットを変えたり、順番を変えたりしたいシチュエーションが少なからずあると思います。また運用の中でそのような依頼をされることもしばしばあります。 そんな時に色々検索してや ... ]]>

Web制作をしていると、番号付きリストの数字のフォーマットを変えたり、順番を変えたりしたいシチュエーションが少なからずあると思います。また運用の中でそのような依頼をされることもしばしばあります。

そんな時に色々検索してやり方を探してみても、擬似要素やJSでゴチャゴチャするなど面倒くさそうな方法の解説記事ばかりが目立ちます。そこで、<ol>の番号をカスタマイズする比較的シンプルでスマートな方法をまとめてみました。すぐ思い出せるようにブックマーク推奨です！

記事内に広告を含みます

もくじ

  1. 番号を降順にする方法
  2. カウントの開始番号を変更する方法
  3. カウントの倍数を変更する方法
  4. リスト番号の前後に文字を挿入
  5. リストのマーカーや番号をリストの内側に表示する方法
  6. 番号の種類を変える方法
    1. 数字をアルファベットに変更
      1. type属性で指定する
      2. CSSで指定する
    2. 数字をローマ字に変更
      1. type属性で指定する
      2. CSSで指定する

番号を降順にする方法

リスト番号の順番を降順にする最も簡単な方法は、<ol>タグにreversed属性をつける方法です。これだけで並び順が・・・3,2,1の降順になります。

See the Pen ol reversed by toshihide (@toshihide2000) on CodePen.

カウントの開始番号を変更する方法

カウントの開始番号を変更するには、<ol>タグにstart属性を追加します。

See the Pen ol カウントスタート変更 by toshihide (@toshihide2000) on CodePen.

<li>タグにvalue属性をつけると、途中から番号を変更することもできます。

See the Pen リストのスタート番号を途中から変更 by toshihide (@toshihide2000) on CodePen.

カウント開始番号の変更、途中からの番号の変更、並び順の変更は組み合わせることができます。

See the Pen リストを逆順にしてスタート番号を変更 by toshihide (@toshihide2000) on CodePen.

カウントの倍数を変更する方法

デフォルトでは1ずつ増えていくリスト番号ですが、CSSのみで簡単に増え方を変更することもできます。

See the Pen リスト番号を2の倍数に変更 by toshihide (@toshihide2000) on CodePen.

まず<ol>にcounter-reset:list-counter;を指定することでカウンターを設定します。

次に、子要素の<li>にcounter-increment:list-counter 2;を指定し、カウンターが2ずつ増えるようにしています。

そして、それを::marker擬似要素にcontent: counter(list-counter);を指定して表示させています。

::marker擬似要素
::marker はリスト項目の箇条書き記号ボックス（黒丸や番号が入ったもの）を選択します。
これは<li>要素や<summary>要素などのdisplay:list-itemが設定された要素で利用できます。

リスト番号の前後に文字を挿入

上記の応用で、リスト番号の前後に文字を追加することができます。これにより、（１）や項目1といった柔軟なリスト番号を実現可能です。

See the Pen olの番号をカスタム by toshihide (@toshihide2000) on CodePen.

基本的には上記の「カウントの倍数を変更する方法」と同じです。この例では、::markerの指定を content: "1-"counter(item)". ";としています。

カウンターの前後に文字列を挿入することで、1-1.,1-2.,・・・という表記を実現しています。

リストのマーカーや番号をリストの内側に表示する方法

リストの番号は、デフォルトではリストの外側に表示されます。

list-style-position:inside;をolに指定することで、<li>の幅に::marker擬似要素を含めることができます。

See the Pen list-style-position by toshihide (@toshihide2000) on CodePen.

番号の種類を変える方法

リスト番号は、デフォルトではアラビア数字で表示されます。

このリスト番号は、アルファベットやローマ字などに変更することができます。

数字をアルファベットに変更

type属性で指定する

<ol>のtype属性をtype="A"とすることで、リスト番号をABC順にすることができます。

type 属性は、そのリスト番号について前後の文章で言及する場合にのみ使用することが推奨されます。装飾の都合で記号を変更する場合には type 属性ではなく後述のCSS を使用すべきです。

See the Pen リスト記号をアルファベットに変更（type属性） by toshihide (@toshihide2000) on CodePen.

CSSで指定する

olにlist-style-type: upper-latin;を指定することで、大文字のアルファベット順にすることができます。

list-style-type: lower-latin;を指定することで小文字のアルファベット順にすることができます。

See the Pen リスト記号をアルファベットに変更（CSS） by toshihide (@toshihide2000) on CodePen.

数字をローマ字に変更

type属性で指定する

<ol>のtype属性をtype="I"とすることで、リスト番号をローマ数字にすることができます。

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

CSSで指定する

olに list-style-type: upper-roman;を指定することで、大文字のローマ数字順にすることができます。

See the Pen リスト記号をローマ数字に変更（CSS） by toshihide (@toshihide2000) on CodePen.

他にも漢数字など様々な記号を使用することができます。詳しく知りたい方はhttps://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

]]>