どうも！LSSです！！ 日記、としながらも、昨日の話なんですけどね。 10/10　スポーツの日、朝10：50頃。 元町駅近くの交差点で、南から北に向かうべく、信号待ちしていました。 南北の信号が赤なので、東西の信号はもちろん青。（東→西への一方通行） 多くの車やバイクが走り抜ける中で、目を疑うような光景が！ 「目の前を仮面ライダーが走り過ぎていきました」 走り過ぎていったので、一瞬の事でしたが、マスクも背中もしっかり仮面ライダーで、バイクはサイクロン号ではなかったですが…白昼夢を見ているような出来事でしたｗ まぁ、稀には、なんでもない街なかでコスプレをされている方を見かける事は無くもないですし、かくいう自分も数年前、コスプレじゃないですがやたらバカでかい傘をさして歩いて、呼び込みの人たちから「おっきい傘のお兄さ～ん」と声をかけられた事もあったりはしました。 が、仮面ライダーの姿でバイクに乗

どうも！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%;

どうも！LSSです！！ 最近、休日に歩く事が増えました。 これまで通らなかったようなところを通ると、知らないうちに開けていたところや、「ここからここに道が繋がっていたのか！」という新たな発見があったりしますね^^ っと、長年住んでいて、近所でそういうのがあるのにもビックリですがｗ ただ、問題は…自分自身汗かきなのもあって、結構とんでもない量の汗をかきます。 代謝なので健康的な意味では結構な事なのですが、シャツが下着もその上もドボドボになるのがいただけない^^; そうして歩くルート上にスーパー銭湯があったりもするので、そこで汗を流すとちょうどいいのですが…その後にまたドボドボのシャツを着るの？っていう問題もありますね。 …散歩するのに、着替えをバッグに入れておくべきか…と検討したりする今日この頃です。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic-gradient コード outsetの場合 四辺別々に色設定した場合 ただし、今回のconic-gradient版には欠点が… border-imageとconic-gradient こんな風になります。 よく見ると４つの辺の中でも明るさがグラデーション変化していますね。 コード <style> @keyframe

どうも！LSSです！！ 昨日の記事ネタを書いていて、ふと思い出した曲があります。 「虹」をテーマにした曲…と聞いて、真っ先に連想する曲と言えば…古い洋楽で「Over the Rainbow」というのが有名ですね。 他に、街で有線で流れていたのをたまたま聞いて「かっこいい！」と惚れこんだ曲に、小林旭さんの「腕に虹だけ」があります。 が。 雨あがりの虹のような爽やかさを持った曲として自分が一番好きなのが、坂田おさむさん作詞作曲の「虹のむこうに」です！ 虹のむこうに 昔買ったCD 虹のむこうに www.youtube.com 坂田おさむさんは、NHK「おかあさんといっしょ」の７代目うたのおにいさん。 「にこにこぷん」の頃ですね。 うたのおにいさんになる前は、ロックシンガーだったという経歴の持ち主で、児童向けの楽曲の作詞作曲もこなし、多数の曲を「おかあさんといっしょ」に提供されています。 それが、

どうも！LSSです！！ ちょっと思いつきで「三角形を敷き詰めた背景模様」を考えていたのですが、それを更にkeyframesのアニメーションで動かす、というのをやってみました。 …という実験的な記事です。 動く三角背景 コード 三角形のサイズ 動く三角背景 コード <style> @keyframes sankakua{ 0%,10%{background-position:60px 0px,40px 35px,0px 35px,60px 0px,20px 0px,40px 35px,0px 35px,20px 0px;} 20%,30%{background-position:60px 0px,20px 70px,0px 35px,40px 35px,-20px 0px,20px 70px,-40px 35px,0px 35px;} 40%,50%{background-position:

どうも！LSSです！！ …謎のツールを開発してしまいました^^;;;;;;;;;; 韻踏みマシン 使い方 ただし… 韻踏みマシン 使い方 ４つの選択項目、それぞれ「あいうえおん」の文字を選択できます。 韻を踏みたい言葉が例えば「会いたい」でしたら、母音は「あいあい」なので選択項目を「あいあい」になるように設定し「生成」ボタンを押すと…。 母音が「あいあい」になる文字がランダムに選択され、100パターンの組み合わせが生成されます！ （「ん」だけはそのまま「ん」になります。） ただし… 単純に「母音が同じである文字」をランダムに選出しているだけのため…ほとんどマトモな単語にはなりませんｗ このツールを「ラッパーを志す方の一助になれば^^」…などと言ってしまうと、「馬鹿にしてるのか」とボコられそうなレベルですね^^; そんな謎のジョークスクリプトでした。 ってなとこで、今回はこのへんで！ 次回も

どうも！LSSです！！ ブログを始めてから1000日たちました - Little Strange Software に使用した、「背景にうっすら『１０００』の数字が並んでいる」コードを解説してみます。 こんなコードでした 下から見ていきましょう その上に白で上書き あとは同じ要領で… atとpositionとsize こんなコードでした コード <style> article{ background: conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px, conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#f8

どうも！LSSです！！ little-strange.hatenablog.com の、その後の話をちょこっと。 算数の問題 …というような話が、 デイトレードってこんな感じ？ 算数の問題 「LSSくんは、1390円の株を100株購入し、手数料115円を支払いました。 十分値上がりするのを待つつもりでしたが、上がったり下がったりする様子を見るうちに『売って買い戻して差額で儲かるのでは』と魔が差して、1435.5円の時に100株を売却、この時も手数料115円支払い、譲渡益税として売却益の20%も支払いました。 その後無事、指値注文で1420円の時に100株買い、また手数料115円を支払いました。 今は、100株持っている状態で、株価は1418円になっています。 これらの取引で、LSSくんはいくら儲かったでしょうか？」 …というような話が、 まだ感覚的にピンとこないのが、初心者らしいところｗ

どうも！LSSです！！ いやぁ、華麗に1000記事めをスルーしていましたｗｗｗ 「え？じゃあ1000記事めはどれだったの？？」と逆算すると、 little-strange.hatenablog.com ↑この記事だったんですね。 この分だと「1000日め」になるのは…今週木曜日かな？ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^ すぐに役立つ366日記念日事典 第4版 【上下巻】 作者:加瀬 清志 創元社 Amazon 人生で一番大事な 最初の1000日の食事――「妊娠」から「２歳」まで、「赤ちゃんの食事」完全ＢＯＯＫ 作者:クレア・ルウェリン,ヘイリー・サイラッド ダイヤモンド社 Amazon

どうも！LSSです！！ little-strange.hatenablog.com に続く、gradient＋keyframes実験、radial-gradient版です。 linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しました。 では、radial-gradientの場合は？？ 実験 コード 解説 組み合わせでこんな事も！ linear、radialときたら… 実験 コード <style> @keyframes rtesta{ 0%,100%{background-size:10px 10px;} 40%,60%,80%{background-size:75px 75px;} 30%,50%,70%,90%{background-size:100px 100px;} } .rtest

どうも！LSSです！！ 先日、 little-strange.hatenablog.com という実験的な記事を公開していました。 「実験」だったのは、今ひとつネタとして活用する方法でピンとくるアイデアがなかったからなのですが、その状態でも、 non704.hatenablog.com whisky-coke.hatenablog.com norikoさん(id:non704)や、のんべえさん(id:whisky-coke)が使い途を考えて試みてくださっています^^ その、norikoさんの記事のコメントの中で、「カーテンで舞台が開く」という新たなアイデアを出しておられたので、こっちで作ってみました^^ カーテン コード 傾きについて divタグの中に書いたものを覆い隠すのには カーテン 今、新しい時代の幕が開ける…！！ コード <style> @keyframes curtaina{ 0

どうも！LSSです！！ ちょっと前に初めて、証券取引を始めました。 購読しているブログの中に株に関するブログもいくつかあり、試してみたくなった＆確認したい部分があった＆前から興味があった、という感じで、まだまだ分からない事だらけの初心者ですｗ 今日までの履歴 もっと前に考えていた事 投資信託 分散投資、を最重要視していたのですが… 損切り未経験 今日までの履歴 4/11　開始。キャンペーンで「3000円程度の株を数種類の候補の中から選んでもらえる」ので、2,843円分（3株合計）ゲット。 4/13　10,000円入金。ここから、ちょこまかと１株単位で買ったり売ったり。 4/15　S&P500に3,000円投資。 4/19　ブログに株を始めた事を書く。初めてｘ3 - Little Strange Software 5/23　30,000円入金。 5/24　S&P500に7,000円投資。 6

どうも！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{ 0%{background-image:linear-gradient(0deg , 色１ , 色２);} 100%{background-image:linear-gradient(90deg , 色１ , 色２); } のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。 他のgradientもそうですが、 ( ) の内容はkeyframesの「徐々に変化」の途中経過の補完対象外のようです。 ですが、background-position や background-size の指定はアニメ変化してくれる事から、「角度がアニメ変化している」よ

どうも！LSSです！！ 今日、三宮を歩いていると、区役所や三宮図書館のそばにあった商業施設「サンパル」が間もなく再開発のための解体？に入るというのを知りました^^; いやぁ…中に入ってる店が次々と閉店していくな…とは思っていたんですが、そのための立ち退きだったんでしょうか。 そして、その中でも残っていた喫茶店もついに… お気に入りのチョコパ提供店が…。 移転してもメニューと属性が変わらないといいな。 pic.twitter.com/q0rbwunQBh— LSS (@LSS0324) 2022年5月30日 ここはアレです。 過去に、 little-strange.hatenablog.com little-strange.hatenablog.com に書いていた、「パフェっぽいスイーツを○○ソフトクリームという名称で提供」するお店でした。 …でも、「閉店」と言いつつも「移転オープン」が予

どうも！LSSです！！ CSSで、３種類あるgradientを用いて「模様が繰り返すタイルパターン」のような背景を描画できます。 中でも、repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeating-conic-gradientによる背景模様生成ツール 使い方 repeating-conic-gradientによる背景模様生成ツール 開始角度： 中心位置（横）： 中心位置（縦）： 繰り返し： 色1：　色2： 幅： 高さ： ランダム設定 コード 使い方 最初は、白と黒の格子模様、オレンジ色

どうも！LSSです！！ ちょっと気になったカップ麺があり、コンビニで買ってみたら気に入ったので、箱買いしちゃいましたｗ ドロラ王 ドロっとしていてこってりといえば… ドロラ王 日清食品 日清ドロラ王 ドロ、コッテリ、鶏白湯 125g×12個 日清 Amazon それが↑こちら！ドロラ王！ カップ麺としては単価は高めです。 「ドロ、コッテリ、鶏白湯」と書かれていますが、本当にドロっとしているのが気に入りましたｗ ドロっとしていてこってりといえば… 某ラーメンチェーン店が有名ですが、あちらもその名を冠したカップ麺がありましたね。 それも見かけた時に買ってみたのですが、 「味はそれっぽいけど…さすがにカップ麺であのドロッと感は出せなかったか」 と思ったものでした。 が、このドロラ王は本当に「ドロっと」をカップ麺で実現してくれていますｗ 「なんだ、出来るんじゃないか」と^^ その弊害なのか、ちょっ

今週のお題「人生で一番高い買い物」 どうも！LSSです！！ 今週のはてなブログのお題…一番高い買い物ですか。 家を買った、マンションを買った、みたいな経験がないもので、自分でお金を出して買ったもので金額として一番高いものとなると… 「百万ちょいの車」 でしょうか。もちろんローンでしたがｗ ２０代の頃の話で、もう車に乗らなくなってからもかなりの年月が経ちました。 百万円は大金ですが、「人生で一番高い買い物」としては安いような気もしますね^^; もし今、自分がそのぐらい（あるいは それ以上）出して何か買いたいものは？と考えてみたところ…（投資とかは除外して）「１台凄いPCを組みたい」が浮かびましたが、いや、かなり欲張っても４０万ぐらいしかかからないのでは？ってなっちゃいますｗ（欲張らなかったら２０万程度で考えるところ） っと、新しく始まった仕事の最初の入金が５月末、もう間もなくです。 調子に乗

どうも！LSSです！！ はてなブログに記事を書く際に、 [:contents]　と書くと、その部分が記事中に入れた「見出し」の一覧、「目次」になります。 今回は、その「目次」をCSS装飾で遊んでみました。 コード 作ってみたものの… また、１文字めの背景色が違うのも ちなみに、１文字めだけ背景色を指定するのは コード <style> ul.table-of-contents{ transform-style:preserve-3d; perspective:500px; background-color:transparent!important; box-shadow:0 0 0 0 transparent!important; border:0!important; } ul.table-of-contents li{ transform-origin:0% 50%; backgrou

どうも！LSSです！！ little-strange.hatenablog.com にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。 （いかに手をかけずに…と考えていたのにそれに反するかのようなｗ） これで完成ってことにしてもいいかな？ キャラクター コード 問題点と解決について 命名発表！ キャラクター 今回はアニメーションしません。 スイッチ迷路のキャラとして使うつもりですが、そこでもアニメーションはせずに、手足だけ交互のパターンを一歩ごとに切り替えようかと考えています。 コード <style> .test1,.test2,.test3,.test4{ display:inline-block; border:1px solid black; width:54px; height:54px; background-repeat:no-repeat; } .te