【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…