【ゲーム？】鬼はそと福はうち【節分】 - Little Strange Software
どうも！LSSです！！ 節分にちなんだパズルゲームを作ってみました。 …これをパズルと言っていいかどうか疑問もありますがｗ 鬼はそと福はうち 突貫で作りましたが 鬼はそと福はうち ↑↓ ↓↑ 「◆」をクリックすると、内側と外側が入れ替わります。 「↑↓」をクリックすると、外側が時計回りに60度回転移動し、「↓↑」をクリックすると、外側が反時計回りに60度回転移動します。 「鬼」を全て外側に、「福」を全て内側に移動させるとクリア！ クリア判定で画面がピンク色になります。 突貫で作りましたが ゲーム性という点ではだいぶ疑問がｗｗｗ 「ただ『内側が鬼・外側が福』になるように回転させて、入れ替えするだけ」のものになりましたね。 イベントのちょっとしたお遊びには、この程度の方がいいのかもですが、もう少しなんらかの「やりにくさ」があるとパズルになるかも？ ってなとこで、今回はこのへんで！ 次回もまた、
2022年、ぎりぎりの振り返り記事 - Little Strange Software
どうも！LSSです！！ いよいよ12/31、今は23:35です。 こんな時間から記事を書き始めてみますｗ 色々ありましたねぇ 2022年、振り返ってみると色々な事がありました。 まず転職。幸いにして好条件で１年契約の業務委託として契約を結んでくださった企業があり、とっても助かりました。 次に、前述の転職と関連しますが株式投資の開始。 これがなかなかに面白い、ただし勝ててはいませんがｗ 未だ知らない事が多々あって、新たな発見がよくあります。 次に、このブログの毎日更新の終了。 時間の使い方を見直したくての決断でしたが、見直しについてはまだまだな感じです。 あと、父が亡くなったというのもありました。 それから、2022年…というのからは少し離れるかもですが、嫁に行った妹が第二子を妊娠中で、今かなりおなかが大きくなっています。 上の子は女の子（２歳半）ですが、次も女の子のようで、こちらは来年誕生
CSSパズル 第三問！ - Little Strange Software
どうも！LSSです！！ CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！ CSSパズル カテゴリーの記事一覧 - Little Strange Software CSSパズル 第三問！ 「現在のコード」について やっている事と言えば… 応用例 CSSパズル 第三問！ ２つの写真があります。 上が「お手本」で、下が「回答」です。 そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。 選択肢を変更すると「回答」の表示がそのコードで生成したものに変化するので、「回答」を「お手本」と同じものになるよう、正しい選択肢を選ぶ、という出題です。 なお、選択肢を変更した際に、さらにその下にある「現在のコード」がその選択肢の場合のコードとなります。（つまり、その時点で表示されている「回答」のコードですね） 全ての選択肢が正しいものになり、「お手本」と「回
【短文】時間の使い方を考えてみます - Little Strange Software
どうも！LSSです！！ 1000記事到達した時、３年経過した時にも考えていた事ですが… とりあえず更新頻度を変更（毎日更新終了）します！ 時間の使い方を諸々考え直して、これから始める事を考えてみます^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
今週のお題「カバンの中身」 - Little Strange Software
今週のお題「カバンの中身」 どうも！LSSです！！ 今週のお題「カバンの中身」…ちょうど最近どこかに（多分どこかのコメント欄）に書いたっけ…。 仕事に行く時用のカバンと、休日用のカバン、別々に用意しています。 仕事用のカバンが少々問題で…だいたい持ち歩く必要も仕事で使うわけでもないものが入ったままになっていたりしますねｗ 休日用のカバンの方は、縦長のショルダーバッグを愛用しています。 こちらはかなり以前に購入したものですが、近年になって「12.1インチ画面のノートPC、CF-SX3がすっぽり収まる」事に気づき、そのバッグの別のポケットに薄型マウスやモバイルWiFi、モバイルバッテリなどの薄いものを入れるのがマイブーム^^ MSOffice 2019/Win 10搭載 Panasonic CF-SX3/第四世代Core i5-4200U 1.6GHz/メモリー: 8GB/SSD:256GB/
【日記】仮面ライダーに会った日 - Little Strange Software
どうも！LSSです！！ 日記、としながらも、昨日の話なんですけどね。 10/10 スポーツの日、朝10：50頃。 元町駅近くの交差点で、南から北に向かうべく、信号待ちしていました。 南北の信号が赤なので、東西の信号はもちろん青。（東→西への一方通行） 多くの車やバイクが走り抜ける中で、目を疑うような光景が！ 「目の前を仮面ライダーが走り過ぎていきました」 走り過ぎていったので、一瞬の事でしたが、マスクも背中もしっかり仮面ライダーで、バイクはサイクロン号ではなかったですが…白昼夢を見ているような出来事でしたｗ まぁ、稀には、なんでもない街なかでコスプレをされている方を見かける事は無くもないですし、かくいう自分も数年前、コスプレじゃないですがやたらバカでかい傘をさして歩いて、呼び込みの人たちから「おっきい傘のお兄さ～ん」と声をかけられた事もあったりはしました。 が、仮面ライダーの姿でバイクに乗
【CSS小ネタ】写真っぽい写真【はてなブログ用】 - Little Strange Software
どうも！LSSです！！ デジタルカメラやスマートフォンが普及した昨今。 フィルムカメラのように「フィルムの無駄」を気にせず、パシャパシャと気軽に撮影が楽しめるようになりましたね^^ それでも時々ふと、あの白いフチのある写真に懐かしさを覚えたりします。 スマホで撮影後に画像加工するのも手ですが、CSSなら画像はそのままでコードに少し手を加える事で、懐かしい白フチ写真を演出できます。 写真っぽい写真 コード 手順 その他の例：楕円 写真っぽい写真 コード はてなブログの「写真を投稿」機能で写真をアップロード・記事に挿入した後に、コードを付け足します。 <p style="border: 1px solid black; padding: 3%; box-shadow: 10px 10px 5px 0px gray;"><img style="display: block;" src="http
【CSS／小ネタ】ドアの向こうに - Little Strange Software
どうも！LSSです！！ 今回はCSS小ネタです。 CSSの3D表現を忘れそうになっていたので、個人的なリハビリにｗ ドアの向こうに コード 向こうの風景 ドアの向こうに コード <style> @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%; } .waku>div{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
【CSS】姫のスクワット（？） - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com ですが、やはり例として分かり辛かったですね^^; 伸び縮みしているのか、単に隠れているのかという辺りが特に。 画像を使ってみるにあたり、 little-strange.hatenablog.com で使った方法をまた用いてみました。 そして、勢いで２パターン作ったので公開します^^ お姫様のお辞儀かと思ったらやっぱりスクワット ノリノリの姫 あとがき お姫様のお辞儀かと思ったらやっぱりスクワット コード <style> @keyframes testa{ 0%{height:200px;} 100%{height:100px;} } @keyframes testb{ 0%{top:0px;} 100%{top:100px;} } .test{ position:relative; width:280px;
【CSS】画像の下半分がマウスホバーで出現 - Little Strange Software
どうも！LSSです！！ 画像の下半分がマウスホバーで出現 コード 枠サイズの調整 画像の指定 あとがき 画像の下半分がマウスホバーで出現 写真にマウスカーソルをのせてみてください（スマホの場合はタップ） コード <style> .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('画像ファイルのURL'); background-size:100% 200%; background-repeat:no-repeat; } .halfpic div:nth-chi
【CSS】跳ね続けるボールとfloat:left;【小ネタ】 - Little Strange Software
どうも！LSSです！！ CSS小ネタとして、跳ねるボールを作ってみました。 と、ボールが跳ねるようなものはこれまでにも作っていましたが、 「着地して跳ね返る時に横長にひしゃげる」 という細かい芸を入れています。 跳ね続けるボールとfloat:left; コード 色々… 跳ね続けるボールとfloat:left; ボールが跳ね続けます。 そして、float:left;を指定しているため、それ以降の文章がこのように回り込むカタチになります。 float:left;の一行を削除すると、横に文章が並ぶ事がなくなります。 コード <style> @keyframes bnda{ 0%,100%{background-position:0 0;} 50%{background-position:0 100%;} 0%,47%,57%,100%{background-size:30px 30px;} 50
【CSS】要素のリサイズを可能にしてみました - Little Strange Software
どうも！LSSです！！ 以前に、様々な「ページ（記事）内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。 通常、Webページ内の要素（画像・段落など）はページ記述者が指定したサイズ（指定していなければデフォルトのサイズ）で固定されて表示されますが、CSSには 「ユーザー（読者）が自由にサイズ変更できるようにする」 という指定があります。 今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。 ※追記！スマホだと操作しづらかったり、出来なかったりする場合もあるようです。 試してみた範囲では、「Androidスマホ＋はてなアプリ→右下角を捉えにくいがなんとか」「iPhone＋はてなアプリ or Chrome or Safari→いずれも試みるもできず」 【JavaScript】iPhoneでも要素のリサイズ -
【CSS】謎リズムアニメーション - Little Strange Software
どうも！LSSです！！ 「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。 謎リズムアニメーション コード なんなんでしょうね？これ 変更例 謎リズムアニメーション コード <style> @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% 0;} 0%,25%,50%,75%,100%{background-size:50% 50%;} 37.5%,87.5%{background-size:100% 50%;
あれから３年、経ったでしょうか - Little Strange Software
どうも！LSSです！！ www.youtube.com …あ、この歌は「あれから何年たったでしょうか」でしたね。 そんなこんなで、このブログを開設してから３年めの最後の日となりました。（2019/9/14開設） 最初の記事 一年後 二年後 明日から４年めかぁ 最初の記事 little-strange.hatenablog.com いかにも「初めまして」らしい「初めまして」ですねｗ ブログ名およびハンドルネームの意味について触れていたりします。 当初の志からはちょっと方向性が変わり、その変わったまままっすぐ進んでる感があります。 一年後 little-strange.hatenablog.com ジャスト２年前の記事、という事になります。 ダッシュボード画面のスクショを晒しているので、今となっては懐かしい旧アイコンが見られますｗ ちなみに今はこんな感じ。 記事中にある「１年目終了間際になって
【CSS】リズミカルなアニメーション【実験段階】 - Little Strange Software
どうも！LSSです！！ CSSのkeyframesアニメーションで、リズミカルな動きを作ったら面白いかな？と試みてみました。 たんたたたんたん、たんたん♪ コード 要となるのは%指定部分 0～100%を2の累乗数で分断するぞう君 リズム あとがき たんたたたんたん、たんたん♪ たんたたたんたん、たんたん♪ コード <style> @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:translatey(-20px);} } .rzm{ height:50px; text-align:center; animation:rzm
【JavaScript】0~100%を2の累乗数で分断するぞう君【謎ツール】 - Little Strange Software
どうも！LSSです！！ …謎なものを作ってしまいました。 0~100%を2の累乗数で分断するぞう君 What's this? 何に使うん？ リズミカルなアニメーションを目指して このツールのコード 0~100%を2の累乗数で分断するぞう君 What's this? 最初、「2」が選択されたセレクトボックスと「0%,50%,100%」の文字が表示されています。 これは「0～100%を2つに分けた時の、さかい目となる%」を示しています。 両端である0%と100%、そしてぶったぎった地点である50%ですね。 この「2」を、4,8,16,32,64に変更する事ができ、変更すると自動的に%の文字もそれに応じたものに変わります。 %の数が8個以上になった場合は、8個ごとに改行が入ります。 何に使うん？ 例えばCSS。 keyframesやgradientで、%指定で均等に分断したくなる事がよくあります
【ツール？】いろは歌作成補助ツール - Little Strange Software
どうも！LSSです！！ 早速ですが、 little-strange.hatenablog.com で予告していた「いろは歌作成補助ツール」ができました！ いろは歌作成補助ツール 使い方 といっても… いろは歌作成補助ツール 使い方 いろは47文字＋「ん」の文字が書かれたコマが、いろは歌順に並んでいます。 それぞれが、マウスドラッグまたはスマホの指ドラッグで、緑色の盤面内で移動させる事ができます。 自由に並べかえて、オリジナルのいろは歌（？）を作るのに役立ててください！ （需要があるのかはなはだ謎ですがｗｗｗ） なお、移動させて置いた時に、コマと同じサイズの見えない枠に吸着する仕様となっています。 また、置こうとした場所に既に別のコマがあった場合、元々そこにあったコマは移動中のコマの移動前の位置に移動します。（入れ替わる事になります） といっても… 47+1文字を重複なく並べて、一連の意味の
簡易お絵描きアプリ、ブラウザごとの差異 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com では、公開前の動作検証にもだいぶ悩まされましたが、公開後にも色々と閲覧環境ごとの違いが見つかりました。 自分で確認できる部分は確認し、「使い方」のところに赤文字で「追記」として書き足しておきました^^ 情報提供してくださった皆様、誠にありがとうございます！ 結論から言うと、WindowsPCでもAndroidスマホでもiPhoneでも、絵を描いて保存までできますが、その「保存」がやたらと環境に左右されるようで^^; スマホの場合、「はてなアプリ」からだとダメですが、ChromeやSafariなどのブラウザからならOK。 さらに、iPhone＋Twitterで開いた場合（Twitterに「記事公開しました」をシェアしてるので、そこから来ていただいてる方はたいていその環境かも）、保存は動作するものの、そこから実
【駄文】激安PCと筆圧感知とお絵描きアプリとJavaScriptと。 - Little Strange Software
どうも！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円程度で売られているような電池を使うペンを使う事ができます（指でのタッチ操作もできます）。 ペンを使った時、筆圧感知もできるので「ペンとあわせても16000円以内に収まるお絵描きタブレット」としても使えるわけです^^ なんですが…Windowsに標準でついているお絵描
【CSS】でっかい下向き矢印、もうひとつのバリエーション - Little Strange Software
どうも！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-gradient(to top left,#ff000000 49.9%,#ff0000 50%) 100% 100%/50% 100px no-repeat,linear-gradient(#ff00
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
