どうも！LSSです！！ いよいよ12/31、今は23:35です。 こんな時間から記事を書き始めてみますｗ 色々ありましたねぇ 2022年、振り返ってみると色々な事がありました。 まず転職。幸いにして好条件で１年契約の業務委託として契約を結んでくださった企業があり、とっても助かりました。 次に、前述の転職と関連しますが株式投資の開始。 これがなかなかに面白い、ただし勝ててはいませんがｗ 未だ知らない事が多々あって、新たな発見がよくあります。 次に、このブログの毎日更新の終了。 時間の使い方を見直したくての決断でしたが、見直しについてはまだまだな感じです。 あと、父が亡くなったというのもありました。 それから、2022年…というのからは少し離れるかもですが、嫁に行った妹が第二子を妊娠中で、今かなりおなかが大きくなっています。 上の子は女の子（２歳半）ですが、次も女の子のようで、こちらは来年誕生

どうも！LSSです！！ だいぶ前に、 リモートの話とイモートの話（…無理があるなぁｗ） こんな記事を書いていましたが、ようやく…ようやく…姪っ子と初めてお会いする事ができました！^^ 本来なら、正月には妹夫婦は帰省してたハズだったんですが、コロナ禍で見送り。 でも、なんだかんだで自分以外の家族は全員、妹夫婦宅に行って対面していて、自分だけが会えずにいた、という状況でした。 何日か泊まっていくようで テストプレイの様子を見て思ったのは… 赤ちゃん向けゲームアプリを作る場合に開発者が留意すべき事 マルチタッチ対応が必要 全画面表示が望ましい 音と画像演出にこだわりたい 赤ちゃんに教わった事 家に赤ちゃんがいる状況という事自体ひさしぶり 何日か泊まっていくようで いってもまだ生後７か月。わからんちんですｗ で、そこでふと思った事があったんですね。 昨日、記事として公開した、 【制作中】もぐらたた

どうも！LSSです！！ なんとなく検索してみたんですが、WebAudioAPIってマイクからの入力も読み取れるみたいですね。 www.google.co.jp 検索したきっかけは、 arsinput.hatenablog.jp arsinput.hatenablog.jp アーシさんの記事で、音感トレーニングの話題があったので、 「ブラウザが発した音がどの音階か当てるゲーム」 なら作れそう、と思ったところから。 「絶対音感」を持つ人は、この音階当てができますが、ふと「音痴と呼ばれるのは、聴くほうじゃなくて発する音が外れている事に気づかない人の事を言うのでは？」と思ったところで、発した音（声）の判定なんてのもできるのかな？と思ったのです。 音階の周波数の算出方法は little-strange.hatenablog.com で既に分かっているので、「マイクから入力された音の周波数がどの音階の

どうも！LSSです！！ 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 でっかい下向き矢印！ コード コードを見やすく整形するとこんな感じ 画面幅に合わせて伸縮 でっかい下向き矢印！ コード <div style="height: 200px; background:linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gr

どうも！LSSです！！ 最近の記事、 little-strange.hatenablog.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、（繰り返しを考えなければ）結構自由に線が引けるもので色々作ってみましたが、アレンジを加えてくださる方もおられる今、この「線の引き方」について手順をなぞって記事を書いてみるのもいいかな、と思ったりしています。 …またの機械にｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

今週のお題「SFといえば」 どうも！LSSです！！ 今週のお題「SFといえば」 - Little Strange Software では昔話とSFについて強引に書いていましたが、今回は普通にお気に入りSF作品の話。 と言っても、数多くあるのですが、中でも特に好きなのを挙げるとすると… 銀河放浪 吾妻ひでお先生の「銀河放浪」を挙げます！ 銀河放浪 1 (MAG COMICS) 作者:吾妻 ひでお マガジンハウス Amazon 銀河放浪 2 プリンセスミコ・サーガ (MAG COMICS) 作者:吾妻 ひでお マガジンハウス Amazon 全２巻のコミックです。 吾妻先生は相当な読書家で、特に若い頃から海外SFを数多く読んでこられたとか。 自身の作品にもSFを反映させたかったものの、最初の頃は編集に抑えられて思いっきり描く事ができず、作中にこっそり忍ばせる程度だったというのを後に書いておられま

どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間） 雨の色: 雨の太さ:px 雨の角度:deg 雨の横位置:px（雨の長さにも影響） 雨枠の幅:px 雨枠の高さpx 雨２の横ズレ:px 雨２の縦ズレ:px 雨３の横ズレ:px 雨３の縦ズレ:px 背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整用コントロールの内容を変更する事で、リアルタイムに雨のアニメーションが変化します。（アニメーション速度、雨の角度など） 色々変えてみて遊べる他、調整を加えたアニメーションを表示するためのコードが表示されます。（こちらも調整用コントロールの内容を変更した時点でリアルタイムに内容生成されます） 気に入

どうも！LSSです！！ ブログを始めてから1000日たちました - Little Strange Software に使用した、「背景にうっすら『１０００』の数字が並んでいる」コードを解説してみます。 こんなコードでした 下から見ていきましょう その上に白で上書き あとは同じ要領で… atとpositionとsize こんなコードでした コード <style> article{ background: conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px, conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#f8

どうも！LSSです！！ little-strange.hatenablog.com にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。 （いかに手をかけずに…と考えていたのにそれに反するかのようなｗ） これで完成ってことにしてもいいかな？ キャラクター コード 問題点と解決について 命名発表！ キャラクター 今回はアニメーションしません。 スイッチ迷路のキャラとして使うつもりですが、そこでもアニメーションはせずに、手足だけ交互のパターンを一歩ごとに切り替えようかと考えています。 コード <style> .test1,.test2,.test3,.test4{ display:inline-block; border:1px solid black; width:54px; height:54px; background-repeat:no-repeat; } .te

どうも！LSSです！！ 最近、こんな事を考えていました。 「迷路ゲームを作成するにあたり、自キャラもこの際コードで描きだしたい。また、どうせなら４方向の画像、かつ手足を振って各２パターン用意。ただし、極力労力をそれにさきたくない！」 とｗ そうして考えているうちに、 radial-gradientで描いた円で構成されたキャラなら手軽そう 考えてつめてみると、「８つの円」があれば表示位置すら変えず、「表示する・しない」「表示順の前後だけの調整」で要件は満たせるのでは？ と思い至り、それで実際に描いてみました。 歩くキャラクター コード 今回のサンプルでは 歩くキャラクター コード <style> @keyframes test1a{ 0%,50%{ background: radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81%

どうも！LSSです！！ 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style=" box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px , radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px , linear-gradient(180de

どうも！LSSです！！ 朗報、と言うべきかどうなんだか？ iOSのブラウザにあった、ある問題が解決していたようです。 ３つのグラデーション コード 以前には iOS15.4で修正されたらしい ３つのグラデーション ↑「赤から黄色」に変化するグラデーションを３つ、置いてみました。 この３つが違うグラデーションに見える方はおられますか？ ちなみに、LSSの環境では、「Windows＋GoogleChrome」「Androidのはてなアプリ」「iPhoneのはてなアプリ」で「３つとも同じように」見えます。 コード <div style="background-color: #ffff00; background-image: linear-gradient(90deg,#ff0000,#ff000000);"> </div> <p> </p> <div style="background-col

どうも！LSSです！！ 【CSS】水滴【小ネタ】 【CSS】水滴・改変【小ネタ続編】 と続けた水滴ネタですが、実は元々作ろうとしていたものの派生でした。 今回、その元々作ろうとしていたものができたのでお披露目します^^ 透過ボタン コード 透過なので… ボタンの動きの是非 何も起こらないボタン 透過ボタン ボタン コード <style> .aquabtn{ position:relative; display:inline-block; width:150px;height:60px; } .aquabtn div{ position:absolute; width:100%;height:100%; top:0px;left:0px; border-radius:10px; display:flex; justify-content:center; align-items:center;

どうも！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^ これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。 ところが。 CSSのプロパティというのは数が膨大で、この本に掲載されているものも数が膨大なのですが、それでも本が全てのプロパティを網羅しているわけではありません。 また、仮に「全てのCSSプロパティを網羅した本」があったとしても…CSSは進化しているので、時が経つとまた新たなプロパティが生まれたりもします。 プロパテ

どうも！LSSです！！ 今年も残すところあとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますｗ ある動画で、CSSで奇妙な動きを表現したものがあり（動画にはコードでてこず）、推測しながら劣化コピーを試みてみました。 SVGやJavaScript不使用で、CSS・HTMLのみでこういう表現が出来るんだなぁ、というところまでいけたものの…自分のオリジナリティがない＆使いどころが謎なのでこれから考えようかな、と^^; ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ CSSのキーフレームアニメーションは、「要素」を滑らかに変化させる事ができます。 ※ここでいう「要素」はHTMLを構成する<div>などのタグによる領域を指します。 「要素」の変化の対象となるCSSプロパティはかなり多くのものが対応しています。 例えば「要素」のうちの「背景」についても、background-positionを変化させる事で表示位置を滑らかに移動させたり、background-sizeを変化させる事で大きさを滑らかに変化させる事ができます。 が、このbackground-系のプロパティに「角度」を指定するプロパティが無いんですね。 背景に画像ではなくグラデーションを指定する、 linear-gradient や conic-garadient という関数の中には 表示角度を指定する箇所がありますが、それらはアニメーションの「滑らかな変化」には対応して