どうも！LSSです！！
三連休で時間あるぞー！と思ってたら、時間はどんどん過ぎていきますね^^;
おとといあたりに何か大口を叩いたような気がしますが、gridレイアウトに興味を惹かれて色々いじってるうちにこんな時間！！ｗ
今作りかけの状態ですが、晒してみます！
↑はてなの「記事を書く」画面のプレビュー、「スマートフォン表示」にしたところで、「中に全角文字を入れて縦横２１マス表示」したところです。
なんとか収まってますね^^
これがtableタグでやってると、中の文字のせいでマスを広げてしまっていました。
gridレイアウト＋divタグでやってる分には、
「もし中の文字がサイズオーバーしても、文字の方が切れてマスを広げる事はない」ので、再びマスの数を大きくできそうです！^^
小さすぎると操作しづらいだろうな、と思い、別途コントロール用の▲もつけてみました。
多量の<div>タグもスクリプトで書き出すとラクチン^^
↑の画面のコードも晒してみます！
コード
<style><!--
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
font-size:10px;
}
--></style>
<div id="gamen" style="position: relative;"> </div>
<script>// <![CDATA[
txt='';
txt+='<div id="gr0" style="display:grid;grid-template-columns:repeat(21,15px);grid-template-rows:repeat(21,15px);">';
for(i=0;i<21*21;i++){
txt+='<div class="hako">'+'宝'+'</div>';
}
txt+='</div>';
txt+='<div style="position:absolute;bottom:10px;right:10px;font-size:25px;color:orange;display:grid;grid-template-rows:repeat(3,27px);grid-template-columns:repeat(3,27px);">';
txt+='<div></div><div>▲</div><div></div>';
txt+='<div>◀</div><div></div><div>▶</div>';
txt+='<div></div><div>▼</div><div></div>';
txt+='</div>';
gamen.innerHTML=txt;
// ]]></script>
特筆すべきはこの、
grid-template-columns:repeat(21,15px);grid-template-rows:repeat(21,15px);
の部分。
21マス分「15px」を書き並べなくても、repeat(21,15px);で「21マス分15ピクセルで」マスを作ってくれるんですね^^
超巨大迷宮のように、「凝ったレイアウトじゃないけどやたら大量のマスを仕切る」時に便利！！
フォントサイズは10pxより小さくはならないようですが、色々試してみたところ、
「マスのサイズの2/3」ぐらいのフォントサイズなら収まりがいいようです。（これも気になってましたｗ）
…だいぶ何かが見えてきたような気がします^^
話変わるんですが、最近たまに玉ねぎ丸一個食いしてます
うん、めっちゃ話かわりますがｗ
スーパーに、ちょっと小ぶり？の玉ねぎが４つ１ネットで170円で売られてたんですね。
１つあたり43円。
で、それを豪快にザックリ切って、油で炒めるだけ、という事を初めて今日で３個め。
「ザックリ」というところにも意味があって、あまり細かくしないで大きめのカケラのまま食す、のが「男の手料理」ぽくていいかなぁ、と^^
前２個は８つ切りにしました！
で、最初の時は、割としつこめに炒めて、ミソドレとかいうのが家にあったので（味噌ドレッシングかな）、それをかけて食すとめちゃウマ！！
玉ねぎの自然な甘みをたっぷり味わえました^^
２個めの時は…卵で強引にとじてみました。
それもスパイシー卵焼きで！
※塩コショーをアホほど入れた卵焼き。
ミソドレほどのパンチは無かったなぁ。
で、今日３個めだったのですが、今回は「４つ切り」でやってみました！
豪快感はあります。
が、中心のほうは小さくなってしまうわけで、炒めている途中に外側が大きすぎてうまく混ざらず、小さいのだけ先に焦げそうだったのでやむなく、
「炒めながら箸でつまみあげて食う」という真似をしてしまいました^^;
…ちょっとここは対策が必要そう。
今回もミソドレでうまー！でした^^
酒のアテにもいいですねｗ
次はどうしようか…「具が玉ねぎだけのカレー」という案もありますがｗｗｗｗｗ
