どうも！LSSです！！ 今回はブラウザゲーム…なんですが、これをゲームと言っていいのやら、どうなのやらｗ まったく考える余地のない、「完全なる運ゲー」です。 ＡかＢか？x5 というものを作ってみました ＡかＢか？x5 下にある「Ａ」または「Ｂ」。 どちらかが正解でどちらかがハズレです。 直感でどちらかをクリックすると結果が出て、次の「Ａ」「Ｂ」が現れます。 ５回出題され、正解率と その正解率に辿り着く確率が表示されます。 どちらが正解か？は完全に運任せ。完全なる運ゲーです。 本日の貴方の『直観力』を測ってみましょう^^ というものを作ってみました 「プレイヤーによる選択」があるにも関わらず、正解かハズレかは完全に運。 ちなみに、ＡＢどちらが正解かはページを開いた時点でランダムで決められていますが、２種類×５回なのでパターン数でいうと32通り（2の5乗）。 「全て正解」あるいは「全てハズレ」
【はてなブログ】サイドバーに立体サイコロを配置しました！ - Little Strange Software
どうも！LSSです！！ このブログの、滅多に更新しないカテゴリのひとつに、「はてなブログサイドバーモジュール」というのがあります。 これまで、 little-strange.hatenablog.com little-strange.hatenablog.com の２記事書いていて、今回のが３記事め。 最初に設置した「サイコロ」を「立体サイコロ」に置き換えてみました^^ サイドバーの一番下に ちょっとだけ違うところ 方法はナイショ サイドバーの一番下に ↑こんな風なものを設置しました。 内容的には、このあいだの記事の little-strange.hatenablog.com とほぼ同じものとなります。 サイコロをクリックすると回転し、１～６のどれかの目で止まります。 ちょっとだけ違うところ 前の記事とちょっとだけ違うところとして「記事版は緑のスケルトンダイス」でしたが、今回サイドバーに置
どうも！LSSです！！ 先日、職場にて突然「全員、持ってる資格を報告してね」てな事がありました。 結構長く勤めていて初めての事でとまどいつつ^^;、とりあえず書類を見てみました。 情報処理技術者試験 さて、「持ってます」と言っていいものやら？ そうそう、情報処理技術者試験と言えば 情報処理技術者試験 資格ならなんでも、ではなくて、いくつかの資格名が並んでいて、そのほとんどが今の会社の業種にちなんだ専門的なもの（＝自分に縁のないもの）だったのですが、その中に、 「基本情報技術者試験」 「応用情報技術者試験」 というのがありました。 これが非常に引っかかる…というのも、自分はかつて（かれこれ30年近く前というはるかな昔）、専門学校在学中に、 「第二種 情報処理技術者試験」と 「第一種 情報処理技術者試験」 に合格していた、という経緯があります（ちなみに、一種のほうが上位資格） で、ググってみる
【CSS】雪というより…ほこり？ｗ【実験】 - Little Strange Software
どうも！LSSです！！ ※画面がアレですが、お使いの端末は（多分）正常ですｗ １２月もそろそろ中盤。 クリスマスや大晦日が近づいていると同時に、大掃除のシーズンでもありますね。 去年のこの時期、このブログではクリスマスに向けて、 little-strange.hatenablog.com という準備を経て、 little-strange.hatenablog.com で盛大に雪を降らせたりしたものでした。 今年もクリスマスにはなにか凝った装飾をやってみたいものですが…ちょっと準備的に、思いついた事をこの記事上で試してみます。 画面上に浮遊しています コード 仕組み 降ってはいないので、雪とは言えない… 画面上に浮遊しています 昨年のクリスマス時点ではまだ身についていなかった、LSS自身のCSS知識として、 preserve-3d による立体表現 pointer-events: none;
3 3 サイズ調整 どうも！LSSです！！ 以前公開したゲーム、 little-strange.hatenablog.com に「縦横それぞれの分割数」を変更できる機能をつけてみました。 遊び方 Special Option スライダー ファイルを選択 サイズ調整 惜しいところ 遊び方 元の一枚の画像を、縦３つ横３つの９分割したコマが８個あります。 ※元画像の一番右下に当たる部分が欠品となっています。 そしてコマの無い「空きマス」には、元画像がモノクロで薄暗く見えています。 「空きマスと縦か横に並ぶコマ」をクリックする事で、コマをスライドさせられます。 空きマスに見える元画像をヒントに、全てのコマを正しい位置に配置する事を目指すパズルゲームです。 Special Option 盤面の下に、 ２つのスライダー（初期値はどちらも３） ファイルを選択 サイズ調整 があります。 スライダー 縦・横
【ツール】簡易お絵描きアプリ【試作品＋】 - Little Strange Software
どうも！LSSです！！ 【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software に少し機能追加したバージョンです。 簡易お絵描きアプリ 使い方 試作品＋ゆえの謎仕様 ファイルとして保存、について現在判明している事 履歴機能の実装 簡易お絵描きアプリ 幅 : px 高 : px 使い方 グレーの格子模様の四角形がキャンバスです。 キャンバス上で、マウスの左ボタンを押しながらマウスを動かすか、スマホ・タブレット等のタッチ操作可能な端末では指またはペンで、線を描く事ができます。 タッチ操作の場合、筆圧によって線の太さを調整できます（筆圧感知対応端末の場合）。 キャンバスの↑にあるスライダー及び「-」「+」のボタンで、キャンバスの幅・高さを変更する事ができます。（ボタンは微調整用で、１ピクセル単位で変更できます。） キャンバスの↓にあるもののうち、一番最初にある
今週のお題「秋の歌」 どうも！LSSです！！ はてなブログ、今週のお題が「秋の歌」との事なんですが…ずっともやもやっと考えていました。 「何か、とっても秋らしいイメージの歌があったはずだけど…なんだっけ？」ってｗ 定番でいうと で、思い出しました！ この曲を聴きたいばかりに 定番でいうと 「ちいさい秋みつけた」や「赤とんぼ」あたりがパッと浮かびます。 歌謡曲にも秋を歌ったものは多数あります。 が、個人的にそれら以上に秋っぽい歌があったんだけどなぁ… で、思い出しました！ www.youtube.com 「元祖天才バカボン」の後期エンディングテーマ、「元祖天才バカボンの春」です！ …タイトルに「春」とついてるのに、全然春らしくない歌ｗ 曲調と、１番の歌い出しが「枯れ葉散る 白いテラスの午後三時」であるあたり、ですね。秋っぽいの。 ちなみに２番は「粉雪舞う…」だったりしますが^^; この曲を聴
【CSS】コピペで使える！アニメーションするボックス（枠）サンプル集【まとめ】 - Little Strange Software
どうも！LSSです！！ 以前、【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集という、それまでに作成したCSSサンプルのまとめ記事を書いていました。 気づけばそれから１年近く経ち、その間にもちょこちょこ作っていたので、その後に作ったものをまとめてみます！ …と言いつつ、見てみると結構作ってるものがバラバラで^^; 書き出すと「まとまりのないまとめ」になりそうだったので、様々なネタの中から 「アニメーションするボックス（枠）」 のまとめ記事とします^^ マウスカーソルに反応するタイプ カードをめくる その２ 光が斜めに横切るバー たたっ斬る！ マウスカーソルで枠線の太さが変わる演出 丸から四角に変形するボックス カーソルを乗せると動くグラデーションバー 勝手に動いてるタイプ カタカタ自己主張する見出し 背景多重アニメーション 鹿威し（ししおどし）のように揺れる見出し ２つの四
どうも！LSSです！！ JavaScriptによる筆圧感知のテストがてら、簡易ながらお絵描きアプリを作ってみました。 簡易お絵描きアプリ 使い方 コード イケてないところ だいぶ悩んだところ 簡易お絵描きアプリ 使い方 マウスドラッグ、またはタッチ（ペンでも指でも）で枠内に絵を描けます。 タッチ操作の場合、筆圧感知に対応しています（お使いの端末が対応していた場合）。 枠下のメニューは左から「色変更」「全て消す」「ファイルとして保存」です。 「全て消す」は描いた絵が消えますが、一応確認ダイアログが出ます。 「ファイルとして保存」をクリックすると、日付・時刻をファイル名としたpngファイルとしてお使いの端末に保存されます。 ※追記：動作確認報告。WindowsPC＋Chrome…問題無し。Androidスマホ＋Chrome…問題無し。iPhone7（iOS15.6.1）はSafariやChro
どうも！LSSです！！ 最近、魚べいにハマりつつあります。 三宮の魚べいなう この時間でも待ちなしで入れる、回転（しない）寿司ありがたい！— LSS (@LSS0324) 2021年12月2日 www.genkisushi.co.jp 今日は珍しく仕事帰りに行ってみました。 そもそも、三宮に回転寿司はあまり進出してきておらず、あっても何故か皿単価が少しお高め（位置的にやむを得ないんだろうなぁ）だったり。 そんな中で、三宮の東側に魚べいが出現！（回転しないけど） 何度か行ってみましたが、皿単価も普通に１００円皿メインで楽しめます^^（回転しないけど） なんといっても、回転寿司といえば昼食時や夕食時にはどこも激混みで入店待ちになるというイメージですが、まだ知られていないのか（？）夕食時に行っても待ち０で入れました！（回転しないけど） 面白いのが看板で、大きく「回転寿司」と書かれている…と見せか
【CSS】変わり種！アニメーションによる文字装飾 ３種 - Little Strange Software
どうも！LSSです！！ またまた？変わり種のCSSネタを３種、作ってみました。 ちかちかアンダーライン 影分身！ アニメーションマーカー 使い方 その他、テキスト装飾関連記事 ちかちかアンダーライン このように、文章の一部に時々アンダーラインがつきます。 コード <style><!-- @keyframes uwavea{ 0%{text-decoration-line:none;} 69%{text-decoration-line:none;} 70%{text-decoration-line:underline;} 79%{text-decoration-line:underline;} 80%{text-decoration-line:none;} 89%{text-decoration-line:none;} 90%{text-decoration-line:underline;}
【日記】はてなスターの仕様が急に変わりましたね - Little Strange Software
どうも！LSSです！！ はてなブロガーの皆様には、今さら記事にするまでもない話ですが…今日、はてなスターの仕様ががらっと変わりましたね！ staff.hatenablog.com 最初、その時読んでたブログの人がカスタマイズしたのかと思っちゃいましたｗ まだ変わったばかりで実感があまりないですが、表示されるまで待たされたり、場合によっては表示されなかったり、といった事が改善されるのかな？ …と、スターを押す際のアクションの変化やエフェクトの変化にまず目がいきますが…自分の場合、今回の仕様変更で「アイコン作成時に仕込んだ事」が大幅に変わってしまう変更となりましたｗ スターアイコン LSSのアイコン作成秘話 思えば、このアイコンもう10ヶ月ほどになるんですね スターアイコン スターを押すと、↓のように表示されます。 小さく表示されたものをスクショしたもので見づらいですが、そのまま拡大表示すると
どうも！LSSです！！ 2021年最後の記事となりました。 昨年末は、 little-strange.hatenablog.com １年を振り返った記事を書いていましたが、今年は…まぁいいかな、とｗ 一応、年に２回特別な記事を投稿するのが正月とクリスマスだったりしますが、そちらは little-strange.hatenablog.com little-strange.hatenablog.com ↑こんな感じでした。 ところで…２，３日前から、妹が姪（１歳４か月）を連れて帰ってきています^^ …帰ってきているのはいいのですが…人見知りがめっちゃ激しく、数か月ぶりに会った自分など覚えているはずもなく、ずっとママ（妹）にしがみついていますｗ （ばいばい、はしてくれます。とても速やかにｗ） とりあえず、おじさんとしては…ちょっとでも気を引くべく、タブレットで遊べる「ゲーム未満のなにか」を「また
【CSS】桜の花、開く季節に…【枠装飾】 - Little Strange Software
どうも！LSSです！！ 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル 桜の花、開く季節に… コード <style> .hnbr{ border-radius:10px; padding:10px; border:6px groove #ffcccc; background-image: radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00) ,repeating-conic-gradient(from 40deg at 90% 50%,#ffcccc,#fff0f0 30deg 42deg,#ffcccc 72deg); color:#ffffff; font-size:27
What computer and software is used by the Falcon 9?
In this AMA by the SpaceX software development team, they wrote: We've been getting a lot of questions about how C#/MVC/etc have to do with rockets. They don't. About their development they said: The Flight Software team is about 35 people. We write all the code for Falcon 9, Grasshopper, and Dragon applications; and do the core platform work, also on those vehicles; we also write simulation softw
どうも！LSSです！！ 日記、としながらも、昨日の話なんですけどね。 10/10 スポーツの日、朝10：50頃。 元町駅近くの交差点で、南から北に向かうべく、信号待ちしていました。 南北の信号が赤なので、東西の信号はもちろん青。（東→西への一方通行） 多くの車やバイクが走り抜ける中で、目を疑うような光景が！ 「目の前を仮面ライダーが走り過ぎていきました」 走り過ぎていったので、一瞬の事でしたが、マスクも背中もしっかり仮面ライダーで、バイクはサイクロン号ではなかったですが…白昼夢を見ているような出来事でしたｗ まぁ、稀には、なんでもない街なかでコスプレをされている方を見かける事は無くもないですし、かくいう自分も数年前、コスプレじゃないですがやたらバカでかい傘をさして歩いて、呼び込みの人たちから「おっきい傘のお兄さ～ん」と声をかけられた事もあったりはしました。 が、仮面ライダーの姿でバイクに乗
【JavaScript】スタミナシステムを作ってみました - Little Strange Software
どうも！LSSです！！ スマホゲームによくある「スタミナ」というシステム。（名称はゲームによって違ったりしますが） ゲームを起動していても、していなくても、時間経過で徐々に数値が貯まっていって、それを消費してゲームを回せるアレ。 作れる自信だけありましたが、今回それを試しに作ってみました。 スタミナシステム コード コード解説 あとがき スタミナシステム 「スタート！」ボタンを押すと開始します。 初めて開始した場合は、初期値として「1000」のポイントが与えられます。 ポイントの上限は5000。 それから３分ごとにポイントが１増えます。 ３分で１ポイントなので１時間で２０、１日で４８０ポイントになります。 …ためたところで使い途を用意していないんですけどねｗ コード <p><input id="gsbtn" type="button" value="スタート！" /></p> <div i
【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%;
【CSS】border-radiusとborder-imageは併用不可、ですが、強引になんとかしてみました。 - Little Strange Software
どうも！LSSです！！ 【CSS】虹色の枠線、もう２種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹色の枠線」を角丸にする方法を試してみました！ 虹色の角丸枠線 解説 border-box、padding-box、content-box あとがき 虹色の角丸枠線 虹色の枠線 角丸１ コード <div
Introducing AWS CodeArtifact: A fully managed software artifact repository service
AWS CodeArtifact is a fully managed software artifact repository service that makes it easy for organizations of any size to securely store, publish, and share packages used in their software development process. CodeArtifact eliminates the need for you to set up, operate, and scale the infrastructure required for artifact management so you can focus on software development. With CodeArtifact, you
どうも！LSSです！！ 今回はCSS小ネタです。 傍点のサンプル text-emphasis 傍点のサンプル こんな風に、目立たせたい部分の上部に点をつけられます！（dot） こんな風に、目立たせたい部分の上部に点をつけられます！（circle） こんな風に、目立たせたい部分の上部に点をつけられます！（double-circle） こんな風に、目立たせたい部分の上部に点をつけられます！（triangle） こんな風に、目立たせたい部分の上部に点をつけられます！（sesame） こんな風に、目立たせたい部分の上部に点をつけられます！（'★'） コード <p>こんな風に、<span style="text-emphasis: dot filled black; -webkit-text-emphasis: dot filled black;">目立たせたい部分</span>の上部に点をつけられ
【CSS】グラデーション文字を作ってみました！ - Little Strange Software
どうも！LSSです！！ 結構前に、「CSSでグラデーションする文字」を「下書き供養祭」としてネタにしました。 あの時はまだ「どうしてそうなるのか」イマイチ分からないままだったので「下書き供養」としましたが、ちょっと分かった気がしたので、再度ネタにしてみます！ ↓こんなのを作ってみました。 Little Strange Software コード コード解説 文字の基本設定部分 グラデーションを「背景として」 指定する部分 大技！「背景を文字の形に繰り抜く」部分 改変例 コード <span style="font-size: 50px; font-weight: bold; color: lightblue; background-color: blue; background-image: linear-gradient(180deg,transparent 20%,#ffffffe0 60
リバーシ（オセロ）がちょっとだけ強くなるかも知れない話 - Little Strange Software
どうも！LSSです！！ ちょっとCSSやゲーム制作の話が続いたので、今回は息抜き記事ですｗ 「オセロ」ってゲーム、ありますね。 あの８×８の盤面に、片面白・片面黒のコマを交互に置いて、挟む事でひっくり返し、最終的に数が多い方が勝ち、というゲーム。 「オセロ」という名称はツクダオリジナルの商標なので、差支えがある場合「リバーシ」って名前で同ルールのゲームだったりもします。 今回はそのリバーシがちょっとだけ強くなるかも知れない話です^^ とにかく角取り！から一歩前進 角をとるために意識すべき事 角以前に狙うべきマス 避けるべきマス つまり… 本当に強い人、深く研究してる人の世界は知りませんが とにかく角取り！から一歩前進 ８×８の盤面のうち、四隅にあたる角は、一度コマが置かれると決してひっくり返される事がない。 また、その隅から連続して置かれた、辺にあたる部分も同様にひっくり返される事がない安
【CSSサンプル】亀の甲羅のような模様 - Little Strange Software
どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。 実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。 コード <style> .turtle{ padding:0.6em; background: repeating-conic-gradient(from 40deg at 50% 75%,
はじめてのBillGレビューのこと - The Joel on Software Translation Project
Joel Spolsky / 青木靖 訳 2006年6月16日 金曜 かつてExcelは名もないまったく無様なプログラミング言語を持っていた。私たちはそれを「Excelマクロ」と呼んでいた。はなはだ機能不全なプログラミング言語で、変数もなく(値はワークシートのセルに入れる必要があった)、サブルーチンもなく、つまるところ、ほとんど保守不能なものだった。「Goto」みたいな先進的な機能も持っていたが、ラベルは実質不可視だった。 それがまっとうなものに見えていた唯一の理由は、Lotusのマクロに比べたらずっとましということだった。Lotusマクロはワークシートのセルに長々と入れられたキーストロークの並び以外の何物でもなかった。 1991年6月17日、私はMicrosoftのExcelチームで働きはじめた。私の肩書きは「プログラムマネージャ」だった。私にはこのマクロの問題を解決する方法を作り出すこ
GitHub - dora-team/fourkeys: Platform for monitoring the four key software delivery metrics of software delivery
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ごくごくお手軽に記事の一部を隠し、クリックで表示する方法【JavaScript】 - Little Strange Software
どうも！LSSです！！ 昨日の記事、自作小説：「嘘（長文注意）」の中で使用していた、 記事中のリンクをクリックすると、 こんな風に続きが出てくる仕掛け。 以前に記事として公開した、【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】や、 ブログで使える（かも知れない？）小ネタでも実現は可能ですが、昨日のやつのように中身の量が増えてくるとちょっと大変ですよね^^; 実は昨日の記事では、より簡略化した方法を使って実現していました。 今回はそのタネ明かし記事となります。 まずは、普通に記事を書きます 書き終えたら「HTML編集」に切り替えます この時点でもう隠されています！ 再度HTML編集画面を開きます aタグの中身を軽く解説します まとめ！（2020/4/5追記） まずは、普通に記事を書きます 隠したり出したりする部分も、普通に表示した後の状態
どうも！LSSです！！ little-strange.hatenablog.com にブックマークコメントで、 3Dみたい。これ、大量にランダムに跳ねてたら可愛いかも。めんどくさい？笑 css conasaji 2022/06/04 23:15 といただきました^^ さじ様、ありがとうございます！ 大量に跳ねてると、楽しくなりそうですね！ ランダムに、の部分については、「横移動」「縦移動」「サイズ変更」のアニメーションの「再生にかかる時間」をずらす事で周期をずれさせてランダムっぽく見せていました。 ので、「大量にランダムに」という感じにしようとすると単一のHTML要素にbackgroundをカンマ区切りで並べる方式ではなく、HTML要素自体を大量に用意するのが良さそうです。 コードは流用できる部分が多いものの、構造から変わってくるので、試しに作ってみました！（汎用性については…謎ｗ） ボー
どうも！LSSです！！ 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software から色々試しているCSSの立体表現ですが、立体を見ているとつい連想しちゃうのが、 little-strange.hatenablog.com マインクラフトです。 CSSでマインクラフトが作れる、というわけではありませんが、ごくごく小規模な、それっぽいブロックを並べる事ぐらいならできるかな？と試みてみました。 ブロック遊び コード JavaScriptを使用していますが あとがき ブロック遊び コード <style> @keyframes kaiten{ 0%,30%{transform:rotateX(-10deg) rotateY(-10deg);} 100%{transform:rotateX(-10deg) rotateY(350deg);} }
どうも！LSSです！！ ZHGONG 組み立てブロック玩具を構築する反重力デバイス、クリエイティブ・テンセグリティ彫刻小説物理学のバランスDIYおもちゃのレンガKinderrätsel 6歳以上でご利用ください,グレー (Color : Gray) ZHGONG Amazon 最近、↑こんなのを購入してみました。（と、リンク貼ってはいますが少々不安も…。） 無事組み立ても完了し…ブロックひとつ余りましたがｗ、ちゃんと自立していて見ていて不思議な感覚に囚われます^^ …ところで、出品者名がいかにもアルファベットをランダムに並べましたな感じだとは思っていたのですが、はてなブログの編集サイドバーから商品名を検索すると… ↑こんな感じで出てきて、更にちょっと不安になったりｗ …Amazon出品者にも色々あるので、ポチる時には気をつけたいものですね。（個人情報取得のために安いものを乱雑に生成したアカ
【CSS/JavaScript】多角形フォトギャラリー改訂版 - Little Strange Software
どうも！LSSです！！ ちと難のあるまま公開に至った little-strange.hatenablog.com ですが、早くも改訂版を作っちゃいました。 多角形フォトギャラリー改訂版 コード 使い方 改訂内容 めっちゃ画像を増やしてみると…？ 多角形フォトギャラリー改訂版 コード <style> #ph3d{ position:relative; transform-style:preserve-3d; height:150px; left:75px; transition:1.5s; transform:rotateX(-10deg) rotateY(-10deg); } #ph3d img{ position:absolute; box-sizing:border-box; width:100%; } </style> <div id="ph3d"></div> <p><img id
【JavaScript】おみくじを作ってみる【入門向け記事】 - Little Strange Software
どうも！LSSです！！ 今回は、JavaScriptをちょっとやってみたい人向けに、 「なるべく簡単なコードでちょっと遊べる」 ものとして「おみくじ」を作り、その解説をしてみたいと思います^^ おみくじ コード コード詳細解説 <div id="gamen"></div> kuji=["大吉","吉","末吉","凶","大凶"]; function gamen_w(){ a=Math.floor(Math.random()*kuji.length); gamen.innerHTML=kuji[a]; <a href="#" onclick="gamen_w();return false;">おみくじを引く</a> 実行の流れ コピペで使用する際の改変ポイント おみくじ おみくじを引く コード <div id="gamen"></div> <script> kuji=[ "大吉", "吉"
どうも！LSSです！ …っといきなりの袋文字を使ってみましたｗ 今回は、こういう「袋文字」を実現するコードを作れるツールを作ってみました！ 使い方 色について 注意点 使い方 各項目を設定すると、表示サンプルとコード部分が設定に応じたものに変わります^^ 「コード」の内容をコピーして、はてなブログの「HTML編集」 画面で貼り付けると、その記事内に表示サンプルと同じ袋文字が出現しますよ！ 色について 袋部分の色と、文字の色、の２か所、色を設定する項目があります。 ここに入力する内容は、 red blue yellow などの色名でも、 hsl(0,100%,50%) みたいなHSL形式でも、 #FF0000 みたいなRGB形式でも 、どれでもOKです！ 色コード探しについては、HSL版カラーパレット や、4クリックRGBカラーパレットで見つける事ができます。 注意点 袋の幅、ぼかし、フォン
どうも！LSSです！！ いよいよ12/31、今は23:35です。 こんな時間から記事を書き始めてみますｗ 色々ありましたねぇ 2022年、振り返ってみると色々な事がありました。 まず転職。幸いにして好条件で１年契約の業務委託として契約を結んでくださった企業があり、とっても助かりました。 次に、前述の転職と関連しますが株式投資の開始。 これがなかなかに面白い、ただし勝ててはいませんがｗ 未だ知らない事が多々あって、新たな発見がよくあります。 次に、このブログの毎日更新の終了。 時間の使い方を見直したくての決断でしたが、見直しについてはまだまだな感じです。 あと、父が亡くなったというのもありました。 それから、2022年…というのからは少し離れるかもですが、嫁に行った妹が第二子を妊娠中で、今かなりおなかが大きくなっています。 上の子は女の子（２歳半）ですが、次も女の子のようで、こちらは来年誕生
【CSS】菱餅の区切り線【ギリギリの時節ネタ】 - Little Strange Software
どうも！LSSです！！ 今日は3/2。明日は ひなまつり ですね^^ それにちなんだ記事を用意されている方もおられるかと思いますが、このギリギリのタイミングで、ひなまつりネタのCSSです！ 菱餅の区切り線 コード ひなまつり要素のうちで、CSSネタにしやすいのは… 菱餅の区切り線 コード <style> .hishimochi{ height:45px; background-image: conic-gradient(from 120deg at 50% 66%,#ff8888 120deg,#ff888800 120deg) ,conic-gradient(from 300deg at 50% 29%,#ff8888 120deg,#ff888800 120deg) ,conic-gradient(from 300deg at 50% 31%,#ffcccc 120deg,#ffccc
【JavaScript】落ち物パズル制作？ その4.5【コードと部分的な解説】 - Little Strange Software
どうも！LSSです！！ 作り始めてから一週間ほどで、ひとまずゲームとして遊べる形になりました^^ 今回はその時に省略したコードの紹介と部分的な解説になります。 ※つまり、わけわからん事を書きますｗｗｗ コード全文 functionの役割 このコードで使っている関数とその役割 function tmc() function tms() function rakka() function gamen_i() function gamen_w() function kmv() function kminit() function kensa() 消し判定の一部を書き換えるだけで別ルールが実現 コード全文 <style><!-- #gamen{ position:relative; background-color: lightblue; background-image:radial-gradi
どうも！LSSです！！ 昨日、作りかけ状態で晒していた１５パズル、完成版です^^ 遊び方 攻略のヒント 以下、制作雑記 遊び方 ４×４の１６マスの上に、１~１５の数字が書かれた１５個のコマがあります。 一か所だけある空きマスに向って、縦か横に並んでいるコマをクリックする事でスライドできます。 スライドを繰り返し、１５個のマスを のように並べ替えするとクリアです！ 攻略のヒント まずは最上段を１２３４と並べる事を目指します。 その際に、例えば こんなカタチであっても１~４の並びを作れてしまえば、このカタマリを意識しながらスライドしていく事で、本来の位置まで運ぶ事ができます。 そうして９~１２の列まで作った最終局面で、１３~１５が上手く並んでいなかった場合。 ↑こんな場合、ですね。 ↑のように、いったん９~１２を「並びを維持したまま」左下２×２のマスに移し、右下の２×２のスペースに１３~１５と
どうも！LSSです！！ 今回はまた、CSSのkeyframesアニメーションで遊んでみました。 瞬く星空 コード 星が瞬く仕組み というネタを考えたのですが 瞬く星空 瞬く星空 コード <style> @keyframes twstara{ 0%{background-position:0px 0px,0px 0px,0px 0px;} 100%{background-position:0px 0px,0px 0px,0px 300px;} } .twstar{ height:300px; background-image: repeating-linear-gradient(45deg,black 0px 11px,transparent 13px,black 15px 30px), repeating-linear-gradient(135deg,black 0px 11px,tran
【CSS+SVG】枠装飾、border-imageによるバクダン２種と雲型 - Little Strange Software
どうも！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その１ バクダン その２ 雲型の枠 その４ その他の調整について あとがき バクダン その１ バクダン その１ ちなみに、このトゲの数は幅・高さに応じて変化します。 サイズによっては稀に変なスキマができてしまう事も？？ コード <style><!-- .bakudan1{ border:30px solid transparent; border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%
どうも！LSSです！！ 最近はサイコロネタ多めでしたが、またサイコロの話。 自分はめっきりTV見なくなったのですが、以前お昼時に「サイコロの各面に話題が書かれていて、出た目に従ってゲストにその話をさせる番組」がありましたね。 今どうなってるんだろう？とググってみたら、 ja.wikipedia.org これでした。 えーと…さすがに終了していましたね。 結構な長寿番組だったようで。 【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software からのCSSでの３Dについては、フォトギャラリーへの転用とかも考えているところですが、ブログ的には「話を６つ用意しておいて、サイコロの出た目に応じた内容が表示される」なんて仕掛け記事も面白いかも？ とか思ったりする今日この頃です。 １つの記事に話を６つ用意する必要があるのがしんどいかもですが…ってその
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【完全なる運ゲー】ＡかＢか？x5 - Little Strange Software
情報処理技術者試験 - Little Strange Software
【ゲーム】スライドパズル - Little Strange Software
今週のお題「秋の歌」 - Little Strange Software
【ツール】簡易お絵描きアプリ【試作品】 - Little Strange Software
魚べい 神戸中央区役所東店 - Little Strange Software
ゲーム未満のなにか - Little Strange Software
【日記】仮面ライダーに会った日 - Little Strange Software
【CSS】傍点 - Little Strange Software
【CSS】ボール乱舞【小ネタ】 - Little Strange Software
【CSS】ブロック遊び【実験】 - Little Strange Software
最近のお買い物 - Little Strange Software
袋文字作成ツール！ - Little Strange Software
Little Strange Software
【完成版】１５パズル、作りました！！ - Little Strange Software
【CSS】瞬く星空 - Little Strange Software
サイコロで思い出すのは… - Little Strange Software