LittleStrangeSoftware

今週のお題「最近洗ったもの」

今週のお題「最近洗ったもの」 どうも！LSSです！！ 「最近洗ったもの」というお題ですが…これから洗うつもりのものについて書きます。 ずばり「枕カバー」です！ ながらく枕カバーを洗う事なく、複数の枕をローテーションで使ったりしていましたが、やはりこの季節さすがに限界かな…と。 と、先日考えたのですが…さて、いざ洗おうとすると「ジッパーが降りない」という問題に直面しました！w さて、どうしたものか…ネットで調べてみると、ジッパー専用の潤滑剤があってそれを使う案と、ペンチで引っ張る案がありました。 どちらも手持ちがなかったので、今日になって100均に行った際にペンチを購入。 こうした工具も100円…

2022/07/31 23:44

【おまけ】疑似3D、再生時間をずらすと…？

どうも！LSSです！！ 【CSS】疑似3D【実験】 - Little Strange Software で、楕円（っぽい）動きで3D（っぽい）ものを表現してみました。 記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き＋サイズ変更」を指定する秒数を変えてみたらどうなるか？を試してみます。 2sと1.8s 2sと1s 2sと3s 2sと6s あとがき 2sと1.8s @keyframes d3dax{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyf…

2022/07/30 23:55

【CSS】疑似3D【実験】

どうも！LSSです！！ CSSには3Dを表現するためのプロパティが用意されています。 参考：【CSS】ブロック遊び【実験】 - Little Strange Software が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。 一方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、 これも3D回転させると平面の円である事が露呈してしまいます。 今回は実験的に「CSSの3D表現を使わず、疑似的に3Dっぽい動きを表現」する事に挑戦してみました。 疑似3D コード 遅延の値を変更してみるのも面白いかも 疑似3D @keyframes d3dax{…

2022/07/29 23:51

復習ウルトラマン

どうも！LSSです！！ 最近、初代ウルトラマンのブルーレイBOXを購入しました。（輸入盤で安かったのもあってw） ウルトラマン コンプリート ブルーレイ [Blu-ray] (輸入版) アーティスト:Ultraman Akihiko Hirata Amazon シン・ウルトラマンを2回観に行きましたが、まだまだ気づいていないポイントがありそう…と復習の意味でぼちぼち観ています^^ なお、自分のPCにはブルーレイドライブをつけていたのですが…これが何故かブルーレイディスクを認識できず（？）、外付けのブルーレイドライブも購入。 BUFFALO USB3.2(Gen1)/3.0 ブルーレイドライブ …

2022/07/28 23:54

【CSS】流星群

どうも！LSSです！！ ふと思いついて、CSSで流星群を作ってみました。 流星群 コード あとがき 流星群 @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), repeatin…

2022/07/27 23:55

【CSS】落下アニメーション【keyframesの復習】

どうも！LSSです！！ このブログで、keyframesとanimationを使ったCSSアニメーションを色々試みてきました。 とっつきにくいながらも、分かってくると面白いkeyframesですが、LSSだけ分かっていても他の方が置いてけぼりだと「コードを少し変えて使いたい」時などに手をつけられない、というのがありそうです。 今回はこれまでに自分が理解してきたkeyframesアニメーションを、keyframes定義の内容に絞って、簡単なものから徐々に手を加えていく様子を記事にしてみました。 その1 シンプルに落下 その2 着地後静止 その3 バウンド その4 ちょっとだけリアルに あとがき …

2022/07/26 23:26

【短文日記】ちょっとCSSアニメーションについて書こうと思ったら…

どうも！LSSです！！ ちょっとCSSアニメーションについて書こうと思ったら…書き始めたのが遅くて、とても日が変わるまでに書ききれないな…と思ったのが23:45。 ちなみに書き始めたのが23時頃なので、動きだすのが遅すぎましたね^^;;; というわけで、後日にまわします。 …そろそろ本気で、毎日更新に無理が出てきたようなw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

2022/07/25 23:50

銀河放浪

今週のお題「SFといえば」 どうも！LSSです！！ 今週のお題「SFといえば」 - Little Strange Software では昔話とSFについて強引に書いていましたが、今回は普通にお気に入りSF作品の話。 と言っても、数多くあるのですが、中でも特に好きなのを挙げるとすると… 銀河放浪 吾妻ひでお先生の「銀河放浪」を挙げます！ 銀河放浪 1 (MAG COMICS) 作者:吾妻 ひでお マガジンハウス Amazon 銀河放浪 2 プリンセスミコ・サーガ (MAG COMICS) 作者:吾妻 ひでお マガジンハウス Amazon 全2巻のコミックです。 吾妻先生は相当な読書家で、特に若い…

2022/07/24 23:48

【投資初心者】目標

どうも！LSSです！！ 転職を機に、LINE証券で株式投資を始めました。 転職後にしている仕事が「収入は爆増、ただし1年契約」のため、「前年と同レベルの支出で生活していればかなり余裕が出るはず。その後に備えてなんらかの手を打つか」って感じで始めたのです。 入金履歴 現在の成果 それに、単純に原資が増えたとて 入金履歴 4/11 2843円（キャンペーンで貰い物。原資として考えて良いと思います。） 4/13 10000円入金 5/23 30000円入金 6/1 150000円入金 仕事の報酬ががっつり入ってくるのがまだ先（一度目の波が今月末）のため、現時点ではこの程度ですが、最終的に「どれだけ入…

2022/07/23 23:44

今週のお題「SFといえば」

今週のお題「SFといえば」 どうも！LSSです！！ 今週のお題ですが、まず記事編集画面に出てきたのが「古今東西の「SF」を語りませんか？」この「古今東西」にまず目が行き、まっさきに連想したのは…「竹取物語」ですね。 SFの概念が無かった時代の、不思議を含んだおとぎ話のひとつでしたが、これほどもろに「宇宙人」が出てくる話もなかなかないかと。 「不思議を含んだおとぎ話」でいうと、他に妖怪・化け猫の話や隠れ里、異種婚姻譚など様々ありますが…さて、どこからがSFかな？って考え始めると、SFってなんだろう、というところがよく分からなくなってきましたw SFの概念のない時代に作られた話なので、「竹取物語」…

2022/07/22 23:50

朝から通信障害…予備回線でなんとか

どうも！LSSです！！ 朝からネットに繋がらず、参りました^^; やむを得ず、PCとモバイルWiFi（Wimax）をUSBで接続。 以前から、通信費かけすぎかな？って思ったりしていましたが、ネットが無いと無理な人にはこうした時の緊急対応用としても使えるので命綱として必要かもですねw そのモバイルWiFi、忘れた頃に「新機種に交換」の案内が来ます。 USBケーブルで繋げば、PCがWiFi非対応・ドングルも差してない状態でも使えたはず…が使えなかったのに少し焦ったりもしましたが、モバイルWiFi端末をよく見ると「USBテザリング」の切り替え項目があり、それがOFFになっていたんですね。 それをON…

2022/07/21 23:39

【謎CSS】なんとも言えない色

どうも！LSSです！！ 当ブログでは、「HTMLなど カテゴリー」で様々なCSSアイデアを書いてきました。 「どういう表現に使えるか」が明確なものが、使用するのをオススメしやすくて望ましいのですが、「とりあえず作っては見たけど…何に使えるんだ？コレ」とお蔵入りする事も多々あります。 また、最近では自分でイマイチ使い途が思いつかないネタでも、うまくアレンジして試していただいている読者の方もおられ、それに甘えている自分もいますw …という前置きで、また実験的によく分からないものが出来てしまいました。 なんとも言えない色 コード 3つのグラデーションを重ねています 使うとしたら…何？ なんとも言えな…

2022/07/20 23:54

【小ネタ】スマホで表示中のWebページのソース表示

どうも！LSSです！！ ※追記：今回記載する方法は、Androidスマホ上のChromeに限った話で、iphoneではできないようです^^; 最近、出先でもスマホで見ているWebページのソースを確認したくなる場面が増えてきました。（他の方がLSSのコードを使ってくださっていて、うまく動作していない時など） PC上のGoogleChromeなら、右クリックで出てくるメニューから「ページのソースを表示」で見る事ができますが、出先でスマホしかなかったら？ まず、スマホ版ChromeでWebページを開き、アドレス欄をタップします。 するとアドレス欄が空白になってしまいますが、ちょい下の右端にあるペンの…

2022/07/19 23:51

【CSS小ネタ】透過波紋を見出しに応用するコード

どうも！LSSです！！ little-strange.hatenablog.com に使用した、「h2見出しを透過波紋にするコード」を公開します。 コード と、なにげなく仕込んだコードを晒してみましたw コード <style>@keyframes trwavea{0%{background-size:100% 100%,100% 100%;}30%,100%{background-size:2000% 2000%,100% 100%;}}article h2{background-image:radial-gradient(farthest-side at 25% 75%,#8888ff 5%…

2022/07/18 23:57

モッキンバード、色々

どうも！LSSです！！ つい先日、おかえりモッキンバードという記事にて、7月7日に移転オープンした喫茶店の記事を書きました。 調査漏れの事項があったため、「まぁまたそのうち次回行った時に確認しよう」と思っていたのですが…思いのほか、そのタイミングが早くやってきましたw というのも、本日、高校時代からの友人から連絡があり、神戸に帰ってくるとの事で「じゃあ昼飯でも」という話になったんですね。 お昼はLSSが良く行くラーメン屋さんに案内する事にして（常連にトッピング無料サービス有、同伴者もOK）、そこからモッキンバードにつきあってもらいました。 調査結果報告 もうひとつのモッキンバード 他に、帰宅後…

2022/07/17 23:40

【CSS】透過波紋、中心位置変更【小ネタ】

どうも！LSSです！！ 今回は、 little-strange.hatenablog.com のコードアレンジ、という小ネタです。 透過波紋、中心位置変更 コード 元コードには無かった「at」指定を追加しています 0か50か100じゃないと合わないのでは？って 透過波紋、中心位置変更 @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 95%,100%{background-size:2000% 2000%,100% 100%;} } .trwave{ height:210px; background-image: radi…

2022/07/16 23:40

おかえりモッキンバード

どうも！LSSです！！ 5月の終わり頃、こんな記事を投稿していました。 little-strange.hatenablog.com サンパル自体が停止する前に、多くの店が撤退していたのですが、中でも結構ギリギリまで残っていて、お気に入りのメニューがあった喫茶店、モッキンバード！ お気に入りのチョコパ提供店が…。移転してもメニューと属性が変わらないといいな。 pic.twitter.com/q0rbwunQBh— LSS (@LSS0324) 2022年5月30日 「7月初旬に移転オープン」と告知されていました。 場所・ビル名まで明記されているので、しっかりと準備されていた事と思います。 で、「…

2022/07/15 23:23

【CSS】水滴落下、からの透過波紋

どうも！LSSです！！ little-strange.hatenablog.com に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。 サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。 水滴落下、からの透過波紋 コード コード改変の流れ あとがき おまけ：波紋の色変更 水滴落下、からの透過波紋 @keyframes trwavea{ 0%{background-size:20px 10px,100% 100%,100% 100%;} 95%,100%{background-size:20px 30px,2000% 2000%,100% …

2022/07/14 23:36

【CSS】（トリッキーな方法で）透過波紋！

どうも！LSSです！！ 以前、 【CSS】水面の波紋アニメーション - Little Strange Software 【CSS】音波攻撃！【水面の波紋アレンジ】 - Little Strange Software と、波紋アニメーションCSSを2種類、作ってみました。 どちらも、輪がだんだん大きくなり、最後は枠外に出ていくもので、その後の波がどうなったのかは誰も知らない…というものでした。 その波紋を「枠の中で完結させたい」「ただし、パッと消えるような事にはしたくない」と思った場合、「徐々に透過していく」という表現が考えられます。 ただ…そもそもこのアニメーション、「radial-gradi…

2022/07/13 23:39

【日記】プラチナ市民特典きました！

どうも！LSSです！！ 先日、はてなブログ歴1000日＆1000記事を突破しました。 それからちょっと日が経っていますが…今日、ブログ巡回しつつスターぽちぽちしていると…カラースターが増えているのに気がつきました！ 7/11付け なんかメダル2つあるなーと思ってたら 7/11付け https://www.hatena.ne.jp/shop/items/received を確認すると、7/11付けで貰っていたようです。（↑のリンクは、はてなログイン中の方は各自の受け取り履歴画面になると思います。） そして、かなりレアなスターもひとつきています！ …これは、もったいなくて使えない可能性が極大w な…

2022/07/12 22:43

【ツール】雨降りCSSコード生成ツール

どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠1つ分、横に移動するのにかかる時間）雨の色:雨の太さ:px雨の角度:deg雨の横位置:px（雨の長さにも影響）雨枠の幅:px雨枠の高さpx雨2の横ズレ:px雨2の縦ズレ:px雨3の横ズレ:px雨3の縦ズレ:px背景色グラデーション: コード ctr.addEventListener('input',gw,false); gw(); function gw(){ txt=''; txt+='\n'; txt+='@keyframes rainy…

2022/07/11 23:52

作りかけCSSネタとCSSの未来

どうも！LSSです！！ 作りかけているCSSネタがあるのですが、汎用性…変更の手の加えやすさ、という面でどうしたものかと考えています。 作りかけCSS～雨～ コード これからのCSS 作りかけCSS～雨～ @keyframes rainya{ 0%{background-position:0px 0px,0px 0px;} 100%{background-position:-50px 137px,0px 0px;} } .rainy{ width:280px; height:280px; background-image:linear-gradient(110deg,#ffffff00 10p…

2022/07/10 23:58

【日記】シン・ウルトラマンを観てきました！（2回目！！）

どうも！LSSです！！ 今日は、絶賛公開中の映画「シン・ウルトラマン」を映画館で観てきました！！ little-strange.hatenablog.com もっとも、約2か月前に一度行ってる（その時で映画館約10年ぶり）んですけどねw いずれDVDでも出たらそちらも買いたいところですが、繰り返し観る価値はあると思います。 おまけに、今は更に特典がついてて、そちらも決め手になりました。 1回目を観に行った時 ネタバレも存分に 2回目観に行く事にした決め手はこれ！ やはり観に行って良かった！ 1回目を観に行った時 まず、ネットでどうしてもネタバレは避けられない…し、むしろネタバレも楽しみたい、け…

2022/07/09 22:56

【ブログxTwitter】ブログのアイキャッチ画像の差し替え、ツイートに反映させる方法

どうも！LSSです！！ はてなブログには、Twitterとの連携機能があります。 自分もTwitterとは連携していて、記事を書き上げて投稿した後は、その画面からTwitterにも投稿のお知らせを投げています^^ と、その他に、はてなブログにはアイキャッチ画像を指定したり、Canvaの機能と提携してアイキャッチ画像を作る機能もあります。 特に指定しないで、記事中に画像を使っているとそれがアイキャッチ画像になったりもしますね。 と、そこで…ブログ投稿＆ツイートした後で、「ああ！アイキャッチ画像これにするつもりじゃなかったのに！！」とか、画像自体の内容にとんでもない間違いを見つけて訂正したくなる事…

2022/07/08 23:03

【お題】最近あった3つのいいこと

どうも！LSSです！！ 今週のお題「最近あった3つのいいこと」 いやぁ、びっくり！ はてなブログさんが公式にバトンイベントやるとは！ で、早速ながらバトンをいただいちゃいました^^ n-hikari.hatenablog.com hikariさん、ありがとうございます！ 最近あった3つのいいこと 会社辞める、って言ったら即オファーがきて、雇用ではなく業務委託ではあるけれど凄い好条件で契約を結べた事^^ それにより、段階的に金銭的余裕が出来るので、株式投資を始めてみたところが、初心者らしい無茶もしてる割りに今のところかろうじてプラス収支である事（明日にはどうなってるやらw） 久々に更新されたブロ…

2022/07/07 23:44

【お題】マイベスト家電

どうも！LSSです！！ 今週のお題「マイベスト家電」 家電も様々な進化を遂げ、そしてその最新には手を出せずにいたりする自分ですw そんな中で「ベスト」と言ったらなんだろう…と考えた結果。 NEW Fire 7 タブレット - 7インチディスプレイ 16GB (2022年発売) Amazon Amazon AmazonのFire7タブレットかな、という結論に至りましたw タイムセールの時などにとても安くなったりします。 スペック的にはそれほど高くないのですが、何が便利かってアレクサを搭載しているので、カップラーメンを作る時などに 「アレクサ、3分数えて」 と声をかけるだけでいいところw スマホア…

2022/07/06 23:54

煮詰まらないCSSネタ

どうも！LSSです！！ little-strange.hatenablog.com は、実は書き始めた時は全く違うネタだったのが、書いてるうちにああなりました。 数日前から考えてるCSSネタがあるものの、どうにも煮詰まらなくて、結局違う形になっちゃったりしてますw とりあえず、その「煮詰まらない」ネタを暴露しちゃいます。 これ、どんな形に見えます？ コード（答え） ずらすのをアニメーションしてみるとよく分かります これ、どんな形に見えます？ …「辺の窪んだ菱形」、ですね。 これ、CSSのbackgroundプロパティにgradientひとつで描いていますが、linear、radial、coni…

2022/07/05 23:51

【CSS】瞬く星空

どうも！LSSです！！ 今回はまた、CSSのkeyframesアニメーションで遊んでみました。 瞬く星空 コード 星が瞬く仕組み というネタを考えたのですが 瞬く星空 @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,tran…

2022/07/04 23:48

【CSS】汚しグラデーション【実験】

どうも！LSSです！！ CSSのgradient系の関数をbackgroundプロパティに適用する事で、容易に「綺麗なグラデーション」を描く事ができます。 この場合の「綺麗」は悪く言えば機械的、単純という見方もできます。 backgroundプロパティは カンマ区切りで複数の画像を重ねる事ができる gradientで使用する色は「不透過度」を設定する事で半透明の色も使用できる 事から、「汚し」となるようなノイズっぽいgradientを重ねる事で、グラデーションを複雑なものに見せる事ができるのでは？と思い、実験的に作ってみました。 汚しグラデーション コード 不透過度 あとがき 汚しグラデーショ…

2022/07/03 23:41

投資初心者 スリル…！！

どうも！LSSです！！ 最近になって、初めて株式投資に手を出したのですが、なかなかスリリングな展開がありましたw 株面白い！一歩間違ったら面白いとか言ってられなくなってたのが面白い🤣— LSS (@LSS0324) 2022年7月1日 …そう、難をかわせたから「スリリング」とか言っていられますが、マトモにくらっていたらと思うとなかなか怖いものがあります^^;;; 今回の話は↓の続きとなります。 little-strange.hatenablog.com 前回までのあらすじ その後の話… 下がらなかった^^; ここから本題 ラッキーだった…と思ってたら… 前回までのあらすじ 「初めて1単元（10…

2022/07/02 23:59

【CSS】border-radiusとborder-imageは併用不可、ですが、強引になんとかしてみました。

どうも！LSSです！！ 【CSS】虹色の枠線、もう2種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹…

2022/07/01 22:49