どうも！LSSです！！ 昨日のゲーム、 little-strange.hatenablog.com ゲームになるかどうか不安なまま作り、自分で何度かプレイして「まぁまぁ遊べる…かな？」と思いながら公開。 問題作成も解くのもシンプルなので、実はとんでもなく簡単になってしまう攻略法が（気づいていないだけで）あったりしたらどうしよう？みたいなのもありつつｗ（まだ見つけていません） で、ふと思い出した昔の思い出 魔女っ子大作戦 ちょっと脱線しましたが、話を本筋に戻すと で、ふと思い出した昔の思い出 このゲーム、数字は全て先に見えているので、クリックする前に脳内で取る手順を考える事ができれば、必ず解ける手順はあるという作り方をしています。（自分の脳味噌では容量が足りずｗ） 取るべき数字を取れる箇所が一か所だけの時は、何も考えずにそれを取れば良いのですが、複数ある場合はどちらかが「手詰まり」に続く誤っ

どうも！LSSです！！ ちょっとまた謎な？ゲームを即興で作ってみました。 ナンバー☆ピッカー 遊び方 こういう、乱数で問題生成できるパズル 改善の余地 ナンバー☆ピッカー やり直す 遊び方 画面上にある数字の行から、全ての数字を取り除くゲームです。 画面上に「１」～「９」までの数字が並んだいくつかの行と、「next」で１つの数字を示した行があります。 「next」の数字は「次に取る数字」を示しています。 数字が並んだ行から「一番右」にある、「next」が示す数字をクリックで取る事ができます。 数字を取ると、「next」の数字は１づつカウントダウンされていき、１の次は９に戻ります。 どの行からも取れない状態になると「手詰まりです」と表示されます。 こういう、乱数で問題生成できるパズル この問題生成は、取っていく手順と逆に１→２→３…と積み上げていく（その際、どの行に積むかを乱数で選択）事で行

どうも！LSSです！！ やたら２が多い日、2022年2月22日、皆様いかがお過ごしでしょうか？ LSSはですね…このただでさえ２が多い日に、ICOCA定期券２枚持ちがいつかやるだろうと警戒していた事をついにやっちゃいました^^; まず、現状確認から ICOCA定期券２枚持ちのリスク 前置きが長くなりましたが、今日のやらかしの話 すぐに気づけたからいいけど という事で、同様の不安を持たれている方、 まず、現状確認から little-strange.hatenablog.com 通勤に、神戸市バスと阪神電車を利用していたLSS。 当初はどちらも磁気定期券だったのですが、神戸市バスが磁気定期券撤廃するとの事でやむなく市バス定期券をICOCAに。 市バスはICOCAの場合、乗る時と降りる時に２回タッチが必要、磁気定期券なら降りる時に見せるだけで良かったので、圧倒的に不便になります。 一方、阪神電車

どうも！LSSです！！ ２月も終盤ですね。 イベントとしては、節分も終わり、バレンタインも終わり…次は ひなまつり？ っと、その前に明日は2/22。 しかも今年は「2022年2月22日」とやたら「2」だらけの2/22です。 全てが「2」になる「2222年2月22日」まであとちょうど200年！ となる日ですね。 自分はその時には247歳になっているハズです。 その頃にはもう少し落ち着いた性格になって…こんなお馬鹿な事を言ったりしない人になっていそうですね^^（言わないし書けない状態になってるだろうな） ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^ これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。 ところが。 CSSのプロパティというのは数が膨大で、この本に掲載されているものも数が膨大なのですが、それでも本が全てのプロパティを網羅しているわけではありません。 また、仮に「全てのCSSプロパティを網羅した本」があったとしても…CSSは進化しているので、時が経つとまた新たなプロパティが生まれたりもします。 プロパテ

どうも！LSSです！！ この記事で900記事めになります^^ 投稿日数でいうと890日め。 1000の大台が見えてきましたね。 といって 「駄文中の駄文」カテゴリ 読みふけってしまいました といって 特にネタを用意しているわけでもなかったりｗ 昨日、 little-strange.hatenablog.com という記事をあげましたが、その後、自分で自分のとあるカテゴリの記事を読みふけってしまいました。 「駄文中の駄文」カテゴリ little-strange.hatenablog.com 現時点で90記事（この記事で91記事め）となるこのカテゴリ。 ブログを書き続けていると、無意識のうちに「この記事は完成度が低くて出せない」と変なプライド？が芽生えてしまい、書けなくなってしまう恐れがあります。（いわゆる「スランプ」ってそういう事かなと思ってます。） このブログについては「自信があってもなく

どうも！LSSです！！ このブログもだいぶ長く続き、もうすぐ900記事になろうかとしています。 CSSやJavaScriptに力を入れている感じになっていますが、「カテゴリ」に入れたり入れなかったり。 「カテゴリ」ってアレです。はてなブログの機能で、サイドバー（ＰＣで見た時は画面右、スマホで見た時は記事の下）にある、ブログ記事のジャンルを分けたものですね。 新たに読者になっていただいた方も増えてきたところで、ここらで少し「推しカテゴリ」をご紹介してみます。 学びはじめたい方向け「超入門のさわりだけ」 ブログで使えるコードが欲しい、でも人と同じじゃなんか嫌 もっと気軽に楽しめるもの、といえばゲーム？ CSSのコードではなく、画像そのものを作ってダウンロード あとがき 学びはじめたい方向け「超入門のさわりだけ」 Webで扱える技術、の基本的な柱としてまず「HTML」があり、その飾りつけを担う「

どうも！LSSです！！ 昨日は久々に、１時間以上の尺のある劇場版アニメを観ました^^ amzn.to 劇場版BEM~BECOME HUMAN~ 初代リスペクト！ マンストール という話を あと余談 劇場版BEM~BECOME HUMAN~ たまたま、AmazonPrimeVideoを覗いてると見かけました。 Amazonプライム会員は、今なら無料で見られるやつですね。 タイトルから想像する通り、かの名作…いや、超名作「妖怪人間ベム」のリメイク作で、2020年の作品だそうです。 …と、これの前にTVアニメシリーズもあったらしく、そのシリーズの後の話だそうで。 始まりは、女性刑事の報告書という形で妖怪人間３体の紹介に始まります。 と、TVアニメシリーズを見ていない身としては何より「ベラ」が「少女」という設定になっているのにびっくりｗ 「ベロ」は子どもながら、ちょっとスカした感じになっていますが

どうも！LSSです！！ いやぁ、やられましたｗ 日々、結構ギリギリにブログ記事を書いて、日付が変わる前になんとか投稿しているこのブログですが、ついさっき思いがけないピンチが発生しました^^; 記事をデスクトップPCから書いているのですが「なんとか今日も間に合うかな～」と書いている最中に… ブレーカーが落ちましたｗｗｗ うーん、これは想定外^^; ブレーカーを戻して立ち上げると、今度はシステム更新が始まり、また焦らされますｗ まぁ…「毎日更新を維持したいなら、下書きに記事を用意しておくなり、早めに書いて予約投稿しかけるなり」しとけばいいと分かってるんですけど、これがなかなか。 ちなみに、うっかり０時を回っても、はてなブログの場合「予約投稿」で「過去の日時」を設定する事でシステム上の毎日更新を維持する（ように見せかける）事はできますし、過去に数分オーバーしてそれをやった事はありますｗ なお、P

どうも！LSSです！！ 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」で行うものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^） という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。 リンクボタン CSS版 コード コード概要 なので、作り方としては リンクボタン CSS版 クリックするのはこちらです！ コード <style> .linkbtn{ border:1px solid black; border-radius:

チョコの色： フチ： 幅　： 高さ： ↑の「チョコの色」「フチ（３種）」「幅」「高さ」の内容を変更できます。 変更するとリアルタイムに↓のサンプルと「コード」の内容が変化します。 サンプルを見ながら↑の項目を調節して、その時点での「コード」をコピーして、あなたのブログやWebサイトのHTMLに挿入する事で使用できます^^ コード というものを作ってみたのですが バレンタイン記事に使うのに良さそう…なものを、バレンタイン当日に公開するという、完全に時期を逸した感じになってしまいましたｗ と、そもそもCSSで板チョコを作ろうと思ったのが、 non704.hatenablog.com norikoさん(id:non704)の↑の今日の記事を見たからだったりします。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ little-strange.hatenablog.com の派生で、いくつか考えてみました。 ブログでの使い勝手…にとらわれず、CSSアニメーションの動きを見て楽しむ感じ？ 跳ねる画像 跳ねるボール二次元版 ブロック崩し風（ブロックはないけどｗ） あとがき 跳ねる画像 【CSS】跳ねるボール【多重アニメーションの実験】 から、枠をとっぱらい、ボールの代わりに画像ファイルを跳ねさせるサンプルです。 コード <style> @keyframes boundimga1{ 0%{width:100px;} 100%{width:100%;} } @keyframes boundimga2{ 0%{background-position:0% 0%;} 100%{background-position:100% 0%;} } .boundimg{ height:50px;

どうも！LSSです！！ 【CSS】跳ねるボール【多重アニメーションの実験】 - Little Strange Software に、さじさんからいただいたコメント、 さじ(id:conasaji) 円を足しつつ、タイミングずらしたら不思議な何かができそうです。（何かはわからないw） 昨日ちょっと知りたいことがありましてCSSとはてなでググったらLSSさんの記事とフジグチさんの記事がヒットしました（笑）本文にリンクのボタンを入れたいんですが、そんな記事ありませんでしたっけ？ CSS装飾でボタン風に見せかける、ような事はよくやっていましたが、本物（？）のボタン（ここではフォームパーツとしてのボタン、の意）はあまり使っていなかった（コード生成ツール等で機能を割り当てるぐらい）ので、あまり難しいものではありませんがひとつ「リンクボタン」を記事にしてみます。 …と、考えた時には、またも はてなブログ

どうも！LSSです！！ なんとなく「２つのkeyframesアニメーションで、２つめの動きが１つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。 跳ねるボール コード ２つのアニメーション あとがき 跳ねるボール 跳ねるボール コード <style> @keyframes dblanm1{ 0%{width:135px;} 100%{width:100%;} } @keyframes dblanm2{ 0%{background-position:0% 0%;} 100%{background-position:100% 0%;} } .dblanm{ height:30px; border-radius:15px; padding-left:15px; animation:dblanm1 15s linear infini

どうも！LSSです！！ 金・土・日の三連休がやってきますね^^ …はて、2/11って何の祝日でしたっけ？？ と調べてみると『建国記念の日』なんですね。 ja.wikipedia.org Wikiをみると、なかなかゴタゴタがあったらしい記載も。 歴史の長さからハッキリしないところがあるようですね。 「の」が重要っぽいです。 ふと、このめでたい日に、このブログではどんな記事を書いていたんだろう？ と、こよみモードから調べてみると… little-strange.hatenablog.com little-strange.hatenablog.com 一昨年、「嘘」ってｗ 昨年のは、なかなか手のかかったツールでした^^ 作って公開してまもなく、はてなブログ自体にcanvaと提携したアイキャッチ画像作成機能が実装されたのもいい思い出ですｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願

どうも！LSSです！！ だいぶ前から「なんとなく雰囲気だけ」のCSSアニメーション案で、雰囲気だけでどんな見た目にするかとか思いつかずにいる案があったりします。 その雰囲気というのも「ウィーン、ガシャン、って感じの」というだけｗ 「動」と「静」の組み合わせでメカっぽい動き…ですね。 どんな見た目にするかアイデアが浮かびませんが、なんとなく雰囲気だけ、お伝えしてみようと試みる記事です。 ウィーン、ガシャン。 コード 概要 ウィーン、ガシャン。 なんだかよくわからないものを作ってみました。 いやぁ、以前からなんとなく 「ウィーン、ガシャンって感じのCSSを作ってみたい」 と思っていたのを、カタチにしてみた感じですが、これをカッコよく応用できないかなぁ？ コード <style> @keyframes wga{ 0%,23%{background-position:0px 0px,0px 0px;

今週のお題「自分に贈りたいもの」 どうも！LSSです！！ お題記事、今週のお題は「自分に贈りたいもの」。 うーん、考えてみると…なかなかイミシンなお題かもですね。 裏を返すと、自分が求めているもの、という事になりますが、はたして…？ 自分を甘やかしたい時に贈りたいもの 無形のものもアリなら 自分を甘やかしたい時に贈りたいもの 疲れた時など、自分へのご褒美的なやつ、でいうと…スイーツかなｗ コンビニスイーツも良いのですが、もうちょっと豪華に、でも安価に行きたい時は、 ちょい久！ pic.twitter.com/l9xXNJqatE— LSS (@LSS0324) 2022年1月30日 こんな感じですｗ パフェも色々試してみましたが、やはり今のところ、コスパ（満足感：価格の比）と提供速度・利用しやすさで、サンマルクカフェのパフェが強い！ …とはいえ、例のまん防で、退社時間の前後によっては利用で

どうも！LSSです！！ 何がきっかけだったかすら覚えていない…かなり以前に１枚だけエレファントカシマシのCDを購入した事がありました。 何か１曲だけを目当てにCDを買う、なんて事がよくありましたが、これについては全く思い出せないｗ もしかしたら、その頃チャットか何かで話してた相手がエレカシにハマっていて、どんなものか聴いてみようと思ったのかも？ その後、他に買わなかった事から、アーティストとしては特に自分にはささらなかったという事なんだと思いますが…最近になって購読中の２，３のブログで「エレファントカシマシ」の名前を見かける機会がありました。 すると…その昔、購入したCDに入っていた「珍奇男」という、なんだかとても異質な曲を思い出したんですね。 www.youtube.com YouTubeで検索してみると、さすが！いくつか見つかりました。 見つけてからというもの…ループ再生でドハマリして

どうも！LSSです！！ 以前、ICOCAデビューについて記事を書きました。 little-strange.hatenablog.com その後について書きます。 連絡定期券 複数枚持ちへの抵抗 結局 連絡定期券 神戸市バスと阪神電車を通勤に使用していますが、神戸市バスが磁気定期券廃止の方向に動いたため、定期更新のタイミングで市バス定期券だけICOCAデビューしていました。 このたび、阪神電車の定期券も更新のタイミングを迎えたため、更新は自動発券機で出来るのですが、ようやく窓口に聞きにいったんですね。 「神戸市バスのICOCA定期券と阪神電車の定期券を１枚のICOCAにまとめる事はできますか？」 先にネットで調べていましたが、連絡定期にする事ができるものの中には入っていなかったので、期待薄。 案の定「できないです」との回答でしたｗ 複数枚持ちへの抵抗 磁気定期券の方が便利な神戸市バス、ICO

サイズ調整 どうも！LSSです！！ 【完成版】１５パズル、作りました！！ - Little Strange Software から、かなり経過しましたが、15パズル画像版の完成です！！ 遊び方 Special Option ファイルを選択 サイズ調整 遊び方 元の一枚の画像を、縦４つ横４つの１６分割したコマが１５個あります。 ※元画像の一番右下に当たる部分が欠品となっています。 そしてコマの無い「空きマス」には、元画像がモノクロで薄暗く見えています。 「空きマスと縦か横に並ぶコマ」をクリックする事で、コマをスライドさせられます。 空きマスに見える元画像をヒントに、全てのコマを正しい位置に配置する事を目指すパズルゲームです。 Special Option 盤面の下に、 ファイルを選択 サイズ調整 があります。 ファイルを選択 これが、今回の「15パズル画像版」の超目玉機能です！！ ここから、