【グッズ】首掛け扇風機、そろそろ引っ張りだしてくるかな

どうも！LSSです！！ また夏が近づいてますね…。 暑いのと寒いのとでは、暑いほうが断然苦手です^^; そういえば…と、去年の夏に買ってみて、予想以上に良かったグッズを思い出しました。 首掛け扇風機 電池の持ちもバッチリ！ 風量選択は周囲の状況にあわせて 今、この記事を書くためにAmazonで検索してみたんですが 首掛け扇風機 ↑こんな感じのやつを買ったんでした。 商品紹介ページに掲載されている写真のように、結構自由自在にぐねぐねと向きを変えて固定できます！ 軽量で首が痛くなるような事もなく、帰宅後には卓上扇風機としても使えます^^ 電池の持ちもバッチリ！ 夜、寝てる間に充電していましたが、出…

【はてなブログ】アクセス解析について（スマホでの確認・言及の一覧）

どうも！LSSです！！ 今回は「はてなブログ」の機能のひとつ「アクセス解析」についての記事になります！ 知っている人は知っているけど、知らない人は知らない話を2つほど。 スマホのGoogleChromeで見た時のアクセス解析 スマホでPC版アクセス解析を確認する方法 まず右上の、点が3つ縦に並んでいるのをクリックします。 すると、こんなメニューが出てきます。 下のほうにある「PC版サイト」の横にあるチェックボックス□をタップ。 PC版アクセス解析にあるけど意外と知られていない「言及の一覧」 スマホのGoogleChromeで見た時のアクセス解析 スマホのGoogleChrome（ブラウザ）で、…

【CSS】波線マーカー・その他【変わり種】

どうも！LSSです！！ 昨日の記事に色々とコメントをいただき、ありがとうございます^^ 制作意欲を刺激するコメントが特に多くて助かりますw と、いうわけで、こんな感じの波線マーカーが出来ました！ ⛵ ⛵ ⛵ 波線マーカー サンプル コード CSS解説 アレンジ方法について 色々アレンジ 波線マーカー サンプル サンプルです コード <span style="background-image: linear-gradient(188deg,transparent 60%,lightblue 60%),linear-gradient(172deg,transparent 60%,lightblue…

【CSS】変わったマーカー、また思いついたんですが扱いづらいかも…？【小ネタ】

どうも！LSSです！！ こないだ、「【CSS】色々なマーカーを考えてみました」を投稿した後で思いついた事があって、ちょっと試してみました。 マーカー…蛍光ペンをひいて目立つようにしたようなアレです。 …試してみたのはいいんですが、う～ん。 使い勝手は微妙かも…？？ 斜めマーカー とりあえず色々な斜めマーカー コピペしてからも、文章の長さによって調整が必要 斜めマーカー <span style="background-image: linear-gradient(178deg,transparent 40%,orange 95%);">こんな感じのサンプル</span> こんな感じのサンプル 「…

リクエスト曲をピアノで弾いてもらいました！

どうも！LSSです！！ 今回は購読中のブログを紹介する記事です！ 「ちぼさんぽ」 ちぼさんの凄いところ LSSのリクエスト曲 その1「やつらの足音のバラード」 演奏していただいた時の記事とYouTube LSSのリクエスト曲 その2「魔界塔士SaGa プロローグ」 演奏していただいた時の記事とYouTube 2曲いずれも 「ちぼさんぽ」 はてなブログで、ちぼさんが書かれている「ちぼさんぽ」というブログがあります。 結構前から読ませていただいていましたが、ある日、 なんとYoutubeチャンネルを開設されました！ ピアノ演奏のチャンネルで、徐々に曲数も増えています^^ ちぼさんの凄いところ チャ…

【CSS】画像を使った枠線（border-imageとborder-image-slice使用）

どうも！LSSです！！ 前回の記事で、border-imageとborder-image-sliceを使ってグラデ―ションの枠線を描きましたが、border-imageはその他に「画像ファイルを枠線として使う」という事もできます。 できます、というより、多分、おそらく、そっちの方がメインの用途なんじゃないか？という気がします。 今回は、その「画像を使った枠線」を扱うCSSをやってみた話です。 画像を使用したborder-image 使用した画像 サンプル コードと解説 テストその1 width: 300px; height: 200px; border: 20px solid; border-…

【CSS】border（枠線）のグラデーション

どうも！LSSです！！ CSSでborderをグラデーション色付け、なんとなく分かりました^^ 成功例 サンプル コード 失敗例 サンプル コード 失敗する要因 コード解説 border: 15px solid; border-image: linear-gradient(135deg, red,blue); border-image-slice: 1; 作成例 サンプル コード やってみて気づいたんですが border-image-sliceがとても難解でした^^; 成功例 サンプル てすと コード <div style="border: 15px solid; border-image: …

【CSS】borderのグラデに失敗した話

どうも！LSSです！！ マーカーを作るのに使った、background-image:lineargradient。 ボックスの背景に対する指定でしたが、同類に、border-image:lineargradientというのがあり、border＝枠線にグラデーションをかけられるようなので試みてみました。 失敗例 失敗例のコード 全体を囲む枠線をグラデさせたかったんですが 失敗例 てすと 失敗例のコード <div style="border: 15px solid; border-image: linear-gradient(135deg,red 0%,blue 100%);">てすと</div>…

CSS模写？に挑戦！

どうも！LSSです！！ 今回は堂々とパクリ企画ですw 作ったのがこれ 元ネタ 一応、コード解説 width: 350px; border-radius: 15px; background-image: linear-gradient( 90deg, hsl(223,100%,70%) 0%,hsl(179,100%,60%) 60%, hsl(193,100%,97%) 100%); color: white; text-shadow: 12px 12px 5px #444455; font-size: 23px; padding: 1em; 他のものをCSSで似せるのも面白いですね^^ 作っ…

ちょっとした生活の変化から生まれた一時的マイブーム

どうも！LSSです！！ 緊急事態宣言、都道府県によって解除とかの対応の差はありますが、自分の場合、そこから新たに生まれた一時的なマイブームがあります。 今回はそんな記事です。 おにぎり 通勤時間が変わる事による影響 ビッグマック単品、パティ倍で マクドの店内飲食は、ながらく敬遠してました おにぎり 今、勤めている職場では、リモートワークの準備だけはしているものの、自宅勤務に切り替えられる人とそうでない人といる感じで、自分もずっと通勤しているクチです。 ただ「時差出勤」といって、「9時～18時」の就業時間を「10時～19時」に変更する事で、通勤ラッシュの時間帯を避けよう、というのはやっています。…

【CSS】色々なマーカーを考えてみました

どうも！LSSです！！ 先日の記事で、グラデーションをグラデーションしないようにしたら、よくあるマーカーになった話を書きましたが（←日本語大丈夫か？w）、今回はそこからちょっとひねったようなマーカーをいくつか考えてみました。 マーカー色々（マーカーと言えないようなものもw） 上部が薄いマーカー マーカーというより筒のような？ ふちどりマーカー 上下薄くして淡い感じのマーカー ラジアルなマーカー 使い方 マーカー色々（マーカーと言えないようなものもw） 上部が薄いマーカー 例えば、こんな感じのサンプルみたいなの。 <span style="background-image: linear-gra…

どうにも気になる、i9搭載デスクトップPC

どうも！LSSです！！ 最近、Amazonでどうにも気になっているPCがあります。 こちらの商品です パーツのお値段 パーツまとめ売りみたいな感覚なのかも ちなみ、LSSが今メインで使っているPCは こちらの商品です インテルのCPUは長らくi7が普及タイプのトップを貫いていましたが、2018年末頃にとうとう（やっと？）i9が出たそうです。（自分がそれを知ったのはもっと最近でしたが^^;） とは言え。 i9のCPUだけで、今でも6万近い金額になるんですね。 そこから一式、PCパーツを集めて組んだらいくらになる事やら…と思っていたところに、このPC。 DDR4メモリが32GB、480GBのSSD…

直線グラデーションもやってみたら、よく見るCSSマーカーに行きついた話

どうも！LSSです！！ 昨日、「【CSS】円形グラデーションってこうやるのかぁ」って記事を書きましたが、今回はもう一つのグラデ―ション、直線グラデーションをやってみます。 サンプル コード 解説 角度の指定 色の指定 角度の指定を省略した場合 色の幅（高さ）を指定した場合 色の指定に「透明」も指定できます^^ ここで、他の装飾を無くしてみます サンプル サンプルです コード <style><!--.linegra{position:relative;border-radius:8px;border:1px solid black;padding:1em;width:200px;backgrou…

【CSS】円形グラデーションってこうやるのかぁ

どうも！LSSです！！ 今回は、CSSで円形グラデーションを、やや迷いながらやってみましたw サンプル コード 解説 形状の指定 色の指定 おまけ：実は色は2色に限らず、たくさん指定可能 コード（CSS指定部分のみ） サンプル サンプルです // コード <style><!--.marugra{position:relative;border-radius:8px;border:1px solid black;padding:1em;width:200px;background-image:radial-gradient(circle 150px at 65% 35%,#ffffff,#888…

ブログのサイドバーの設定を見直してみました

どうも！LSSです！！ ここ数日、ブログのサイドバーの設定をいじってみました。 「最近のコメント」を追加 「注目記事」を追加 「欲しいものリスト」を追加 最後のはともかく 「最近のコメント」を追加 まれに、過去記事にコメントをいただく事もあるので、つけといたほうがいいかな～と設置してみました。 いろんな方の名前が出てくると、にぎやかになりますしね^^ 「注目記事」を追加 これ、まだつけてなかった事に今更気づきましたw つけようとすると、「注目」が何をもって「注目」とするのかを選択する項目が！ とりあえずブックマーク数基準にしました^^ 「欲しいものリスト」を追加 プロフィールの下あたりに、さり…

CSSのclipがなかなか難しかった話

どうも！LSSです！！ ちょっとCSSの「clip」について調べていました。（未解決問題を含みます） clipって？ clipの書式 位置調整と併用してみる …というところまで書いたのですが、 clipって？ 例えば、↓こんな画像があったとします。 この画像に対して、style="position: absolute; clip: rect(100px 400px 350px 100px);"という指定を加えてみます。 コード的には、 <p style="position: relative; height: 937px;"><img src="https://cdn-ak.f.st-hate…

「すべらない話」

どうも！LSSです！！ 今回は「すべらない話」をします。 ごくごく下らないのでそのつもりでw 「すべらない話」 「つまらない話」 「おもしろい話」 「すべらない話」 スマホの裏側とか、デコる人いますよね。 キラキラで凸状のシール？とか貼ってゴージャスな感じにするやつ。 ある女の子がデコにすっごくハマっちゃって、スマホはもとより、家の中の何もかもをデコりまくってたんです。 ある日、お父さんが会社に行こうと、玄関で靴を履こうとした時…。 なんと、「靴べら」の、それもカカト部分に差し込む面がデコられちゃってたんです！ もう、靴が履きにくくて仕方がない。 幸い、靴ベラは複数あったはずなので、違う靴ベラ…

まだ考えてます→おほしさまとって！

どうも！LSSです！！ いまだに「おほしさまとって！」の改善を考えています。 ストーリー補足について考える たまちゃん何者！？ 年齢設定とか ゲームシステムの改善 加速し続けた時のスピード感を表現したい！ 現状の問題点 スマホ操作時にダブルタップ判定が邪魔 左端の星が取りづらい ストーリー補足について考える たまちゃん何者！？ 動きから作り始めて、調整を重ねてから、ランダムにちりばめた●を回収する、というゲーム目的を安直に考えましたw そこから、「この●は何だろう？星って事にしとくか」 から、小林一茶の「名月を とってくれろと 泣く子かな」の句を連想し、「妹の頼みで星を集める」という目的の概念…

JavaScriptメモ（タイマー・CSS制御・イベント）

どうも！LSSです！！ 昨日、JavaScriptで「おほしさまとって！」ってゲームを作りながら、「やっぱ以前にもやったのに忘れていて、自分の過去記事を見直したり本やWebで確認したりした部分」があったので、自分の備忘録的に書いておきます。 JavaScriptでタイマー tm0=setInterval('tmf()',100); clearInterval(tm0); CSSプロパティをJavaScriptから制御 maru.style.left=x+'px'; maru.style.bottom=y+'px'; 要素をクリックした時に指定の関数を実行するようにする gamen.onclic…

【ゲーム】おほしさまとって！

どうも！LSSです！！ 今回もまた、ブラウザゲームを作ってみました。 ● // ●'; } gamen.innerHTML+=txt; function tmf(){ mx*=0.97; if(mx230){y=230;my=-my;} if(x>290){x=0;} maru.style.left=x+'px'; maru.style.bottom=y+'px'; for(i=0;i=20){ clearInterval(tm0); } } function clk(){ if(fg){tm0=setInterval('tmf()',100);fg=false;} mx+=1; my+=2;…

【失敗例】チャーハンを作った事がない人が下調べ不十分に挑戦【でも、うま♡】

どうも！LSSです！！ 今回は「今まで自分でチャーハンを作った事がない人が、まともに下調べせずに作ってみた話」です。 結論から言うと…失敗です（そりゃそうなるわなwww） でも、思ったようなカタチにならなかっただけで、味付け的にはおいしくいただきました！ 事の起こり 「具のないチャーハン」材料 材料写真 いきなりフライパンに、ご飯をドボンします マヨネーズをどっぷりかけます さらに、にんにくチューブと塩コショーをたっぷり 混ぜます フライパンをコンロに移動 火にかけます いい感じに色づいてきたところで卵投入 卵をかき混ぜながら炒り、完成！ 盛り付け いざ実食！！ 2，3の動画を「チャーハン 混…

「●追い迷路 JavaScript版」の描画部分 解説

どうも！LSSです！！ 昨日の記事、 のコードの解説記事となります。 実はこっちを先に公開するつもりだったのが、途中行き詰ってしまって、つまづきの記録を2つ公開する事になった、発端の記事が今回の記事ですw まずは、画面の構造を見てみます 簡単なところから始めてみる という事で、最初のコードはこんな感じ。 実行（プレビュー）してみると… 6×6が上手くいったので、その中に入れる3×3も同様に指定 コードはこんな風に書きました 実行（プレビュー）してみると… 今回の解説はここまでです まずは、画面の構造を見てみます 現時点での、アーシさんの「●追い迷路」最新の出題は ↑こちらです。 迷路画面をよく…

●追い迷路 JavaScript版

どうも！LSSです！！ 今回は、アーシさんの「●追い迷路」のスクリプト化に挑戦してみました！ ゴール！！ スタートからやりなおす // '; for(j=0;j'+maru[qx(i,j)]+''; txt+=''+maru[qx(i,j)]+''; if(j==3){ txt+=''+(me==i?'自':(ms==i?'S':(mg==i?'G':'')))+''; } } txt+=''; } //gamen.innerHTML=txt+mz; gamen.innerHTML=txt; if(me==mg){ gmsg.style.display='block'; gamen.style…

【解決】【CSS】gridレイアウトの入れ子に失敗した話【つまづきの記録】

どうも！LSSです！！ 昨日は参りましたw 仕事から帰ってきての限られた時間内で「日付が変わるまでに投稿しよう←いまだ毎日投稿を諦めずにいますw」と、記事を書いているうちに、謎のうまくいかない問題に激突！ 見切りをつけて、いったんその記事は下書きに保存して、その「問題」を晒すという記事を投稿しました。 投稿後、ほっとしたところで、いくつかの可能性をさらに思いついたりもしましたが…結局のところ、「いまいちスジが通らない要因」でした。 という事で、今回は「解決篇」ですw まず、昨日の「うまく行かなかったコード（再掲）」 そして、こちらが修正し、問題解決したコードになります 実行するとこうなります（…

【CSS】gridレイアウトの入れ子に失敗した話【つまづきの記録】

どうも！LSSです！！ 仕事を終えて帰宅後、別の記事を書こうとしていたのですが、CSSのgridレイアウトを入れ子にしようとして失敗！ 解決策はまだ見つからず、とりあえず「つまづきの記録」として残しておきますw これが失敗例！ コード 実行するとこう やりたかった事は 実はこの手の失敗は結構ありますがw これが失敗例！ コード <style><!--.box{display:-ms-grid;display:grid;-ms-grid-columns:(48px)[6];grid-template-columns:repeat(6,48px);-ms-grid-rows:(48px)[6];g…

いろいろ雑記

どうも！LSSです！！ 今回は特にテーマなく、まとまりの無い話をいくつか書いてみたりしてみますw 祝！はてなブログに定型文機能実装！！ ちょっとカテゴリいじりました ブラウザゲーム Twitter、あまりつぶやいていないけど面白い！ 最近、初めてアフィリエイト収益がありました 祝！はてなブログに定型文機能実装！！ ちょっと気づくのが遅れたかもですが、はてなブログに「定型文貼り付け」の機能が追加されましたね！ これ、実にありがたい機能だと思います^^ LSSの場合だと、例えば <style>#gamen{position:relative;}</style><div id="gamen"></d…

【完成版】15パズル、作りました！！

どうも！LSSです！！ 昨日、作りかけ状態で晒していた15パズル、完成版です^^ // '; }else{ gamen.innerHTML+=''+koma[i]+''; } } } function clk(a){ flg=false; sld(a); if(flg){gamen_w();} i=0; while(koma[i]>i){i++;} if(i==15){msg.innerHTML='Mission Complete!!';}else{msg.innerHTML='';} } function sld(a){ if(Math.floor(a/4)==Math.floor(az/4…

【未完】JavaScriptで15パズルを作ろうかと思ったけど…

どうも！LSSです！！ 今回は「JavaScriptで15パズルを作ろうかと思ったけど作り切れなかった話」ですw 作り出そうとした時は既に21：30頃 こちらがプレイ画面 コード 自分メモとして有用そうなところ クリックして遊ぶ事はできます♪どこがダメかというと… 作り出そうとした時は既に21：30頃 で、日付が変わるまでに作ろうとしたんだから「そもそも無理があった」というのはありますがw（現在23：30） 逆に、できそうな要因としては「実は過去（HTML4.0の時代）に作った事があった」というのもあります。 結構惜しいところまでは出来たのと、いくつか記録として残したいところがあったので、実に…

知らず知らずのうちに馴染み深かった女優 ジェニファー・コネリー

どうも！LSSです！！ 全く別々に見た映画が、たまたま主演女優が同じだったりすると、映画とは別に印象に残ったりする事があります。 自分の場合、ジェニファー・コネリーがそのパターンでした。 ラビリンス 魔王の迷宮 フェノミナ で、上記二作品が、どちらも主演女優がジェニファーコネリーだったんですが、 実は日本ではもっとお茶の間でお馴染みの存在でした ラビリンス 魔王の迷宮 ←左がPrimeVideo 右がDVD これは子どもの頃にTVで観た映画でした。 パペット（人形）で様々なクリーチャーがリアルに表現されており（今だったらCGで処理されてそう）、最近の映画とは違った味わいがあります。 後にDVD…

「シン・ゴジラ」AmazonのPrimeVideoで無料視聴してみました。

どうも！LSSです！！ 堂々とおうちで過ごすGW、自分は4/29祝日で休み、4/30有休、5/1出勤、という感じで、今日5/2から本格的な連休に突入です。 連休初日となる今日、AmazonのPrimeVideoで無料で見られる映画、「シン・ゴジラ」をみてみました！ 別タブで「シン・ゴジラ」のページを開きます。 実はこれまであまりゴジラ映画みてなかったw ゴジラの暴れるシーン、圧倒的に政治家さんより短かった、のに Amazonプライム会員で良かった^^ 実はこれまであまりゴジラ映画みてなかったw 今までに見たゴジラ映画といえば…「ゴジラVSモスラ」（の新しい方）、「ゴジラVSメカゴジラ」（のこち…

はてなブログで始める！JavaScript超入門！第三回

どうも！LSSです！！ 適当に間をあけながらの「はてなブログで始める！JavaScript超入門！」、今回は第三回となります。 このシリーズは「はてなブログの記事編集画面を使って、プログラムを全くやった事がない人でもプログラミングに触れてみよう」というニッチな趣旨でお送りしておりますw なお、前回までは、 第一回 第一章 Hello World第二章 変数を使ってみよう！第三章 計算ぐらいしておこうか 第二回 第四章 ifによる分岐 第五章 ifのもうひとつのしきたり という内容でお送りしました。 第六章 乱数で遊んでみよう！ Math.random() という関数について サイコロを作ってみ…