かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
どうも！LSSです！！ 実に…長かった。 長かったですが、ようやく「転職後の初振込」されました^^ ちなみに、前職の給与というのが「当月25日払い」となっていたので、4月初旬付で退職したLSSの給料は最後に振り込まれたのが3/25。（厳密には4月初旬分も発生していましたが、税金等の控除の方が大きくてマイナス） 貯えも退職金もハロワの失業給付もない状態でどうにか今日まで生き延びましたw（クレカ払いには頼りました^^;） 本日、振り込まれたのは前職の手取り2か月分を超える金額なので、金銭的に落ち着けそうです^^※年間の総額が決まっていて、支払われ方は月割りと期割りと一年後と＋αが混在する、ややこし…
どうも！LSSです！！ 今日、三宮を歩いていると、区役所や三宮図書館のそばにあった商業施設「サンパル」が間もなく再開発のための解体？に入るというのを知りました^^; いやぁ…中に入ってる店が次々と閉店していくな…とは思っていたんですが、そのための立ち退きだったんでしょうか。 そして、その中でも残っていた喫茶店もついに… お気に入りのチョコパ提供店が…。移転してもメニューと属性が変わらないといいな。 pic.twitter.com/q0rbwunQBh— LSS (@LSS0324) 2022年5月30日 ここはアレです。 過去に、 little-strange.hatenablog.com l…
【ツール】repeating-conic-gradientによる背景模様生成ツール
スライダーや色を変更すると、白と黒の格子模様だった部分がリアルタイムに変化します。 この模様はCSSで描いたもので、「自分のWebサイトやブログで使いたい」模様が出来た場合、下の「コード」のグレーの枠内のコードをコピペして自由に使う事ができます^^
どうも！LSSです！！ ちょっと気になったカップ麺があり、コンビニで買ってみたら気に入ったので、箱買いしちゃいましたw ドロラ王 ドロっとしていてこってりといえば… ドロラ王 日清食品 日清ドロラ王 ドロ、コッテリ、鶏白湯 125g×12個 日清 Amazon それが↑こちら！ドロラ王！ カップ麺としては単価は高めです。 「ドロ、コッテリ、鶏白湯」と書かれていますが、本当にドロっとしているのが気に入りましたw ドロっとしていてこってりといえば… 某ラーメンチェーン店が有名ですが、あちらもその名を冠したカップ麺がありましたね。 それも見かけた時に買ってみたのですが、「味はそれっぽいけど…さすがに…
今週のお題「人生で一番高い買い物」 どうも！LSSです！！ 今週のはてなブログのお題…一番高い買い物ですか。 家を買った、マンションを買った、みたいな経験がないもので、自分でお金を出して買ったもので金額として一番高いものとなると…「百万ちょいの車」でしょうか。もちろんローンでしたがw 20代の頃の話で、もう車に乗らなくなってからもかなりの年月が経ちました。 百万円は大金ですが、「人生で一番高い買い物」としては安いような気もしますね^^; もし今、自分がそのぐらい（あるいは それ以上）出して何か買いたいものは？と考えてみたところ…（投資とかは除外して）「1台凄いPCを組みたい」が浮かびましたが、…
どうも！LSSです！！ スイッチ迷路、とりあえず一通り遊べるようになったので公開しちゃいます^^迷路データは新たに作りましたので、前回のスイッチ迷路をクリアした方も再び迷う事ができますw アナツくんのスイッチ迷路 遊び方 過去記事～ 他に考えていて未実装なアイデア エディットモード 迷路データ圧縮 アナツくんのスイッチ迷路 #gamen{ width:300px;height:300px; } #msg{ margin:5px; width:300px;height:55px; border-radius:10px; border:5px double #ee8866; padding:6px…
どうも！LSSです！！ はてなブログに記事を書く際に、 [:contents] と書くと、その部分が記事中に入れた「見出し」の一覧、「目次」になります。 今回は、その「目次」をCSS装飾で遊んでみました。 コード 作ってみたものの… また、1文字めの背景色が違うのも ちなみに、1文字めだけ背景色を指定するのは コード ul.table-of-contents{ transform-style:preserve-3d; perspective:500px; background-color:transparent!important; box-shadow:0 0 0 0 transparent…
どうも！LSSです！！ little-strange.hatenablog.com にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。（いかに手をかけずに…と考えていたのにそれに反するかのようなw） これで完成ってことにしてもいいかな？ キャラクター コード 問題点と解決について 命名発表！ キャラクター .test1,.test2,.test3,.test4{ display:inline-block; border:1px solid black; width:54px; height:54px; background-repeat:no-repeat; } .te…
【CSS】いかに手をかけずに、CSSで歩くキャラクターを描くか
どうも！LSSです！！ 最近、こんな事を考えていました。 「迷路ゲームを作成するにあたり、自キャラもこの際コードで描きだしたい。また、どうせなら4方向の画像、かつ手足を振って各2パターン用意。ただし、極力労力をそれにさきたくない！」とw そうして考えているうちに、 radial-gradientで描いた円で構成されたキャラなら手軽そう 考えてつめてみると、「8つの円」があれば表示位置すら変えず、「表示する・しない」「表示順の前後だけの調整」で要件は満たせるのでは？ と思い至り、それで実際に描いてみました。 歩くキャラクター コード 今回のサンプルでは 歩くキャラクター @keyframes t…
【つまづき】わー、スクリプトで悩んでいるうちに23:46！！
どうも！LSSです！！ この時間まで、スイッチ迷路を触っていました。 キャラはできていないまま、テストプレイ（移動できてスイッチを変えられる）できるところまで行ったものの…スマホ対応がどうかな？とか試しているうちに、PCでも動かなくなり^^;;; 気づけばこの時間ですw ちと集中しすぎましたね^^;;;;; スクリプトの問題が解決してもキャラもまだなので、やはりちょっと先になりそうな感じです。 追記！なんだか解決しました…ので晒してしまおう #gamen{ width:300px;height:300px; } #msg{ margin:5px; width:300px;height:50px…
どうも！LSSです！！mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。美麗な画像で、潜水するダイバーの動きにとても迫力があります^^ mio20100501.hatenablog.com そこで、「潜水するダイバーと浮上するダイバーを同時に表示できるか」という話になったので、ちょっと作ってみました。…ただし、こちらのこの記事ではLSSが適当に描いた画像を使用していますw コード 使用画像 表示サイズと移動量の話 余談 コード @keyframes divers{ 0%{background-position:0px…
今週のお題「何して遊んだ？」 どうも！LSSです！！ 今週のお題「何して遊んだ？」との事ですが、昔やっていた遊びを ちらほらとこのブログに書いた事もありましたね。 紙テレビ ゲームブック 創作折り紙 その他、まだ記事にしていない中に… 小学生時代 中学生時代 高校時代 紙テレビ little-strange.hatenablog.com 小学生の頃に、こんなのを作って遊んでました。 記事にしてみると、同じような事をされていた方がおられたようでびっくり！ ゲームブック little-strange.hatenablog.com また紙ネタですが、中学生ぐらいの頃からノートにゲームブック（選択肢で…
どうも！LSSです！！ 【実験】CSS、backgroundプロパティで迷路を描くテスト（の準備段階） - Little Strange Software 考えてる迷路案「スイッチ迷路」 - Little Strange Software と書いてきた「スイッチ迷路」、とりあえず「おおむねの描画」が出来たのを途中経過ですが晒してみます。 スイッチ迷路・描画案 まだ描いてないもの 今回の迷路 スイッチ迷路・描画案 #gamen{ width:300px;height:300px; } clr=[]; clr[0]=['black,black','darkred,red 20% 80%,darkr…
どうも！LSSです！！ このブログに、 little-strange.hatenablog.com というカテゴリがあります。 HTML、CSS、JavaScriptなどの「さわりはじめ」だけを軽く説明するような内容で、はてなブログでも試せるような内容であるところからWeb関連の話のみになっています。 が、仕事のほうで「SQL超入門のさわりだけ」みたいな感じのものを今日ちょっと書いてみました。 タイトルはもちろん異なりますw が、「難しそう、と極力思わせないように」というのと「業務なのである程度の硬さ」のバランス…とか考えだすと、なかなか迷うところがあります。 とりあえず「1回2ページ」のを3…
どうも！LSSです！！ JavaScriptで遊べる迷路の案、いくつかあるのですが、その中のひとつに「スイッチ迷路」というのがあります。（特に目新しいアイデアではありませんがw） 作るのがいつになるか分からないので、案だけ先に書いてしまいます！ スイッチ迷路（案） 小規模な迷路で、壁に仕切られた迷路があります。 壁の色は黒、の他に、赤の壁・青の壁・黄の壁があります。 また、通路上に赤スイッチ・青スイッチ・黄スイッチがあり、それを押すと対応する色の壁が消えて通行可能になります。 ただし、その際、他の色の壁は消えていたとしても復活します。 という迷路だったら、 規模は小さくても、トリッキーな迷路に…
【実験】CSS、backgroundプロパティで迷路を描くテスト（の準備段階）
どうも！LSSです！！ CSSのbackgroundプロパティを使って様々な絵を描くのを試みてきましたが、ここで「迷路の描画をbackgroundだけで出来るか？」をやろうと…し始めてみました。 まず格子状に壁を配置 壁を抜く まず格子状に壁を配置 .test{ width:300px;height:300px; background: linear-gradient(black,black) 5px 0px/54px 5px , linear-gradient(black,black) 64px 0px/54px 5px , linear-gradient(black,black) 123p…
どうも！LSSです！！ 10年ぶりに映画館に出向き、「シン・ウルトラマン」を観てきました^^ いやぁ…最高でした！！ 今の技術で初代ウルトラマンを撮影したらこうなるのか、という部分や、数々のオマージュ。 Twitter上では2回、3回と繰り返し観たという方もおられますが、その気持ちも納得します（といって自分は行かないと思いますがw） っと、ネタバレは避けたいのであまり多くは語りませんが、登場人物の中で自分が一番気に入ったのは「メフィラス」でした^^ ウルトラマン（初代）について考える - Little Strange Software 「シン・ウルトラマン」が楽しみ^^ - Little St…
どうも！LSSです！！ かなり前（約2年！？）なんですが、↓こういうCSSネタを書いていました。 little-strange.hatenablog.com CSSを触るようになって、ちょっと慣れてきた頃…でしょうか。「別バージョン」に苦戦している様子が見られますw そして最近になって、これを使って素敵なアニメーションに仕上げていただきました^^ mio20100501.hatenablog.com なるほど、「とことこ歩く」の揺れが蝶のはばたきのように見えますね！ アイデアで拙作のCSSを楽しく活用していただいているのがとても有難いです^^ と、これを見ているうちに「2枚の画像を別々に動かせ…
どうも！LSSです！！ 先日の記事、 little-strange.hatenablog.com ですが、思いの他多くの方が挑戦してくださり、しかも正解していただいてびっくり！ 皆様、誠にありがとうございます^^ まったく自信なかったのですが… 一応、答えの発表 まったく自信なかったのですが… 「自分で暗号を作って『さぁ、解いて！』って出題する」のが、クイズとしても訳分からなすぎないか？と思ったものでしたw いや、実は「換字暗号、例文がたくさんあれば解けるものなのか？」を検証したい気持ちもあったのですが、あまりにモロに読んでいただいている皆様を実験台にするのもどうよ？というところもあって、ああ…
どうも！LSSです！！ いよいよ明日ですね！ シン・ウルトラマンの劇場公開！！ little-strange.hatenablog.com ウルトラマンシリーズも息が長いですが、自分は特に初代が好きです^^ 予告を見る限り、初代がベースになっているっぽくて、でもなおかつ「新しい体験」として作られてもいるようで、そのあたりどうなってるのかも気になるところ。 little-strange.hatenablog.com シン・ゴジラ、シン・エヴァンゲリオン、シン・ウルトラマン、シン・仮面ライダーと色々ありますが…「シン・ウルトラセブン」とか「シン・モスラ」とかも出てこないかな、なんて思ったりw 同系…
どうも！LSSです！！ 今回は「駄文中の駄文」カテゴリ。 いつにも増して訳分からない記事となっておりますw 「換字暗号」という暗号があります。 文字を別のもの（記号だったり別の文字だったり）に置き換えて意味を分からなくします。 文字ごとに、何に置き換えるかを決めておけば、そのルールを分かっている人同士の間だけで意味が通じる、という物ですね。 例えば、元の言葉が「こんばんは」だったとします。 こ→※、ん→？、ば→！、は→＄、と置き換えるルールだとしたら、「こんばんは」は「※？！？＄」となり、元の「こんばんは」という言葉を知らないと全く意味が分かりませんが、「置き換えルール」を取り決めた人同士であ…
どうも！LSSです！！ ZHGONG 組み立てブロック玩具を構築する反重力デバイス、クリエイティブ・テンセグリティ彫刻小説物理学のバランスDIYおもちゃのレンガKinderrätsel 6歳以上でご利用ください,グレー (Color : Gray) ZHGONG Amazon 最近、↑こんなのを購入してみました。（と、リンク貼ってはいますが少々不安も…。） 無事組み立ても完了し…ブロックひとつ余りましたがw、ちゃんと自立していて見ていて不思議な感覚に囚われます^^ …ところで、出品者名がいかにもアルファベットをランダムに並べましたな感じだとは思っていたのですが、はてなブログの編集サイドバーから…
どうも！LSSです！！ 【日記】新スマホきました！ - Little Strange Software に書いていたスマホ、中古ですがそれまで使用していたものよりスペックが高く、快適に使用しています^^ au Xperia XZ2 Premium SOV38 Chrome Black ソニー(SONY) Amazon が、フルに使いこなせているかというと…^^; クレカアプリ おサイフケータイとICOCA そういえば クレカアプリ …これは従来の端末でも出来たハズですが、今回初めてクレカの専用アプリを入れてみました。なんとなく。 毎月届くお知らせ、あまりちゃんと見ていませんでしたがたまに見ると…
どうも！LSSです！！ に続き、第二問目を作ってみました！ いくつかの選択肢から選ぶだけなので、CSSが分からなくてもサンプルの変化を見ながら、正解に辿り着くという遊び方ができます^^ なお、全ての選択肢が正解になった時、「正解です！！」と赤い文字が出てきます。 CSSパズル 第二問！ 第二問です 左が見本です。下記コードの選択項目を選んで、右が見本と同じになるようにしてください。 コード <div style="display: inline-block;box-sizing:border-box;width: 140px;height: 80px; margin padding font-…
どうも！LSSです！！ JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。 乱数なので、ページを開くたびに模様が変わります。 コード ついでに、記事部分の背景も透過 乱数なもので… コード article{background:transparent!important;} bgtxt=''; for(i=0;i <script>bgtxt='';for(i=0;i<50;i++){cr=Math.floor(Math.random()*60+30);ct=Math.floor(Math.random()*50+cr);cx=Math.floor(Math.rand…
どうも！LSSです！！ 今日は出勤日でした。 先週からようやく出社しはじめ（週3日程度）、3回出社するとGWに突入w 今日はまた久々の出社でしたがまだ4回目^^; やってる仕事は人と関わる事がほとんどなく、VBAとSQL（どちらもプログラム言語）と格闘しています。 ちょくちょく休憩コーナーに降りていくと、旧知の元同僚の皆さんと歓談するといった具合。 これから一年間このペースが続くのか、どこかで急激に変化があるのか分かりませんが、「なるようになります」w ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ 5月5日「こどもの日」でしたね！ もう、その日も終わろうという頃になって、何かそれっぽい事をこなしたくなりましたw 気の抜けた「こいのぼり」 .koinobori{ width:300px; height:450px; background: radial-gradient(15px 40px at 40px 50px,#ffffff 90%,#000000 99%,#00000000 100%) ,conic-gradient(from 200deg at 250px 420px,#ff0000 70deg,#ff000000 71deg) 40px -408px ,…
「CSSをこれから勉強したい」方向けに、CSS超入門！…のさわりだけ！！など書いたりしてきましたが、なんというかこう「もっと手軽に、簡単に、なんなら学習する気がなくてもちょっと遊べるぐらいのコンテンツは作れないか」と考えていました。 CSSを再現するような入力をする…だと、CSSは様々な書き方ができますし、正誤判定が難しくなりそう…と思っていましたが「限定的な選択肢を提示して、そこから選択する」という方法なら、パズルっぽく楽しめるかも？^^ と思い、作ってみました。
どうも！LSSです！！ 昨日（5/2）、ようやく区役所で国民健康保険の手続きをしてきました^^ そこで聞いたのですが、年金は組織が違う（年金機構）けど健康保険の手続きをした事で伝わるようで、先方から自分宛に連絡がくるそうな。←もひとつちゃんと理解していませんw で、家に帰ると郵便物が。 例の「週刊はてなブログ」のキャンペーンのステッカーが届いていました！ blog.hatenablog.com 今、改めて↑を見ると「2枚セット」とあり、「あれ？2枚入ってたっけ？」と改めて封筒を確認すると…もう一枚はちっこいのが入っています！（キラキラのやつ） これは…気づかないと、封筒と一緒にうっかり捨ててし…
【CSS】CSSでチョコレートケーキを描いてみました【backgroundプロパティ】
どうも！LSSです！！ 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style="box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px, radial-…
どうも！LSSです！！ ちょうど一ケ月前。 little-strange.hatenablog.com それまで、Androidスマホ2台（YモバSIM＋格安SIM）＋iPhone1台（SIMなし）と3台も持ち歩いていたのをどうにかしたくて、新規でAndroidスマホのスペックちょっといいやつを中古購入してからの移行について書いていました。 「完全移行後は、特に理由はないけど2台の旧Android端末を完全リセットしようかな、と思っていたのですが、こうして後から気づく問題もあるとなると…今しばし残しておいた方が良さそうでもありますねw」と書いていましたが、その「2台の完全リセット」を今日になっ…
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
