変位勾配テンソルによる変形（定数）
これから連続体力学（弾性体力学＆流体力学）の勉強を進めていくための準備として、連続体の変位と変形の関係を表す変形勾配テンソルの可視化を３次元グラフィックスで行うよ。変形勾配テンソル（$${D}$$）とは、変位$${\delta \boldsymbol{x}}$$に対する変形$${ \delta \boldsymbol{r}}$$ の関係を表すテンソルだよ。
$$
\delta \boldsymbol{r} =\frac{\partial \boldsymbol{r}}{\partial \boldsymbol{x} }\, \delta \boldsymbol{x} \ \ , \ D:=\frac{\partial \boldsymbol{r}}{\partial \boldsymbol{x} }=\left( \begin{matrix} \frac{\partial r_x}{ \partial x} & \frac{\partial r_x}{ \partial y} & \frac{\partial r_x}{ \partial z} \\ \frac{\partial r_y}{ \partial x} & \frac{\partial r_y}{ \partial y} & \frac{\partial r_y}{ \partial z} \\ \frac{\partial r_z}{ \partial x} & \frac{\partial r_z}{ \partial y} & \frac{\partial r_z}{ \partial z} \end{matrix} \right)
$$
このテンソルを用いると、変形後の座標は次のように計算することができるね。
$$
\boldsymbol{r}^{\prime} =\boldsymbol{r} + \delta \boldsymbol{r} = \boldsymbol{r} +D \delta \boldsymbol{x}
$$
任意の行列は対称行列と反対称行列の和で表すことができるので、$${D}$$を対称行列$${E}$$と反対称行列$${F}$$に分けて
$$
D = E + F , E_{ij} =\frac{1}{2} \left( D_{ij} +D_{ji} \right) , F_{ij} =\frac{1}{2} \left( D_{ij} -D_{ji} \right)
$$
と表すことができるね。詳細は割愛するけれども、このとき$${E}$$は歪（ひずみ）、$${F}$$は回転を表すよ。
この$${E}$$と$${F}$$の成分に対する変形を可視化するツールを作ったよ。インプットフォームに半角小数を与えると、それに対応した変形を見ることができるよ。$${E}$$と$${F}$$は対称行列、反対称行列なので、入力できるのは上三角だけに限定しているよ。下の図は、歪んだ分だけ回転させることで$${x}$$軸上を固定した変形を実現している図だね。色々なパラメータで試してみてください。
ツールURL
https://natural-science.or.jp/files/physics/20241016.html
３次元グラフィックス（three.js）については過去記事を参考にしてください。これからも応援よろしくお願いしまーす！
Javascript プログラムソース
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>変位勾配テンソルによる変形（定数）</title>
<script src="https://natural-science.or.jp/files/physics/UV_Grid_Sm.js"></script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
*{padding:0px; margin:0px}
div#canvas-frame{
width: 1200px; /* 横幅 */
height: 900px; /* 縦幅 */
overflow:hidden;
}
table.matrix input{
width: 30px;
}
section#field{
padding: 10px 20px;
border: 1px solid gray;
border-radius: 10px;
margin: 10px 10px;
width: 1140px;
}
</style>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.168.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.168.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
//初期変位勾配テンソル
let D = [
[0, 1, 0],
[0, 0, 0],
[0, 0, 0]
]
//変位勾配テンソルによる変位計算
function Deformation( D, r ){
let x = D[ 0 ][ 0 ] * r[ 0 ] + D[ 0 ][ 1 ] * r[ 1 ] + D[ 0 ][ 2 ] * r[ 2 ];
let y = D[ 1 ][ 0 ] * r[ 0 ] + D[ 1 ][ 1 ] * r[ 1 ] + D[ 1 ][ 2 ] * r[ 2 ];
let z = D[ 2 ][ 0 ] * r[ 0 ] + D[ 2 ][ 1 ] * r[ 1 ] + D[ 2 ][ 2 ] * r[ 2 ];
return [ x, y, z ];
}
//格子点座標の初期値
let initialPositionArray = [ ]
////////////////////////////////////////////////////////////////////
// windowイベントの定義
////////////////////////////////////////////////////////////////////
window.addEventListener("load", function () {
document.querySelector("#E11").value = D[0][0];
document.querySelector("#E12").value = ( D[0][1] + D[1][0] ) / 2.0;
document.querySelector("#E13").value = ( D[0][2] + D[2][0] ) / 2.0;
document.querySelector("#E21").value = ( D[1][0] + D[0][1] ) / 2.0;
document.querySelector("#E22").value = D[1][1];
document.querySelector("#E23").value = ( D[1][2] + D[1][2] ) / 2.0;
document.querySelector("#E31").value = ( D[2][0] + D[0][2] ) / 2.0;
document.querySelector("#E32").value = ( D[2][1] + D[1][2] ) / 2.0;
document.querySelector("#E33").value = D[2][2];
document.querySelector("#F11").value = 0
document.querySelector("#F12").value = ( D[0][1] - D[1][0] ) / 2.0;
document.querySelector("#F13").value = ( D[0][2] - D[2][0] ) / 2.0;
document.querySelector("#F21").value = ( D[1][0] - D[0][1] ) / 2.0;
document.querySelector("#F22").value = 0
document.querySelector("#F23").value = ( D[1][2] - D[1][2] ) / 2.0;
document.querySelector("#F31").value = ( D[2][0] - D[0][2] ) / 2.0;
document.querySelector("#F32").value = ( D[2][1] - D[1][2] ) / 2.0;
document.querySelector("#F33").value = 0
document.querySelector("#field").addEventListener("input", function(){
document.querySelector("#E21").value = document.querySelector("#E12").value;
document.querySelector("#E31").value = document.querySelector("#E13").value;
document.querySelector("#E32").value = document.querySelector("#E23").value;
document.querySelector("#F21").value = - parseFloat( document.querySelector("#F12").value);
document.querySelector("#F31").value = - parseFloat( document.querySelector("#F13").value);
document.querySelector("#F32").value = - parseFloat( document.querySelector("#F23").value);
})
threeStart(); //Three.jsのスタート関数の実行
});
////////////////////////////////////////////////////////////////////
// Three.jsスタート関数の定義
////////////////////////////////////////////////////////////////////
function threeStart() {
initThree(); //Three.js初期化関数の実行
initLight(); //光源初期化関数の実行
initObject(); //オブジェクト初期化関数の実行
initCamera(); //カメラ初期化関数の実行
loop(); //無限ループ関数の実行
}
////////////////////////////////////////////////////////////////////
// Three.js初期化関数の定義
////////////////////////////////////////////////////////////////////
//グローバル変数の宣言
let renderer, //レンダラーオブジェクト
scene, //シーンオブジェクト
canvasFrame; //キャンバスフレームのDOM要素
function initThree() {
//キャンバスフレームDOM要素の取得
canvasFrame = document.getElementById('canvas-frame');
//レンダラーオブジェクトの生成
renderer = new THREE.WebGLRenderer({ antialias: true });
if (!renderer) alert('Three.js の初期化に失敗しました');
//レンダラーのサイズの設定
renderer.setSize(canvasFrame.clientWidth, canvasFrame.clientHeight);
//キャンバスフレームDOM要素にcanvas要素を追加
canvasFrame.appendChild(renderer.domElement);
//レンダラークリアーカラーの設定
renderer.setClearColor(0xEEEEEE, 1.0);
//シーンオブジェクトの生成
scene = new THREE.Scene();
}
////////////////////////////////////////////////////////////////////
// カメラ初期化関数の定義
////////////////////////////////////////////////////////////////////
//グローバル変数の宣言
let camera; //カメラオブジェクト
let trackball;
function initCamera() {
//カメラオブジェクトの生成
camera = new THREE.PerspectiveCamera(45, canvasFrame.clientWidth / canvasFrame.clientHeight, 1, 10000);
//カメラの位置の設定
camera.position.set(0, -10, 50);
//カメラの上ベクトルの設定
camera.up.set(0, 0, 1);
//カメラの中心位置ベクトルの設定
camera.lookAt(new THREE.Vector3(0,0,10)); //トラックボール利用時は自動的に無効
//トラックボールオブジェクトの宣言
trackball = new TrackballControls(camera, canvasFrame);
//トラックボール動作範囲のサイズとオフセットの設定
trackball.screen.width = canvasFrame.clientWidth; //横幅
trackball.screen.height = canvasFrame.clientHeight; //縦幅
trackball.screen.offsetLeft = canvasFrame.getBoundingClientRect().left; //左オフセット
trackball.screen.offsetTop = canvasFrame.getBoundingClientRect().top; //右オフセット
//トラックボールの回転無効化と回転速度の設定
trackball.noRotate = false;
trackball.rotateSpeed = 2.0;
//トラックボールの拡大無効化と拡大速度の設定
trackball.noZoom = false;
trackball.zoomSpeed = 4.0;
//トラックボールのカメラ中心移動の無効化と中心速度の設定
trackball.noPan = false;
trackball.panSpeed = 1.0;
trackball.target = new THREE.Vector3(0, 0, 0);
//トラックボールのスタティックムーブの有効化
trackball.staticMoving = true;
//トラックボールのダイナミックムーブ時の減衰定数
trackball.dynamicDampingFactor = 0.3;
}
////////////////////////////////////////////////////////////////////
// 光源初期化関数の定義
////////////////////////////////////////////////////////////////////
//グローバル変数の宣言
let directionalLight, //平行光源オブジェクト
ambientLight; //環境光オブジェクト
function initLight() {
//平行光源オブジェクトの生成
directionalLight = new THREE.DirectionalLight(0xffffff, 2.0, 0);
//平行光源オブジェクトの位置の設定
directionalLight.position.set(50, -50, 50);
//平行光源オブジェクトの影の生成元
directionalLight.castShadow = false;
//平行光源オブジェクトのシーンへの追加
scene.add(directionalLight);
//環境光オブジェクトの生成
ambientLight = new THREE.AmbientLight(0x666666);
//環境光オブジェクトのシーンへの追加
scene.add(ambientLight);
}
////////////////////////////////////////////////////////////////////
// オブジェクト初期化関数の定義
////////////////////////////////////////////////////////////////////
let box;
function initObject() {
//スカイドームの生成
let skydome = createSkydome();
//床オブジェクトをシーンへ追加
scene.add( skydome );
//床オブジェクトの生成
let floor = createFloor();
//床オブジェクトをシーンへ追加
scene.add( floor );
//img要素の生成
let img = new Image();
img.src = UV_Grid_Sm; //DataURL
let texture = new THREE.Texture( img );
texture.needsUpdate = true;
//カラースペースの指定
texture.colorSpace = THREE.SRGBColorSpace;
let L = 10;
//形状オブジェクトの宣言と生成
let geometry = new THREE.BoxGeometry(
L, //width：x軸方向の幅（デフォルト：1.0）
L, //height：y軸方向の幅（デフォルト：1.0）
L, //depth：z軸方向の幅（デフォルト：1.0）
10, //widthSegments：x軸方向の分割数（デフォルト：1）
10, //heightSegments：y軸方向の分割数（デフォルト：1）
10 //depthSegments：z軸方向の分割数（デフォルト：1）
);
//材質オブジェクトの宣言と生成
let material = new THREE.MeshPhongMaterial({map: texture , color: 0xffffff, specular: 0xffffff, shininess: 250 })
//直方体オブジェクトの生成
box = new THREE.Mesh(geometry, material);
//直方体オブジェクトのシーンへの追加
scene.add(box);
//直方体オブジェクトの位置座標を設定
box.position.set(-L/2, -L/2, 0);
for(let i = 0; i < box.geometry.attributes.position.array.length/3; i++){
box.geometry.attributes.position.array[ 3 * i + 0 ] += L/2;
box.geometry.attributes.position.array[ 3 * i + 1 ] += L/2;
box.geometry.attributes.position.array[ 3 * i + 2 ] += L/2;
}
for(let i = 0; i < box.geometry.attributes.position.array.length; i++){
initialPositionArray.push( box.geometry.attributes.position.array[i] );
}
let arrowY = new Arrow3D( THREE, 1, 2, 0.2, 0x00ff00 );
arrowY.setArrowBottomToTop( {x:-L/2, y:-L/2, z:0}, {x:-L/2, y:2*L, z:0} )
scene.add( arrowY.CG );
let arrowX = new Arrow3D( THREE, 1, 2, 0.2, 0xff0000 );
arrowX.setArrowBottomToTop( {x:-L/2, y:-L/2, z:0}, {x:2*L, y:-L/2, z:0} )
scene.add( arrowX.CG );
let arrowZ = new Arrow3D( THREE, 1, 2, 0.2, 0x0000ff );
arrowZ.setArrowBottomToTop( {x:-L/2, y:-L/2, z:0}, {x:-L/2, y:-L/2, z:2*L} )
scene.add( arrowZ.CG );
}
class Arrow3D{
constructor( THREE, headWidth, headLength, bodyWidth , color ) {
this.THREE = THREE;
this.headWidth = headWidth;
this.headLength = headLength;
this.bodyWidth = bodyWidth;
this.color = color;
this.startPoint = 2 //1:中心、2:矢印の元
//円柱オブジェクトの生成
this.arrowHead = new this.THREE.Mesh(
new this.THREE.CylinderGeometry(0, headWidth, headLength, 50, 50),
new this.THREE.MeshPhongMaterial({ color: color, specular: 0xffffff, shininess: 250 })
//new this.THREE.MeshBasicMaterial({ color: color })
);
this.arrowHead.position.set( 0, - headLength/2, 0 );
//円柱オブジェクトの生成
this.arrowBody = new this.THREE.Mesh(
new this.THREE.CylinderGeometry(bodyWidth, bodyWidth, 1, 50, 50),
new this.THREE.MeshPhongMaterial({ color: color, specular: 0xffffff, shininess: 250 })
//new this.THREE.MeshBasicMaterial({ color: color })
);
this.arrowBody.position.set( 0, -headLength/2, 0 );
this.arrowBody.scale.set( 1, headLength, 1 );
this.CG = new this.THREE.Object3D( );
this.CG.arrowHead = this.arrowHead;
this.CG.arrowBody = this.arrowBody;
this.CG.add( this.arrowHead );
this.CG.add( this.arrowBody );
//初期姿勢
this.setArrowBottomToTop( {x:0, y:0, z:0}, {x:0, y:10, z:0} )
}
setArrowBottomToTop( bottom, top ){
//矢印の起点ベクトル
let L = new this.THREE.Vector3( ).subVectors( top, bottom );
//中心座標ベクトル
let R = new this.THREE.Vector3( ).addVectors( top, bottom ).multiplyScalar( 1/2 );
this.arrowBody.scale.set( 1, L.length() - this.headLength , 1 );
//３次元オブジェクトの基準位置を考慮して配置
if( this.startPoint == 1 ){
this.arrowBody.position.set( 0,- this.headLength/2, 0 );
this.arrowHead.position.set( 0, L.length()/2 - this.headLength/2, 0 );
this.CG.position.copy( R );
} else if( this.startPoint == 2 ){
this.arrowBody.position.set( 0, L.length()/2 - this.headLength/2, 0 );
this.arrowHead.position.set( 0, L.length() - this.headLength/2, 0 );
this.CG.position.copy( bottom );
}
//基準となるベクトル
let V1 = new this.THREE.Vector3(0, 1, 0);
//規格化した位置ベクトル
let V2 = L.clone().normalize();
//回転軸ベクトル
let V3 = new this.THREE.Vector3().crossVectors( V1, V2);
//回転角のcos値
let cosTheta = V1.x * V2.x + V1.y * V2.y + V1.z * V2.z;
//回転ありの場合
if( Math.abs(V3.length()) > 0.001 ){
//回転角
let theta = Math.acos( cosTheta );
//回転に対応するクオータニオンの生成
let q = new this.THREE.Quaternion().setFromAxisAngle(
V3.normalize(), theta
)
//姿勢クオータニオンに設定
this.CG.quaternion.copy( q );
}
}
setVisible( visible ){
this.arrowHead.visible = visible;
this.arrowBody.visible = visible;
}
}
////////////////////////////////////////////////////////////////////
// 無限ループ関数の定義
////////////////////////////////////////////////////////////////////
//グローバル変数の宣言
let step = 0; //ステップ数
function loop() {
//トラックボールによるカメラオブジェクトのプロパティの更新
trackball.update();
let E =[
[
parseFloat( document.querySelector("#E11").value ),
parseFloat( document.querySelector("#E12").value ),
parseFloat( document.querySelector("#E13").value )
],
[
parseFloat( document.querySelector("#E21").value ),
parseFloat( document.querySelector("#E22").value ),
parseFloat( document.querySelector("#E23").value )
],
[
parseFloat( document.querySelector("#E31").value ),
parseFloat( document.querySelector("#E32").value ),
parseFloat( document.querySelector("#E33").value )
]
]
let F =[
[
parseFloat( document.querySelector("#F11").value ),
parseFloat( document.querySelector("#F12").value ),
parseFloat( document.querySelector("#F13").value )
],
[
parseFloat( document.querySelector("#F21").value ),
parseFloat( document.querySelector("#F22").value ),
parseFloat( document.querySelector("#F23").value )
],
[
parseFloat( document.querySelector("#F31").value ),
parseFloat( document.querySelector("#F32").value ),
parseFloat( document.querySelector("#F33").value )
]
]
for( let i = 0; i < 3; i++){
for( let j = 0; j < 3; j++){
D[i][j] = E[i][j] + F[i][j];
}
}
document.querySelector("#D11").value = D[0][0];
document.querySelector("#D12").value = D[0][1];
document.querySelector("#D13").value = D[0][2];
document.querySelector("#D21").value = D[1][0];
document.querySelector("#D22").value = D[1][1];
document.querySelector("#D23").value = D[1][2];
document.querySelector("#D31").value = D[2][0];
document.querySelector("#D32").value = D[2][1];
document.querySelector("#D33").value = D[2][2];
for(let i = 0; i < box.geometry.attributes.position.array.length/3; i++){
let x = initialPositionArray[ 3 * i + 0 ];
let y = initialPositionArray[ 3 * i + 1 ];
let z = initialPositionArray[ 3 * i + 2 ];
let dx = [x, y, z];
let dr = Deformation( D, dx );
box.geometry.attributes.position.array[ 3 * i + 0 ] = dx[ 0 ] + dr[ 0 ] * (step%120) / 120;
box.geometry.attributes.position.array[ 3 * i + 1 ] = dx[ 1 ] + dr[ 1 ] * (step%120) / 120;
box.geometry.attributes.position.array[ 3 * i + 2 ] = dx[ 2 ] + dr[ 2 ] * (step%120) / 120;
}
box.geometry.attributes.position.needsUpdate = true;
step ++;
//レンダリング
renderer.render(scene, camera);
//「loop()」関数の呼び出し
requestAnimationFrame(loop);
}
//床オブジェクト生成関数
function createFloor(){
let textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load( generateFloorTextureDataURL( [0xFFFFFF, 0x555555] ) )
//テクスチャラッピングの指定
texture.wrapS = THREE.RepeatWrapping; //x軸方向
texture.wrapT = THREE.RepeatWrapping; //y軸方向
//リピートの指定
texture.repeat.set(10, 10);
//カラースペースの指定
texture.colorSpace = THREE.SRGBColorSpace;
texture.mapWrapT = "RepeatWrapping";
texture.mapWrapS = "RepeatWrapping";
//異方性フィルダリング指数の指定
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
//形状オブジェクトの宣言と生成
let geometry = new THREE.PlaneGeometry(50, 50); //平面オブジェクト
//材質オブジェクトの宣言と生成
let material = new THREE.MeshBasicMaterial({
color: 0xffffff,
map: texture,
side: THREE.DoubleSide
});
//平面オブジェクトの生成
return new THREE.Mesh(geometry, material);;
}
//スカイドーム生成関数
function createSkydome(){
let vertexShader = "//バーテックスシェーダー\n" +
"//頂点シェーダーからフラグメントシェーダーへの転送する変数\n" +
"varying vec3 vWorldPosition;\n" +
"void main( ) {\n" +
" //ワールド座標系における頂点座標\n" +
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );\n" +
" vWorldPosition = worldPosition.xyz;\n" +
" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n" +
"}\n";
let fragmentShader = "//フラグメントシェーダ―\n" +
"//カスタムuniform変数の取得\n" +
"uniform vec3 topColor; //ドーム頂点色\n" +
"uniform vec3 bottomColor; //ドーム底辺色\n" +
"uniform float exp; //減衰指数\n" +
"uniform float offset; //高さ基準点\n" +
"//バーテックスシェーダーから転送された変数\n" +
"varying vec3 vWorldPosition;\n" +
"void main( ) {\n" +
" //高さの取得\n" +
" float h = normalize( vWorldPosition + vec3(0, 0, offset) ).z;\n" +
" if( h < 0.0) h = 0.0;\n" +
" gl_FragColor = vec4( mix( bottomColor, topColor, pow(h, exp) ), 1.0 );\n" +
"}\n";
//形状オブジェクトの宣言と生成
let geometry = new THREE.SphereGeometry( 500, 100, 100);
let uniforms = {
topColor: { type: "c", value: new THREE.Color(0.0, 0.3, 1.0) },
bottomColor: { type: "c", value: new THREE.Color(1.0, 1.0, 1.0)},
exp:{ type: "f", value : 0.8},
offset:{ type: "f", value : 400}
};
//材質オブジェクトの宣言と生成
let material = new THREE.ShaderMaterial( {
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms : uniforms,
side: THREE.BackSide,
} );
return new THREE.Mesh( geometry, material);
}
//////////////////////////////////////////////
// テクスチャマッピング用 dataURL生成関数
//////////////////////////////////////////////
function generateFloorTextureDataURL( tileColors ){
//canvas要素の生成
let canvas = document.createElement('canvas');
//canvas要素のサイズ
canvas.width = 256; //横幅
canvas.height = 256; //縦幅
//コンテキストの取得
let context = canvas.getContext('2d');
let n = 2;
let colors = [];
colors[0] = "#" + tileColors[0].toString(16);
colors[1] = "#" + tileColors[1].toString(16);
colors[0].replace("0x" , "");
colors[1].replace("0x" , "");
for ( let i = 0; i < n; i++ ) {
for ( let j = 0; j < n; j++ ) {
context.beginPath();
context.rect( i*canvas.width/n, j*canvas.height/n, canvas.width/n, canvas.height/n );
context.closePath();
let m = Math.abs( i + j ) % colors.length;
//塗りの設定
context.fillStyle = colors[m]; //塗りつぶし色の指定
context.fill(); //塗りつぶしの実行
}
}
let dataUrl = canvas.toDataURL("image/png");
return dataUrl;
}
</script>
</head>
<body>
<section id="field">
<div style="font-size: 30pt; padding: 10px 10px 0px 10px; float: left;">
\( D = E + F = \)
</div>
<div style="font-size: 40pt; width: 40px; height:80px; float: left;background-color: antiquewhite; padding: 0px 0px 0px 10px;">
\( \left(\right. \)
</div>
<table class="matrix" style="float: left;">
<tr>
<td><input id="E11"></td>
<td><input id="E12"></td>
<td><input id="E13"></td>
</tr>
<tr>
<td><input id="E21" disabled></td>
<td><input id="E22"></td>
<td><input id="E23"></td>
</tr>
<tr>
<td><input id="E31" disabled></td>
<td><input id="E32" disabled></td>
<td><input id="E33"></td>
</tr>
</table>
<div style="font-size: 40pt; width: 40px; height:80px; float: left;background-color: antiquewhite; padding: 0px 0px 0px 10px;">
\( \left.\right) \)
</div>
<div style="font-size: 40pt; width: 50px; height:80px; float: left; padding: 0px 0px 0px 10px;">
\( + \)
</div>
<div style="font-size: 40pt; width: 40px; height:80px; float: left;background-color: azure; padding: 0px 0px 0px 10px;">
\( \left(\right. \)
</div>
<table class="matrix" style="float: left;">
<tr>
<td><input id="F11" disabled></td>
<td><input id="F12"></td>
<td><input id="F13"></td>
</tr>
<tr>
<td><input id="F21" disabled></td>
<td><input id="F22" disabled></td>
<td><input id="F23"></td>
</tr>
<tr>
<td><input id="F31" disabled></td>
<td><input id="F32" disabled></td>
<td><input id="F33" disabled></td>
</tr>
</table>
<div style="font-size: 40pt; width: 40px; height:80px; float: left;background-color: azure; padding: 0px 0px 0px 10px;">
\( \left.\right) \)
</div>
<div style="font-size: 40pt; width: 50px; height:80px; float: left; padding: 0px 0px 0px 10px;">
\( = \)
</div>
<div style="font-size: 40pt; width: 40px; height:80px; float: left;background-color: rgb(233, 255, 213); padding: 0px 0px 0px 10px;">
\( \left(\right. \)
</div>
<table class="matrix" style="float: left;">
<tr>
<td><input id="D11" disabled></td>
<td><input id="D12" disabled></td>
<td><input id="D13" disabled></td>
</tr>
<tr>
<td><input id="D21" disabled></td>
<td><input id="D22" disabled></td>
<td><input id="D23" disabled></td>
</tr>
<tr>
<td><input id="D31" disabled></td>
<td><input id="D32" disabled></td>
<td><input id="D33" disabled></td>
</tr>
</table>
<div style="font-size: 40pt; width: 40px; height:80px; float: left;background-color: rgb(233, 255, 213); padding: 0px 0px 0px 10px;">
\( \left.\right) \)
</div>
<br style="clear:both;">
</section>
<div id="canvas-frame"></div><!-- canvas要素を配置するdiv要素 -->
</body>
</html>この記事が気に入ったらサポートをしてみませんか？