サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
little-strange.hatenablog.com
どうも!LSSです!! の続編となります。 まだ、速度の方は改善されていないんですが^^;、とりあえず模様だけ増やしました。 前回同様の「ちぎり絵」の他、「ハート」「花びら」「星型」を選ぶ事ができます! このツールを用いて作成・ダウンロードされた画像はご自由にお使いいただけます^^ ちぎり絵風枠ジェネレータ やりたい事がたくさん出て来て追いつかないw ちぎり絵風枠ジェネレータ 幅 : 高さ : 内側の幅(比率) : % 内側の高さ(比率) : % 破片サイズ : 数 : 色味 : 破片の形状 : やりたい事がたくさん出て来て追いつかないw いただいた たくさんのコメントからもですし、自分で思いついたところも色々あります。 今回はとりあえず「模様 増やしてみました」Verですが、その増やした模様に角度をつけてみたいですね。 【ツール】アイキャッチ画像切り出しツール改! には「回転角」の設定が
どうも!LSSです!! よく見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせてCSS指定が変化します。 コード <div id="gamen">画面スクロールにあわせてCSS指定が変化します。</div> <script> document.addEventListener('scroll',fscr,false); function fscr(){ a=100-(Math.min(Math.max(gamen.getBoundingClientRect().top,200),600)-200)/4; gamen.style.backgroundImage='linear-gradient(90deg,#8
どうも!LSSです!! 昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。 ※1/25追記。PC(Windows+Chrome)とiPhone7で動作確認していましたが、Androidスマホで動作しなかったため、一部コード修正しました。 コード コード解説 HTML部分 コード解説 CSS部分 コード解説 スクリプト部分 あとがき コード ^^) _旦~~ <style> #stalker{ position:absolute; pointer-events: none; transition:linear 0.1s; } </style> <div id="stalker">^^) _旦~~</div> <p> <script> stkx=0;stky=0; pntx=0;pnty=0; stks=10;//速度調整
どうも!LSSです!! 2021年もまもなく終わる頃、またちょっと変わったものを作ってみました。 画面左下に表示されています コード 一部解説 あとがき 画面左下に表示されています 画面左下に、 ↑こんなものが表示されていると思います。 ページを開いた後、ちょっと画面をスクロールさせると画面左下定位置に出現します。 この黄緑が「現在このページをどこまでスクロールさせているか」を示しており、一番下までスクロールすると完全に黄緑の円になります。 また、自動スクロールスイッチを兼ねていて、クリックする毎に 「自動スクロールOFF」→「低速自動スクロール」→「高速自動スクロール」 が切り替わります。 コード <style> #scrlm{ position:fixed; bottom:50px; left:10px; border-radius:50%; width:50px; height:50
どうも!LSSです!! little-strange.hatenablog.com にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。 (いかに手をかけずに…と考えていたのにそれに反するかのようなw) これで完成ってことにしてもいいかな? キャラクター コード 問題点と解決について 命名発表! キャラクター 今回はアニメーションしません。 スイッチ迷路のキャラとして使うつもりですが、そこでもアニメーションはせずに、手足だけ交互のパターンを一歩ごとに切り替えようかと考えています。 コード <style> .test1,.test2,.test3,.test4{ display:inline-block; border:1px solid black; width:54px; height:54px; background-repeat:no-repeat; } .te
どうも!LSSです!! この記事で900記事めになります^^ 投稿日数でいうと890日め。 1000の大台が見えてきましたね。 といって 「駄文中の駄文」カテゴリ 読みふけってしまいました といって 特にネタを用意しているわけでもなかったりw 昨日、 little-strange.hatenablog.com という記事をあげましたが、その後、自分で自分のとあるカテゴリの記事を読みふけってしまいました。 「駄文中の駄文」カテゴリ little-strange.hatenablog.com 現時点で90記事(この記事で91記事め)となるこのカテゴリ。 ブログを書き続けていると、無意識のうちに「この記事は完成度が低くて出せない」と変なプライド?が芽生えてしまい、書けなくなってしまう恐れがあります。(いわゆる「スランプ」ってそういう事かなと思ってます。) このブログについては「自信があってもなく
どうも!LSSです!! ブロガーの皆様の中には、写真や絵などの画像をコンテンツのメインに据えられている方も多いかと思います。 普通に並べても素敵な写真、こんな見せ方はいかがでしょうか? ※2021/12/25追記!機能改善した【CSS/JavaScript】多角形フォトギャラリー改訂版もあります^^ 六角フォトギャラリー コード あとがき 六角フォトギャラリー 六枚の環状に並んだ画像のどれかをクリックすると、その画像がその下に大きく表示されます。 コード <style> #ph3d{ position:relative; transform-style:preserve-3d; width:150px; height:150px; left:75px; transition:1.5s; transform:rotateX(-10deg) rotateY(-10deg); } #ph3d i
どうも!LSSです!! 昨日の記事、 little-strange.hatenablog.com ですが、公開後に「実はAndroidスマホで動作しない」事が判明し、先ほどAndroidでも動作するように修正しました。 公開前に、PCとiPhoneで動作確認はしていたのですが、まさか「iPhoneで動作してAndroidで動作しない」とは^^; ※iPhoneのほうがなにかにつけてウルサイ、と思い込んでいますw 何故動作しないか、については心当たりがあったので、修正はさくっとでき、コード・コード解説も修正済です。 ちなみに変更点 要するに、「.touches[0]」をサボってました^^; あとがき ちなみに変更点 コード <style> #stalker{ position:absolute; pointer-events: none; transition:linear 0.1s; }
どうも!LSSです!! 先日、はてなブログ歴1000日&1000記事を突破しました。 それからちょっと日が経っていますが…今日、ブログ巡回しつつスターぽちぽちしていると…カラースターが増えているのに気がつきました! 7/11付け なんかメダル2つあるなーと思ってたら 7/11付け https://www.hatena.ne.jp/shop/items/received を確認すると、7/11付けで貰っていたようです。 (↑のリンクは、はてなログイン中の方は各自の受け取り履歴画面になると思います。) そして、かなりレアなスターもひとつきています! …これは、もったいなくて使えない可能性が極大w なんかメダル2つあるなーと思ってたら 片方は はてなブログ、もう一方は はてなフォトライフなんですね(今さらw)。 フォトライフのほうはまだ412日。 では、こちらもぼちぼち日数稼いでいくとしますか、
どうも!LSSです!! 今回はまたCSS小ネタです。 キラキラ背景 コード うち、背景デザインに関わる記述は2行 その他の指定について キラキラシールのようなものを目指したのですが… キラキラ背景 こういうキラキラの背景を考えてみました。 もっと色を増やしたり色々試みていたんですが…結局シンプルな方が美しい? コード <style> .kirakira{ width:300px; height:300px; background-image:repeating-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg); background-size:40px 40px; padding:0.6em; font-size:120%; font-weight:bold; } </style> <div class="kirakira"
どうも!LSSです!! スイッチ迷路、とりあえず一通り遊べるようになったので公開しちゃいます^^ 迷路データは新たに作りましたので、前回のスイッチ迷路をクリアした方も再び迷う事ができますw アナツくんのスイッチ迷路 遊び方 過去記事~ 他に考えていて未実装なアイデア エディットモード 迷路データ圧縮 アナツくんのスイッチ迷路 遊び方 迷路画面内をクリックすると、その方向に向かってキャラクター「アナツくん」が移動します。 迷路には黒い壁の他に、赤・青・黄色の壁と、赤・青・黄色のスイッチがあります。 「アナツくん」がスイッチのマスに入ると、迷路画面の下に 「○○のスイッチがあるぞ」と表示され、「押す」ボタンが現れます。 スイッチを押すと、そのスイッチの色と同じ色の壁が開き、通行可能になります。 (ただし、最後に押したスイッチの色の壁だけが開き、その他の壁は閉じて通行不可になります。) スイッチ
どうも!LSSです!! いやぁ、華麗に1000記事めをスルーしていましたwww 「え?じゃあ1000記事めはどれだったの??」と逆算すると、 little-strange.hatenablog.com ↑この記事だったんですね。 この分だと「1000日め」になるのは…今週木曜日かな? ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^ すぐに役立つ366日記念日事典 第4版 【上下巻】 作者:加瀬 清志 創元社 Amazon 人生で一番大事な 最初の1000日の食事――「妊娠」から「2歳」まで、「赤ちゃんの食事」完全BOOK 作者:クレア・ルウェリン,ヘイリー・サイラッド ダイヤモンド社 Amazon
どうも!LSSです! こないだ、 little-strange.hatenablog.com ↑の記事で効果音を作ったので、それをSoundPoolってのを使ってアプリ内で鳴らす方法について書きます! はじめに 今回の肝! コード全文はこんな感じになります ちょこっと解説 注意点! 疑問に思った事があったので、ちょっと実験してみました! MediaPlayerよりは面倒、でも… 追記:公開済みのゲームで、使用しています 参考書籍 はじめに 前回のメンドクサイです。 ※Lolipop(Android5.0)からの仕様変更でこういう書き方になったそうです。ネット上により詳しい解説がありますが、古い情報が残ってる場合もあるのでそこだけ要注意で。 それを乗り越えてしまえば、実際に鳴らす部分は1行で済みます! 素材の用意は、BGMと同様、resの下にrawディレクトリを作り、その中に入れておきます。
どうも!LSSです!! このブログで、 などの「最初は表示されていないけど、ユーザーアクションによって表示される隠し文字」ネタを、これまでもいくつかご紹介してきました。 今回の記事のものも、その一種と言えそうですが、ちょっと変わり種です^^ ちょっと言いにくい話なんですけど… コード ざっくりコード解説 あとがき ちょっと言いにくい話なんですけど… ちょっと、言いにくい話なんですけど、実は…ただこれだけの小ネタなんですよね。あえてぼかしておきますが、知りたい人はボカシ部分にマウスカーソルをあわせてみてください。 コード <style><!-- .txsd{ color:transparent; text-shadow:0px 0px 10px #000; transition:0.5s; } .txsd:hover{ text-shadow:0px 0px 0px #000; } --><
どうも!LSSです!! 4/5に退職してから、やや日があきましたが…ようやく仕事を始められそうです^^ 明後日月曜に、リモート業務用の端末と契約書を受け取り、請書はまた後日。 契約書に印鑑を押して端末を持って帰ると業務を始められる…というところまできました! いやぁ…やっと話がまとまりそうなところで、濃厚接触者になってしまったりとかありましたが^^;それもあって、こちらまで持ってきていただけるとの事。 色々と間に立ってくださった方にはご尽力いただきましたが…この借りは仕事で返すとしましょうか^^ それにしても…未だに離職票と健康保険の喪失証明書が届かないのですが、さすがに「大丈夫か?」と思って調べてみると、それなりに時間がかかるもののようですね。 ってなとこで、今回はこのへんで! 次回もまた、よろしくお願いします^^
今週のお題「赤いもの」 どうも!LSSです!! ちょっと使い勝手良さそうな?CSSネタを思いつきました。 赤いバッテン コード コード別例 あとがき 赤いバッテン ちょっと前に思いついたCSSネタを、今週のお題にも合うかも?と思い、お題に便乗公開してみます。 コード <span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);">赤いバッテンがのる言葉</span> ↑をコピーして、赤文字部分を書き換えて使えます。 例えば、 あいうえお<span style="background-image: linea
どうも!LSSです!! 実に…長かった。 長かったですが、ようやく「転職後の初振込」されました^^ ちなみに、前職の給与というのが「当月25日払い」となっていたので、4月初旬付で退職したLSSの給料は最後に振り込まれたのが3/25。(厳密には4月初旬分も発生していましたが、税金等の控除の方が大きくてマイナス) 貯えも退職金もハロワの失業給付もない状態でどうにか今日まで生き延びましたw (クレカ払いには頼りました^^;) 本日、振り込まれたのは前職の手取り2か月分を超える金額なので、金銭的に落ち着けそうです^^ ※年間の総額が決まっていて、支払われ方は月割りと期割りと一年後と+αが混在する、ややこしい支払われ方。例えば来月は今月より少ないですが、今月の金額×12よりも年間総額は大きい、といった具合。 といって、来年以降の事も考えないとなので散財するわけにも行かず。 始めたばかりの株(遊び感覚
どうも!LSSです!! 今回は「はてなブログ」の機能のひとつ「アクセス解析」についての記事になります! 知っている人は知っているけど、知らない人は知らない話を2つほど。 スマホのGoogleChromeで見た時のアクセス解析 スマホでPC版アクセス解析を確認する方法 まず右上の、点が3つ縦に並んでいるのをクリックします。 すると、こんなメニューが出てきます。 下のほうにある「PC版サイト」の横にあるチェックボックス□をタップ。 PC版アクセス解析にあるけど意外と知られていない「言及の一覧」 スマホのGoogleChromeで見た時のアクセス解析 スマホのGoogleChrome(ブラウザ)で、はてなブログにログイン。 「マイページ」の「ダッシュボード」からブログをタップ、そこに「アクセス解析」があります。 ↑こんな画面が出てきます。 アクセス数だけのシンプルな情報ですね。 ところがこの「ア
どうも!LSSです!! ちょっとまた謎な?ゲームを即興で作ってみました。 ナンバー☆ピッカー 遊び方 こういう、乱数で問題生成できるパズル 改善の余地 ナンバー☆ピッカー やり直す 遊び方 画面上にある数字の行から、全ての数字を取り除くゲームです。 画面上に「1」~「9」までの数字が並んだいくつかの行と、「next」で1つの数字を示した行があります。 「next」の数字は「次に取る数字」を示しています。 数字が並んだ行から「一番右」にある、「next」が示す数字をクリックで取る事ができます。 数字を取ると、「next」の数字は1づつカウントダウンされていき、1の次は9に戻ります。 どの行からも取れない状態になると「手詰まりです」と表示されます。 こういう、乱数で問題生成できるパズル この問題生成は、取っていく手順と逆に1→2→3…と積み上げていく(その際、どの行に積むかを乱数で選択)事で行
今週のお題「寿司」 どうも!LSSです!! 今日、スーパーに買い物に行った折、こんなのを見つけました。 1280円が640円! ただしスーパーのお寿司。 果たしてこれは高いのか安いのか??w 晩御飯たべた後でしたが…買って帰りました^^ お寿司はデザートです!w ってなとこで、はなはだ簡単ですが今回はこのへんで! 次回もまた、よろしくお願いします^^
どうも!LSSです!! little-strange.hatenablog.com little-strange.hatenablog.com と続けざまに虹色をテーマにしたCSSを書いていましたが、「虹色の枠線」を2種類、追加でさらに考えてみました^^ 虹色の枠線 追加1 虹色の枠線 追加2 なお、今回のこれは… 虹色の枠線 追加1 虹色の枠線 追加1 コード <div style="border: 5px solid; border-image: repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px) 5;">虹色の枠線
どうも!LSSです!! 今回は小ネタです。 たまたま、水玉 コード <div style="width: 300px; height: 200px; padding: 1em; border-radius: 25px; background-size: 30px 30px; background-color: #ddffdd; background-image: radial-gradient(circle 20px at 25% 25%,white 25%,transparent 30%),radial-gradient(circle 20px at 75% 75%,white 25%,transparent 30%);">たまたま、水玉</div> 水玉模様を作っている部分 background-size: 30px 30px; background-color: #ddffdd; b
どうも!LSSです!! 【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話 で、とりあえず直方体をCSSで描いてみました。 要領はなんとか分かったものの、サイズ変更時のtranslateZの値の指定が少々面倒です^^; という事で、CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました! 3D直方体コード生成ツール 使い方 貼り付けた後のコードの修正について あとがき 3D直方体コード生成ツール コード 使い方 表示サンプル 直方体の傾きを示す「X:-20deg Y:-20deg Z:0deg」という表示 X軸回転、Y軸回転、Z軸回転に対応した3つのスライダー 直方体のサイズを示す「幅:200px 高さ:100px 厚さ:50px」という表示 幅、高さ、厚
どうも!LSSです!! 朗報、と言うべきかどうなんだか? iOSのブラウザにあった、ある問題が解決していたようです。 3つのグラデーション コード 以前には iOS15.4で修正されたらしい 3つのグラデーション ↑「赤から黄色」に変化するグラデーションを3つ、置いてみました。 この3つが違うグラデーションに見える方はおられますか? ちなみに、LSSの環境では、「Windows+GoogleChrome」「Androidのはてなアプリ」「iPhoneのはてなアプリ」で「3つとも同じように」見えます。 コード <div style="background-color: #ffff00; background-image: linear-gradient(90deg,#ff0000,#ff000000);"> </div> <p> </p> <div style="background-col
どうも!LSSです!! ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 流星群をCSSで作ってみました。 コード <style> @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), repeating-linear-gradient(45deg,#000000 0px 132px,#00000000 133px 136px,#000000
今週のお題「夏物出し」 どうも!LSSです!! 今週の はてなブログのお題「夏物出し」、ですが…。 自分の場合、出すというより 転職を機に、ユニクロの感動ジャケットを購入していたのを、しまいましたw シャツ+スラックスという通勤スタイルになります。 …と、そうなると困るのが「ポケットの数が激減する」事ですね。 そこで昨日、百均を巡ってダイソーで小型のウエストポーチ(ベルトに通すタイプ)を購入。 そこにモバイルバッテリとWiFiルータ―を装備、スラックスのポケットには小銭入れやICOCA入りカード入れやハンカチなど。 シャツの胸ポケットにスマホ、という感じに落ち着きました^^ あと、あれがそろそろ必要になりそうかな THANKO ネッククーラーEvo 専用バッテリー同梱モデル TK-NEMB3 (ブラック) THANKO Amazon ↑ 自分が持ってるのとちょっとタイプが違いますが「ネック
コード どうも!LSSです!! 「ハートマーク背景コード生成ツール」を作ってみました。 使い方 その他のコード利用方法 あと一ケ月ほどでバレンタインデー 使い方 「ランダム設定」ボタン、 表示サンプル、 ハートの色1、ハートの色2、背景の色、ハートサイズ(比率)、繰り返しサイズ、 コード が並んでいます。 「ハートの色1、ハートの色2、背景の色、ハートサイズ(比率)、繰り返しサイズ」を調節する事で、「表示サンプル」が変化し、その状態のものを表示するためのコードが「コード」部分に出力されます。 (「ハートサイズ(比率)」は「繰り返しサイズ」の中でのハートのサイズ比です。) また、一番上の「ランダム設定」ボタンを押すと、「ハートの色1、ハートの色2、背景の色、ハートサイズ(比率)、繰り返しサイズ」がランダムに設定されます。 「ランダム設定」ボタンを何度か押して、好みの状態に近いものが出てきたら
今週のお題「試験の思い出」 どうも!LSSです!! 今回は、はてなブログお題記事です。 「試験の思い出」ですか…。 今年4回目の年男となるLSS。学生時代の試験の思い出を思い出そうにも、遠すぎる過去で、特に記憶に残るようなエピソードもないんですねw 高校時代に授業に全くついていけず、物理の小テストで0点を取った事がある、というのが思い出と言えば思い出w って、それは「試験結果の思い出」ですねw ここではなんとなく、約20年前に今の職場に入った時の思い出でも語ってみます。 前職を退職後、とりあえず派遣会社に登録 まず、派遣会社のスキルテストから で、派遣会社の営業さんと会社に向かう ところが… それから20年 前職を退職後、とりあえず派遣会社に登録 してみました。 前職を退職した際には「このまま、ここに通い続けるぐらいなら野垂れ死んだ方がマシだ!」ぐらいの気持ちで、次の就職先を考えないまま退
どうも!LSSです!! 自分が はてなブログ でこのブログを開設して2年ちょい、ですが、はてなブログさんは「11/7で10周年」を迎えられるそうですね。 特別お題キャンペーン お題は4つ、どれでも可 特別お題キャンペーン blog.hatenablog.com そして10周年記念に、特別お題キャンペーンが始まっています! 期間は10/14~11/24とちょっと長め。 でも忘れずに参加しておきたいところですね。 なんせ参加するだけでもれなくレッドスター10個が配布されます^^ …その他抽選でインク+万年筆がもらえるそうですが…30名。貰える気がしませんw っと。詳しくは公式の告知をご確認ください^^ お題は4つ、どれでも可 「10」にちなんだお題が4つ用意されていて、どれで書いてもレッドスター配布の対象になるとの事。 どれにするかな…期間はたっぷりあるので、のんびり考えますか(と言ってる間に
次のページ
このページを最初にブックマークしてみませんか?
『Little Strange Software』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く