どうも！LSSです！！ ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりｗ 解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。 丸で囲む文字 PC＋Chromeではそこそこ正常 解決策はありそうな気がするのですが… 丸で囲む文字 こんな風に、丸に光を入れてもオシャレ？かもですね。 コード こんな風に、<span style="letter-spacing: 0.2em; background: radial-gradient(closest-side circle at 65% 35%,#ffffff 30%,#ffffff00 95%) -0.1em -0.1em/1.2em 1.2em repeat-x,radial-gradient(closest-side circle,#ffcc44 94%,tran

どうも！LSSです！！ はてなブロガーの皆様には、今さら記事にするまでもない話ですが…今日、はてなスターの仕様ががらっと変わりましたね！ staff.hatenablog.com 最初、その時読んでたブログの人がカスタマイズしたのかと思っちゃいましたｗ まだ変わったばかりで実感があまりないですが、表示されるまで待たされたり、場合によっては表示されなかったり、といった事が改善されるのかな？ …と、スターを押す際のアクションの変化やエフェクトの変化にまず目がいきますが…自分の場合、今回の仕様変更で「アイコン作成時に仕込んだ事」が大幅に変わってしまう変更となりましたｗ スターアイコン LSSのアイコン作成秘話 思えば、このアイコンもう10ヶ月ほどになるんですね スターアイコン スターを押すと、↓のように表示されます。 小さく表示されたものをスクショしたもので見づらいですが、そのまま拡大表示すると

どうも！LSSです！！ CSSの背景模様、今回は「分銅繋ぎ」に挑戦してみました。 分銅繋ぎ コード コード解説 余録・千鳥格子に失敗したの巻 分銅繋ぎ コード <style> .fundou{ width:300px; height:200px; background: radial-gradient(farthest-side circle at 100% 100%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px ,radial-gradient(farthest-side circle at 0% 0%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px ,radial-gradient(farthest-side ci

どうも！LSSです！！ 【CSS】CSSオンリーでレンガ模様・改善版 で、conic-gradientを使う事で複雑な繰り返し模様が作れそう、と味をしめました。 四角ベースの模様ならかなり自由に作れそうですが、conic-gradientらしさを活かしつつ、違う繰り返し模様も「ずらし」を使う事で実現できるのでは？と試みたところ、こんな感じのものが出来ました。 亀の甲羅のような模様 コード 模様の構造について 亀の甲羅のような模様 repeating-conic-gradient を使って、亀の甲羅のような模様を描いてみました。 実際のところ、「Ｙ字型」を２段分、ずらしながら並べている、という感じです。 コード <style> .turtle{ padding:0.6em; background: repeating-conic-gradient(from 40deg at 50% 75%,

どうも！LSSです！！ このブログに「ブラウザゲームそのままプレイ カテゴリーの記事一覧」というブラウザゲームカテゴリがありますが、「この正月中にすごろくゲームでも作りたかったな（仕様が固まらなくて作れず）」とか「神経衰弱をpreserved-3dを用いてよりリアルに回転するようなものを作りたい」といったような事をちょこちょこ考えていたりします。 …と、考えているうちにふと、ちょっと奇妙なゲーム案が浮かびました。 とりあえずPCゲームではなく、リアルなトランプで複数人で遊ぶゲームなのですが…。 まず、ジョーカーを除いた52枚のトランプをよく切ります。 うち１枚を、数字が見えないまま伏せて横によけておきます。 他の51枚のカードを伏せたまま並べ、そのまま神経衰弱のルールでゲームを始めます。 が、取ったカードの数は勝敗に影響しません。順番が回ってきたプレイヤーはカードをめくる権利の他に「最初に

どうも！LSSです！！ little-strange.hatenablog.com では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。 レンガ模様 コード コード中の色指定について ２つのconic-gradientでレンガ模様を作る仕組み conic-gradient凄い！ あとがき レンガ模様 conic-gradient を使うと、実にスッキリ、かつ強引さもなく、綺麗にレンガ模様が描けてしまいました！ コード <style> .conicrenga{ height:150px; font:120% bold; padding:0.6em; background: conic-gradient(at 5% 45%,#ccaaaa 90deg,transparen

どうも！LSSです！！ もうかなり前の記事になりますが、 little-strange.hatenablog.com 「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。 …実はその後もずっと（何か月も？ｗ）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！ CSSでレンガ模様 コード 強引な解決方法 あとがき CSSでレンガ模様 ついに（？）「CSSでレンガ模様」を描く事に成功しました！^^ 以前に試みた時には「繰り返しを考慮するとCSSだけでは無理そう…」と、SVGとの合わせ技でやったものでしたが、今回はCSSonly！ …まぁちょっと無理やりに解決しているところもあり、よーく見ると突き抜けてたり窪んでた

どうも！LSSです！！ 三が日最終日！ 姪っ子（赤さん）もすっかり馴染んだところで、帰ってしまいました^^; また当人が忘れる前に来るように、と妹（ママ）には言っておきましたｗ さて、かなり以前に little-strange.hatenablog.com JavaScriptでcanvas要素を使って、はるか昔にやった「ラインアート」を試みた事がありました。 何本もの直線を、始点のY座標・終点のX座標を一定量づつずらしながら描くと、全て直線なのに曲線のように見える、というものでした。 それを実現するには「斜めの線を明確に指定した座標で何本も引く」必要があり、canvas要素を用いたのですが、「CSSのみでもなんとかできるんじゃないか？」と思い立ち、強引に試みてみた記録です。 強引にlinear-gradientでラインアートしてみた 無駄に長くなったコード 線を半分 間引いてみました あ

どうも！LSSです！！ 昨日のおみくじのコード解説をやってみます。 little-strange.hatenablog.com おみくじのコード コード解説 配列変数.lengthを使用しているので 容赦のない均等な確率 おみくじのコード <style> #omikuji{ width:280px; padding:10px; font-size:40px; font-weight:bold; background-color:#eeeeee; border:1px solid black; background-image:radial-gradient(circle 80px at 70% 30%,white,#eeeeee); user-select:none; } </style> <div id="omikuji">おみくじ</div> <script> cnt=0; kuji=

謹賀新年 あけましておめでとうございます。 本年もよろしくお願いいたします。 どうも！LSSです！！ あけましておめでとうございます^^ 2022年最初の記事となります。 旧年中は大変お世話になりました。 本年もよろしくお願いいたします^^ ページを開いた時に出る垂れ幕 と、コードを貼り付けてはいますが、少々難点が…。 恒例のアレ ページを開いた時に出る垂れ幕 今年の正月ネタは、全画面を覆う垂れ幕（スクロールするとすぐ引っ込む）でした。 little-strange.hatenablog.com と同様、JavaScriptでスクロール量を判定し、スクロールイベントに応じて表示位置にマイナス値を指定しています。 コード <style> #maku{ position:absolute; width:100%;height:100%; top:0%;left:0%; z-index:999;

どうも！LSSです！！ 2021年最後の記事となりました。 昨年末は、 little-strange.hatenablog.com １年を振り返った記事を書いていましたが、今年は…まぁいいかな、とｗ 一応、年に２回特別な記事を投稿するのが正月とクリスマスだったりしますが、そちらは little-strange.hatenablog.com little-strange.hatenablog.com ↑こんな感じでした。 ところで…２，３日前から、妹が姪（１歳４か月）を連れて帰ってきています^^ …帰ってきているのはいいのですが…人見知りがめっちゃ激しく、数か月ぶりに会った自分など覚えているはずもなく、ずっとママ（妹）にしがみついていますｗ （ばいばい、はしてくれます。とても速やかにｗ） とりあえず、おじさんとしては…ちょっとでも気を引くべく、タブレットで遊べる「ゲーム未満のなにか」を「また

どうも！LSSです！！ 2021年もまもなく終わる頃、またちょっと変わったものを作ってみました。 画面左下に表示されています コード 一部解説 あとがき 画面左下に表示されています 画面左下に、 ↑こんなものが表示されていると思います。 ページを開いた後、ちょっと画面をスクロールさせると画面左下定位置に出現します。 この黄緑が「現在このページをどこまでスクロールさせているか」を示しており、一番下までスクロールすると完全に黄緑の円になります。 また、自動スクロールスイッチを兼ねていて、クリックする毎に 「自動スクロールOFF」→「低速自動スクロール」→「高速自動スクロール」 が切り替わります。 コード <style> #scrlm{ position:fixed; bottom:50px; left:10px; border-radius:50%; width:50px; height:50

どうも！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です！！ 本日、12/28から休暇に入りました！ とりあえずダラダラと過ごしましたｗ お昼には近所の たこ焼き屋さんへ。 うちのおかんぐらいの年代の女性が長年一人でされている店で、６時には店じまいするので休日でないと行けないようなところです。 と、行ってみると年内営業が今日まで！ギリギリでしたねｗ だしどんぶり（たこ焼き１０個入り ３００円）を店内でいただき、２０個持ち帰り（５００円） なかなか良心的な価格だと思います^^ で、帰宅後、例のプロジェクターでスイッチのYouTubeを起動し、「AKIRA」を観ました。 古いアニメの名作で、名前はあちこちで聞きますが…実は見たの初めてだったりしますｗ それがYouTubeで無料公開…されてたのが実は今日12/28までで、これまたギリギリの視聴ｗ ２時間もある長い動画を見たのも凄い久しぶりかも？ 「AKIRA」は先日、同じ作者さんの

どうも！LSSです！！ 先日、職場にて突然「全員、持ってる資格を報告してね」てな事がありました。 結構長く勤めていて初めての事でとまどいつつ^^;、とりあえず書類を見てみました。 情報処理技術者試験 さて、「持ってます」と言っていいものやら？ そうそう、情報処理技術者試験と言えば 情報処理技術者試験 資格ならなんでも、ではなくて、いくつかの資格名が並んでいて、そのほとんどが今の会社の業種にちなんだ専門的なもの（＝自分に縁のないもの）だったのですが、その中に、 「基本情報技術者試験」 「応用情報技術者試験」 というのがありました。 これが非常に引っかかる…というのも、自分はかつて（かれこれ30年近く前というはるかな昔）、専門学校在学中に、 「第二種 情報処理技術者試験」と 「第一種 情報処理技術者試験」 に合格していた、という経緯があります（ちなみに、一種のほうが上位資格） で、ググってみる

今週のお題「買ってよかった2021」 どうも！LSSです！！ 今年もやってきましたね、このお題！ 毎年されてるんでしょうか。 ちなみに昨年は little-strange.hatenablog.com という記事を書いていました。 さて今年は…？ Nintendo Switch プロジェクター モバイルバッテリ Nintendo Switch まったく、遅ればせながら、ですが little-strange.hatenablog.com スイッチを購入したのも2021年の事でした。 今は電器屋さんで普通に新品がまっとうな値段で購入できますが、この頃はまだ品薄で…転売ぼったくりを買う気にならず、さりとて little-strange.hatenablog.com とんでもない長い年月を経てフルリメイクされたこのソフトを待つという選択肢は考えられないｗという状況下で、ギリ納得できる価格での中古ス

どうも！LSSです！！ 久しぶりの「WebAudioAPI」記事です^^ WebAudioAPI…JavaScriptからブラウザ上で音を鳴らせる仕組み そしてギリギリのクリスマスネタですｗ 半自動演奏「きよしこの夜」 コード 音階指定について 半自動演奏「きよしこの夜」 ↑のボタンを押すと「ソ」の音が鳴ります。 もう一度押すと「ラ」の音が鳴ります。 その次はまた「ソ」…というように、「きよしこの夜」のメロディの音符順に音が鳴るので、タイミングよく押して演奏する事ができます^^ つまり「音階だけ事前に用意されていて、リズムはクリックする人任せ」な「半自動演奏」です。 「きよしこの夜」を忠実に再現するもよし、スローテンポに演奏するもよし、全く異なるリズムで演奏する事もできちゃいますねｗ 最後まで演奏すると、また最初からになります。 コード <style> #btn{ width:200px;

どうも！LSSです！！ 昨日初めて知ったのですが…あの長く続いた名作TV時代劇シリーズ「暴れん坊将軍」。 の、一番最初のシリーズ、の第一話・第二話がなんと！ YouTubeに公式さんの手で公開されています^^ 暴れん坊将軍 んでもLSSは実は… 東映時代劇YouTubeさん 暴れん坊将軍 www.youtube.com 公開日は2021/11/26。 …一ケ月近く気づかなかったとは^^;;; 46分という通常のTV番組１回分の時間の中に、 「まだ紀州藩にいた吉宗が将軍になる事を拒む→じいに説得されて決意する→（まだ町火消し制度が生まれる前の）辰五郎と再会→事件発生→調査→殺陣→後日、悪奉行を呼び出して懲罰→大岡忠相を南町奉行に抜擢」と、詰め込まれた内容になっています。 TVで放送されたのが1978年なので、もう40数年前の作品ですね。 ちなみに最初の方で、若き日の松平健氏のTKBを拝む事が

どうも！LSSです！！ 今年も残すところあとわずかとなりました。 一年を振り返ると…だいぶCSSばかりやってたような気がしますｗ ある動画で、CSSで奇妙な動きを表現したものがあり（動画にはコードでてこず）、推測しながら劣化コピーを試みてみました。 SVGやJavaScript不使用で、CSS・HTMLのみでこういう表現が出来るんだなぁ、というところまでいけたものの…自分のオリジナリティがない＆使いどころが謎なのでこれから考えようかな、と^^; ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 幼い頃に耳に入ったなんだか意味深な歌が、ずーっと、あるいは大人になってから、ずっと意識に残る事ってありません？ 例えば、アンパンマン主題歌。 「愛と勇気だけが友達さ」に対して「しょくぱんまんやかれーぱんまんの立場は？」とツッコミを入れつつも、「何のために生まれて、何をして生きるのか」と重い問いかけに始まっていたりとか。 自分の場合…父親が河島英五氏のファンで、ドライブの時にはカーステレオ（当時はカセットテープでした）で延々と流していたりしましたが、そのテープに入っていた曲で特に意識に引っかかるものがあります。 てんびんばかり 子どもの頃には特に印象的だったのが 大人になってからCD購入しました、が… てんびんばかり www.youtube.com 様々な疑問を、あまり脈絡なく（？）次々と並べた歌詞を歌いあげています。 何かを訴えているような、訴えていないような、もや