かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
どうも！LSSです！！ 今日でとうとう、今年の8月も終わりですね。 暑いのが苦手な自分としては、「今年の夏もなんとかほぼ乗り切ったか」という感じがしますw（まだしばらくは暑い日が続くでしょうけど） 明日から9月。 9月って何かあったっけ？と思い返してみると…アレだ。 このブログ開設したのが3年前の9月なので、もうじき3周年になりますね。 LSSとしての活動で自分の環境に変化を起こすつもりが…仕事のほうでとんでもなく変化しちゃう事になるとは思ってもみませんでしたがw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【駄文】激安PCと筆圧感知とお絵描きアプリとJavaScriptと。
どうも！LSSです！！ 最近、E10で遊んでいるうちにふと、思った事があります。 mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴/Win10 Pro/Celeron N4000/4GB/64GB eMMC)MT-E10ZN 【全機種対応】タッチペン KINGONE スタイラスペン iPad/スマホ/タブレット/iPhone対応 たっちぺん 磁気吸着機能対応 ipad ペン USB充電式 スマホ ペン E10、今売られているものは何故かスタイラスペンが付属しないものの、2～3000円程度で売られているような電池を使うペンを使う事ができます（指でのタ…
どうも！LSSです！！ 今回は特別お題。「ハマったゲーム」かぁ。 小学生の頃にファミコンが発売されて以来、幾多のゲームに触れてきました。 時にはかなり集中的にハマったものもありましたが…「ハマった」と認識しているものだけでも数多くて、思い出せる自信がありませんw ので、全てではないですが、印象に残っているもの（なおかつここに抵抗なく書けるものw）をいくつか書いていきます。 Wizardry（ファミコン版） ゼルダの伝説（初代） 魔界塔士SaGa マインクラフト JoeWars へべれけ Wizardry（ファミコン版） Wizardryの名前を始めに見たのは、集英社が刊行したドラクエ2のムック…
どうも！LSSです！！ 謎の貧乏性が発動している？のか、今日も「お金を使いたくない」からの一歩も家から出ない日でしたw 散財する時にはするので、こうしたブレーキがかかるのもそれはそれで必要なところかとも思うのですが、必ずしも「外出する」事と「お金を使う」事もイコールではないよね、という気もしています。 水入りボトルでも持って「目的なくとにかく少し歩く」か「お小遣い500円として、有効活用する方法を探求」するとか考えた方がいいのかな、とも思ったりします。 子どもの頃は500円って大金でしたけどねw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ 【CSS】でっかい下向き矢印、もうひとつのバリエーション - Little Strange Software に、 421miyako(id:m421miyako) 端を波線にするとか、全体に小さな円を書いたら水玉になりますね。色々遊べそう。 とのコメントをいただきました。 「端を波線…難しそうで面白そう」と思ったので、まずは「端が波線」の枠を作ってみる事に^^ 波打つ枠 コード 改変を考慮すると… 波打つ枠 .wvbox{ box-sizing:border-box; height:200px; --brdw:13px; --brc:#88ff88; backgrou…
どうも！LSSです！！ little-strange.hatenablog.com のバリエーション、もうひとつ考えていたものを公開します。 だんだん太くなる線 コード 文字関連の指定 かなり近いものを先にアレンジしていただいてたり^^ だんだん太くなる線 ちょっとアレンジ コード <div style="box-sizing: border-box; height: 200px; background: linear-gradient(to top right,#ff000000 49.9%,#ff0000 50%) 1px 100%/50% 100px no-repeat,linear-g…
どうも！LSSです！！ 今日は休みでした。 朝時点では、どこかに出かけようかとも思っていたのですが…なんだか「お金を使いたくない」って思っちゃったんですねw お金を使わないためには、外出しないのが一番！ という事で、がっつり休養日としたのでした。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ 激安PCを買った目的のうち、最大のものに「USBメモリからのブートでAndroidを走らせたい」というのがありましたが、なかなか手をかける時間がなく進んでいません^^; PC自体にもクセがあるようですが、それプラス、「LSS自身がブータブルUSBの作り方を忘れてる」というのがありますw が、とりあえずなんとか、ネット検索で調べて、「Ubuntu（Linuxの一種）」をUSBメモリにインストールする事に成功しました。 …ただし、そのメモリから激安PCを起動させる事はできていないんですけどね^^; （元々持っていた別のノートPCでは使えました。） ついでに、そのUbuntu…
どうも！LSSです！！ 【日記】結局、中古じゃない激安PCをポチっちゃいました - Little Strange Software で購入した、E10。 ちょこちょこといじってはいますが、なかなか時間がとれず、未だにAndroidを走らせる事はおろか、USBでの別OSブートにも成功していません^^; …一時、Linuxの起動ディスクを作るのにハマった時期があったのですが、ほぼほぼ忘れているのが大きな要因ですw それはさておき、今回は「E10を買ったらあわせて用意したい周辺機器」について書いてみます。 mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴…
どうも！LSSです！！ 「ゼーベック効果」というものを聞いた事がありますか？ 「ペルチェ」の逆の現象で…あ、ペルチェというのはCPUクーラーなんかに使われている、「電気を流すと一方では冷え、その熱が別の方に逃げる」効果なんですが、ゼーベック効果はその逆で、「物質の一部に熱を加えると、熱くなったところとなってないところの温度差から電気の流れが生じ、発電できる」ようなものらしいです。 ググると実験されてる話とかが出てきますが、取り出せる電力はそう多くないとか、燃料を消費して加熱するとモーターを回す事ができたとかなんとか…。 すると、思いつくのが little-strange.hatenablog.…
どうも！LSSです！！ 以前に、 【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software で文中に埋め込む矢印 を作りましたが、ふと思いついて「でっかい矢印」を考えてみました。 .arrowl{ display:inline-block; background-image: conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg), conic-gradient(from 75deg at 0% 50%,#ff0000ff 30deg,#ff00…
今週のお題「冷やし◯◯」 どうも！LSSです！！ はてなブログのお題、冷やし〇〇。冷やすといいもの！という事ですが…。 時節柄、まず「冷やし中華」は当然食卓に出てきますね。カラシをたっぷり入れて食べます。 かと思えば、近年になってコンビニ等で「冷やしラーメン」なるものを見かけるようになり、「へ？冷やし中華と冷やしラーメンどう違うの？」とまず、言葉の定義から疑いにかかりますが、食べてみるとなるほど冷やしラーメン。冷やし中華はラーメンの冷たい版ではなかったんだな、と認識させられますねw …という話はお題として当たり前すぎるのですが、最近になって「冷やすといいもの」と認識したものは…原点すぎて呆れら…
【CSS・backgroundプロパティ】CSSお絵描き超入門！
どうも！LSSです！！ CSSはお絵描きツールではありませんが、backgroundプロパティやgradient関数を使う事でちょっとしたお絵描きを楽しむ事もできます。 backgroundプロパティもgradient関数も、自在に扱えるようになるまでには色々と飲み込まないといけないところが多くて、使い慣れていかないとなかなか意味を理解する事も難しいと思われます。 そこで、今回は解説を加えながら、CSSお絵描きの入門の助けになるかも？な記事を書いてみました。 まず、divタグを用意しましょう testクラスを装飾するCSSを書き始めます CSSコードを書いていきます まず枠組み 中をグラデーシ…
どうも！LSSです！！ 最近の記事、 little-strange.hatenablog.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、（繰り返しを考えなければ）結構自由に線が引けるもので色々作ってみましたが、アレンジを加えてくださる方もおられる今、この「線の引き方」について手順をなぞって記事を書いてみるのもいいかな、と思ったりしています。 …またの機械にw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【CSS】gradientで描く線画囲み枠3種！【雲／キャンディ／リボン】
どうも！LSSです！！ radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 .crd{ width:300px; height:200px; padding:40px; background: radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 30px 0/calc(33.3% - …
どうも！LSSです！！ 昨日の little-strange.hatenablog.com から、何故か「三平方の定理」について考え始めたりする今日この頃です。 ※三平方の定理…直角三角形の、直角を挟む2つの辺の長さをx，yとし、直角と接していない辺の長さをzとすると、他2つの角度がなんであっても「x二乗＋y二乗＝z二乗が成り立つ」というアレ。 CSSには calc という、計算式を扱う手段が用意されていますが、二乗は掛け算でなんとかできても平方根が取れないな、とかも考えたり。 そこから更に色々考えてるうちに、また違った囲み枠の案を思いついてしまいました。 が、記事にするには時間がちょっとかか…
どうも！LSSです！！ 以前、CSSとSVGを併用した、 little-strange.hatenablog.com というコード記事をあげていました。 バクダンってアレです。広告の特価品や、漫画でいうと叫んでる吹き出しに使われる、トゲトゲの囲み枠ですね。 SVGを使うと本当に表現の幅がグンと広がる、広がり過ぎて面白くないぐらいですが、CSSだけで近いものは作れないか？ってな事を考えていました。 で、思いついた方法をひとつ試してみたのですが…出来上がりはなんとも言えないものになり、しばらく下書きに眠らせていたのですが…置いておいたところで使い途が思いつくわけでもなく、ここに晒してみる事にしまし…
どうも！LSSです！！ 本日も、E10をいじっていました。 mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴/Win10 Pro/Celeron N4000/4GB/64GB eMMC)MT-E10ZN あまり容量がないので、あれこれ入れたくはないのですが、とりあえず昨日はChrome、今日はVScodeを入れてみたところです。 ところで、ふと思ったのですが「タブレットPCなんだから、加速度センサー・傾きセンサーはついているはず（少なくとも、縦持ち横持ちで画面の向きが変わる機構はあるんだから傾きセンサーはあるはず）」、と。 で、懐かしの littl…
激安PCが届いたので、慣らしにCSSコードを書いてみました。
どうも！LSSです！！ 以前ポチった、マウスコンピューターのPCが届きました！ mouse E10 スタディパソコン 10.1型タブレットPC 2in1(落下耐性/防塵/防滴/Win10 Pro/Celeron N4000/4GB/64GB eMMC)MT-E10ZN マウスコンピューター(Mouse Computer) Amazon ↑これに近いタイプで「E10-VL」という機種、楽天で購入（楽天の広告も申し込むべきかなと思う今日この頃）。 とりあえずWindows11にアップグレード完了しました。 USBブートはまだ出来ずにいます。 マウスはまだ繋いでいませんが、画面タッチと標準キーボード…
どうも！LSSです！！ 最近になって知ったのですが、写真・動画のSNSであるインスタグラム。 って、LINEみたいに音声通話できるんですね！ その昔、NintendoDSでフレンドと通信プレイしていると当然のように通話できてびっくりした以来の衝撃を覚えました。 うん、時代についていけてない自分を自覚しますねw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ ブログ・Webサイトで使いやすそうな CSSネタを考えてみようと思うと、枠や区切り線あたりに落ち着くのかな？という気がする今日この頃。 …そして、使えるんだかどうなんだか？な謎CSS「アニメーション区切り線」が出来ました^^; アニメーション区切り線 コード コード概要 余談：ニュートンじゃないゆりかご アニメーション区切り線 @keyframes hrcrka{ 0%,20%,28%,36%,44%,52%,60%,68%,76%,84%,92%,100%{background-position-x:calc(50% - 40px),calc(50% - 20px),…
どうも！LSSです！！ 記事タイトル通りです。 と、これほど訳の分からない「記事タイトル通りです」もなかなか無いかも？w 先日、 【日記】結局、中古じゃない激安PCをポチっちゃいました - Little Strange Software もうひとつポチったもの「薄型マウス」 - Little Strange Software 「マウスコンピューター製の激安PC」と「薄型のマウス」を同じ日にポチったんですね。 その「薄型のマウス」のほうは昨日（8/9）無事届きました。 が、激安PCのほうはまだで、配送状況（？）を見てみると「注文確認中」で出荷すらされていない、という状況。 改めて見直してみると「…
どうも！LSSです！！ CSSをいじっているうちに、また謎のアニメーションができました。 光の龍…？ コード 仕組み どうしてこうなった 光の龍…？ @keyframes stardragonx{ 0%{background-position-x:0%;} 100%{background-position-x:100%;} } @keyframes stardragony{ 0%{background-position-y:0%;} 100%{background-position-y:100%;} } .stardragon{ position:relative; height:200px;…
どうも！LSSです！！ 昨日の記事で、激安PCをポチった話を書きましたが、 little-strange.hatenablog.com 同時にもうひとつ、購入したものがあります。 薄型マウス 折り曲げると電源ON ちょっと珍しい？特徴が決め手 薄型マウス イーサプライ 薄型マウス Bluetoothマウス マルチペアリング対応 USB充電式 IRセンサー 折りたたみ式 5ボタン EZ4-MABT1205W イーサプライ Amazon 薄型のBluetoothマウスは1つ所持しており（かなり以前に安く購入したもの）、久々に喫茶店にノートPCを持って行って使ってみたりしたのですが、左クリックに違和…
どうも！LSSです！！ 以前から「タッチパネル搭載で、スペック低くてもいいから、USBブート可能な（MicroSDブート可能ならなお良し）ノートPCかタブレットPCが1台欲しい」と思っていました。 がっつり使うなら「メモリは8GB以上、CPUはi5以上、SSD搭載（容量は小さくても換装可能なら良）」ぐらいの基準で探したいところだったりします（個人的な感覚） もちろん「安いに越した事はない！」のが前提ですけどねw そして色々中古PCの価格情報を調べていたのですが…結局「中古じゃない」端末に行きつきました。 マウスコンピューター E10 やってみたい事 結局、出来るかどうかは不明のまま ケチらなけ…
どうも！LSSです！！ 【CSS】疑似3D 前後関係 - Little Strange Software の回転体を増やしてみました。 疑似3D コード CSS変数を使って、個々の回転体の設定を簡略化 もっと凝った疑似3Dを見たい！という方は 疑似3D @keyframes d3dzx{ 0%{background-position-x:var(--i);} 100%{background-position-x:calc(100% - var(--i));} } @keyframes d3dzy{ 0%{background-position-y:40%;background-size:cal…
どうも！LSSです！！ 最近、￥9000～￥17000ぐらいの中古ノートPCを買いたい欲が高まってきていますw だいぶ前に、Linuxを入れた起動ディスクをUSBメモリで作るのにハマった時期があったのですが、その時に「Android x86（PCで動作するAndroidOS、GooglePlayも使えます）」を入れて起動してみた際に、マウスでの操作が厳しくて「やはりタッチ操作前提で作られたOSだなぁ」で終わったのが引っ掛かってるんですね。 いつか、タッチパネルのWindowsPCでリベンジしたい、と思いつつもまだできていない状況。タッチパネル中古PCも前述のような価格帯で買えるようなのでそろそ…
どうも！LSSです！！ 今日は大阪に出向いてきました。 知人（前にいた会社を数年前に定年退職された方、在職中から色々と誘っていただいています）から連絡があり、PCの調子が悪いので見てほしいとの事。（という名目でお昼を奢ってもらったりw） 詳しく内容を聞かないまま行ってきたのですが、どうも「意図せずWindowsが11になってしまった」のがまずあって、それ以外にも稀に操作がおかしくなるとか。 確か11→10に戻せたはず…とやり方をググって試みようとしたものの、システムの復元が選択できず…。 もう一度ググってみると、あれって「11になってから10日以内でないと戻せなくなる」んですね^^;;;。 （…
どうも！LSSです！！ 先日、【CSS】流星群というCSSアニメーションネタを公開しました。 光の点が斜めに移動する、というものでしたが 残念なこと - 私の好きなバラとシェルティー の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみました^^ また流星群 コード 仕組み あとがき また流星群 @keyframes shtstra{ 0%{background-position-y:0,100%;} 50%,100%{background-position-y:0,0%;} } @keyframes shtstrb{ 0%,10%{background-position-x:0…
どうも！LSSです！！ 7月末、仕事の報酬で大きい振込がありました（3か月に1度のペースでそうなる契約）。 で、証券口座に大きく振り込んだんですね。 そして今週に入って昨日、色々と買ったのですが…いくつかに分散して買ったものの、そのうち一番大きかったものが買った直後に大きく落ちましたw その他に買ったのもぼちぼち落ちて、プラスになったものがほぼない状態。 いや、これからこれから、と思ってはいるのですが、落ちたのがちょっと大きくて…これまでなんとかプラスを保っていた「評価額－投入金額」がマイナスになってしまいました^^; その後ちょっと持ち直して「かろうじてプラス」レベルで今日が終わったのが救い…
どうも！LSSです！！ little-strange.hatenablog.com で、惑星の公転運動っぽい動きを作っていました。 が、あくまでも「疑似」の悲しさ、 little-strange.hatenablog.com と同じで「前後関係が表現できない」事から、例えば中央に太陽、動くのを地球とすると、重なると3Dではない事が露呈してしまうという欠点があります。 CSSには3D表現があるので、そちらを使えば良いのですが（そちらには球や曲面の表示が苦手という弱点もありますが）なんとか「疑似3D」のままで誤魔化せないか？試みてみました。 疑似3D 前後関係 コード HTML部分 外枠のCSS …
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
![【お家でADドメイン】ドメイン名を変更する(1)「再セットアップ：事前準備[2]／設定データエクスポート」](https://img.blogmura.com/sites/1280679/post-images/72441745.webp/crop/120x120)
![【お家でADドメイン】ドメイン名を変更する(1)「再セットアップ：事前準備[1]／データ退避」](https://img.blogmura.com/sites/1280679/post-images/72420546.webp/crop/120x120)
