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

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

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

どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 呼吸してるみたい コード <style> @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%,gray 60%,white,gray 89%,transparent 90%); animation:testa 3s infinite alterna

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

どうも！LSSです！！ 今日で「1000日めの記事投稿」となります。 たまに１日に複数記事投稿した事があったので、記事数とはズレが生じていますｗ little-strange.hatenablog.com 最初の投稿。あれから1000日かぁ 初めてのスマホアプリ公開 一年たった頃・二年たった頃 妄想マネタイズ という、振り返り記事でした 最初の投稿。あれから1000日かぁ little-strange.hatenablog.com ↑の記事を投稿してから、1000日。 なんだかんだで毎日投稿を続けてきました。 …実を言うと、日付が変わるギリギリに投稿する事が多く、ある日0時をちょっとだけまわってしまって、予約投稿で投稿しなおして誤魔化した事もありましたがｗ 初めてのスマホアプリ公開 little-strange.hatenablog.com それから３か月たつ前に、当初の目標だったスマホア

どうも！LSSです！！ チェックボックスとラベルの話【HTML編】 の続き。 チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。 CSSセレクタについての話が中心になります。 こっちあっち この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。 idによる指定の場合 idを使わないで更にラベルが２つある場合の指定 チェックボックスを画面上で見せなくてもいい場合 まとめ idによる指定の場合 ↓このように、チェックボックスと、それに紐づいたラベルがあります。 ここをクリック コード <input id="chkbx2" type="checkbox" /> <label for="chkbx2">ここをクリック</label> この「チェックボックスにチェックが入った時」に、ラベルの文字の背景色がピンク色に変わるよ

どうも！LSSです！！ 先日、たまたまYouTubeで見かけて驚いたんですが…あの時代劇「暴れん坊将軍」のテーマ曲に、歌詞が作られていたんですね！ そしてその歌のMVが最近になって公開されたようです！ 暴れん坊将軍のテーマ　MV 歌詞自体は以前からあったようです 一点だけ、どうしても「惜しい…！」と思ってしまう やっぱ名曲ですね^^ 暴れん坊将軍のテーマ　MV www.youtube.com サムネからなんかウケますｗｗｗ 歌詞自体は以前からあったようです 気になって色々調べてみたところ、歌詞自体はもっと前からあったようです。 多分、マツケンサンバの頃でしょうか？ 歌詞のノリがそんな雰囲気ですね。 www.uta-net.com 一点だけ、どうしても「惜しい…！」と思ってしまう 細かいところで、どうしても気になっちゃいました。 2:04や2:07あたりで、松平健氏が振り向くカットがあります