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

どうも！LSSです！！ CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！ CSSパズル カテゴリーの記事一覧 - Little Strange Software CSSパズル　第三問！ 「現在のコード」について やっている事と言えば… 応用例 CSSパズル　第三問！ ２つの写真があります。 上が「お手本」で、下が「回答」です。 そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。 選択肢を変更すると「回答」の表示がそのコードで生成したものに変化するので、「回答」を「お手本」と同じものになるよう、正しい選択肢を選ぶ、という出題です。 なお、選択肢を変更した際に、さらにその下にある「現在のコード」がその選択肢の場合のコードとなります。（つまり、その時点で表示されている「回答」のコードですね） 全ての選択肢が正しいものになり、「お手本」と「回

どうも！LSSです！！ 1000記事到達した時、３年経過した時にも考えていた事ですが… とりあえず更新頻度を変更（毎日更新終了）します！ 時間の使い方を諸々考え直して、これから始める事を考えてみます^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

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

どうも！LSSです！！ 本日がブログ開設記念日。 今日からブログ４年めが始まります！ …という、記念日記事には特別な仕掛けを施したいところでもありますが、結局余裕がなかったのでした^^; こんなスタートですが、４年めもまた、よろしくお願いします^^

どうも！LSSです！！ 早速ですが、 little-strange.hatenablog.com で予告していた「いろは歌作成補助ツール」ができました！ いろは歌作成補助ツール 使い方 といっても… いろは歌作成補助ツール 使い方 いろは47文字＋「ん」の文字が書かれたコマが、いろは歌順に並んでいます。 それぞれが、マウスドラッグまたはスマホの指ドラッグで、緑色の盤面内で移動させる事ができます。 自由に並べかえて、オリジナルのいろは歌（？）を作るのに役立ててください！ （需要があるのかはなはだ謎ですがｗｗｗ） なお、移動させて置いた時に、コマと同じサイズの見えない枠に吸着する仕様となっています。 また、置こうとした場所に既に別のコマがあった場合、元々そこにあったコマは移動中のコマの移動前の位置に移動します。（入れ替わる事になります） といっても… 47+1文字を重複なく並べて、一連の意味の

どうも！LSSです！！ 謎の貧乏性が発動している？のか、今日も「お金を使いたくない」からの一歩も家から出ない日でしたｗ 散財する時にはするので、こうしたブレーキがかかるのもそれはそれで必要なところかとも思うのですが、必ずしも「外出する」事と「お金を使う」事もイコールではないよね、という気もしています。 水入りボトルでも持って「目的なくとにかく少し歩く」か「お小遣い500円として、有効活用する方法を探求」するとか考えた方がいいのかな、とも思ったりします。 子どもの頃は500円って大金でしたけどねｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 以前ポチった、マウスコンピューターのPCが届きました！ mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴/Win10 Pro/Celeron N4000/4GB/64GB eMMC)MT-E10ZN マウスコンピューター(Mouse Computer) Amazon ↑これに近いタイプで「E10-VL」という機種、楽天で購入（楽天の広告も申し込むべきかなと思う今日この頃）。 とりあえずWindows11にアップグレード完了しました。 USBブートはまだ出来ずにいます。 マウスはまだ繋いでいませんが、画面タッチと標準キーボードでこの記事を書いています。 で、慣らしのつもりで書いているのですが、いつものようにCSSコードを書いてみるとどんな感じかな？と試してみました。 書いてみたコード コード さほど目新しいものはないサンプ

どうも！LSSです！！ 【CSS】疑似３D 前後関係 - Little Strange Software の回転体を増やしてみました。 疑似３D コード CSS変数を使って、個々の回転体の設定を簡略化 もっと凝った疑似３Dを見たい！という方は 疑似３D コード <style> @keyframes d3dzx{ 0%{background-position-x:var(--i);} 100%{background-position-x:calc(100% - var(--i));} } @keyframes d3dzy{ 0%{background-position-y:40%;background-size:calc(40px - var(--s)) calc(40px - var(--s));} 100%{background-position-y:60%;background-siz

どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 コード <style> @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),50%,calc(50% + 20px),calc(50% + 40px);} 24%{background-position-x:0,calc(50% - 20px),50%

どうも！LSSです！！ 転職を機に、LINE証券で株式投資を始めました。 転職後にしている仕事が「収入は爆増、ただし１年契約」のため、「前年と同レベルの支出で生活していればかなり余裕が出るはず。その後に備えてなんらかの手を打つか」って感じで始めたのです。 入金履歴 現在の成果 それに、単純に原資が増えたとて 入金履歴 4/11　2843円（キャンペーンで貰い物。原資として考えて良いと思います。） 4/13　10000円入金 5/23　30000円入金 6/1　150000円入金 仕事の報酬ががっつり入ってくるのがまだ先（一度目の波が今月末）のため、現時点ではこの程度ですが、最終的に「どれだけ入金するか」の目標を考えました。 「365万円」を目標とします！ （350でも400でもなく、１年の日数に合わせるあたりがひねくれものｗ） １年間仕事を全うし、会社が契約を守ってくれれば、の話ですがはた

今週のお題「SFといえば」 どうも！LSSです！！ 今週のお題ですが、まず記事編集画面に出てきたのが 「古今東西の「ＳＦ」を語りませんか？」 この「古今東西」にまず目が行き、まっさきに連想したのは…「竹取物語」ですね。 ＳＦの概念が無かった時代の、不思議を含んだおとぎ話のひとつでしたが、これほどもろに「宇宙人」が出てくる話もなかなかないかと。 「不思議を含んだおとぎ話」でいうと、他に妖怪・化け猫の話や隠れ里、異種婚姻譚など様々ありますが…さて、どこからがＳＦかな？って考え始めると、ＳＦってなんだろう、というところがよく分からなくなってきましたｗ ＳＦの概念のない時代に作られた話なので、「竹取物語」は「ＳＦとして解釈できるorしやすい話」というべきでしょうね。 それで行くと、他にＳＦっぽい日本昔話といえば…「浦島太郎」の話が浮かびます。 こちらは時間ＳＦで、後にアインシュタイン氏の特殊相対性

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

どうも！LSSです！！ little-strange.hatenablog.com little-strange.hatenablog.com と続けざまに虹色をテーマにしたCSSを書いていましたが、「虹色の枠線」を２種類、追加でさらに考えてみました^^ 虹色の枠線 追加１ 虹色の枠線 追加2 なお、今回のこれは… 虹色の枠線 追加１ 虹色の枠線 追加１ コード <div style="border: 5px solid; border-image: repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px) 5;">虹色の枠線

どうも！LSSです！！ …謎のツールを開発してしまいました^^;;;;;;;;;; 韻踏みマシン 使い方 ただし… 韻踏みマシン 使い方 ４つの選択項目、それぞれ「あいうえおん」の文字を選択できます。 韻を踏みたい言葉が例えば「会いたい」でしたら、母音は「あいあい」なので選択項目を「あいあい」になるように設定し「生成」ボタンを押すと…。 母音が「あいあい」になる文字がランダムに選択され、100パターンの組み合わせが生成されます！ （「ん」だけはそのまま「ん」になります。） ただし… 単純に「母音が同じである文字」をランダムに選出しているだけのため…ほとんどマトモな単語にはなりませんｗ このツールを「ラッパーを志す方の一助になれば^^」…などと言ってしまうと、「馬鹿にしてるのか」とボコられそうなレベルですね^^; そんな謎のジョークスクリプトでした。 ってなとこで、今回はこのへんで！ 次回も

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

どうも！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です！！ このブログに、 little-strange.hatenablog.com というカテゴリがあります。 HTML、CSS、JavaScriptなどの「さわりはじめ」だけを軽く説明するような内容で、はてなブログでも試せるような内容であるところからWeb関連の話のみになっています。 が、仕事のほうで「SQL超入門のさわりだけ」みたいな感じのものを今日ちょっと書いてみました。 タイトルはもちろん異なりますｗ が、「難しそう、と極力思わせないように」というのと「業務なのである程度の硬さ」のバランス…とか考えだすと、なかなか迷うところがあります。 とりあえず「１回２ページ」のを３回分書けたのは、ここで書いていた経験も役立ってるのかな、とか、逆に仕事で書いてる経験がブログの方にも活かせたりするかも？とか思う今日この頃です。 ってなとこで、今回はこのへんで！ 次回もまた、よろしく

どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。 実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。 コード <style> .turtle{ padding:0.6em; background: repeating-conic-gradient(from 40deg at 50% 75%,

どうも！LSSです！！ JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。 乱数なので、ページを開くたびに模様が変わります。 コード ついでに、記事部分の背景も透過 乱数なもので… コード <script> bgtxt=''; for(i=0;i<50;i++){ cr=Math.floor(Math.random()*60+30); ct=Math.floor(Math.random()*50+cr); cx=Math.floor(Math.random()*400+ct*2); cy=Math.floor(Math.random()*400+ct*2); cpx=Math.floor(Math.random()*100); cpy=Math.floor(Math.random()*100); bgtxt+='radial-gradient('+cr+'px