chevron_left

メインカテゴリーを選択しなおす

cancel
LittleStrangeSoftware https://little-strange.hatenablog.com/

かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです!

当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。

LSS
フォロー
住所
未設定
出身
未設定
ブログ村参加

2019/10/18

arrow_drop_down
  • ゲーム未満のなにか

    どうも!LSSです!! 2021年最後の記事となりました。 昨年末は、 little-strange.hatenablog.com 1年を振り返った記事を書いていましたが、今年は…まぁいいかな、とw 一応、年に2回特別な記事を投稿するのが正月とクリスマスだったりしますが、そちらは little-strange.hatenablog.com little-strange.hatenablog.com ↑こんな感じでした。 ところで…2,3日前から、妹が姪(1歳4か月)を連れて帰ってきています^^ …帰ってきているのはいいのですが…人見知りがめっちゃ激しく、数か月ぶりに会った自分など覚えているはず…

  • 【JavaScript】スクロールメーター 自動スクロール機能つき

    どうも!LSSです!! 2021年もまもなく終わる頃、またちょっと変わったものを作ってみました。 画面左下に表示されています コード 一部解説 あとがき 画面左下に表示されています #scrlm{ position:fixed; bottom:50px; left:10px; border-radius:50%; width:50px; height:50px; } /*スクロールメーター*/ document.addEventListener('scroll',()=>{ grph=Math.floor(360*window.pageYOffset/(document.body.scroll…

  • 【JavaScript】画面スクロールにあわせてCSS指定内容の変化

    どうも!LSSです!! よく見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせてCSS指定が変化します。 document.addEventListener('scroll',fscr,false); function fscr(){ a=100-(Math.min(Math.max(gamen.getBoundingClientRect().top,200),600)-200)/4; gamen.style.b…

  • 【日記】年末年始休暇 初日

    どうも!LSSです!! 本日、12/28から休暇に入りました! とりあえずダラダラと過ごしましたw お昼には近所の たこ焼き屋さんへ。 うちのおかんぐらいの年代の女性が長年一人でされている店で、6時には店じまいするので休日でないと行けないようなところです。 と、行ってみると年内営業が今日まで!ギリギリでしたねw だしどんぶり(たこ焼き10個入り 300円)を店内でいただき、20個持ち帰り(500円) なかなか良心的な価格だと思います^^ で、帰宅後、例のプロジェクターでスイッチのYouTubeを起動し、「AKIRA」を観ました。 古いアニメの名作で、名前はあちこちで聞きますが…実は見たの初めて…

  • 情報処理技術者試験

    どうも!LSSです!! 先日、職場にて突然「全員、持ってる資格を報告してね」てな事がありました。 結構長く勤めていて初めての事でとまどいつつ^^;、とりあえず書類を見てみました。 情報処理技術者試験 さて、「持ってます」と言っていいものやら? そうそう、情報処理技術者試験と言えば 情報処理技術者試験 資格ならなんでも、ではなくて、いくつかの資格名が並んでいて、そのほとんどが今の会社の業種にちなんだ専門的なもの(=自分に縁のないもの)だったのですが、その中に、 「基本情報技術者試験」 「応用情報技術者試験」 というのがありました。 これが非常に引っかかる…というのも、自分はかつて(かれこれ30年…

  • 今週のお題「買ってよかった2021」

    今週のお題「買ってよかった2021」 どうも!LSSです!! 今年もやってきましたね、このお題! 毎年されてるんでしょうか。 ちなみに昨年は little-strange.hatenablog.com という記事を書いていました。 さて今年は…? Nintendo Switch プロジェクター モバイルバッテリ Nintendo Switch まったく、遅ればせながら、ですが little-strange.hatenablog.com スイッチを購入したのも2021年の事でした。 今は電器屋さんで普通に新品がまっとうな値段で購入できますが、この頃はまだ品薄で…転売ぼったくりを買う気にならず、さ…

  • 【WebAudioAPI】半自動演奏「きよしこの夜」

    「音階だけ事前に用意されていて、リズムはクリックする人任せ」な「半自動演奏」です。 「きよしこの夜」を忠実に再現するもよし、スローテンポに演奏するもよし、全く異なるリズムで演奏する事もできちゃいますねw

  • 【Merry】ブロックで作ったクリスマスツリー【Christmas】

    どうも!LSSです!! ちょうど一年前の記事、【Merry】聖なる夜に【Christmas】と同様、この記事限定の背景仕様でお送りします。 年に一度の特別な日。 今年はどんなネタで行こうかな、と考えていました。 クリスマスツリー(ブロック製) 以前の記事の追加改変です そんなクリスマスイブ クリスマスツリー(ブロック製) @keyframes santa{ 0%{background-position:200% 100px,0px 0px;} 100%{background-position:0% 300px,0px 0px;} } body{ background-image:linear-…

  • 初期の「暴れん坊将軍」がYouTubeで!

    どうも!LSSです!! 昨日初めて知ったのですが…あの長く続いた名作TV時代劇シリーズ「暴れん坊将軍」。 の、一番最初のシリーズ、の第一話・第二話がなんと! YouTubeに公式さんの手で公開されています^^ 暴れん坊将軍 んでもLSSは実は… 東映時代劇YouTubeさん 暴れん坊将軍 www.youtube.com 公開日は2021/11/26。 …一ケ月近く気づかなかったとは^^;;; 46分という通常のTV番組1回分の時間の中に、「まだ紀州藩にいた吉宗が将軍になる事を拒む→じいに説得されて決意する→(まだ町火消し制度が生まれる前の)辰五郎と再会→事件発生→調査→殺陣→後日、悪奉行を呼び…

  • 【短文】CSSトリック

    どうも!LSSです!! 今年も残すところあとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますw @keyframes linemovea{ 0%{background-position:0% 0%,100% 0%,100% 0%;} 100%{background-position:0% 0%,100% 0%,0% 0%;} } .linemove{ width:300px; height:186px; background-image: linear-gradient(-20deg,#000000ff 48%,#00000000 49% 51%,#00000…

  • てんびんばかり

    どうも!LSSです!! 幼い頃に耳に入ったなんだか意味深な歌が、ずーっと、あるいは大人になってから、ずっと意識に残る事ってありません? 例えば、アンパンマン主題歌。「愛と勇気だけが友達さ」に対して「しょくぱんまんやかれーぱんまんの立場は?」とツッコミを入れつつも、「何のために生まれて、何をして生きるのか」と重い問いかけに始まっていたりとか。 自分の場合…父親が河島英五氏のファンで、ドライブの時にはカーステレオ(当時はカセットテープでした)で延々と流していたりしましたが、そのテープに入っていた曲で特に意識に引っかかるものがあります。 てんびんばかり 子どもの頃には特に印象的だったのが 大人になっ…

  • 【CSS小ネタ】Fire Card

    どうも!LSSです!! すっかり寒くなりましたね。 こたつやヒーター、エアコンなどの暖房器具が恋しくなる今日この頃。 …それはそれとして、最近「炎っぽいものを描こうと思ったら、色遣いはどうするのが良いか」みたいな事を考えていて、それをCSSで試してみる事にしました。 これを見た方が炎をイメージしてくれて、気持ち温まっていただければ^^…と、こじつけておきますw FireCard コード 「炎」に関わるのは一部分のみ まぁ、炎というよりは… FireCard .fire{ width:300px; height:184px; padding:10px; font-size:120%; font-…

  • 【CSS/作りかけ】3D迷路表示に挑戦中

    どうも!LSSです!! CSSの立体表現を使って、3D迷路表示に挑戦してみました。 まだ改善点は多いですが^^; 3D迷路(作りかけ) コード やってる事 問題点 今後 3D迷路(作りかけ) .waku{ position:relative; background-color:#000000; width:300px;height:300px; transform-style:preserve-3d; perspective:500px; perspective-origin:50% 47%; overflow:hidden; } .waku div{ position:absolute; w…

  • 【CSS】キラキラ背景【小ネタ】

    どうも!LSSです!! 今回はまたCSS小ネタです。 キラキラ背景 コード うち、背景デザインに関わる記述は2行 その他の指定について キラキラシールのようなものを目指したのですが… キラキラ背景 .kirakira{ width:300px; height:300px; background-image:repeating-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg); background-size:40px 40px; padding:0.6em; font-size:120%; font-weight:bold; }…

  • 【駄文】英単語で日本語の文を作る遊び

    どうも!LSSです!! かなり昔に人から教わった遊びで、今もなおちょくちょく試みたりする事があります。 Dome own.Ale ace ace death. 英単語 と、こんな風に Dome own.Ale ace ace death. Google 翻訳 ↑のリンクを開くと、Google翻訳のページが開きます。 左の入力欄に「Dome own.」「Ale ace ace death.」という文章が入った状態で開くので、 このスピーカーのアイコンをクリックしてみてください(音が出ます) 入力した英文を読み上げてくれます。 …と、この文は「英文」としては文法もへったくれもない、単語の羅列ですけ…

  • 【グッズ】最近みつけたプロジェクター

    どうも!LSSです!! 先日の事ですが、お手頃な価格のプロジェクターをAmazonで見かけて、ポチっちゃいました! プロジェクター 映してみた感じ 照明OFF わずかな難点2つ お値段的にハズレでも仕方ないかぐらいに思ってましたが プロジェクター プロジェクター 小型 Crosstour 1080P対応 コントラスト比2000:1 台形補正 内蔵スピーカー ホームプロジェクター HDMI/USB/VGA/TF/AV/パソコン/タブレット/PS3/PS4ゲーム機/DVDプレイヤー接続可 HDMIケーブル/AVケーブル/リモコン付属 日本語取説3年保証 P600 V jp Amazon 購入したの…

  • 【CSS/JavaScript】多角形フォトギャラリー改訂版

    どうも!LSSです!! ちと難のあるまま公開に至った little-strange.hatenablog.com ですが、早くも改訂版を作っちゃいました。 多角形フォトギャラリー改訂版 コード 使い方 改訂内容 めっちゃ画像を増やしてみると…? 多角形フォトギャラリー改訂版 #ph3d{ position:relative; transform-style:preserve-3d; height:150px; left:75px; transition:1.5s; transform:rotateX(-10deg) rotateY(-10deg); } #ph3d img{ position:…

  • 【CSS/JavaScript】多角形フォトギャラリー

    どうも!LSSです!! 以前、公開した little-strange.hatenablog.com というフォトギャラリーの仕組みがあります。 「六角」の名の通り、見せたい画像が6枚ある場合にちょっと面白い見せ方ができる、というものでしたが、より多い・少ない場合には使えないという最大の欠点が! 今回はその欠点を解消し、より多い枚数でも少ない枚数でも使えるようにしたものを「多角形フォトギャラリー」として公開します^^ 多角形フォトギャラリー コード 使い方 難点 多角形フォトギャラリー #ph3d{ position:relative; transform-style:preserve-3d; …

  • 【CSS】雪というより…ほこり?w【実験】

    どうも!LSSです!! ※画面がアレですが、お使いの端末は(多分)正常ですw 12月もそろそろ中盤。 クリスマスや大晦日が近づいていると同時に、大掃除のシーズンでもありますね。 去年のこの時期、このブログではクリスマスに向けて、 little-strange.hatenablog.com という準備を経て、 little-strange.hatenablog.com で盛大に雪を降らせたりしたものでした。 今年もクリスマスにはなにか凝った装飾をやってみたいものですが…ちょっと準備的に、思いついた事をこの記事上で試してみます。 画面上に浮遊しています コード 仕組み 降ってはいないので、雪とは言…

  • 【駄文】立体CSSで、ふと思った事

    どうも!LSSです!! little-strange.hatenablog.com で、なんとなくそれっぽい事ができちゃった今、ここからどう活用していくか?ぼんやりと考えてみていました。 立体迷路 アクション 立体迷路 【JavaScript】続・自動生成迷路 - Little Strange Software で作ったような自動生成迷路を立体描画するのもいいかもですね^^ 立体描画でも、迷路自体は平面迷路ですがw それだったら、 little-strange.hatenablog.com こっちのほうがいいのかも?とも。 アクション 【CSS】ブロック遊び【実験】 - Little Stra…

  • 【CSS】ブロック遊び【実験】

    CSSでマインクラフトが作れる、というわけではありませんが、ごくごく小規模な、それっぽいブロックを並べる事ぐらいならできるかな?と試みてみました。

  • たまに「こよみモード」をみてみる

    どうも!LSSです!! はてなブログには「こよみモード」というものがあります。 はてなブログでブログを書いてる人なら、PCの場合まず「ダッシュボード」を開いて… ①「購読リスト」と「記事を書く」の間にある、自分のブログ名をクリック ②その右にまた自分のブログ名が出てくるのでそれをクリック ③右に「ブログの概要」画面が出てくるので「こよみモード」をクリック すると、月カレンダーに今月書いた記事が並びます。 そしてその右に「12月のあゆみ」「過去の同じ月に投稿した記事を振り返りましょう。」というメッセージと共に、去年の同月同日、一昨年の同月同日の記事タイトルが出てきます(書いていた場合)。 …普段…

  • 【CSS】3D直方体を改変した水槽…の作りかけ【途中経過】

    どうも!LSSです!! little-strange.hatenablog.com で作った直方体を元に、あれやこれや手を加えて水槽らしきものを作ろうとしてみました(途中) 「水槽」というのは、 noriko(id:non704) 質問へのお返事ありがとうございました。水族館風・水中花風・・・やってみましたが、今一つ。(^^;)ゆっくり又考えてみます。 いただいたコメントから拝借したアイデアなんですけどねw また、今回の記事ネタは、同じくいただいたコメント、 のんべえ(id:whisky-coke) 大きさも色々変えられて良いですね。でも、使いどころが難しいwちなみに作成後にフロントとバックの…

  • 【まいくらにっき】バージョン1.18きた!

    どうも!LSSです!! すでに数日経過していますが、マインクラフトに待望のアップデート「1.18」がきましたね! 「洞窟と崖」のアップデートと言われる通り、洞窟生成に大きな変更が加えられ、新たなバイオームが追加されていますが、最大の変更店は「高さの概念が従来の0~255→-64~320に増加」された事だと思います! かなり前に作ったワールド 高さの限界が変更された事による恩恵 大・空・洞! かなり前に作ったワールド を、いまだに引きずってプレイしています。 ワールド生成から今日まで、幾多のアップデートを繰り返していて、多くの場合「アップデートで変更されたデフォルトの地形等の要素は既に読み込み済…

  • Google日本語入力、公式サイトにこんなページが…

    どうも!LSSです!! ふと、Google 日本語入力のサイトの下のほうにこんなものを見つけました。 「モールス信号で日本語入力」 「反射光式ディスプレイを採用したフラップパネルで日本語入力」 「スマホ・タブレットのフリック入力をタッチパネルに触れずに行えるマジックハンド」 「手を使わない、口にくわえたピロピロ笛で日本語入力」 「スプーン曲げで日本語入力」 などなど、画期的な日本語入力デバイスが紹介されています! と、まぁ冗談のような話ですが…実際これ、Googleさんの過去のエイプリルフールネタですねw それぞれ手の込んだ紹介動画まで作られていて、見ていて楽しいです^^ ってなとこで、今回は…

  • 【お題】最近あったちょっといいこと

    今週のお題「最近あったちょっといいこと」 どうも!LSSです!! 「最近あったちょっといいこと」と言えば…あれですね。 最近あったちょっといいこと もっといいこと 最近あったちょっといいこと 「ちょっと嬉しい」小銭入れのなかに、やけにピカピカな500円玉があるな?と思ったら「令和3年」との刻印が!— LSS (@LSS0324) 2021年11月25日 はい。先にツイートしていましたが、新しくて綺麗な500円玉をゲットしていました! それ自体も「ちょっといいこと」ですが、そんな些細な事で喜べるのもまた「いいこと」ですねw もっといいこと hukunekox.hatenadiary.jp こちら…

  • 【CSSサンプル】サンタさんへの手紙【小ネタ】

    「クリスマスカラーを使った、CSSサンプルネタをやってみたい」と思い、やってみたらこうなりました。

  • 【ツール】3D直方体コード生成ツール

    CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました

  • 【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話

    どうも!LSSです!! 以前、 little-strange.hatenablog.com で、CSSで立体的な立方体を描いてみました。 その際に、 …ただし、位置決めなどの指定がとても複雑で、例えば今回は立方体でしたが、これを直方体にしようと思っただけでも話がややこしくなりそうです^^; 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software と書いていましたが、実際に直方体を描こうとしたら結構迷ってしまいました^^; が、なんとか描けました^^ 幅200px高さ100px厚さ20pxの直方体 コード 各面の描画の起点は左上、回転の中心…

  • 魚べい 神戸中央区役所東店

    どうも!LSSです!! 最近、魚べいにハマりつつあります。 三宮の魚べいなうこの時間でも待ちなしで入れる、回転(しない)寿司ありがたい!— LSS (@LSS0324) 2021年12月2日 www.genkisushi.co.jp 今日は珍しく仕事帰りに行ってみました。 そもそも、三宮に回転寿司はあまり進出してきておらず、あっても何故か皿単価が少しお高め(位置的にやむを得ないんだろうなぁ)だったり。 そんな中で、三宮の東側に魚べいが出現!(回転しないけど) 何度か行ってみましたが、皿単価も普通に100円皿メインで楽しめます^^(回転しないけど) なんといっても、回転寿司といえば昼食時や夕食時…

  • 【JavaScript】スタミナシステムを作ってみました

    どうも!LSSです!! スマホゲームによくある「スタミナ」というシステム。(名称はゲームによって違ったりしますが) ゲームを起動していても、していなくても、時間経過で徐々に数値が貯まっていって、それを消費してゲームを回せるアレ。 作れる自信だけありましたが、今回それを試しに作ってみました。 スタミナシステム コード コード解説 あとがき スタミナシステム stmnmax=5000; gsbtn.addEventListener('click',gstart,false); function gstart(){ if(isNaN(localStorage.stmnchk)){ localStor…

arrow_drop_down

ブログリーダー」を活用して、LSSさんをフォローしませんか?

ハンドル名
LSSさん
ブログタイトル
LittleStrangeSoftware
フォロー
LittleStrangeSoftware

にほんブログ村 カテゴリー一覧

商用