どうも！LSSです！！ 暴れん坊将軍のテーマ、に歌詞があったんですね - Little Strange Software にて、「振り向きカーン（勝手に作った造語）」の魅力を語りました。 が…「このかっこいい演出をCSSに持ち込めないか？」と妙な方向に思考が向かってしまい…作ってみちゃいましたｗ ただ、Web閲覧中に不意に音が鳴るのを自分が良しと思わないため音はでませんが、その代わりにoutlineのアニメーションをつけています。（それカーンか？^^;） ふりむきカーン コード コード解説 振り向きカーンの魅力 ふりむきカーン ふりむきカーン ↑の傾いた四角にマウスカーソルをのせてみてください^^ コード <style><!-- @keyframes knanm{ 0%{outline:0px #ffd400ff solid;} 100%{outline:50px #ffd40000 so

どうも！LSSです！！ 毎日あっついですね！ ブログの中だけでも、気持ち涼しくなるようなグラデーションを３種、考えてみました^^ 普通に四角が並んでいる感じ 斜めに幾重にも筋が走ってる感じ 放射状に波うってる感じ おまけ：記事限定で背景を変更 普通に四角が並んでいる感じ 普通に四角が並んでいる感じ。 コード <div style="background-image: linear-gradient(135deg,#bbbbff,#eeeeff,#bbbbff); background-size: 80px 80px; padding: 1em;"> 普通に四角が並んでいる感じです。<br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> 赤文字部分を好きな内容に書き換えて使用できます^^ 斜めに幾重にも筋が走ってる感じ 斜め

どうも！LSSです！！ かなり前の記事のネタに、ちょっと思いついた事の追加を試してみました。 グラデーション文字のアニメーション コード 元ネタ とりあえず試してみただけですが グラデーション文字のアニメーション きんきらきんのきーん コード <style><!-- @keyframes goldanm{ 0%{background-position:0px 0px;} 100%{background-position:2000px 0px;} } .golda{ font-size: 50px; font-weight: bold; color: gold; background-image: linear-gradient(90deg, brown,yellow,white,yellow,brown); -webkit-background-clip: text; -webkit-te

どうも！LSSです！！ このブログで、 などの「最初は表示されていないけど、ユーザーアクションによって表示される隠し文字」ネタを、これまでもいくつかご紹介してきました。 今回の記事のものも、その一種と言えそうですが、ちょっと変わり種です^^ ちょっと言いにくい話なんですけど… コード ざっくりコード解説 あとがき ちょっと言いにくい話なんですけど… ちょっと、言いにくい話なんですけど、実は…ただこれだけの小ネタなんですよね。あえてぼかしておきますが、知りたい人はボカシ部分にマウスカーソルをあわせてみてください。 コード <style><!-- .txsd{ color:transparent; text-shadow:0px 0px 10px #000; transition:0.5s; } .txsd:hover{ text-shadow:0px 0px 0px #000; } --><

どうも！LSSです！！ ７月も後半に入ろうとしていますね！ これは梅雨なのか、夏の雨なのか、と思うような大粒の雨が降り、空がゴロゴロいうこの季節。 7月の空とかけまして、幸せな猫とときます— LSS (@LSS0324) 2021年7月14日 ↑こんなツイートをしてみたりしましたｗ 夏といえば…去年のブログ記事で思い出すものがあります。 夏の暑さ…特に熱せられた地面の熱を、なんとか電気エネルギーに変えられないか？という妄想記事。 そしてこちらは、既に発電を担っている「太陽光発電」をより効率化できないか？という妄想記事。（でしたが、どうも既によく似た原理が実用化されてるらしくて後から記事に追記したんでした） ところで。 夏がくると欲しくなるグッズに、 THANKO サンコー ネッククーラーNeo TK-NECK2-WH ホワイト 幅180×高さ40×奥行145mm THANKO Amazon

どうも！LSSです！！ ちょっと先日から、CSSサンプル関連のまとめ（昨年７月以降のもの）を書こうとしていて…なんだか苦戦していますｗ 意外と量が多いようなそうでもないような？ 以前は と に分けてましたが、そんな感じでカテゴリ分けするのがまとまりいいのかな？とも思いつつ…。 書きあげる前に色々考えるクセがまた出てきちゃってる気がしますね^^;;; どんな形になるか分かりませんが…とにかく書くかな！ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

今週のお題「住みたい場所」 どうも！LSSです！！ 今回は、はてなのお題記事です。 住みたい場所 お題は「住みたい場所」。ならば… それはそうと、最近考えていた事 別に家建てる予定も予算もないんですが 住みたい場所＝隠し通路のある家 住みたい場所 あれ？前にも同じようなお題を書いてなかったっけ？と思い、記事検索してみると、 だいぶ前ですが、↑の記事ですね。 今もなお、自分の住んでるところが気に入ってる事に変わりないのですが、 ほぼほぼ人口密集地域であるがゆえに、ちょっとドローン飛ばしたい時にはいくらか移動を強いられるという難点もあります^^; となると、田舎暮らしもいいかな？とか、とりあえずコンビニとスーパーとネット回線があって、Amazonで買ったものが遅滞なく届く程度の田舎がいいのかも？なんていう気も起こったりもしますｗ お題は「住みたい場所」。ならば… 以前のお題は「住みたい街」と、

CSSのborder（枠線）を使って、写真画像を盛り上げたように見せる方法を考えました。 ↑の写真が ↓こうなります。 どうも！LSSです！！ ちょっと思いついた事があって試してみたところ、うまく出来ました^^ コード コード解説 盛り上げたように見せる、と言いつつ… コード <div style=" width: 300px; height: 225px; background-size: 100% 100%; background-origin: border-box; border: 15px #80808080 outset; border-radius: 10px; background-image: url('画像ファイルのURL'); ">&nbsp;</div> 上記コードをコピペして、画像ファイルのURLの部分を表示したい画像ファイルのURLに書き換えます。 また２行目の

どうも！LSSです！！ JavaScriptの小ネタで、なにげにやったこと無かった？事をやってみます。 ブログなどのWebページに画像ファイルを配置する事がよくありますね。 あれはまず、画像ファイルをアップロードしておき、ブログなどのWebページからそれを呼び出す<img>タグによって呼び出して表示しています。 その際「画像の幅」「画像の高さ」という「サイズ」は２種類の意味にわかれる事になります。 画像ファイルそのもののサイズ imgタグによって描きだされた表示上のサイズ 今回はこの２種類ある「サイズ」の概念の、それぞれ幅と高さをJavaScriptから読み取って表示してみる実験です。 画像サイズ取得実験！ コード 説明 あとがき 画像サイズ取得実験！ コード <p><img id="img0" width="100%" src="画像ファイルのURL" /></p> <div id="g

どうも！LSSです！！ ７月最初の記事は「駄文中の駄文」カテゴリでお送りしますｗ LSSは趣味でプログラムを書いたりはしますが、不器用なのでリアルな工作とかにはなかなか手を出せずにいます。 が、工作はしないまでも、「こうしたらこういう仕組みができるんじゃないか？」みたいな事を妄想するのは好きなので（に限らず妄想全般が好きなのかもですがｗ）、そんな脳内妄想で考えた事を記事にしてみます！ スマホスタンド 材料 作り方 と、実際のところは… スマホスタンド スマホを机の上に手放しで置き、いい感じの角度を保ってくれるあれです。 １００均とかでも気軽にいい感じのものが購入できますが、自分でもいい感じのものを作れないだろうか？って妄想で作り方を考えてみました。 求める条件としては、 材料が安く、なるべく簡単に作れる事 スマホの重みでこけたり傾いたりしない事（当たり前ですね） 使わない時はコンパクトに片

どうも！LSSです！！ 新たに覚えた事を忘れないためには、インプットだけで終わらずにアウトプットするのが大事！ なんですが、繰り返す事よりも新しい事に手を出すほうを優先したところ、自分が何をアウトプットしたかも忘れがちになってる困ったちゃんですｗｗｗ というわけで、自分で思い出すためにも、今月前半にどんな記事を書いていたか、振り返ってみます。 6/1 【JavaScript】テキストアドベンチャーゲームのシステムを作りかけてみました 月の始めはこれでしたね！ この開かない門のサンプル、続きをオチまで考えたような気がしますが…すっかり忘れました^^;;; 6/2 任天堂スイッチ、ソフト買わなくてもなかなか遊べますね スイッチ購入後の浮かれ記事ですｗ 体験版つきのゲームが結構あって、それを試してみた話でしたが、その後「R-TYPE Dimensions EX」は実はソフト自体安かった事に気づき

どうも！LSSです！！ 昨日公開したゲーム、 一応、コードも晒しておきます。 というだけの記事です^^; コード <style><!-- @media screen and (min-width:640px) { #jw{ display: grid; grid-template-columns: repeat(12,53px); } #jw div{font-size:53px;} #jwe{font-size:53px;height:150px;} } @media screen and (max-width:639px){ #jw{ display: grid; grid-template-columns: repeat(12,25px); } #jw div{font-size:25px;} #jwe{font-size:25px;height:60px;} } #jw{backg

どうも！LSSです！！ ３０年ぐらい前に作ったゲームをリメイクしてみました。↑ ストーリー 遊び方 敵グループ（CPU）の思考 生き残るためのコツ あとがき ストーリー その街には、６つの不良青年たちのグループがあった。 彼らの間には抗争が絶えない。 ある時、そのなかの１つのグループのリーダーが敵弾に倒れた。 「こんな時のため、日本から”Joe”という男を呼んでおいた。そいつが次のリーダーだ。」 そう言い残し、リーダーは息を引き取った。 そしてJoeはやってきた。 そのグループを勝利に導くために…！ 遊び方 各９人で構成される６つのグループがあり、画面上にはそれぞれのグループの残り人数が表示されています。 一番左がプレイヤー"Joe"のチーム、残り５つのグループが敵となります。 矢印「→」は今どのグループのターンかを示しており、自分のターンの時に他５グループのどれを攻撃するかをクリック（ス

どうも！LSSです！！ 先日、Windows11の情報が発表されましたね！ 自分はまだあまり細かく情報収集できてはいませんが、特に重要そうに感じた点が３つあります。 www.microsoft.com www.google.co.jp 無料でWindows10→11にアップデートできる！ デザインの変更 Androidアプリがダウンロード・実行できる！？ あとがき（オチ） 無料でWindows10→11にアップデートできる！ 「えー？またWindows買わなきゃいけないの？」って貧乏性の自分なんかは真っ先に思いましたがｗ 現在Windows10を使っているユーザーは無償アップグレードできるそうですね^^ また、必要スペックもそれほど高くないので、現在Windows10を快適に使えている人のほとんどがそのまま無償で移行できるなじゃないかな？と思います。 自分のPCがWindows11に必要な

どうも！LSSです！！ だいぶ前ですが、 ブラウザ上で遊べる15パズルを作っていました。 この15パズル、実は昔ブラウザゲームサイトをやってた頃にも作ってて、その頃にはこの「1～15の数字」で遊ぶものの他に、用意した画像を16分割してスライドさせて完成する、というのもあったんですね。 （その場合、正解位置が分かりづらくなるので難易度は上がります。） その時は、自分で用意した画像を予め１６分割したものをコマにする…という事をやっていたのですが、 のようにCSSで位置調整する事で、予め画像を切り分けなくても画像をパーツ分けする事はできます^^ また、 でやったように「ユーザーが手元のファイルを選択して使用できる」という事もできそうですし、 のエディット機能で使ったような「画像URLをURLの?以降につけて、それをスクリプトから読み込む」事で、他の人に指定画像で遊べるURLを生成して渡す、なんて

どうも！LSSです！！ だいぶ久々に、このブログのサイドバーにモジュール追加してみました。 （PCで見るとサイドバーですが、スマホから見ている場合、一番下までスクロールするとみる事ができます） ↑こんなのを追加しました。 この「サイコロを振る」をクリックすると… １～６の目がランダムに出てきます。 突然、サイコロが必要になった時にご利用ください。（どんな時だろｗｗｗ） はてなブログのサイドバーモジュールって、スクリプトもイケるんですね サイドバーモジュールの設定手順 問題は…何を作って配置するか？ はてなブログのサイドバーモジュールって、スクリプトもイケるんですね って事に気づき、試しに作ってみたものです^^ ほんとはもうちょっと何かの役に立つものを作りたい^^;;; サイドバーモジュールの設定手順 はてなブログで設定を色々いじった方はご存知の手順ですが、一応最初から画像つきで書きます。

どうも！LSSです！！ 「ぎなた読み」と言われる、言葉遊びがあります。 例えば、「ここではきものをぬぐこと」と書かれていた場合。 「ここでは、着物を脱ぐ事」とも解釈できますし、「ここで、履物を脱ぐ事」とも解釈できますね。 1975年　つボイノリオさんのオリジナルバージョン発売 1993年　HI-MEさんのカバー 2020年　オメでたい頭でなによりさんのカバー 1975年　つボイノリオさんのオリジナルバージョン発売 www.youtube.com 発売から２０日後に、放送禁止指定となった伝説の歌ですｗ 金太の大冒険 - Wikipedia 1993年　HI-MEさんのカバー www.youtube.com わりと最近になって、このカバーバージョンの存在を知りました！ まさかの女性ユニットによるカバー、びっくりですね！！ いやほら、歌の内容的に…ｗ 2020年　オメでたい頭でなによりさんのカバ

クリックで開始します どうも！LSSです！！ ちと変わったタイピングゲームを作ってみました。 タイピングゲーム…なのですが、打つ単語が全て「CSSのプロパティ」ですｗ 遊び方 こういう方に特におすすめ！ あとがき 遊び方 「クリックで開始します」をクリックすると、CSSのプロパティがランダムでひとつ、出てきます。 キーボードでそれをタイプします。 大文字・小文字は区別しません。ハイフンも打つ必要があります。 一単語ごとに「最初の文字を打ってから、最後の文字を打つまでにかかった時間」が計測されます。 エンドレスです。気のすむまで遊べますｗ こういう方に特におすすめ！ 以下のどれかひとつでも該当する方におすすめです。 単にタイピングゲームで遊びたい ブラインドタッチを覚えたい 英単語タイプに慣れたい CSSをこれから学びたいが英語が苦手 あとがき 以前からぼんやり考えてはいましたが、さじさん(

a どうも！LSSです！！ なんとなく、「改行を考慮しない文字数カウンタ」を作ってみました。 ↑の入力欄に文字を入れると都度、その下に文字数が表示されます。 全角文字でも半角文字でもスペースでも、１文字としてカウントされます。 改行はカウントしません。 tn198403s.hatenablog.jp またしても カメさん(id:tn198403s)さんの記事を見て思いついたネタになります。 作ってみて…はてなの文字数カウントはどんな計算なんだろう？って疑問が湧いてきましたｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ やー、かなりびっくりしました。 発売はまだ先ですが…この間、スーパーマリオのゲーム＆ウォッチが出たかと思えば、今度は「ゼルダの伝説」だって！？ ゲーム＆ウォッチ　ゼルダの伝説 ゼルダの伝説の思い出 リンクの冒険の思い出 まだ発売までは間があるけど…ポチっちゃいました！ ゲーム＆ウォッチ　ゼルダの伝説 store-jp.nintendo.com 今なお継続する「ゼルダの伝説」シリーズ、その初代と、２作目「リンクの冒険」、さらにゲームボーイに進出した最初のゼルダ「夢を見る島（これは何故か後継ハードでも何度かリメイクされてますね）」 がゲーム＆ウォッチとして発売される、と発表されましたね！ なんかもう、色々とびっくり！！ ゼルダの伝説の思い出 初代「ゼルダの伝説」といえば、ファミコンディスクシステム用ソフトとして、ディスクシステムと同時発売されたタイトルのひとつ。 つまり