chevron_left

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

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

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

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

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

2019/10/18

arrow_drop_down
  • 2022年、ぎりぎりの振り返り記事

    どうも!LSSです!! いよいよ12/31、今は23:35です。 こんな時間から記事を書き始めてみますw 色々ありましたねぇ 2022年、振り返ってみると色々な事がありました。 まず転職。幸いにして好条件で1年契約の業務委託として契約を結んでくださった企業があり、とっても助かりました。 次に、前述の転職と関連しますが株式投資の開始。これがなかなかに面白い、ただし勝ててはいませんがw未だ知らない事が多々あって、新たな発見がよくあります。 次に、このブログの毎日更新の終了。時間の使い方を見直したくての決断でしたが、見直しについてはまだまだな感じです。 あと、父が亡くなったというのもありました。 そ…

  • CSSパズル 第三問!

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

  • 【短文】時間の使い方を考えてみます

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

  • 【短文】おいでませ神戸

    どうも!LSSです!! 最近、ブログ巡回しているとたまたまなんですが「神戸を含む関西方面への旅行」記事を、別々の3,4つのブログで見かけました。 それぞれ記事にされたタイミングが重なっているだけで、実際に来られたのは別々のタイミングのようですけどね。 little-strange.hatenablog.com ↑かなり前に、こんな記事を書いていたりもしましたが…やはり本当の旅行者目線になると、地元民の知らない新たな一面が色々あるものですね^^ ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 最近、Amazonで古い漫画を買ったのですが…

    どうも!LSSです!! 最近、Amazonで古い漫画を購入しました。 吾妻ひでお作品集 1~最新巻 [マーケットプレイス コミックセット] 作者:吾妻 ひでお 奇想天外社 Amazon ↑これなんですけどね。 既に別の版で読んだ作品も多いのですが、未読のものも多々あり、良い買い物をしたな、と思っています。 が、今のAmazonの金額を見てびっくり!! ちょっと怖い金額になっていたので、自分のメールを読み返すと、自分が購入した時点では¥2255でした。 やはり年数が経っている事と、おそらくは発行部数もあまり多くない?事からだいぶレアな本になってしまっているのかもですね。 ってなとこで、今回はこの…

  • 今週のお題「カバンの中身」

    今週のお題「カバンの中身」 どうも!LSSです!! 今週のお題「カバンの中身」…ちょうど最近どこかに(多分どこかのコメント欄)に書いたっけ…。 仕事に行く時用のカバンと、休日用のカバン、別々に用意しています。 仕事用のカバンが少々問題で…だいたい持ち歩く必要も仕事で使うわけでもないものが入ったままになっていたりしますねw 休日用のカバンの方は、縦長のショルダーバッグを愛用しています。 こちらはかなり以前に購入したものですが、近年になって「12.1インチ画面のノートPC、CF-SX3がすっぽり収まる」事に気づき、そのバッグの別のポケットに薄型マウスやモバイルWiFi、モバイルバッテリなどの薄いも…

  • ちょっとだけ試してみました

    どうも!LSSです!! 昨日の記事に書いたこれ、ちょっとだけ試してみました。 little-strange.hatenablog.com USBから電源を取る必要があるのですが(逆に言えば、コンセントが要らない)、プロジェクタにUSB端子があり、そちらに差すと…そこから給電できました^^ そこで、ふと思ったのですが…USB電源で稼働するスティックPCがあれば、 エアマウス、Bluetooth 5.0リモートコントロールキーボード、6軸ジャイロスコープセンサー、バックライト付き、インテリジェンスラーニング、Android TVボックス、コンピューター用品、ラップトップ、スマートTV用 VEGBY…

  • 【駄文】買ったけど使ってないもの

    どうも!LSSです!! 「結構前に買っては見たものの使ってない(開封もしていない)」ものがあります。 マイクロソフト ワイヤレス ディスプレイ アダプター P3Q-00009 : Wi-Fi不要/ Miracast/ パソコンやスマホの画面をミラーリング/ USB給電可/ 簡単接続/ Windows/ Surface ( ブラック ) マイクロソフト Amazon ↑これなんですけどね。 little-strange.hatenablog.com なんとなく、プロジェクターと相性いいかな?と買ってみたのでした。 …そろそろいい加減、試してみようかなw 他にも「買ったけど使ってないもの」にNAS…

  • 【日記】仮面ライダーに会った日

    どうも!LSSです!! 日記、としながらも、昨日の話なんですけどね。 10/10 スポーツの日、朝10:50頃。 元町駅近くの交差点で、南から北に向かうべく、信号待ちしていました。 南北の信号が赤なので、東西の信号はもちろん青。(東→西への一方通行) 多くの車やバイクが走り抜ける中で、目を疑うような光景が! 「目の前を仮面ライダーが走り過ぎていきました」 走り過ぎていったので、一瞬の事でしたが、マスクも背中もしっかり仮面ライダーで、バイクはサイクロン号ではなかったですが…白昼夢を見ているような出来事でしたw まぁ、稀には、なんでもない街なかでコスプレをされている方を見かける事は無くもないですし…

  • 【CSS小ネタ】radialなドッグイヤーもどき

    どうも!LSSです!! CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の角を少し、45度に折ったような表現で、使われている例もCSSコードもあちこちで見かけます。 今回は「ピシッと折ったドッグイヤーではなく、ふんわりめくれたような表現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき .dogy{ width:280px; height:280px; padding:10px; background-image: conic-gradient(from 180deg,#eeeedd 0deg 270…

  • 【日記】幼児のいる家

    どうも!LSSです!! little-strange.hatenablog.com little-strange.hatenablog.com に書いていた姪っ子ちゃんが来ています。(2歳になりました) 前回会ったのが昨年末かぁ。 その後も2度ほど来ていたようなのですが、自分とはすれ違いの瞬間帰省でした。 その間に凄い勢いで成長し、昨年末には全然だったのですが、かなりお喋りできるようになっています^^ …昨年末の時点では物凄く人見知りになっていて、慣れるまでだいぶ苦労したのですが果たして…?? と思っていたところ、顔合わせから全く拒否のそぶりを見せず、愛想よく応じてくれました^^ この違い、ど…

  • 今週のお題「最近おもしろかった本」

    今週のお題「最近おもしろかった本」 どうも!LSSです!! 最近、近所の古本屋さんで「1冊100円の本、3冊で200円」で売られているところで、以前から「気にはなっていた」漫画(文庫版)を購入しました。 同棲時代 (1) 作者:上村一夫 eBookJapan Plus Amazon ひとつは「同棲時代」。 昭和の一時代をあらわす作品として、よく名前を聞きます。 忍者武芸帳(影丸伝)(1) 作者:白土三平 小学館 Amazon もうひとつは「忍者武芸帳」。 白土三平氏は忍者漫画の巨匠として知られていますが、実は今まで読んでこなかったりしました^^; 古い漫画が好きで、それも自分が生まれるより前の…

  • 【CSS小ネタ】写真っぽい写真【はてなブログ用】

    どうも!LSSです!! デジタルカメラやスマートフォンが普及した昨今。 フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^ それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりします。 スマホで撮影後に画像加工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。 写真っぽい写真 コード 手順 その他の例:楕円 写真っぽい写真 コード はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。 <p style="border: 1px s…

  • 【ツール】linear-gradientで遊ぼう!

    どうも!LSSです!! これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう! 使い方 linear-gradientで遊ぼう! #gamen{width:280px;height:400px;border:1px solid black;} コード ctr.addEventListener('input',gw,false); gw(); function gw(){ txt='linear-gradient('; for(i=0;i 使い方 色選…

  • 【短文】明日休みで明後日出勤

    どうも!LSSです!! 明日休みで明後日出勤、なんですが…ちょうどその明日が職場で変化が重なる日。 明後日行くと、ちょっと取り残された感じになるかもですねw …いうほど大きな変化ってわけでもないのですが、中には自分の仕事に大きく関わりのある事もあり…それが遅れない事を願うばかりです^^; リモートで確認できるので見ておこうっと。 ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 【CSS/小ネタ】ドアの向こうに

    どうも!LSSです!! 今回はCSS小ネタです。 CSSの3D表現を忘れそうになっていたので、個人的なリハビリにw ドアの向こうに コード 向こうの風景 ドアの向こうに @keyframes brbr{ 0%{transform:rotateY(-95deg);} 100%{transform:rotateY(95deg);} } .waku{ position:relative; width:280px; height:200px; background:linear-gradient(#aaaaee,#eeeeee 80%,#aaeeaa 81%,#88aa88) 0 0/100% 100…

  • 半額シール

    どうも!LSSです!! little-strange.hatenablog.com 先日、↑のような記事を書いていました。 要は「スーパーで割引シールが貼られたパック寿司を購入するにはどのタイミングで行くのが良いか?」という話で、もちろんスーパーによっても違うでしょうし、読み手に何のメリットもない記事ですw なんですが、その後、18:30頃に同スーパーに寄ったところ…ちょうど半額シールを貼ってまわってる場面に遭遇しました! 実にあっさりと答えが出ましたねw その時点でもまだ数パック残っていたので、そのぐらいのタイミングで向かうのが良さそうです。 …一方、10月に入って様々なものが値上がりしてい…

  • 【CSS】姫のお辞儀【backgroundプロパティアニメーション】

    どうも!LSSです!! わざわざお姫様の画像を描いてまで作ったネタ、 little-strange.hatenablog.com お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな?と思ったからですが、出来上がった動きが「やはりどう見てもスクワット」でしたw 画像の作り方によっても違ってくるのかもですが、コードのほうでなんとかもう少し「お辞儀」らしくならないかな?と考えてみました。 姫のお辞儀 マウスホバーで「ごきげんよう」 ざっくり解説 姫のお辞儀 @keyframes ozga{ 0%,30%{height:200px;} 90%,100%{heig…

  • 【WebAudioAPI】マイク入力もできるみたい(実験はまだ)

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

  • 【CSS】姫のスクワット(?)

    どうも!LSSです!! little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみました。 そして、勢いで2パターン作ったので公開します^^ お姫様のお辞儀かと思ったらやっぱりスクワット ノリノリの姫 あとがき お姫様のお辞儀かと思ったらやっぱりスクワット @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } …

  • 【CSS/実験】スクワットの動きを表現できるか試してみた、だけ

    どうも!LSSです!! little-strange.hatenablog.com は、「1枚の画像を別々に扱う」という試みでした。 元の発想は、「人物の画像の、下半分だけが縦に伸び縮みするアニメーションだったら、スクワット(または高位の女性のお辞儀)みたいになるかな?」というところでした。 今回は「下半分だけ伸び縮み」を、画像を伴わずにkeyframesで再現する事を試みてみました。 スクワットの動きを表現できるか試してみた、だけ コード 結局のところ、高さも縦位置も動作指定が必要? スクワットの動きを表現できるか試してみた、だけ @keyframes testa{ 0%{height:20…

  • 【CSS】画像の下半分がマウスホバーで出現

    どうも!LSSです!! 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください(スマホの場合はタップ) .halfpic{ position:relative; width:280px; height:400px; transform-style: preserve-3d; perspective:500px; } .halfpic div{ position:absolute; left:0; width:100%; height:50%; background-image:url('http…

  • 【完全なる運ゲー】AかBか?x5

    どうも!LSSです!! 今回はブラウザゲーム…なんですが、これをゲームと言っていいのやら、どうなのやらw まったく考える余地のない、「完全なる運ゲー」です。 AかBか?x5 というものを作ってみました AかBか?x5 下にある「A」または「B」。どちらかが正解でどちらかがハズレです。直感でどちらかをクリックすると結果が出て、次の「A」「B」が現れます。5回出題され、正解率と その正解率に辿り着く確率が表示されます。 どちらが正解か?は完全に運任せ。完全なる運ゲーです。 本日の貴方の『直観力』を測ってみましょう^^ #gamen{font-size:40px;} #gamen div{ disp…

  • 【日記】スーパーの寿司が買えましたw

    どうも!LSSです!! 今日はまた、ほぼ引きこもっていましたが、17:40頃になってスーパーに出向くと…2割引のシールが貼られた寿司パックに遭遇しました! …うーん、どうも思っていたよりもだいぶ早いタイミングのようですね。 この分だと、18時か18時半か19時あたりで半額になるのかも? 他に、アイスや日本酒2Lパック、酒のアテにするお菓子など買って帰りました。 引きこもってる分には出費は抑えられるはずですが、結局散財してるような気がしないでもない、そんな一日w 明日は仕事なので、スイッチ切り替えていきます^^ ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • あと10分

    どうも!LSSです!! 何を書こうか、思いつかないままにこの時間www いよいよ毎日更新に無理が出てきたかな(いや、それは前からですね) 創造的なところでは、下書きにある お絵描きツールをたまに新たに手を加えたりしていますが、もうちょっとキリのいいところまで進まない事には^^; とか考える、ある秋の日でした。 ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 【短文日記】交通費の節約…?

    どうも!LSSです!! 今日もまた、三宮(ほぼ元町)から歩いて帰ってきました。 モッキンモーニン、初めてのミニサラダ。シャキシャキのレタスたっぷり!口の中でサクサク食感が美味😊 pic.twitter.com/lth1HOr5a3— LSS (@LSS0324) 2022年9月24日 行きはバスで。 神戸市バスの終点、三宮神社がちょうど、トアロードのすぐそばになります。 そこから少し北上して、JRなどの高架をくぐるとモッキンバード(喫茶店)に。 そこから、ぶらぶらと歩きながら帰宅。 どうも体が歩く事を求めているようで、交通費の節約も兼ねて帰りは歩いています。 汗をかいてしまうので行きはバスを使…

  • 【CSS】跳ね続けるボールとfloat:left;【小ネタ】

    どうも!LSSです!! CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、「着地して跳ね返る時に横長にひしゃげる」という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールとfloat:left; @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,47%,57%,100%{background-size:30px 30px;} 50%{background-siz…

  • こよみモード

    どうも!LSSです!! ふと、こよみモードを見ると little-strange.hatenablog.com から丸二年が経っていました。 この「おほしさまとって」シリーズも、終わったつもりじゃないのですが、もうそんなに経っちゃったんですね。 (他に、落ち物パズルや もぐら叩きも…) このゲーム、スピード感を出す事が出来るようにはなったものの、ゲームの目的とスピードアップがマッチしていないというところをどうにかしたいものです^^; ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 【JavaScript】iPhoneでも要素のリサイズ

    どうも!LSSです!! 【CSS】要素のリサイズを可能にしてみました - Little Strange Software で、CSSでのリサイズ許可を行う方法について書きましたが、これがどうもiPhoneではうまく行かない^^; ので、JavaScriptを使って「PCでもiPhoneでも、大きさを変えられる」ようにしてみました。 JavaScriptで要素リサイズ コード 難がない…わけでもなかったり 個人的な裏話 JavaScriptで要素リサイズ #rsz{ overflow:hidden; border:1px solid black; user-select:none; } CSSで…

  • 【CSS】要素のリサイズを可能にしてみました

    どうも!LSSです!! 以前に、様々な「ページ(記事)内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。 通常、Webページ内の要素(画像・段落など)はページ記述者が指定したサイズ(指定していなければデフォルトのサイズ)で固定されて表示されますが、CSSには「ユーザー(読者)が自由にサイズ変更できるようにする」という指定があります。 今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。 ※追記!スマホだと操作しづらかったり、出来なかったりする場合もあるようです。試してみた範囲では、「Androidスマホ+はてな…

  • 最愛のMicroSDカードリーダー。しかし…

    どうも!LSSです!! だいぶ(何年も)前から、めちゃくちゃ気に入っているMicroSDカードリーダーがあります。 機構美、といいますか、その作りが実に理にかなっていて、「これ以上小さくしようがないんじゃないか?」というぐらいの極小サイズにまとまっています。(これ以上小さかったらむしろ扱いにくそうw) 型番:BSCRMSDCBK MicroSDカードはどこに差すの? しかし… 速度を追い求めるなら、USBSSDという選択も 型番:BSCRMSDCBK BUFFALO カードリーダー/ライター microSD対応 超コンパクト ブラック 【PlayStation4,PS4 動作確認済】BSCRM…

  • 【短文日記】出不精とお寿司

    どうも!LSSです!! 今日も見事に外出しない一日でしたw あ、でも20時頃にスーパーに行ってきましたね。 半額の寿司に出会えないものかと思いましたが、ここのところ行くタイミングが遅いのか、寿司のところの棚がいつもすっからかんになっています。 果たしてこれは…「スーパーが用意している数を減らした」のか「半額狙いの人が増えた」のか「いや、単に行くタイミングが遅いだけ」なのか、という謎が生まれています。 …今度、ちょっと早いタイミングで行ってみよう。 そして、こんな短文記事ですが、1111記事めらしいですw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 【作成中】お絵描きアプリ、作ってる途中で変な機能が

    どうも!LSSです!! 【ツール】簡易お絵描きアプリ【試作品+】 - Little Strange Software の「線の引き方」を根本的に見直そうとしていたところ、「完成版には入れるつもりはないけどちょっと面白い機能」がたまたま出来てしまいましたw 闇に葬る前に、ちょっと他の人にも見てもらいたくて、晒してみます^^ お絵描きアプリ劣化版 操作説明 ちょっと面白い機能 どうしてこうなった お絵描きアプリ劣化版 #cnvs{border:1px solid black;box-shadow:5px 5px 5px black;background:repeating-conic-gradie…

  • 【CSS】謎リズムアニメーション

    どうも!LSSです!! 「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。 謎リズムアニメーション コード なんなんでしょうね?これ 変更例 謎リズムアニメーション @keyframes nazorzma{ 0%,87.6%,100%{background-position:0 0;} 12.5%,25%,37.5%{background-position:0 100%;} 37.6%,50%{background-position:100% 100%;} 62.5%,75%,87.5%{background-position:100%…

  • 【JavaScript】イベントオブジェクトの子要素【調査用】

    どうも!LSSです!! 最近、JavaScriptのマウスイベント・タッチイベントに反応する仕掛けを作る事が増えてきました。 【ツール?】いろは歌作成補助ツール - Little Strange Software 【ツール】簡易お絵描きアプリ【試作品+】 - Little Strange Software 「どこがイベントの発火地点(マウスカーソル位置・タッチ位置)なのか」を知るだけなら、「e」をイベントオブジェクトとした場合、「e.pageX」「e.pageY」(タッチの場合は「e.changedTouches[0].pageX」「e.changedTouches[0].pageY」)で事足…

  • 【短文】今日から4年め

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

  • あれから3年、経ったでしょうか

    どうも!LSSです!! www.youtube.com …あ、この歌は「あれから何年たったでしょうか」でしたね。 そんなこんなで、このブログを開設してから3年めの最後の日となりました。(2019/9/14開設) 最初の記事 一年後 二年後 明日から4年めかぁ 最初の記事 little-strange.hatenablog.com いかにも「初めまして」らしい「初めまして」ですねw ブログ名およびハンドルネームの意味について触れていたりします。 当初の志からはちょっと方向性が変わり、その変わったまままっすぐ進んでる感があります。 一年後 little-strange.hatenablog.com…

  • 【ツール】リズミカルkeyframeアニメーション生成

    どうも!LSSです!! little-strange.hatenablog.com にて、リズミカルに動くkeyframesアニメーションを作ってみました。 ただ、手順が結構煩雑で、 【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】 - Little Strange Software によって%の割合だけは算出したものの「手間がかかる&分かりづらい」ものとなっており、新たなリズムを作ろうとするとかなり大変そうです。 そこで、今回はポチポチとクリックするだけでkeyframes指定を含むコードを生成するツールを作ってみました! リズミカルkeyframeアニメーション…

  • 歩く

    どうも!LSSです!! 最近、休日に歩く事が増えました。 これまで通らなかったようなところを通ると、知らないうちに開けていたところや、「ここからここに道が繋がっていたのか!」という新たな発見があったりしますね^^ っと、長年住んでいて、近所でそういうのがあるのにもビックリですがw ただ、問題は…自分自身汗かきなのもあって、結構とんでもない量の汗をかきます。 代謝なので健康的な意味では結構な事なのですが、シャツが下着もその上もドボドボになるのがいただけない^^; そうして歩くルート上にスーパー銭湯があったりもするので、そこで汗を流すとちょうどいいのですが…その後にまたドボドボのシャツを着るの?っ…

  • 【CSS】リズミカルなアニメーション【実験段階】

    どうも!LSSです!! CSSのkeyframesアニメーションで、リズミカルな動きを作ったら面白いかな?と試みてみました。 たんたたたんたん、たんたん♪ コード 要となるのは%指定部分 0~100%を2の累乗数で分断するぞう君 リズム あとがき たんたたたんたん、たんたん♪ @keyframes rzma{ 0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%{transform:translatey(0px);} 3.125%,15.625%,21.875%,28.125%,40.625%,65.625%,78.125%{transform:…

  • 【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】

    どうも!LSSです!! …謎なものを作ってしまいました。 0~100%を2の累乗数で分断するぞう君 What's this? 何に使うん? リズミカルなアニメーションを目指して このツールのコード 0~100%を2の累乗数で分断するぞう君 2 4 8 16 32 64 slct.addEventListener('input',slctc,false); slctc(); function slctc(e){ txt=''; for(i=0;i';} txt+=Math.round(i*100000/parseInt(slct.value))/1000+'%,'; } if(i%8==0){t…

  • 使い途

    どうも!LSSです!! little-strange.hatenablog.com の使い途…いろは歌作成以外にも何かあるかな?と考えていましたが、 tudumiyasiki.hatenablog.com まさかの、クロスワードパズルを作っていただきました!! ゐ、ゑ、を 以外の全ての文字を、被りなく全て使って…と、普通にクロスワードパズルを作成するよりもとんでもない労力がかかってそうで凄いです! 単語作成、という意味では、クロス部分のみ重複が許される…という事になりますが、記事中に書いておられる通り、そのクロス部分のために関連語句の文字が意味なく隣合わせになってはいけないという縛りも。 タコ…

  • 【妄想】近未来の通行人装備

    どうも!LSSです!! 先日…一週間か二週間かそのぐらい前(アバウト)に、夢で見たんだか夢うつつの時にぼーっと考えてたんだかの妄想の話。 近未来装備『傘』 人々が『傘』を装備する理由 コミュニケーション不足を補う苦肉の策 繰り返しますが『妄想』ですw 近未来装備『傘』 そう遠くない未来の話。 道を行く人々のほとんどが、現代では見られないようなものを背負って歩いています。 人の身長より少し高い、金属製の柱のようなもの。 正面から見るとディスプレイがついており、そこにその人の意思表示が映し出されています。 また、裏面もディスプレイがあり、そちらは現代におけるスマホのような役割を果たしています(本人…

  • 【ツール?】いろは歌作成補助ツール

    どうも!LSSです!! 早速ですが、 little-strange.hatenablog.com で予告していた「いろは歌作成補助ツール」ができました! いろは歌作成補助ツール 使い方 といっても… いろは歌作成補助ツール #gamen{ position:relative; box-sizing:border-box; background:repeating-conic-gradient(#668877 0deg 15deg,#667788 16deg 30deg) 0 0/30px 30px; } #gamen div{ position:absolute; box-sizing:bor…

  • いろは歌の話

    どうも!LSSです!! 「いろは歌」というものがあります。 ja.wikipedia.org かなり古い時代に作られたもので作者不詳(空海説あり)ながら、かな47文字を重複なく1回づつ使って作られた七五調の歌です。 古い時代ゆえに、「ゐ」(い)とか「ゑ」(え)とかが「い」「え」と音は同じでも別物として扱われていたりはしますが、それでも七五詩として意味が通る文章になってるのが凄いですよね^^ 現代の「あいうえおかきくけこ…」という順が使われるようになる以前には、かなの並びの基本として子どもたちの文字学習に長く使われていたりもしていて、今でも「基本中の基本」のニュアンスで「いろは」という言葉が使わ…

  • 【ツール】簡易お絵描きアプリ【試作品+】

    どうも!LSSです!! 【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software に少し機能追加したバージョンです。 簡易お絵描きアプリ 使い方 試作品+ゆえの謎仕様 ファイルとして保存、について現在判明している事 履歴機能の実装 簡易お絵描きアプリ #cnvs{border:1px solid #aaaaaa;box-shadow:5px 5px 5px #777777;background:repeating-conic-gradient(#dddddd 0deg 89.9deg,#cccccc 90deg 180deg) 0 0/20px 20px;} …

  • 【日記】めっちゃ歩いた日

    どうも!LSSです!! 現在、スマートウォッチの歩数計は14714歩。 昼前後にすっごい歩きました。 朝、10時開店のヤマダ電機へ 阪神電車で元町へ…モッキンモーニン そして徒歩で帰る 昼寝 朝、10時開店のヤマダ電機へ 徒歩でHAT神戸のヤマダ電機へ。 三宮にもヤマダ電機はありますが、その「徒歩で行く」ヤマダ電機で売られていて三宮の店舗にはない安いUSBメモリ(といっても微々たる価格差ですが)を買いに。 …行ったものの、目移りしてしまい、結局予定していたものと違うのを買ってしまいましたw ちなみに、買おうと思っていたのはUSB2.0 16GB 300円 32GB400円。 結局買ったのはUS…

  • 簡易お絵描きアプリ、ブラウザごとの差異

    どうも!LSSです!! little-strange.hatenablog.com では、公開前の動作検証にもだいぶ悩まされましたが、公開後にも色々と閲覧環境ごとの違いが見つかりました。 自分で確認できる部分は確認し、「使い方」のところに赤文字で「追記」として書き足しておきました^^ 情報提供してくださった皆様、誠にありがとうございます! 結論から言うと、WindowsPCでもAndroidスマホでもiPhoneでも、絵を描いて保存までできますが、その「保存」がやたらと環境に左右されるようで^^; スマホの場合、「はてなアプリ」からだとダメですが、ChromeやSafariなどのブラウザからな…

  • 【ツール】簡易お絵描きアプリ【試作品】

    どうも!LSSです!! JavaScriptによる筆圧感知のテストがてら、簡易ながらお絵描きアプリを作ってみました。 簡易お絵描きアプリ 使い方 コード イケてないところ だいぶ悩んだところ 簡易お絵描きアプリ #cnvs{border:1px solid #aaaaaa;box-shadow:5px 5px 5px #777777;} sx=0; sy=0; cnvx=cnvs.getContext('2d'); tmer=cnvs.getBoundingClientRect(); //タッチ操作 cnvs.addEventListener('touchstart', (e)=>{ sx=e…

  • 8月最終日

    どうも!LSSです!! 今日でとうとう、今年の8月も終わりですね。 暑いのが苦手な自分としては、「今年の夏もなんとかほぼ乗り切ったか」という感じがしますw(まだしばらくは暑い日が続くでしょうけど) 明日から9月。 9月って何かあったっけ?と思い返してみると…アレだ。 このブログ開設したのが3年前の9月なので、もうじき3周年になりますね。 LSSとしての活動で自分の環境に変化を起こすつもりが…仕事のほうでとんでもなく変化しちゃう事になるとは思ってもみませんでしたがw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 【駄文】激安PCと筆圧感知とお絵描きアプリとJavaScriptと。

    どうも!LSSです!! 最近、E10で遊んでいるうちにふと、思った事があります。 mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴/Win10 Pro/Celeron N4000/4GB/64GB eMMC)MT-E10ZN 【全機種対応】タッチペン KINGONE スタイラスペン iPad/スマホ/タブレット/iPhone対応 たっちぺん 磁気吸着機能対応 ipad ペン USB充電式 スマホ ペン E10、今売られているものは何故かスタイラスペンが付属しないものの、2~3000円程度で売られているような電池を使うペンを使う事ができます(指でのタ…

  • 【お題】「私がハマったゲームたち」

    どうも!LSSです!! 今回は特別お題。「ハマったゲーム」かぁ。 小学生の頃にファミコンが発売されて以来、幾多のゲームに触れてきました。 時にはかなり集中的にハマったものもありましたが…「ハマった」と認識しているものだけでも数多くて、思い出せる自信がありませんw ので、全てではないですが、印象に残っているもの(なおかつここに抵抗なく書けるものw)をいくつか書いていきます。 Wizardry(ファミコン版) ゼルダの伝説(初代) 魔界塔士SaGa マインクラフト JoeWars へべれけ Wizardry(ファミコン版) Wizardryの名前を始めに見たのは、集英社が刊行したドラクエ2のムック…

  • 今日も家から出ずw

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

  • 【CSS】波打つ枠

    どうも!LSSです!! 【CSS】でっかい下向き矢印、もうひとつのバリエーション - Little Strange Software に、 421miyako(id:m421miyako) 端を波線にするとか、全体に小さな円を書いたら水玉になりますね。色々遊べそう。 とのコメントをいただきました。 「端を波線…難しそうで面白そう」と思ったので、まずは「端が波線」の枠を作ってみる事に^^ 波打つ枠 コード 改変を考慮すると… 波打つ枠 .wvbox{ box-sizing:border-box; height:200px; --brdw:13px; --brc:#88ff88; backgrou…

  • 【CSS】でっかい下向き矢印、もうひとつのバリエーション

    どうも!LSSです!! little-strange.hatenablog.com のバリエーション、もうひとつ考えていたものを公開します。 だんだん太くなる線 コード 文字関連の指定 かなり近いものを先にアレンジしていただいてたり^^ だんだん太くなる線 ちょっとアレンジ コード <div style="box-sizing: border-box; height: 200px; background: linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-g…

  • 【短文日記】家から一歩も出なかった日

    どうも!LSSです!! 今日は休みでした。 朝時点では、どこかに出かけようかとも思っていたのですが…なんだか「お金を使いたくない」って思っちゃったんですねw お金を使わないためには、外出しないのが一番! という事で、がっつり休養日としたのでした。 ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • のんびりペースのUSBブート計画

    どうも!LSSです!! 激安PCを買った目的のうち、最大のものに「USBメモリからのブートでAndroidを走らせたい」というのがありましたが、なかなか手をかける時間がなく進んでいません^^; PC自体にもクセがあるようですが、それプラス、「LSS自身がブータブルUSBの作り方を忘れてる」というのがありますw が、とりあえずなんとか、ネット検索で調べて、「Ubuntu(Linuxの一種)」をUSBメモリにインストールする事に成功しました。 …ただし、そのメモリから激安PCを起動させる事はできていないんですけどね^^; (元々持っていた別のノートPCでは使えました。) ついでに、そのUbuntu…

  • E10買ったら欲しくなる周辺機器

    どうも!LSSです!! 【日記】結局、中古じゃない激安PCをポチっちゃいました - Little Strange Software で購入した、E10。 ちょこちょこといじってはいますが、なかなか時間がとれず、未だにAndroidを走らせる事はおろか、USBでの別OSブートにも成功していません^^; …一時、Linuxの起動ディスクを作るのにハマった時期があったのですが、ほぼほぼ忘れているのが大きな要因ですw それはさておき、今回は「E10を買ったらあわせて用意したい周辺機器」について書いてみます。 mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴…

  • 最近、気になってるもの「ゼーベック効果」

    どうも!LSSです!! 「ゼーベック効果」というものを聞いた事がありますか? 「ペルチェ」の逆の現象で…あ、ペルチェというのはCPUクーラーなんかに使われている、「電気を流すと一方では冷え、その熱が別の方に逃げる」効果なんですが、ゼーベック効果はその逆で、「物質の一部に熱を加えると、熱くなったところとなってないところの温度差から電気の流れが生じ、発電できる」ようなものらしいです。 ググると実験されてる話とかが出てきますが、取り出せる電力はそう多くないとか、燃料を消費して加熱するとモーターを回す事ができたとかなんとか…。 すると、思いつくのが little-strange.hatenablog.…

  • 【CSS】ブログで使える、でっかい下向き矢印!【小ネタ】

    どうも!LSSです!! 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 .arrowl{ display:inline-block; background-image: conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg), conic-gradient(from 75deg at 0% 50%,#ff0000ff 30deg,#ff00…

  • 【お題】冷やし〇〇 原点…?

    今週のお題「冷やし◯◯」 どうも!LSSです!! はてなブログのお題、冷やし〇〇。冷やすといいもの!という事ですが…。 時節柄、まず「冷やし中華」は当然食卓に出てきますね。カラシをたっぷり入れて食べます。 かと思えば、近年になってコンビニ等で「冷やしラーメン」なるものを見かけるようになり、「へ?冷やし中華と冷やしラーメンどう違うの?」とまず、言葉の定義から疑いにかかりますが、食べてみるとなるほど冷やしラーメン。冷やし中華はラーメンの冷たい版ではなかったんだな、と認識させられますねw …という話はお題として当たり前すぎるのですが、最近になって「冷やすといいもの」と認識したものは…原点すぎて呆れら…

  • 【CSS・backgroundプロパティ】CSSお絵描き超入門!

    どうも!LSSです!! CSSはお絵描きツールではありませんが、backgroundプロパティやgradient関数を使う事でちょっとしたお絵描きを楽しむ事もできます。 backgroundプロパティもgradient関数も、自在に扱えるようになるまでには色々と飲み込まないといけないところが多くて、使い慣れていかないとなかなか意味を理解する事も難しいと思われます。 そこで、今回は解説を加えながら、CSSお絵描きの入門の助けになるかも?な記事を書いてみました。 まず、divタグを用意しましょう testクラスを装飾するCSSを書き始めます CSSコードを書いていきます まず枠組み 中をグラデーシ…

  • gradientお絵描きについて【ぼんやり構想中】

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

  • 【CSS】gradientで描く線画囲み枠3種!【雲/キャンディ/リボン】

    どうも!LSSです!! radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 .crd{ width:300px; height:200px; padding:40px; background: radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 30px 0/calc(33.3% - …

  • 【駄文】CSSネタ記事ができる前段階

    どうも!LSSです!! 昨日の little-strange.hatenablog.com から、何故か「三平方の定理」について考え始めたりする今日この頃です。 ※三平方の定理…直角三角形の、直角を挟む2つの辺の長さをx,yとし、直角と接していない辺の長さをzとすると、他2つの角度がなんであっても「x二乗+y二乗=z二乗が成り立つ」というアレ。 CSSには calc という、計算式を扱う手段が用意されていますが、二乗は掛け算でなんとかできても平方根が取れないな、とかも考えたり。 そこから更に色々考えてるうちに、また違った囲み枠の案を思いついてしまいました。 が、記事にするには時間がちょっとかか…

  • 【謎CSS】バクダンになりそこねた囲み枠

    どうも!LSSです!! 以前、CSSとSVGを併用した、 little-strange.hatenablog.com というコード記事をあげていました。 バクダンってアレです。広告の特価品や、漫画でいうと叫んでる吹き出しに使われる、トゲトゲの囲み枠ですね。 SVGを使うと本当に表現の幅がグンと広がる、広がり過ぎて面白くないぐらいですが、CSSだけで近いものは作れないか?ってな事を考えていました。 で、思いついた方法をひとつ試してみたのですが…出来上がりはなんとも言えないものになり、しばらく下書きに眠らせていたのですが…置いておいたところで使い途が思いつくわけでもなく、ここに晒してみる事にしまし…

  • 【短文日記】E10のセンサー

    どうも!LSSです!! 本日も、E10をいじっていました。 mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴/Win10 Pro/Celeron N4000/4GB/64GB eMMC)MT-E10ZN あまり容量がないので、あれこれ入れたくはないのですが、とりあえず昨日はChrome、今日はVScodeを入れてみたところです。 ところで、ふと思ったのですが「タブレットPCなんだから、加速度センサー・傾きセンサーはついているはず(少なくとも、縦持ち横持ちで画面の向きが変わる機構はあるんだから傾きセンサーはあるはず)」、と。 で、懐かしの littl…

  • 激安PCが届いたので、慣らしにCSSコードを書いてみました。

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

  • インスタグラム、最近知ったのですが【短文】

    どうも!LSSです!! 最近になって知ったのですが、写真・動画のSNSであるインスタグラム。 って、LINEみたいに音声通話できるんですね! その昔、NintendoDSでフレンドと通信プレイしていると当然のように通話できてびっくりした以来の衝撃を覚えました。 うん、時代についていけてない自分を自覚しますねw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 【謎CSS】アニメーション区切線

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

  • 【駄文】マウスは届きました。マウスはまだ注文確認中。

    どうも!LSSです!! 記事タイトル通りです。 と、これほど訳の分からない「記事タイトル通りです」もなかなか無いかも?w 先日、 【日記】結局、中古じゃない激安PCをポチっちゃいました - Little Strange Software もうひとつポチったもの「薄型マウス」 - Little Strange Software 「マウスコンピューター製の激安PC」と「薄型のマウス」を同じ日にポチったんですね。 その「薄型のマウス」のほうは昨日(8/9)無事届きました。 が、激安PCのほうはまだで、配送状況(?)を見てみると「注文確認中」で出荷すらされていない、という状況。 改めて見直してみると「…

  • 【謎CSSアニメーション】光の龍…?

    どうも!LSSです!! CSSをいじっているうちに、また謎のアニメーションができました。 光の龍…? コード 仕組み どうしてこうなった 光の龍…? @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-position-y:100%;} } .stardragon{ position:relative; height:200px;…

  • もうひとつポチったもの「薄型マウス」

    どうも!LSSです!! 昨日の記事で、激安PCをポチった話を書きましたが、 little-strange.hatenablog.com 同時にもうひとつ、購入したものがあります。 薄型マウス 折り曲げると電源ON ちょっと珍しい?特徴が決め手 薄型マウス イーサプライ 薄型マウス Bluetoothマウス マルチペアリング対応 USB充電式 IRセンサー 折りたたみ式 5ボタン EZ4-MABT1205W イーサプライ Amazon 薄型のBluetoothマウスは1つ所持しており(かなり以前に安く購入したもの)、久々に喫茶店にノートPCを持って行って使ってみたりしたのですが、左クリックに違和…

  • 【日記】結局、中古じゃない激安PCをポチっちゃいました

    どうも!LSSです!! 以前から「タッチパネル搭載で、スペック低くてもいいから、USBブート可能な(MicroSDブート可能ならなお良し)ノートPCかタブレットPCが1台欲しい」と思っていました。 がっつり使うなら「メモリは8GB以上、CPUはi5以上、SSD搭載(容量は小さくても換装可能なら良)」ぐらいの基準で探したいところだったりします(個人的な感覚) もちろん「安いに越した事はない!」のが前提ですけどねw そして色々中古PCの価格情報を調べていたのですが…結局「中古じゃない」端末に行きつきました。 マウスコンピューター E10 やってみたい事 結局、出来るかどうかは不明のまま ケチらなけ…

  • 【CSS】回転体を増やした疑似3D

    どうも!LSSです!! 【CSS】疑似3D 前後関係 - Little Strange Software の回転体を増やしてみました。 疑似3D コード CSS変数を使って、個々の回転体の設定を簡略化 もっと凝った疑似3Dを見たい!という方は 疑似3D @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:cal…

  • またも無駄遣い欲が…

    どうも!LSSです!! 最近、¥9000~¥17000ぐらいの中古ノートPCを買いたい欲が高まってきていますw だいぶ前に、Linuxを入れた起動ディスクをUSBメモリで作るのにハマった時期があったのですが、その時に「Android x86(PCで動作するAndroidOS、GooglePlayも使えます)」を入れて起動してみた際に、マウスでの操作が厳しくて「やはりタッチ操作前提で作られたOSだなぁ」で終わったのが引っ掛かってるんですね。 いつか、タッチパネルのWindowsPCでリベンジしたい、と思いつつもまだできていない状況。タッチパネル中古PCも前述のような価格帯で買えるようなのでそろそ…

  • 【短文日記】知人のPC

    どうも!LSSです!! 今日は大阪に出向いてきました。 知人(前にいた会社を数年前に定年退職された方、在職中から色々と誘っていただいています)から連絡があり、PCの調子が悪いので見てほしいとの事。(という名目でお昼を奢ってもらったりw) 詳しく内容を聞かないまま行ってきたのですが、どうも「意図せずWindowsが11になってしまった」のがまずあって、それ以外にも稀に操作がおかしくなるとか。 確か11→10に戻せたはず…とやり方をググって試みようとしたものの、システムの復元が選択できず…。 もう一度ググってみると、あれって「11になってから10日以内でないと戻せなくなる」んですね^^;;;。 (…

  • 【CSS】また流星群(今度は線形)

    どうも!LSSです!! 先日、【CSS】流星群というCSSアニメーションネタを公開しました。 光の点が斜めに移動する、というものでしたが 残念なこと - 私の好きなバラとシェルティー の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみました^^ また流星群 コード 仕組み あとがき また流星群 @keyframes shtstra{ 0%{background-position-y:0,100%;} 50%,100%{background-position-y:0,0%;} } @keyframes shtstrb{ 0%,10%{background-position-x:0…

  • 【投資初心者】大きく買って大きく負けるw

    どうも!LSSです!! 7月末、仕事の報酬で大きい振込がありました(3か月に1度のペースでそうなる契約)。 で、証券口座に大きく振り込んだんですね。 そして今週に入って昨日、色々と買ったのですが…いくつかに分散して買ったものの、そのうち一番大きかったものが買った直後に大きく落ちましたw その他に買ったのもぼちぼち落ちて、プラスになったものがほぼない状態。 いや、これからこれから、と思ってはいるのですが、落ちたのがちょっと大きくて…これまでなんとかプラスを保っていた「評価額-投入金額」がマイナスになってしまいました^^; その後ちょっと持ち直して「かろうじてプラス」レベルで今日が終わったのが救い…

  • 【CSS】疑似3D 前後関係

    どうも!LSSです!! little-strange.hatenablog.com で、惑星の公転運動っぽい動きを作っていました。 が、あくまでも「疑似」の悲しさ、 little-strange.hatenablog.com と同じで「前後関係が表現できない」事から、例えば中央に太陽、動くのを地球とすると、重なると3Dではない事が露呈してしまうという欠点があります。 CSSには3D表現があるので、そちらを使えば良いのですが(そちらには球や曲面の表示が苦手という弱点もありますが)なんとか「疑似3D」のままで誤魔化せないか?試みてみました。 疑似3D 前後関係 コード HTML部分 外枠のCSS …

  • 今週のお題「最近洗ったもの」

    今週のお題「最近洗ったもの」 どうも!LSSです!! 「最近洗ったもの」というお題ですが…これから洗うつもりのものについて書きます。 ずばり「枕カバー」です! ながらく枕カバーを洗う事なく、複数の枕をローテーションで使ったりしていましたが、やはりこの季節さすがに限界かな…と。 と、先日考えたのですが…さて、いざ洗おうとすると「ジッパーが降りない」という問題に直面しました!w さて、どうしたものか…ネットで調べてみると、ジッパー専用の潤滑剤があってそれを使う案と、ペンチで引っ張る案がありました。 どちらも手持ちがなかったので、今日になって100均に行った際にペンチを購入。 こうした工具も100円…

  • 【おまけ】疑似3D、再生時間をずらすと…?

    どうも!LSSです!! 【CSS】疑似3D【実験】 - Little Strange Software で、楕円(っぽい)動きで3D(っぽい)ものを表現してみました。 記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き+サイズ変更」を指定する秒数を変えてみたらどうなるか?を試してみます。 2sと1.8s 2sと1s 2sと3s 2sと6s あとがき 2sと1.8s @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyf…

  • 【CSS】疑似3D【実験】

    どうも!LSSです!! CSSには3Dを表現するためのプロパティが用意されています。 参考:【CSS】ブロック遊び【実験】 - Little Strange Software が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。 一方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも3D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に3Dっぽい動きを表現」する事に挑戦してみました。 疑似3D コード 遅延の値を変更してみるのも面白いかも 疑似3D @keyframes d3dax{…

  • 復習ウルトラマン

    どうも!LSSです!! 最近、初代ウルトラマンのブルーレイBOXを購入しました。(輸入盤で安かったのもあってw) ウルトラマン コンプリート ブルーレイ [Blu-ray] (輸入版) アーティスト:Ultraman Akihiko Hirata Amazon シン・ウルトラマンを2回観に行きましたが、まだまだ気づいていないポイントがありそう…と復習の意味でぼちぼち観ています^^ なお、自分のPCにはブルーレイドライブをつけていたのですが…これが何故かブルーレイディスクを認識できず(?)、外付けのブルーレイドライブも購入。 BUFFALO USB3.2(Gen1)/3.0 ブルーレイドライブ …

  • 【CSS】流星群

    どうも!LSSです!! ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 @keyframes stardusta{ 0%{background-position:0 0,5000px 0,0 0;} 100%{background-position:0 0,0 0,0 0;} } .stardust{ height:200px; background-image: repeating-linear-gradient(135deg,#000000 0px 9px,#00000000 10px 13px,#000000 14px 100px), repeatin…

  • 【CSS】落下アニメーション【keyframesの復習】

    どうも!LSSです!! このブログで、keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その1 シンプルに落下 その2 着地後静止 その3 バウンド その4 ちょっとだけリアルに あとがき …

  • 【短文日記】ちょっとCSSアニメーションについて書こうと思ったら…

    どうも!LSSです!! ちょっとCSSアニメーションについて書こうと思ったら…書き始めたのが遅くて、とても日が変わるまでに書ききれないな…と思ったのが23:45。 ちなみに書き始めたのが23時頃なので、動きだすのが遅すぎましたね^^;;; というわけで、後日にまわします。 …そろそろ本気で、毎日更新に無理が出てきたようなw ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^

  • 銀河放浪

    今週のお題「SFといえば」 どうも!LSSです!! 今週のお題「SFといえば」 - Little Strange Software では昔話とSFについて強引に書いていましたが、今回は普通にお気に入りSF作品の話。 と言っても、数多くあるのですが、中でも特に好きなのを挙げるとすると… 銀河放浪 吾妻ひでお先生の「銀河放浪」を挙げます! 銀河放浪 1 (MAG COMICS) 作者:吾妻 ひでお マガジンハウス Amazon 銀河放浪 2 プリンセスミコ・サーガ (MAG COMICS) 作者:吾妻 ひでお マガジンハウス Amazon 全2巻のコミックです。 吾妻先生は相当な読書家で、特に若い…

  • 【投資初心者】目標

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

  • 今週のお題「SFといえば」

    今週のお題「SFといえば」 どうも!LSSです!! 今週のお題ですが、まず記事編集画面に出てきたのが「古今東西の「SF」を語りませんか?」この「古今東西」にまず目が行き、まっさきに連想したのは…「竹取物語」ですね。 SFの概念が無かった時代の、不思議を含んだおとぎ話のひとつでしたが、これほどもろに「宇宙人」が出てくる話もなかなかないかと。 「不思議を含んだおとぎ話」でいうと、他に妖怪・化け猫の話や隠れ里、異種婚姻譚など様々ありますが…さて、どこからがSFかな?って考え始めると、SFってなんだろう、というところがよく分からなくなってきましたw SFの概念のない時代に作られた話なので、「竹取物語」…

  • 朝から通信障害…予備回線でなんとか

    どうも!LSSです!! 朝からネットに繋がらず、参りました^^; やむを得ず、PCとモバイルWiFi(Wimax)をUSBで接続。 以前から、通信費かけすぎかな?って思ったりしていましたが、ネットが無いと無理な人にはこうした時の緊急対応用としても使えるので命綱として必要かもですねw そのモバイルWiFi、忘れた頃に「新機種に交換」の案内が来ます。 USBケーブルで繋げば、PCがWiFi非対応・ドングルも差してない状態でも使えたはず…が使えなかったのに少し焦ったりもしましたが、モバイルWiFi端末をよく見ると「USBテザリング」の切り替え項目があり、それがOFFになっていたんですね。 それをON…

  • 【謎CSS】なんとも言えない色

    どうも!LSSです!! 当ブログでは、「HTMLなど カテゴリー」で様々なCSSアイデアを書いてきました。 「どういう表現に使えるか」が明確なものが、使用するのをオススメしやすくて望ましいのですが、「とりあえず作っては見たけど…何に使えるんだ?コレ」とお蔵入りする事も多々あります。 また、最近では自分でイマイチ使い途が思いつかないネタでも、うまくアレンジして試していただいている読者の方もおられ、それに甘えている自分もいますw …という前置きで、また実験的によく分からないものが出来てしまいました。 なんとも言えない色 コード 3つのグラデーションを重ねています 使うとしたら…何? なんとも言えな…

  • 【小ネタ】スマホで表示中のWebページのソース表示

    どうも!LSSです!! ※追記:今回記載する方法は、Androidスマホ上のChromeに限った話で、iphoneではできないようです^^; 最近、出先でもスマホで見ているWebページのソースを確認したくなる場面が増えてきました。(他の方がLSSのコードを使ってくださっていて、うまく動作していない時など) PC上のGoogleChromeなら、右クリックで出てくるメニューから「ページのソースを表示」で見る事ができますが、出先でスマホしかなかったら? まず、スマホ版ChromeでWebページを開き、アドレス欄をタップします。 するとアドレス欄が空白になってしまいますが、ちょい下の右端にあるペンの…

  • 【CSS小ネタ】透過波紋を見出しに応用するコード

    どうも!LSSです!! little-strange.hatenablog.com に使用した、「h2見出しを透過波紋にするコード」を公開します。 コード と、なにげなく仕込んだコードを晒してみましたw コード <style>@keyframes trwavea{0%{background-size:100% 100%,100% 100%;}30%,100%{background-size:2000% 2000%,100% 100%;}}article h2{background-image:radial-gradient(farthest-side at 25% 75%,#8888ff 5%…

  • モッキンバード、色々

    どうも!LSSです!! つい先日、おかえりモッキンバードという記事にて、7月7日に移転オープンした喫茶店の記事を書きました。 調査漏れの事項があったため、「まぁまたそのうち次回行った時に確認しよう」と思っていたのですが…思いのほか、そのタイミングが早くやってきましたw というのも、本日、高校時代からの友人から連絡があり、神戸に帰ってくるとの事で「じゃあ昼飯でも」という話になったんですね。 お昼はLSSが良く行くラーメン屋さんに案内する事にして(常連にトッピング無料サービス有、同伴者もOK)、そこからモッキンバードにつきあってもらいました。 調査結果報告 もうひとつのモッキンバード 他に、帰宅後…

  • 【CSS】透過波紋、中心位置変更【小ネタ】

    どうも!LSSです!! 今回は、 little-strange.hatenablog.com のコードアレンジ、という小ネタです。 透過波紋、中心位置変更 コード 元コードには無かった「at」指定を追加しています 0か50か100じゃないと合わないのでは?って 透過波紋、中心位置変更 @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 95%,100%{background-size:2000% 2000%,100% 100%;} } .trwave{ height:210px; background-image: radi…

  • おかえりモッキンバード

    どうも!LSSです!! 5月の終わり頃、こんな記事を投稿していました。 little-strange.hatenablog.com サンパル自体が停止する前に、多くの店が撤退していたのですが、中でも結構ギリギリまで残っていて、お気に入りのメニューがあった喫茶店、モッキンバード! お気に入りのチョコパ提供店が…。移転してもメニューと属性が変わらないといいな。 pic.twitter.com/q0rbwunQBh— LSS (@LSS0324) 2022年5月30日 「7月初旬に移転オープン」と告知されていました。 場所・ビル名まで明記されているので、しっかりと準備されていた事と思います。 で、「…

  • 【CSS】水滴落下、からの透過波紋

    どうも!LSSです!! little-strange.hatenablog.com に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。 サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。 水滴落下、からの透過波紋 コード コード改変の流れ あとがき おまけ:波紋の色変更 水滴落下、からの透過波紋 @keyframes trwavea{ 0%{background-size:20px 10px,100% 100%,100% 100%;} 95%,100%{background-size:20px 30px,2000% 2000%,100% …

  • 【CSS】(トリッキーな方法で)透過波紋!

    どうも!LSSです!! 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃!【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを2種類、作ってみました。 どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。 その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐々に透過していく」という表現が考えられます。 ただ…そもそもこのアニメーション、「radial-gradi…

  • 【日記】プラチナ市民特典きました!

    どうも!LSSです!! 先日、はてなブログ歴1000日&1000記事を突破しました。 それからちょっと日が経っていますが…今日、ブログ巡回しつつスターぽちぽちしていると…カラースターが増えているのに気がつきました! 7/11付け なんかメダル2つあるなーと思ってたら 7/11付け https://www.hatena.ne.jp/shop/items/received を確認すると、7/11付けで貰っていたようです。(↑のリンクは、はてなログイン中の方は各自の受け取り履歴画面になると思います。) そして、かなりレアなスターもひとつきています! …これは、もったいなくて使えない可能性が極大w な…

arrow_drop_down

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

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

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

商用