縦方向の中央揃え
バーティカルアラインは、テーブルとか画像とテキストの関係の時だけに使える（今回は使えない）
今回はラインハイトを使う。
line-height: 3;/*行の高さ*/
ここまで
--->test3.css
body{
background: #FFc;
}
#stage{
display: flex;/*横並び*/
flex-wrap: wrap;/*アイテムは複数行に分割されます。*/
width: 400px;
margin: auto;
border: solid 1px #ccc;
}
#stage div{
/*カードのデザイン*/
width: 100px;
height: 100px;
text-align: center;/*ボックスの中央に配置*/
background: #fff;
box-sizing: border-box;/*border含めたサイズにしてくださいよ*/
border: solid 1px #ccc;
/*文字*/
font-size: 2rem;
line-height: 3;/*行の高さ*/
cursor: pointer;/*マウスが乗ったときポインタになる*/
}
--->test3.js
$(function(){
console.log('hi');
var kigo = ['!','!','#','#','$','$','&','&',
'=','=','@','@','+','+','?','?'];//2枚ずつカードを用意
//シャッフルする
for (i=0; i<50; i++){
var r1 = Math.floor(Math.random()*kigo.length);//ランダム小数点切り捨て
var r2 = Math.floor(Math.random()*kigo.length);
var temp = kigo[r1];
kigo[r1] = kigo[r2];
kigo[r2] = temp;
}
console.log([kigo]);
//stage上に16のdivを配置。中身は配列の文字
for (i=0; i<kigo.length; i++){
var ele = $('<div>').text(kigo[i]);//divを生成、textで配列の中身を入れる
$('#stage').append(ele);//stage上に配置
}
//click時の動作予約
$('#stage div').on('click',function(){
$(this).css('background','#cFF');
var moji = $(this).text();
console.log('here is in click. moji is'+moji);
});
});
「[]で囲ったものは配列」みたいに、
情報を｛｝で囲ったものはオブジェクトですよという記述になる。
オブジェクトとは：
「クラスのインスタンスです」「設計図から生成されたものがオブジェクト」
「プロパティと値をもっている」
プロパティとは：
対象にくっついている、そいつがどんなやつかを表す情報。
>日本語では「属性」や「性質」などと訳されます。
--->test3.js ここまで
$(function(){
console.log('hi');
var kigo = ['!','!','#','#','$','$','&','&',
'=','=','@','@','+','+','?','?'];//2枚ずつカードを用意
//シャッフルする
for (i=0; i<50; i++){
var r1 = Math.floor(Math.random()*kigo.length);//ランダム小数点切り捨て
var r2 = Math.floor(Math.random()*kigo.length);
var temp = kigo[r1];
kigo[r1] = kigo[r2];
kigo[r2] = temp;
}
console.log([kigo]);
//stage上に16のdivを配置。中身は配列の文字
for (i=0; i<kigo.length; i++){
var ele = $('<div>').text(kigo[i]);//divを生成、textで配列の中身を入れる
$('#stage').append(ele);//stage上に配置
}
//click時の動作予約
$('#stage div').on('click',function(){
var moji = $(this).text();//呼び出し元（クリックされたパネル）を取得の、もっているtext
console.log('here is in click. moji is' +moji);
//$(this).css('background','#cFF');//これは自分が書いたコード。ただパラメーターとして文字列を渡しているだけ。1つしか指定できないしオブジェクトではない。
$(this).css({'background':'#cFF','color':'#f00'});//{}で記述した「オブジェクトで渡す」やり方。のちのちエイジャックスでたくさん使うので練習で使いましょう
//この記述だとカンマで区切って2,3個めの記述もできる
});
});
$(this).css('background','#cFF');
これはただ「パラメーターとして文字列を渡しているだけ」。
1つしか指定できないしオブジェクトではない。
$(this).css({'background':'#cFF','color':'#f00'});
{}で記述した「オブジェクトで渡す」やり方。
のちのちエイジャックスでたくさん使うので練習で使おう。
この記述だとカンマで区切って2,3個めの記述もできる
