chevron_left

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

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

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

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

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

2019/10/18

arrow_drop_down
  • 【日記】古本屋にて

    どうも!LSSです!! 「そういえば、しばらく回転寿司に行ってないな」 と思ったのは、昨日このツイートを見たからでした。 これじゃなきゃいけない。これのほうがいい。よりも、これがいい。でネタは選びたい。まあさっき食べた回転寿司の話なんですけど、ブログも同じかもしれない。— さじ (@conasaji) 2020年10月30日 どのぐらい行ってないか、って で、帰りに古本屋さんに立ち寄りました(本題) おや?店員の様子が… ついにおっちゃんが声をあげた とりあえず何か買って出るか 帰宅後、マッドメン一気読み! どのぐらい行ってないか、って 思い返してみると、コロナの流行によって あちこちで密対策…

  • 【CSS】カタカタ自己主張する見出し(なのに照れ屋さん)

    どうも!LSSです!! サンプル コード コード解説 アニメーションの内容となる部分 ボックスを装飾している部分 見出し部分 マウスカーソルが乗った時の変化 ボックス内の文章 アレンジしやすいポイントをまとめると サンプル こんな風に、ボックス要素につけた見出しがカタカタ揺れる事で自己主張します! …が、自己主張しているわりにボックスにマウスカーソルが乗ると、赤面したようにピンク色のマーカーが入りますw コード <style><!--@keyframes katakata{0%{transform:rotate(-10deg);}80%{transform:rotate(-10deg);}85…

  • どうも一向に続報がないと思ったら…スイッチ版ファミコン探偵倶楽部発売延期だそうな

    どうも!LSSです!! 記事タイトルのまんまなんですが、 以前書いた記事 どうせまだ、スイッチ持ってないしー 以前書いた記事 // '); else document.writeln(''); // ]]> little-strange.hatenablog.com の中で、「ファミコン探偵倶楽部、大幅にリメイクされてスイッチで復活」って話を書きました。 その後もたまにググったりしていたんですが… 一向に続報がないと思ったら…w https://t.co/pRB7122tbg— LSS (@LSS0324) 2020年10月29日 延期決定なんですね^^;;; どうせまだ、スイッチ持ってないし…

  • 【漫画】ねじ式

    どうも!LSSです!! 今回はふるーーーい漫画、伝説といってもいいぐらいの、あっちこっちに影響を与えた作品について書いてみます! ねじ式 色んな作品でパロディがありますが 実写映画化もされました! 日本漫画史を語る上で欠かせない、ひとつの頂点 ねじ式 ねじ式 (1) (小学館文庫) 作者:つげ 義春 発売日: 1994/12/14 メディア: 文庫 つげ義春氏の1968年に発表された作品です。 ねじ式 - Wikipedia 短編ですが、極めてシュールに話が展開します。 シュールな割に、話の筋は通っている、といったほうがいいのか…。 恐れ多くも簡単に言うと、 「海岸でクラゲに左腕の静脈を切断さ…

  • 【CSS】回遊【小ネタ】

    どうも!LSSです!! さぁて…書くネタがないなぁ、と下書きを見てみるとこんなものが! ↑ 一応、コードも載せておきますねw <style><!--@keyframes kaiten{0%{transform:rotate(90deg);}100%{transform:rotate(-90deg);}}.mv{position:absolute;text-align:right;font-size:100px;color:black;text-shadow:0px 0px 1px yellow;top:500px;left:0px;width:60%;transform-origin:0px …

  • 【CSS】CSS関連記事まとめ

    どうも!LSSです!! このブログのカテゴリを見ていると…「HTMLなど カテゴリーの記事一覧」の記事数ばかりがダントツで多くなってますねwww 「HTMLなど」というざっくりとしたカテゴリを設けたのは、本来Androidアプリ開発をメインとしたブログとなる予定だったからなのですが(一応、検索流入的にはまだそちらが勝っていたり)、HTMLの話、CSSの話、JavaScriptの話、をごっちゃにしたカテゴリとして、でした。 ブロガー仲間の方にとって有益なのは、とりわけ「CSS」に関するものかな、と思います。 で、ここで一旦、ちょっとまとめてみます。 CSSの基本的な部分について 記事検索「CSS…

  • ドローンを持って山に登る!

    どうも!LSSです!! 今日は、布引の滝と展望台に行ってきました。 ↓この時以来ですねw little-strange.hatenablog.com 去年と違うのは 今回もここから始まります! 登山中の写真 布引の滝・雄滝 も少し登ると展望台! 初めての山ドローン空撮! 周りの声 家を出てから帰宅まで1時間半ほど 去年と違うのは 今年はドローン持参です! https://amzn.to/2IkKCxX あわよくば、展望台や滝の様子を空撮したい!という欲のためのお出かけですw 今回もここから始まります! ちょっと分かり辛い角度ですが、正面にあるのが新神戸駅です。 吉野家で腹ごしらえして、店を出た…

  • 【CSS】gridレイアウトの列数をJavaScriptから制御

    どうも!LSSです!! JavaScriptからCSSのプロパティを色々制御する事ができますが、gridレイアウトの設定についての制御(列数とか)が調べてもなかなか情報に行き当たりませんでした^^; とりあえず成功したので、ここに書いておきます! gridレイアウトのおさらい 列数をJavaScriptから制御するには? 意外とこの情報が見つかりませんでした^^; JavaScriptで指定できると何が嬉しいのか? gridレイアウトのおさらい 1 2 3 4 5 コード <div style="display: grid; grid-template-columns: repeat(3,50…

  • もうすぐ日付が変わる、って時に書くブログw

    どうも!LSSです!! 今、23:42です。 一応、毎日投稿を継続している(ズルした事はありますがw)のですが、さくっと書けるネタがなく…^^; 温めてるけどまだ書けないネタは、こんな感じ マインスイーパーの話と制作 ドローンで紅葉を空撮したい Dr."ピー"ニスの絵 昔、作曲したもの公開 昔、描いた漫画の公開(発掘できるかも不明w) その他もろもろ まぁ、あれですね。 記事ストックなしに連日更新はやはり難しいか^^;と、改めて思いましたw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 海外SF「輪廻の蛇」ロバート・A・ハインライン

    どうも!LSSです!! 男性が「おれがまだ娘だった頃…」と語りだす、もうそれだけで「???」となってしまうネタ。 いくつかの漫画で見かけましたが、今回はその元ネタの紹介記事です。 輪廻の蛇 あらすじ タイムパラドックスの傑作! 話の構成が凄い、そのわりに… 輪廻の蛇 輪廻の蛇 (ハヤカワ文庫SF) 作者:ロバート・A. ハインライン 発売日: 2015/01/23 メディア: 文庫 普段、あまり海外SFを読む習慣はないのですが、愛読している漫画家さんの日記漫画に出ていたので、読んでみました。 あらすじ とあるバーのバーテンダー視点で描かれた話です。 ある日、そこに来た男性客が「俺ほど変わった出…

  • 【駄文】ふと、むしょうにあるキャラの絵を描きたくなり…【画像はありません】

    どうも!LSSです!! …ふと、むしょうにとあるキャラの絵を描きたくなりました。 そのキャラとは… Dr."ピー"ニス!! 「誰それ?」って?w 自作小説:4時のニュース 自作小説:ハラキリ侍がゆく 自作小説:Dr.”ピー”ニスの悩み相談室 自作小説:6年”ピー”組 吉賀先生「第一回 ~吉賀先生、参上!!~」 自作小説:6年”ピー”組 吉賀先生「第二回 ~歪んだ関係~」 という、自作小説のうちでもかなり狂気をはらんだ連作に登場するキャラクターの一人です。 この連作に登場する登場人物たち、ほとんど外見についての表現がありませんが、"ピー"ニスだけは、 ちょっと変わった男で、言葉使いに妙ななまりが…

  • 【HTML5】画像ファイルへのリンクを「表示」じゃなく「ダウンロード」する方法【でも、はてなブログでは無理っぽい】

    どうも!LSSです!! このブログでも、これまで、HTML・CSS・JavaScriptについて色々記事を書いてきました。 が、LSSがそれらを学んだのは20年以上前の、まだHTML4.0の時代で、ブログを始めてからちょこちょこと学び直してはアウトプットしてる、といった感じなんですね。 まぁたいして違いはないだろう、と(CSSはめっちゃ進歩してるようですが)思いつつ、かつてのHTML4.0時代の認識を持っていると、どうも今の「HTML5」には4.0時代の常識を覆すような仕様が実現されていたりするみたいです!! 今日の記事は、その一例となります。 まるいの 画像ファイルへの通常のリンク 今までの…

  • ふと、皆さんに聞いてみたくなった事

    どうも!LSSです!! まったく唐突なんですが、ちょっと聞いてみたい事が出てきました。 「人に見せる・見せない」は別として、皆さんこれまでの人生の中で「漫画」または「小説」を書いた事はありますか? この場合、レベルの高低は問いません。 漫画なら落書きレベルでも。 小説なら数行程度の作り話でも。 LSSの場合は、 漫画 小学生の頃に、疑似部活動のような感じで「漫画クラブ」に所属し、ことわざをメインのネタにした4コマ程度の漫画。 高校生の頃に、ノートの端に落書きレベルの多数の作品を描いてました。 小説 小学生の頃に、国語の授業で「小説を書こう」というのがあり、設定だけ考えましたが文章はさっぱり書か…

  • 屋外ドローンデビュー、してきました^^

    どうも!LSSです!! 昨日の記事にも書きましたが、近所の公園とかは人口密集地域になるので、ドローンの練習ができません^^; うちから近いところでいうと、新神戸駅から山に入ると解禁エリアで、ちょっと登ると練習できそうなポイント(展望台)や、撮影しがいのありそうな滝もあります。 んじゃ、そこ行こうかな、って考えてましたが…。 もうひとつ選択肢を見つけました! おや?電車料金が… 谷上駅、駅前風景 ドローンを組み立てます 飛ばしてみました! お昼は「北海道産帆立のバター醤油焼き丼」 腹ごしらえ完了!したところで、もちっと練習 帰宅後、動画のサイズを落としてTwitterに投稿! 色々まとめ 録画に…

  • ドローンお試し中!

    どうも!LSSです!! 昨日に続き、 ドローンに関する設定・練習とかの話です。 https://amzn.to/2IkKCxX 飛行可能場所の確認 撮影について WiFi接続について前から思っていた疑問 というわけで今回はじめて 翌日、ネットでWiFiカメラ接続についてググってみました 同じく最近ポチったタブレット登場! アプリ操作については手探り その他、感じた事 飛行可能場所の確認 ざっとググってみました。 簡単にまとめると、 昼間である事 目視可能な範囲 高さ150m以下 私有地でない事 人口密集地域でない事 を守っていたらOKみたいです。 最後の「人口密集地域」がどう定義されているかと…

  • ドローン、到着!(まだ写真はありません)

    どうも!LSSです!! 先日、Amazonプライムデーに「もともと割と安めなドローンを32%オフで購入」した話を書きました。 購入したのは、 https://amzn.to/2IkKCxX ↑こちらの商品! これが昨日(10/15)に届きました^^ そんで、帰宅後に充電して、とりあえず(家の中で)ちょっと動かしてみました! パッケージの中には 初日、とりあえずは… コントローラについて ドローンのセンサーが正常判定していた場合の話 話を戻して、起動の話 パッケージの中には 一番大きいのがコントローラ。羽根が畳まれた本体。バッテリ。意外と分厚いマニュアル(ただし、複数言語に対応しているからで日本…

  • 【CSS】マウスカーソルで枠線の太さが変わる演出!【outlineの有効活用!?】

    どうも!LSSです!! 昨日の記事、 で、 border と outline の違いを試してみました。 記事にしておきながら、書いてる自分も試しながら書いていたので、ことさら「読んでもよく分からない」内容だったかと思います^^; 一応、自分では理解したつもりで、outlineの有効活用方法を思いついたので、今回はそんな記事です! せっかくなので「コピペで使えるCSSサンプル」記事として挙げてみます^^ マウスカーソルを乗せると枠が太くなります サンプル コード コード解説 ここから、またborderとoutlineの違いの話 あとがき マウスカーソルを乗せると枠が太くなります サンプル ↓のど…

  • 【CSS】borderによく似た、outlineというCSSプロパティを試してみます【実験】

    どうも!LSSです!! 以前からちょっと気になっていたCSSプロパティ「outline」を試してみます。 これまでもよく使ってきた「border」とよく似ていますが、ちょっと違う?らしく、本の説明を見てもイマイチよく分からないものでw そういう時は、試してみるに限りますね^^ ちなみに手元の本には、「borderは線の太さの分、要素が大きくなり、レイアウトに影響」「outlineは線を引いても要素の大きさは変わらず、レイアウトも変わらない」てな事が書かれています。 まずはテスト用のボックスを用意します borderを装飾用にしてみます borderをoutlineに変えてみます borderと…

  • Amazonプライムデー!にポチっちゃったモノ

    どうも!LSSです!! 今日、10/13から明日10/14にかけて「Amazonプライムデー」!! …というお祭りをやってるみたいですね。 TwitterではAmazonのプロモーションに加え、Amazonアソシエイトしてる方が色々ツイートされていて、お祭り感でてます^^ Amazonプライムデーって? 本日の本題は買ったほうの話 唐突に昔を思い出す 勢いポチ、だったので Amazonプライムデーって? ひらたくいうと、Amazonプライム会員限定で、様々な商品が大きく割引されて購入できる2日間です。 自分もちょっと↓ツイートしてみました。 https://t.co/T0zcyHPnppPri…

  • 妄想マネタイズ

    どうも!LSSです!! ブログを始めてから一年が経過し、もうすぐ「記念日」からも一年を迎えようとする今日この頃。 びっくりするほど、じゃなくても、マネタイズに成功されている同期の方も見られますが、失望してブログ運営を辞めていく方も多く見られます。 ブログでのマネタイズは、じっくりと種まきが必要で、短期で成功する方もおられますが「焦らない」事が重要だなぁ、と思ったり。 自分の場合、まだどうも気持ちの中にマネタイズへの抵抗があるようです^^; だもんで、時折、例え当初の考えとは別の形ででも「完全放置の金の生る木」の事を考えたりもするのですw 別途サーバを借りて、ブラウザゲームサイトでもやるかw あ…

  • 【Amazon】以前、購入した商品のその後【タブレット・スマートウォッチ・DVD】

    どうも!LSSです!! 以前、ブログに「購入した直後」または「ポチった」商品について書き、そのままになっていましたが、今回はそれらのその後について記事にしてみます。 激安Androidタブレット スマートウォッチ 価格 通知 防水性能 秒表示 電池の持ち DVD「WITHOUT A CLUE」 あとがき 激安Androidタブレット little-strange.hatenablog.com ↑の記事にて「買いました」報告をしていたAndroidタブレット。 Pritomタブレット 10.1インチ Android 9.0 ROM 32GBメモリクアッドコアプロセッサWiFi デュアルカメラ日本…

  • 【CSS】たたっ斬る!の色を変えてみる

    どうも!LSSです!! 昨日の記事は、左右に配置した黒が分れていく、というものでしたが、ちょっと色を変えて試してみます。 フランス国旗風サンプル フランス国旗風 グラデなし 失敗例 あとがき フランス国旗風サンプル フランス国旗風 コード <style><!--.fr1{border:5px inset gray;background-color:white;background-repeat:no-repeat;background-image:linear-gradient(150deg,blue 50%,transparent 60%),linear-gradient(150deg,tr…

  • 【CSS】たたっ斬る!!【小ネタ】

    どうも!LSSです!! さて、昨日に続き、今日もCSS小ネタ。 またtransitionを使った小ネタを思いついたので、やってみます! 一言でいうと「ズバァッッッ!!」って感じですw たたっ斬る!!サンプル コード コード解説 全体的な構造 たたっ斬りを表現するための画像イメージ 複数のlinear-gradientを重ねて表示 background-positionで、それぞれ位置指定 transitionを書くだけで勝手にアニメ化! ちょっとグラデ内容に変化をつけてみました あとがき たたっ斬る!!サンプル ↓の黒いバーに、マウスカーソル(スマホの人は指)を乗せてみてください^^ 斬られ役…

  • 【CSS】transitionで光が斜めに横切るバーを作ってみました【小ネタ】

    どうも!LSSです!! ちょっと久々に、CSSネタいってみます! サンプル コード ざっくりコード解説 光のデザイン カーソルを乗せると光が移動する仕組み あとがき サンプル ↓こんなのを作ってみました。 こういうバーで、マウスカーソルをのせると 黄緑色のバーにマウスカーソルを(スマホの人は指を)乗せてみてください。 コード <style><!--.hoveranm{border-radius:15px;border:10px outset greenyellow;padding:5px;background-color:yellowgreen;font-weight:bold;color:w…

  • なぜかDVD化されていない名(迷?)作映画

    どうも!LSSです!! ある一本の映画。それを知ったのはかなり前ですが、まだVHSデッキ(ビデオですね)を使っていた頃にVHSソフトを購入したほど好きでしたが、「どういうわけか未だにDVD化されていない」お気に入りの名作映画があります。 迷探偵シャーロックホームズ最後の冒険 イギリスのコメディ映画です モリアーティも出てきますよ^^ 全編コメディですが こっそりと… ホームズ贋作のなかで一番好きかも! 迷探偵シャーロックホームズ最後の冒険 ↓のように、VHSは販売されていますが、何故かDVDは発売されていません。 迷探偵シャーロック・ホームズ [VHS] 発売日: 1990/10/26 メディ…

  • 【JavaScript】同じ記事なのに内容が変わる、種あかし

    どうも!LSSです!! 先日、ここで公開したブラウザゲーム、 最大のポイントは「同じ記事なのにコメント欄のリンクから入ると違う迷路になる」というところでした。 普通ならサーバ側でのプログラムで内容を書き換えるところを、そういった事ができない、はてなブログの記事でやってるところがミソですねw 今回はその種明かしの話になります! URLについて URLの中に半角の「?」が含まれていた場合 JavaScriptのlocation.search 文字列は結構長くてもOKですが、 これをブラウザゲームに使うのは URLについて あのゲームの記事のURLは、 https://little-strange.…

  • 【まいくらにっき 番外編】スマブラにマインクラフトが参戦!?

    どうも!LSSです!! 相変わらず、マインクラフト統合版で遊んでいます^^ YouTubeにも数多くのプレイ実況動画があげられていて、アップデートによるシステム変更で出来るようになった事や出来なくなってしまった事などの情報を得ていますが、そんな中、マイクラ以外のところで驚きの発表がありました! 大乱闘スマッシュブラザーズ それで今回なんと!「スマブラにマイクラが参戦!?」 すでに結構詳しい公式情報動画が! 未だスイッチは入手困難で 大乱闘スマッシュブラザーズ マリオやリンク、カービィなどの任天堂が所有するキャラによる格闘ゲーム、「大乱闘スマッシュブラザーズ」 これも結構、息が長くシリーズが続い…

  • 10進数と2進数と16進数の話 and more…

    どうも!LSSです!! 今日は、数の話をします。 まずは10進数の話から 0(ゼロ)も仲間に入れてあげて! 1桁の数字は10種類ある! 10進数とは もしも、10じゃなかったら…? 2進数。0と1以外の数字使用禁止ルール 2進数って必要? 16進数、なんていうのもあります なんとか進数、の「なんとか」の部分が大きいほど… というような記事を まずは10進数の話から 小学校にあがる前か、その後ぐらいに、「すうじ」について皆さん覚えられたかと思います。 今日の話はまず、そのおさらいから始まります。 1(いち)、2(に)、3(さん)、4(よん)、5(ご)、6(ろく)、7(なな)、8(はち)、9(きゅ…

  • パラレル迷路【完成版】

    どうも!LSSです!! 以前、プレビュー版を公開していました「パラレル迷路」、完成しました! パラレル迷路【完成版】 遊び方 エディットモード エディットのコツ パラレル迷路【完成版】 // '; } gamen.innerHTML=txt; for(i=0;i最初から' + 'エディットモード'; document.getElementById('bts').addEventListener('click',cbts,false); document.getElementById('bte').addEventListener('click',cbte,false); //データ設定 zc=…

  • パラレル迷路(プレビュー版)

    どうも!LSSです!! JavaScriptで奇妙な迷路ゲームを作りました。 ちょっと奇妙すぎて訳わかる?わからん?も自分では判断できないwので、まだゴールエフェクトも用意していませんが、ちょっと遊んでみて欲しくて仮公開しちゃいますw パラレル迷路(プレビュー版) 遊び方 パラレルワールド、って時点で 未実装の要素 パラレル迷路(プレビュー版) // '; } gamen.innerHTML=txt; for(i=0;i0){bdb=bdb.substr(0,z*20+y*5+x-5)+'0'+bdb.substr(z*20+y*5+x-4);g_init();}} function fbdo…

  • 【JavaScript】addEventListener と 連想配列 の使用例

    どうも!LSSです!! 昨日の記事、 「なるほど、こうなるんだ」ってだけの話でしたが、いただいたコメントの中に、 なる(id:narutabi) おお!これだと例えばC1を選んだあなたは…とかも出来ちゃうのでしょうか…!あなたは食いしん坊です!とか!( ゚Д゚) 421miyako(id:m421miyako) 各数字をクリックして別の答えが出るのは難しいんですよね?たぶん。 と仕掛けに興味を持っていただいたものがありましたので、少し手を加えて「応用しやすい形」のものを作ってみました! 連想配列で文字列を好き勝手に扱ってみます コード 改変について 連想配列について あとがき 連想配列で文字列…

arrow_drop_down

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

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

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

商用