【CSS】虹色の枠線、もう2種類！

どうも！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 40p…

もうすぐ6月30日

どうも！LSSです！！ 早いもので…もう明日は6月30日。 と言っても、29日のギリギリ終わる頃に投稿するので、読まれてる時には既に30日という事の方が多いでしょうねw 今の勤務形態になってから2回目の報酬振込日 非出社日 1年の前半最終日 など、個人的に色々と絡んだ日でもありますw 2022年後半戦。まずは…猛暑というハードルを乗り越えないと！ ってなとこで、（一画面に収まるような記事ですがw）今回はこのへんで！ 次回もまた、よろしくお願いします^^

半世紀前の時事ネタ？の謎

どうも！LSSです！！ 自分は1974年生まれですが、自分が生まれるより前の1968～1969年頃の一部のフォークソングが好き、という一面があったりします。 好きだったアーティストがいた事から、同時代のその近辺のアーティストのアルバムにも手を出してCDで復刻されたものを購入したりしていたのですが…中には「当時の時事ネタ」を扱ったものもあります。 有名な話だと調べようもあるのですが、どうにも分からないものもあったり… 事だよ 一か所以外はなんとなく分かるのですが さて、どうしても分からないのが… 事だよ www.youtube.com 高田渡氏の歌「事だよ」というのがあります。 高田渡/五つの赤…

スマートウォッチがそろそろ…

どうも！LSSです！！ ちょうど1年半前、 little-strange.hatenablog.com こんな記事を書いていました。 何を「ミスった」かというと…「同じスマートウォッチを2台購入してた」という話なんですねw その後、書いていませんでしたがある日、使っていた1台が充電できなくなってしまい終了。もう1台を出して使っていました。 その2台めのほう、今日になって突然、液晶に縦縞のノイズが入るようになっちゃいまして^^;。 かろうじて視認はできますが、だいぶマズい状態ですね。 なお、自分の使い方はだいぶ荒いので、丁寧に使うともっと寿命は長いのかも知れませんが…「自分ぐらいの荒い使い方だと…

【CSS】border-imageとgradientで作る枠線3種

どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりし…

【CSS】border-image-sliceをkeyframesアニメーション【実験】

どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 @keyframes testa{ 0%{border-image-slice:49%;} 100%{border-image-slice:35%;} } .test{ height:200px; border:40px solid; border-image-source:radial-gradient(farthest-side,transparent 59…

【CSS】音波攻撃！【水面の波紋アレンジ】

どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com に、 421miyako(id:m421miyako) 土台の部分を水の写真にして波紋を乗せるとリアルになりませんか？ mio(id:mio20100501) 応用できたらと思いますがなかなか難しいです。 miyakoさんのコメントにお書きになった・radial-gradientがカンマ区切りで並んでいるところの最後に「url(画像ファイルURL)」を追加とありましたがその場所がわかりませんでした。 とコメントをいただきました。 ありがとうございます^^ 書き換える箇所が複数あり、コメント欄に書い…

【CSS】水面の波紋アニメーション

どうも！LSSです！！ 梅雨ネタのCSSアニメをひとつ、考えてみました。 水面の波紋アニメーション コード radial-gradientが4つ並んでいますが 水面の波紋アニメーション @keyframes suimena{ 0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;} 100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%;} } .suimen{ height:100px; background-color:#8888aa; background-image: radial…

結局、ネッククーラーを新たに買いました

どうも！LSSです！！ ネッククーラー、持っていたのを動作確認したところ…線が千切れかかっていて、電源を入れても断線のためかすぐオフになる、という状況でした^^; 千切れかかっているのを繋いだら正常動作するのかもですが…この際、新たに買っちゃったんですね。 今日はそれを初めて装着して出かけてきました^^ バッテリ同梱型のネッククーラー ケーブルレスってこんなに快適だったのか！ バッテリ同梱型のネッククーラー ネッククーラー 冷却プレート Evo サンコー 扇風機 ヴィッセル神戸 モデル 熱中症対策 グッズ ペルチェ素子 専用バッテリー同梱モデル 軽量 THANKO TK-NEMB3-VX 首掛…

【お題】好きだった給食メニュー

どうも！LSSです！！ 今週のお題「好きだった給食メニュー」 …と言われると、給食があった小学生時代ははるか40年前後昔の話ですが、格別印象に残っているメニューがあります！ クジラ肉のノルウェー風 そして時は流れ… で、今日ふとググってみると 鯨肉って買えるの？ クジラ肉のノルウェー風 角切りのクジラ肉を、甘辛い味付けで。 人参なども添えられていましたが、そちらもホクホクとした食感と甘味があり、最高のメニューでした^^ そして、「学校給食以外では全く見かけない」という希少価値もw そして時は流れ… これもだいぶ古い話ですが、某外国が「日本人は鯨を喰う、けしからん」などと難癖をつけて、異国の食文…

【CSS】集中線【ちょっと改善版】

どうも！LSSです！！ 以前、「conic-gradient」の存在を初めて知り、びっくりした時の記事。 little-strange.hatenablog.com 勢いでいくつか試しに作ったコードを書いていましたが、その中の「集中線」をちょっとだけ改善してみました。 集中線 コード 変更点 集中線 .concentration{ padding:15% 15%; background: radial-gradient(farthest-side,#ffffff 75%,#ffffff00 100%), repeating-conic-gradient(#ffffff 0deg 6.9deg,…

ふと、「アクセス解析」を見てみると…

どうも！LSSです！！ はてなブログの「アクセス解析」、このブログは50%以上がGoogleからのアクセスとなっています。 その、もっとも多いGoogleからの記事の中でも、Android関連の記事がトップを譲らずにいる中で、3位以下にCSSやJavaScript関連ネタも入ってくるようになってきています。 が、今日ふと見ると、意外な記事が紛れ込んでいました。 まず、トップは、 little-strange.hatenablog.com で、こちらがGoogleからのアクセス数のうちの18%。 次に、 little-strange.hatenablog.com こちらもAndroid関連の記事…

【短文日記】久々にCD購入した話

どうも！LSSです！！ 先日、久々にCDをAmazonで購入しちゃいました。 FOLKMAN BROTHERS アーティスト:FORKMAN BROTHERS,なぎら健壱,坂田修 ソニー・ミュージックレコーズ Amazon ↑それがこちら。 中古で割高（しかも購入した時より更に高くなってるみたい^^;）ですが。 虹のむこうに - Little Strange Software の記事を書いていた際にWiki情報で、おさむお兄さんが「宿屋の飯盛」というバンドをされていた後、なぎら健壱氏と「フォークマンブラザース」というコンビを組まれていたという話がのっていました。（「宿屋の飯盛」というバンドにい…

【CSS】クセが強すぎる黄金背景【小ネタ】

どうも！LSSです！！ このブログを古くから読んでくださっている方はご存知かもですが、カテゴライズされていないものの「きんきらきんのきーん」シリーズというものがあります。 CSSで「黄金の輝き」をイメージしたグラデーションを目指したもので、 little-strange.hatenablog.com 枠だったり文字だったり、を白・黄色・茶色・黒などの色のグラデーションで表現しようという試みです。 今回、conic-gradientを色々いじっているとたまたま出来上がったので、久しぶりの「きんきらきんのきーん」最新作を公開しますw クセが強すぎる黄金背景 コード コード中、赤太字部分だけが クセ…

【CSS】border-imageとconic-gradient【実験】

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

【CSS】虹色の枠線（border）

どうも！LSSです！！ little-strange.hatenablog.com に続き、虹色の枠線（border）を考えてみました。 虹色の枠線 コード borderの太さに準じて虹の太さも変わります！ border-imageを使用しています 虹色の枠線 .bdimg{ border:50px solid; border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% …

虹のむこうに

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

【CSS】虹色区切り線 4種

ブログやWebサイトで使用できる、虹色の区切り線を4種、用意してみました。

【CSS】動く三角背景【小ネタ】

どうも！LSSです！！ ちょっと思いつきで「三角形を敷き詰めた背景模様」を考えていたのですが、それを更にkeyframesのアニメーションで動かす、というのをやってみました。 …という実験的な記事です。 動く三角背景 コード 三角形のサイズ 動く三角背景 @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,0…

【ジョークスクリプト】謎の韻踏みマシン

どうも！LSSです！！ …謎のツールを開発してしまいました^^;;;;;;;;;; 韻踏みマシン 使い方 ただし… 韻踏みマシン あ い う え お ん あ い う え お ん あ い う え お ん あ い う え お ん txtlist='あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや ゆ よらりるれろわ をがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽ'; btn.addEventListener('click',gen,false); function gen(){ txt=''; nvs=[parseInt(n0.value),parseInt(n1.v…

【CSS】conic-gradientで描くドット絵風背景

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

ブログを始めてから1000日たちました

どうも！LSSです！！ 今日で「1000日めの記事投稿」となります。 たまに1日に複数記事投稿した事があったので、記事数とはズレが生じていますw little-strange.hatenablog.com 最初の投稿。あれから1000日かぁ 初めてのスマホアプリ公開 一年たった頃・二年たった頃 妄想マネタイズ という、振り返り記事でした 最初の投稿。あれから1000日かぁ article{ background: conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px, conic-grad…

投資初心者 その後

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

【お題】夏物出し

今週のお題「夏物出し」 どうも！LSSです！！ 今週の はてなブログのお題「夏物出し」、ですが…。 自分の場合、出すというより 転職を機に、ユニクロの感動ジャケットを購入していたのを、しまいましたw シャツ＋スラックスという通勤スタイルになります。 …と、そうなると困るのが「ポケットの数が激減する」事ですね。そこで昨日、百均を巡ってダイソーで小型のウエストポーチ（ベルトに通すタイプ）を購入。 そこにモバイルバッテリとWiFiルータ―を装備、スラックスのポケットには小銭入れやICOCA入りカード入れやハンカチなど。シャツの胸ポケットにスマホ、という感じに落ち着きました^^ あと、あれがそろそろ必…

1007記事め

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

【CSS】ボール乱舞【小ネタ】

どうも！LSSです！！ little-strange.hatenablog.com にブックマークコメントで、 3Dみたい。これ、大量にランダムに跳ねてたら可愛いかも。めんどくさい？笑 css conasaji 2022/06/04 23:15 といただきました^^ さじ様、ありがとうございます！ 大量に跳ねてると、楽しくなりそうですね！ ランダムに、の部分については、「横移動」「縦移動」「サイズ変更」のアニメーションの「再生にかかる時間」をずらす事で周期をずれさせてランダムっぽく見せていました。 ので、「大量にランダムに」という感じにしようとすると単一のHTML要素にbackgroundをカ…

【CSS】radial-gradientのサイズをアニメ変化させてみます【実験】

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

【CSS】カーテン

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

投資初心者

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

【CSS】linear-gradientの角度をアニメ変化させてみます【実験】

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