nuesaburou

ぬえさぶろうのAnimate放送部

11月の活動記録

アクションゲーム
AS

アクションゲームの自キャラの移動処理

  1. 衝突判定マトリクスの実装
  2. キャラクターの操作
  3. キーボード操作の取得
  4. 移動量の計算
  5. 衝突判定と移動
  6. サンプルを構成するクラス
  7. Worldクラス
  8. SiKeyContollerクラス
  9. Heroクラス
  10. クラスの使い方
  11. オリジナルイベントクラス

衝突判定マトリクスの実装

var matrix:Array = [
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
画面範囲
600px×400px
ブロック
20px × 20px
移動できないブロック
1

マトリクスの座標計算

　//matrixのX座標の計算（0~30）
    var X:uint = Math.floor( x / block_width );
    //matrixのY座標の計算（0~20）
　var Y:uint = Math.floor( y / block_height );

マトリクス座標上の数値にアクセスする

//getFlag関数
    return ( matrix[Y][X] != null ) ? matrix[Y][X] : 1;

キャラクターの操作

function _onKeyDown( event:KeyboardEvent ):void{
    switch( event.keyCode ){
        case Keyboard.LEFT : 
            // _xVector を補正します
            if( 8 < _xVector ){
                _xVector = 8;
                }else if( _xVector < 2 && 0 < _xVector ){
                    _xVector = 0;
                }
                _isLeftKeyDown = true;
                break;
        }
}
// X方向の移動量を計算
function _calcXVector():void{
	// 左右どちらかのキーが押されていた場合X方向の力を変更する
	if( _isLeftKeyDown == true ){
		_xVector -= 0.5;
	}else if( _isRightKeyDown == true ){
		_xVector += 0.5;
	}else{
		// どちらも押されていない場合には0に近づける
		_xVector += ( 0 - _xVector ) * 0.3;
		if( Math.abs( 0 - _xVector ) < 1 ){
			_xVector = 0;
		}//if( Math.abs( 0 - _xVector ) < 1 ){
	}/*_isLeftKeyDown == true*/
	// 衝突判定がブロックを突き抜けることを避けるため
	 絶対値を区切りの長さ - 1 に補正する
	if( 20 - 1 < Math.abs( _xVector ) ){
		_xVector = ( 20 - 1 ) * ( ( _xVector < 0 ) ? -1 : 1 );
	}/*if( 20 - 1 < Math.abs( _xVector ) ){*/
}/*/function _calcXVector()*/

キーボード操作の取得

キーボード入力は必ず半角入力になっている必要がある。

import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

this.stage.addEventListener( KeyboardEvent.KEY_DOWN, _onKeyDown );
function _onKeyDown( event:KeyboardEvent ):void{
		case Keyboard.LEFT : 
			// _xVector を補正します.
			if( 8 < _xVector ){
				_xVector = 8;
			}else if( _xVector < 2 && 0 < _xVector ){
				_xVector = 0;
			}
			_isLeftKeyDown = true;
			break;
		case Keyboard.RIGHT :
			// _xVector の力を補正します.
			if( _xVector < -8 ){
				_xVector = -8;
			}else if( -2 < _xVector && _xVector < 0 ){
				_xVector = 0;
			}
			_isRightKeyDown = true;
			break;
	}
}

移動量の計算

// 移動量を保持するプロパティを定義.
var _xVector:Number = 0;
var _yVector:Number = 0;
// 状態を保持するプロパティを定義
var _isLeftKeyDown:Boolean;
var _isRightKeyDown:Boolean;
// ジャンプ状態を保持するプロパティを定義
var _isJumping:Boolean;

衝突判定と移動

衝突判定と移動の処理は、移動後のキャラクタの上下左右の端の座標を求め、その座標が属するマトリクス座標を調べます。その値が1だった場合は衝突しない位置で停止させ、0の場合には、移動させるというものです。

y方向の移動処理

// --- Y方向に移動後のキャラクタの判定領域を計算します. ---
	_top = Math.floor( y ) + _yVector;
	_bottom = Math.floor( y + height ) + _yVector;
	// ブロックの隙間を通れるようにするため左右の判定は小さめにしておきます.
	_left = Math.floor( x ) + 4;
	_right = Math.floor( x + width ) - 4;

	// --- Y方向の移動. ---
	// 移動先に障害物が無いか調べる.
	if( 0 < _yVector ){
		// --- 地面に立っている時や落下時. ---
		// 足元に地面があるかをチェックする.
		if( 0  < getFlag( _left, _bottom ) ||
			0  < getFlag( _right, _bottom ) ){
			// --- 地面があった場合 ---
			// 地面の位置で停止させる. 
			y = Math.floor( _top / 20 ) * 20;
			// Y方向の力は地面で0になるので, _yVector を 0 にする.
			_yVector = 0;
			// 地面に立っているので, _isJumping を false にする。
			_isJumping = false;
		}else{
			// --- 地面がなかった場合 ---
			// 移動させる.
			y += _yVector;
		}
	}

x方向の処理

// --- X方向の移動. ---
	// X方向に働く力が無い場合にはなにもしない.
	if( _xVector == 0 ){
		return;
	}
	// --- X方向に移動後のキャラクタの判定領域を計算します. ---
	// ブロックの間の隙間を通れるようにするため上下の判定は小さめにしておきます.
	_top = Math.floor( y ) + 8;
	_center = ( Math.floor( y + height / 2 ) );
	_bottom = Math.floor( y + height ) - 8;
	_left = Math.floor( x ) + _xVector;
	_right = Math.floor( x + width ) + _xVector;
	// 移動先に障害物が無いか調べる.
	if( 0 < _xVector ){
		// --- 右に移動している時.　---
		// 自分の右に壁があるかをチェックする.
		if( 0 < getFlag( _right, _top ) ||
			0 < getFlag( _right, _center ) ||
			0 < getFlag( _right, _bottom ) ) {
			// --- 壁があった場合 ---
			// 壁の位置で停止させる.
			x = Math.floor( _left / 20 ) * 20;
			// X方向の力は壁で弱くなるので, _xVector を 0.5 にする.
			_xVector = 0.5;
		}else{
			// --- 壁がなかった場合 ---
			// 移動させる.
			x += _xVector;
		}
	}else if( _xVector < 0 ){
		// --- 左に移動している時.　---
		// 自分の左に壁があるかをチェックする.
		if( 0 < getFlag( _left, _top ) ||
			0 < getFlag( _left, _center ) ||
			0 < getFlag( _left, _bottom ) ) {
			// --- 壁があった場合 ---
			// 壁の位置で停止させる.
			x = Math.ceil( _left / 20 ) * 20;
			// X方向の力は壁で弱くなるので, _xVector を 0.5 にする.
			_xVector = -0.5;
		}else{
			// --- 壁がなかった場合 ---
			// 移動させる.
			x += _xVector;
		}
	}
ブログ作成ツールをつくりたい
PHP
入力 チェック 保存

ブログ作成ツール

ブログ作成ツール

0 文字

今回の作業で使ったソフトを教えてください。（複数選択可）

作成した画像をアップロードしてください。（任意）

sample


フレックスボックス
memo

フレックスボックス 

<div class="container">
        <div class="boxA">A</div>
        <div class="boxB">B</div>
        <div class="boxC">C</div>
    <!--/.container--></div>
フレキシブルボックスレイアウトの調整
プロパティ 用途
flex
order 並び順
  • 1:末尾に付ける
  • 2：末尾の末尾に付ける
  • -1：先頭に付ける
flex-direction フレックスアイテムを並べる方向を指定することが出来ます。
初期値は「row」:左から右に並べられます。
横並び :「row」
縦並び :「column」
flex-flow
flex-wrap
justify-content
align-items
align-self
align-content
伸長比
flex-grow
flex-shrink
flex-basis
【AS】アクションゲーム
ゲーム
メモ

目指せ！スーパーマリオメーカー

グローバル変数
キーワード 型 初期値 用途
matrix Array / 衝突判定の座標
_xVector Number 0
_yVector Number 0
_isLeftKeyDown Boolean false
_isRightKeyDown Boolean false
_isJumping Boolean false
_imageCnt uint 0
_lastBearing String normal
ローカル変数
_top
_center
_bottom
_left
_right
X
Y

関数

  • _onKeyDown
  • _onKeyUp
  • _onEnterFrame
  • _calcXVector
  • _calcYVector
  • _move
  • jump
  • getFlag
  • _changeGraphic
キャラクターのタイムラインに記述
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

// --- マトリクスの定義 ---
// 世界を定義します
var matrix:Array = [
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

// --- プロパティの定義 ---

// 移動量を保持するプロパティを定義.
var _xVector:Number = 0;
var _yVector:Number = 0;
// 状態を保持するプロパティを定義.
var _isLeftKeyDown:Boolean;
var _isRightKeyDown:Boolean;
// ジャンプ状態を保持するプロパティを定義
var _isJumping:Boolean;
/** 横移動アニメーション画像のインデックス. */
var _imageCnt:uint = 0;
/** 最後に向いていた体の向き. */
var _lastBearing:String = "normal";

// --- キーボード操作の処理 ---

this.stage.addEventListener( KeyboardEvent.KEY_DOWN, _onKeyDown );
this.stage.addEventListener( KeyboardEvent.KEY_UP, _onKeyUp );

// キーボードが押された際の処理.
function _onKeyDown( event:KeyboardEvent ):void{
	switch( event.keyCode ){
		case Keyboard.SPACE :
			jump();
			break;
		case Keyboard.LEFT : 
			// _xVector を補正します
			if( 8 < _xVector ){
				_xVector = 8;
			}else if( _xVector < 2 && 0 < _xVector ){
				_xVector = 0;
			}
			_isLeftKeyDown = true;
			break;
		case Keyboard.RIGHT :
			// _xVector の力を補正します.
			if( _xVector < -8 ){
				_xVector = -8;
			}else if( -2 < _xVector && _xVector < 0 ){
				_xVector = 0;
			}
			_isRightKeyDown = true;
			break;
	}
}

// キーボードが離された際の処理.
function _onKeyUp( event:KeyboardEvent ):void{
	switch( event.keyCode ){
		case Keyboard.LEFT : 
			_isLeftKeyDown = false;
			break;
		case Keyboard.RIGHT :
			_isRightKeyDown = false;
			break;
	}
}

// ジャンプ処理.
function jump( jumpPower:Number = 20 ):void{
	// 現在地上に立っていない場合,ジャンプ中である場合には処理を行いません.
	if( _yVector != 0 || _isJumping == true ){
		return;
	}
	// yVentor をジャンプパワー分だけ上に向けます.
	_yVector = - 20;
	// _isJumping を true にしてジャンプ中である事を保持します.
	_isJumping = true;
}

// --- 毎フレームの処理 ---

addEventListener( Event.ENTER_FRAME, _onEnterFrame );

// 毎フレーム処理.
function _onEnterFrame( evt:Event ):void{
	// --- 移動量の計算処理. ---
	_calcXVector();
	_calcYVector();
	// --- 移動処理. ---
	_move();
	// --- アニメーション処理. ---
	_changeGraphic();
}

// X方向の移動量を計算.
function _calcXVector():void{
	// 左右どちらかのキーが押されていた場合X方向の力を変更する.
	if( _isLeftKeyDown == true ){
		_xVector -= 0.5;
	}else if( _isRightKeyDown == true ){
		_xVector += 0.5;
	}else{
		// どちらも押されていない場合には0に近づける.
		_xVector += ( 0 - _xVector ) * 0.3;
		if( Math.abs( 0 - _xVector ) < 1 ){
			_xVector = 0;
		}
	}
	// 衝突判定がブロックを突き抜けることを避けるため
	// 絶対値を区切りの長さ - 1 に補正する.
	if( 20 - 1 < Math.abs( _xVector ) ){
		_xVector = ( 20 - 1 ) * ( ( _xVector < 0 ) ? -1 : 1 );
	}
}

// Y方向の移動量を計算.
function _calcYVector():void{
	// Y方向の力を重力分加算します.
	_yVector += 2.0;
	// 衝突判定がブロックを突き抜けることを避けるため
	// 絶対値を区切りの長さ - 1 に補正する.
	if( 20 - 1 < Math.abs( _yVector ) ){
		_yVector = ( 20 - 1 ) * ( ( _yVector < 0 ) ? -1 : 1 );
	}
}


/**
* 移動処理.
*/
function _move():void{
	
	// 移動後のキャラクターの上端のY座標.
	var _top:Number;
	// 移動後のキャラクターの中心のY座標.
	var _center:Number;
	// 移動後のキャラクターの下端のY座標.
	var _bottom:Number;
	// 移動後のキャラクターの左端のX座標.
	var _left:Number;
	// 移動後のキャラクターの右端のX座標.
	var _right:Number;

	// --- Y方向に移動後のキャラクタの判定領域を計算します. ---
	_top = Math.floor( y ) + _yVector;
	_bottom = Math.floor( y + height ) + _yVector;
	// ブロックの隙間を通れるようにするため左右の判定は小さめにしておきます.
	_left = Math.floor( x ) + 4;
	_right = Math.floor( x + width ) - 4;

	// --- Y方向の移動. ---
	// 移動先に障害物が無いか調べる.
	if( 0 < _yVector ){
		// --- 地面に立っている時や落下時. ---
		// 足元に地面があるかをチェックする.
		if( 0 < getFlag( _left, _bottom ) ||
			0 < getFlag( _right, _bottom ) ){
			// --- 地面があった場合 ---
			// 地面の位置で停止させる. 
			y = Math.floor( _top / 20 ) * 20;
			// Y方向の力は地面で0になるので, _yVector を 0 にする.
			_yVector = 0;
			// 地面に立っているので, _isJumping を false にする.
			_isJumping = false;
		}else{
			// --- 地面がなかった場合 ---
			// 移動させる.
			y += _yVector;
		}
	}else if( _yVector < 0 ){
		// --- ジャンプ上昇時. ---
		// 頭上に天井があるかをチェックする.
		if( 0 < getFlag( _left, _top ) ||
			0 < getFlag( _right, _top ) ){
			// --- 天井があった場合 ---
			// 天井の位置で停止させる.
			y = Math.ceil( _top / 20 ) * 20;
			// Y方向の力は天井で0になるので, _yVector を 0 にする.
			_yVector = 0;
		}else{
			// --- 障害物がなかった場合 ---
			// 移動させる.
			y += _yVector;
		}
	}

	// --- X方向の移動. ---
	// X方向に働く力が無い場合にはなにもしない.
	if( _xVector == 0 ){
		return;
	}
	// --- X方向に移動後のキャラクタの判定領域を計算します. ---
	// ブロックの間の隙間を通れるようにするため上下の判定は小さめにしておきます.
	_top = Math.floor( y ) + 8;
	_center = ( Math.floor( y + height / 2 ) );
	_bottom = Math.floor( y + height ) - 8;
	_left = Math.floor( x ) + _xVector;
	_right = Math.floor( x + width ) + _xVector;
	// 移動先に障害物が無いか調べる.
	if( 0 < _xVector ){
		// --- 右に移動している時.　---
		// 自分の右に壁があるかをチェックする.
		if( 0 < getFlag( _right, _top ) ||
			0 < getFlag( _right, _center ) ||
			0 < getFlag( _right, _bottom ) ) {
			// --- 壁があった場合 ---
			// 壁の位置で停止させる.
			x = Math.floor( _left / 20 ) * 20;
			// X方向の力は壁で弱くなるので, _xVector を 0.5 にする.
			_xVector = 0.5;
		}else{
			// --- 壁がなかった場合 ---
			// 移動させる.
			x += _xVector;
		}
	}else if( _xVector < 0 ){
		// --- 左に移動している時.　---
		// 自分の左に壁があるかをチェックする.
		if( 0 < getFlag( _left, _top ) ||
			0 < getFlag( _left, _center ) ||
			0 < getFlag( _left, _bottom ) ) {
			// --- 壁があった場合 ---
			// 壁の位置で停止させる.
			x = Math.ceil( _left / 20 ) * 20;
			// X方向の力は壁で弱くなるので, _xVector を 0.5 にする.
			_xVector = -0.5;
		}else{
			// --- 壁がなかった場合 ---
			// 移動させる.
			x += _xVector;
		}
	}
}

// matrixの( x, y )座標上のフラグを取得します
function getFlag( x:Number, y:Number ):uint{
	var X:uint = Math.floor( x / 20 );
	var Y:uint = Math.floor( y / 20 );
	return ( matrix[Y][X] != null ) ? matrix[Y][X] : 1;
}

// キャラクタの画像を切り替えます.
function _changeGraphic(){
	// 地面に立っているかを調べる.
	if( _yVector == 0 && !_isJumping ){
		// --- 地面に立っている場合. ---
		// 移動中かを調べる.
		if( _xVector != 0 ){
			// --- 移動中. ---
			// _xVectorの値で最後の向きを変更する.
			if( _xVector < 0  ){
				_lastBearing = "left";
			}else{
				_lastBearing = "right";
			}
			// 横移動イメージ画像のインデックスを変更する.
			if( _imageCnt++ == 4 ){
				_imageCnt = 1;
			}
			// 画像を変更する.
			gotoAndStop(_lastBearing+_imageCnt);
		}else{
			// --- 棒立ち中. ---
			// 最後の向きを normal にし,画像を変更する.
			_lastBearing = "normal";
			gotoAndStop( _lastBearing );
		}
	}else{
		// --- ジャンプ中の場合. ---
		// 最後の向きによって画像を変更する.
		if( _lastBearing == "left" ){
			gotoAndStop( "jump_left" );
		}else if( _lastBearing == "right" ){
			gotoAndStop( "jump_right" );
		}
	}
}
異世界の住人
コミック

異種族リスト

  • 人間
  • 有翼人
  • ハーピー
  • 妖精
  • 天使
  • 悪魔
  • 獣人
  • ミノタウロス
  • タゴン
  • サラマンダー
  • 単眼
  • ラミア
  • ケンタウロス
  • ゾンビ
  • デュラハン
  • スライム
  • マイコニド
【CSS】リストをカウントするしくみ
メモ
解説
CSSカウンタ
CSSの中でカウンタを定義して値を増やしたり表示したりすることが出来ます。カウンタをしようするのに必要な手順は４つです。
キーワード 使い方
counter-reset:カウンタ名
カウンタの値を0に初期化する
カウンタの名前を決める
content: counter(カウンタ名);
カウンタの値を表示する
CSSカウンタの値を疑似要素に表示する
counter-increment:カウンタ名;
カウンタの値を増加させる
疑似要素が表示されるごとに順位が一つずつカウントアップされていきます。
HTML

<ol class="ranking">
<li class="ranking-item">手順</li>
<li class="ranking-item">手順</li>
<li class="ranking-item">手順</li>
</ol>
CSS
/*ランキング*/
.ranking{
    list-style-type:none;
    counter-reset: ranking;
}
.ranking .ranking-item::before{
    content: "手順 " counter(ranking);
    counter-increment: ranking;
}
ヘルプサイトのつくりかた
メモ

見やすいヘルプサイトをつくりたい

toTop