【JavaScript】addEventListener、ユーザーはどれをクリックした？

どうも！LSSです！！ ちょっとまたJavaScriptで作り始めたものがあって（完成までまだ少しかかりそう）、それを作ってる時に気づいた事があったので、ここに記しておきます。 サンプル コード コード失敗例（動作しません） addEventListenerで呼び出す関数は引数を指定できません イベントオブジェクトから発生元要素のIDを取り出す あとがき サンプル 以下のいずれかをクリックしてみてください。 c1 c2 c3 // コード <div id="c1">c1</div><div id="c2">c2</div><div id="c3">c3</div><div id="gamen"…

【妄想記事】RPG幻想

どうも！LSSです！！ 今回は、昔から温めるだけ温めていたRPG案を「もういいや」と吐き出してしまう記事になりますw （以下、3つほどあげますが別々のもの、と思ってください） 蘇生しないRPG 主人公は「妖刀」 バトルロイヤルな戦闘 ヴァンパイアの伝説 あとがき 蘇生しないRPG 昔、RPGに対して世間で言われていた「死んでも生き返るのおかしくない？」という問い。 確かにそうですが、実際もしゲームが「死んだらそれまで」だったら、長い時間をかけて成長して冒険するRPG、イチからやり直すのも厳しいし、死ぬのを恐れて冒険できなくても本末転倒ですね。 ただし有名作品に、蘇生魔法はあるが2連続で確率失敗…

【はてなブログ】機能紹介記事・CSSカスタマイズ記事 まとめ

どうも！LSSです！！ 結構、間があいてしまったのですが、 に続く「まとめ記事 第三弾」！！ はてなブログの機能の使い方やCSSカスタマイズについて、これまで書いた記事をまとめてみました。 なお、この「まとめシリーズ」は にいただいたコメントが発端となっています^^ はてなブログで出来る事紹介編 はてなブログCSSカスタマイズ編 コメント欄CSSカスタマイズ編 あとがき はてなブログで出来る事紹介編 はてなブログの機能を紹介したり、ちょっとした「こうすればできる」を紹介した記事です。 予想外のつまづき（動画について） はてなブログに動画を貼ろうとして（YouTubeやTwitterなど、はてな…

【日記】ミスった…。

どうも！LSSです！！ おとといの晩だったかな？に、Amazonで2つばかり商品をポチりました。 ポチった商品その1 Androidタブレット ポチった商品その2 スマートウォッチ 記事タイトル「ミスった…。」は… ポチった商品その1 Androidタブレット Pritomタブレット 10.1インチ Android 9.0 ROM 32GBメモリクアッドコアプロセッサWiFi デュアルカメラ日本語取扱説明書（ブラック） メディア: なぜか、なんとなくタブレットが欲しくなり（明確な用途は決まってないのにw）、かといって資金にそれほど余裕があるわけでもないので、「使えてかなり安い」ところを見つけて…

【JavaScript】WebStorageを試してみます

どうも！LSSです！！ 今回はJavaScriptでWebStorageというものを試してみます。 WebStorage使用例 WebStorageって？ 今回のサンプルのコード まとめると、 活用例 WebStorage使用例 // ↑とりあえず簡単な使用例として、カウンタにしてみました。 今、この記事を読んでいるあなたが、そのブラウザでこの記事をみた回数が表示されているはずです。（初回は1） WebStorageって？ Webページを開いているブラウザごとに、その端末（PCとかスマホとか）にJavaScriptから文字データを書き込んだり（セーブする、という認識が分かりやすいかと思います）…

ロマンシングサガ リ・ユニバース

どうも！LSSです！！ 今日はまた、多分多くの方にとってどうでもいい話になりますw 以前、こんな記事を書きました。 little-strange.hatenablog.com で、その中で、 と、逆に言えば、これでスタミナ消化等の日課（ノルマ？w）に縛られる事が終わり、時間の使い方を見直せるチャンスでもありますw 明日サービス終了するスマホゲー - Little Strange Software とか書いていたんですが…結局、また新たにスタミナ消化型のスマホゲーに手を出してしまいました^^;;;;;; サガですよサガ！ 魔界塔士復活！？ どんな風に扱われているかというと… サガですよサガ！ ロ…

【雑記】どこかの誰かが…

どうも！LSSです！！ 今回はまた、古い話を引っ張りだしてきますw 今はここでCSSとかネタにしてブログ書いてますが 2chのツクールスレに入り浸っていた頃 ブライアンと二人の勇者 まぁ、その、あれだ 今はここでCSSとかネタにしてブログ書いてますが 「自由に使ってください」って体でコピペ用にコードをつけていて、使っていただいてる記事を見て、にまにましている昨今ですw 思えば昔から似たような感じの事で楽しんでいたように思います。 2chの「意味がわかると怖い話」スレにいくつか創作を投下したところ、ひとつだけ何故かいまだにコピペされてたりして、たまに検索をかけてはにまにましたりw で、今回のネタ…

【CSS】background-position 縦スクロールの場合

どうも！LSSです！！ 一昨日の記事、 little-strange.hatenablog.com にコメントいただき、ありがとうございました^^ 「上下もいけるんですよね？」とのコメントを複数いただきましたので、今回は上下移動を含めたスクロールを試してみます！ 縦・横・斜めスクロールする画像 コード 解説 余談：JavaScriptからbackground-positionを指定 縦・横・斜めスクロールする画像 ※あまり真剣に見ると酔っちゃうかもなのでご注意ください！ 画像は一昨日のと同じものを使いまわしていますw コード <style><!--@keyframes bgscr{0%{bac…

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

どうも！LSSです！！ 今回は、だいぶ前に公開したブラウザゲームの改良版です。 おほしさまとって！-S- ストーリー 遊びかた 前作からの変更点 そもそもの話 おほしさまとって！-S- // '; } gamen.innerHTML+=txt; tgv(); function tginit(){ for(i=0;i0){ document.getElementById('tg'+i).style.left=((1200+tg[i*2]-x)%1200)+'px'; document.getElementById('tg'+i).style.bottom=(tg[i*2+1])+'px'; do…

【CSS】background-positionプロパティにマイナスの値を指定してみます

どうも！LSSです！！ 以前に、やってみたかったけどうまくいかなかった事があります。 little-strange.hatenablog.com これを使いこなせたら、例えば背景画像のスクロールアニメーションができるなー、とか、以前に作ったとあるゲームの表現性が凄く上がるなー、とか思っていたのですが…。 実はもっと簡単な方法で出来そうな気がしてきました！ まず、画像を用意します background-image:url～で指定するとこうなります background-positionプロパティにマイナス値指定 では、background-positionの値を変更するアニメーションを作ってみま…

【Twitter タイムライン】複数の指定アカウントの最新ツイートだけを表示

どうも！LSSです！！ さじさん(id:conasaji)のブログ記事、 conasaji.hatenablog.com に、 自分としてはフォローしてる人の最新ツイートを 一覧で見れたら便利なのになあ、などと ものぐさな使い方を希望します。 Twitter様、ご検討を。 リツイーター、孤高たれ。 - ゆるっと広告業界 との記載を見つけました。 TwitterはAPIや埋め込み機能を公開しているので、Twitter社がなんとかしなくてもユーザー側でなんとかなるかも？と思い、挑戦してみました！ 表示例 コード 使い方 コード解説 ちなみに、JavaScriptを使わなくても 表示例 // Twe…

4連休初日のだらだらっぷり！

どうも！LSSです！！ 4連休初日は…昼までブログ周り、そこから寝たおしてからのー、友人と飲みに出かけました！ なんか二郎を想起させる大根サラダw 締めは、 フローズン焼きプリン、という謎デザート！ pic.twitter.com/NbsVdSMJtd— LSS (@LSS0324) 2020年9月19日 ちょっと懐かしの「プリンアイス」みたいな味わいで、美味でした^^ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

【JavaScript】からふるおえかき！【ジョークスクリプト：マウス操作専用】

どうも！LSSです！！ マウスイベントを使用した、ちょっとしたジョークスクリプトを書いてみました。 遊び方 一応、コード スマホの方ごめんなさい 遊び方 // '+i+''; } gamen.innerHTML=txt; flg=false; mi=0; document.body.addEventListener("mousemove",mm,false); function mm(ev){ if(ev.buttons==1){ document.getElementById("g"+mi).innerHTML='◆'; document.getElementById("g"+mi).sty…

【JavaScript】マウス操作による「イベント座標」とりあえず比較してみた【実験】

どうも！LSSです！！ ※本日の記事のスクリプトは、スマホとIEを対象外としています。すみません^^; 先日の記事、 little-strange.hatenablog.com で、「クリックした時のマウスカーソルの位置から花火が打ち上がる」というのを作ってみました。 位置の指定にはposition:absolute;left:横位置px;top:縦位置px; という指定を用い、クリック位置の取得は イベントオブジェクト.pageX と イベントオブジェクト.pageY の数値を使う事で、PC用表示でもスマホ表示でも正しい位置から打ち上がるものが出来ましたが、このpageXとpageYの他にも…

ウルトラマン（初代）について考える

どうも！LSSです！！ 昨日の記事、「とりとめもない雑記」の中で、ウルトラマン（初代）の話を少し出しましたが、書き足りないところがあるので、もちっと書きますw 名作中の名作、現在もシリーズ続編が放映されているという凄い作品なので、今更感もあるかもですが、不幸にして見ていない、あるいは見ていたハズだけどだいたい忘れた！という方向けの記事となります。 ウルトラマンとハヤタの出会い おいしい話には裏がある？？ 最終回で明かされる驚愕の真実！ それでも度重なる災害に対応してくれたヒーロー 個人的にオススメしたいDVD ウルトラマンとハヤタの出会い まず、地球人類に「科学特捜隊」という組織があります。 …

とりとめもない雑記

どうも！LSSです！！ もう9月も半分過ぎようとしてるんですねぇ。 8月終わってから凄く早いような？？ スマホが「一年前の今日」の写真を見ろ、と 完全同期！ 突然、昔遊んだゲームソフトに思いを馳せる スマホが「一年前の今日」の写真を見ろ、と 通知してきましたw なんだ？と思って見てみると、アレです。 little-strange.hatenablog.com ↑この記事用に撮った写真でしたw 普段あまり写真を撮らないので、珍しく撮った写真がスマホに入ってるとそんな通知を受けて「なにごと！？」ってなりますねw あと、はてなブログの「こよみモード」の画面でも「一年前の今日」の記事を見るように言って…

【CSS・JavaScript】花火その4 クリックで打ち上げる連続花火

どうも！LSSです！！ 以前、記事内で花火を打ち上げるようなものを作りました。 little-strange.hatenablog.com 今回はそれの改変で「訪問した読者さんが好きな位置で打ち上げる事ができる花火」を作ってみました^^ 前回までのコードはJavaScript不使用でしたが、今回はJavaScriptを使用しています。 遊び方 コード 一部解説 最後に 遊び方 画面上の何もないところを適当にあちこちクリックまたはタップしてみてください。 そこから花火が打ち上げられます。 同時に最大10発まで打ち上げる事ができます！！ // '; } gamen.innerHTML=txt; f…

ブログ一周め、クリアです！

どうも！LSSです！！ 本日9/13、ブログ開設から1年め最後の日を迎えました^^ 1年経過しての概要はこんな感じ 最初から迷走しているw 現在も絶賛迷走中です！！ 1年経過しての概要はこんな感じ うるう日を含めて、かつ本日投稿済なので「ブログ投稿日数」「連続投稿日数」が366日になっています。 1年目終了間際になって、急におかしなシリーズを始めたものだから、読者登録減るかも？？と思っていましたが、幸いにしてそんな事もなく。 しかも「コメントしづらそうなネタ」と書いてる自分が思うような記事にも多数コメントいただきました^^ 最初から迷走しているw これが、1年前の最初の記事でした。 が、2つめ…

自作小説：6年”ピー”組 吉賀先生「第二回 ～歪んだ関係～」

どうも！LSSです！！ 早いもので、この「20年以上前に書いたおかしなシリーズ」も今回で最終回となります！ これまでも時折 読み返していましたが、改めて公開するとなるとやっぱり「よくこんなもの書けたな」と、肯定的な意味でも否定的な意味でも思いますねwww タガというか、自分で自分に無意識のうちにかけている制約？その全てを外しきれてはいませんが、今の自分に書ける気はしないですね。 まえがき 6年”ピー”組 吉賀先生 第二回 歪んだ関係 あとがき まえがき 4時のニュース ハラキリ侍がゆく Dr.”ピー”ニスの悩み相談室 6年”ピー”組 吉賀先生「第一回 ～吉賀先生、参上！！～」 と続けてきました…

自作小説：6年”ピー”組 吉賀先生「第一回 ～吉賀先生、参上！！～」

どうも！LSSです！！ 20年ほど前に書いていた小説のようなもの、の中でもぶっ飛んでいたシリーズを続けざまに公開しています。 まえがき 6年”ピー”組 吉賀先生 第一回 ～吉賀先生、参上！！～ あとがき まえがき シリーズ4作目となります。 ここまで結構、下ネタ込みの話がありましたが、今回は下ネタのみならず「ちょっとアレ」かもです^^; （当時、書ききれなくなり、あからさまにごまかしている部分もあるのが自分で笑えましたw） 6年”ピー”組 吉賀先生 この時間は、『Dr．”ピー”ニスの悩み相談室』をお送りする予定でしたが、出演者急死の為、ドラマを放送します。 第一回 ～吉賀先生、参上！！～ この…

自作小説：Dr.”ピー”ニスの悩み相談室

どうも！LSSです！！ この謎なシリーズも3回目となりました！20数年前に書いたもののうちでも、特にタガの外れたシリーズとなります。 まえがき Dr.”ピー”ニスの悩み相談室 あとがき まえがき 自作小説：4時のニュース - Little Strange Software 自作小説：ハラキリ侍がゆく - Little Strange Software の続きで、一部ネタの継承があるので未読の方はあわせてご確認ください…というほどのものではありませんw Dr.”ピー”ニスの悩み相談室 ぶっちゃか、ぶっちゃか、ぶっちゃかちゃんちゃん、ぱらっぱらっぱらっ、ちゃらららちゃらりら、どぅ～んどぅ～んどぅっ…

自作小説：ハラキリ侍がゆく

どうも！LSSです！！ 昨日の4時のニュースに続き、シリーズ第二回となる小説を公開します！ まえがき ハラキリ侍がゆく 第一回 ～暁に腹を切る～ あとがき まえがき 時代劇風小説、と言っていいのか？「ハラキリ侍がゆく」というイカれたタイトルだけが先にあって、それに合わせて中身を書いたようなものになります。 そういえば、昔、とある格闘ゲームの必殺技に「キャラクターが切腹して、血しぶきを相手にヒットさせてダメージ」という、これまたイカれたものがありましたねw …それに比べたらまだ今作はかわいいもの…なのかも？？ ハラキリ侍がゆく 第一回 ～暁に腹を切る～ 時は江戸末期。江戸の御城下に、「紅寿屋」と…

自作小説：4時のニュース

どうも！LSSです！！ …これを、はてなブログで公開すべきか…よそで公開してリンクを張るか、とかかなりながらく迷っていましたが…ある意味、公開済みの「魔女っ子マキちゃん」よりマシか？とも思い、思い切って公開します。 また、シリーズになっており、「全5回」となっています。 続けて5日間、このシリーズを記事とするか、間を開けながらたまに書いていくか、まだ決めかねていますが、CSS等の有用な（？）記事を求めて見ていただいている方は「5日程度のお休みをいただく」事になるかも？と思っていただくのがいいかも知れませんw まえがき 4時のニュース あとがき まえがき 20代の頃に書いていたものになります。 …

無料レンタルサーバの話

どうも！LSSです！！ 今、このブログ上でHTML・CSS・JavaScriptに触れて色々試みています。 20年近く前にも、個人サイトを作るのが流行った頃に手を出して色々やってましたが、その頃、「無料レンタルサーバ」が多数乱立していました。 もちろん今も無料レンタルサーバはありますが、昔と比べてどのぐらい変わったのかな？と、少し検索してみました。 まず昔の思い出話から FTP不可の無料レンタルサーバ FTP可の無料レンタルサーバ どちらにも共通しているのは、広告がつくところ ちょっと面白いところで、FTP不可・FTP可の両面を持ったサービスも 今の無料レンタルサーバ 今の無料レンタルサーバ、…

【CSS】ナンバリング箇条書き装飾サンプル集

どうも！LSSです！！ 【CSS】ナンバリング箇条書き、色付き背景に成功しました！【olタグ装飾】 つまづきの記録。ナンバリングの背景を色付き円に…できなかった話^^; 【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます 【CSS】箇条書きのドットに色をつける【list-style-image】 …と、同じような事を続けてやってきましたが、今回は「まとめ」として使い甲斐のありそうな？ものを5種類並べてみます^^ 光を入れて、珠っぽく 色数を増やしてみました 四角もちょっと凝ってみます 星＋text-shadow はぁと型もいけますね^^ 光を入れて、珠っぽく 4時のニュー…

【CSS】ナンバリング箇条書き、色付き背景に成功しました！【olタグ装飾】

どうも！LSSです！！ いやぁ、昨日は結局うまくいかなかったんですが、記事投稿後に思いついた事があって、試してみたら（一応）できました！！ ↓うまくいかなかった昨日の記事w little-strange.hatenablog.com ナンバリングの背景に色付きの丸 サンプル コード コード解説 難点 アレンジ サンプル コード あとがき ナンバリングの背景に色付きの丸 サンプル 4時のニュース ハラキリ侍が行く！ Dr.”ピー”ニスの悩み相談室 6年”ピー”組 吉賀先生 コード <style><!--.olmaru {position:relative;}.olmaru li{list-sty…

つまづきの記録。ナンバリングの背景を色付き円に…できなかった話^^;

どうも！LSSです！！ 先日の記事、 little-strange.hatenablog.com のコメント欄にて、 さじ(id:conasaji) 今度はナンバリングの方なんですね。オリジナルな使い方が膨らみそうですね！ちなみに丸の形には。。？（笑） とのコメントをいただきました。 さじ様、ありがとうございます^^ で…試みてはみたんです…けどね^^; 単純にradial-gradientにしてみた例 before要素とborderを使ってみた例 position:absoluteを外してみた例 after要素にしてみた例 最初のやつのサイズ調整してみた例 円の中心位置をズラしてみた例 結局…

小学生の頃に作った「紙テレビ」

どうも！LSSです！！ パソコン・スマホもすっかり普及し、かなりの種類の娯楽がデジタルで楽しめる昨今ですが、自分とて昭和生まれのおっさん。 子どもの頃にはさっぱりでした。（物心ついた時にはもうパソコンがある今のお子様がちょっと羨ましいw） ふと、そんなパソコンやスマホが無かった頃に、自分のやってた遊びを思い出して書いてみます。 材料・道具 材料 道具 作り方 完成品が面白いかどうかは… 材料・道具 材料 A4コピー用紙 1枚 道具 はさみ または カッターナイフ セロテープ 筆記具 作り方 まず、A4用紙を細長く切ります。（1～2本程度）なるべく幅が均一になるようにします。 細長く切った紙をテ…

【CSS】ナンバリング付きの箇条書き、ナンバー部分に背景色を付けてみます

どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com にて、その前にいただいたコメントを元に「箇条書き」のマーカーの装飾を試みてみました。 するとその記事に、 あとか(id:c089818) 仕事早っ！さすがです。ナンバリングもカラフルとか、カッコよくできるのでしょうか？①②③とかの方です。😄私自身のセンスと想像力が足りなくて、「カッコ良い」とかいう陳腐なイメージですが。。。 とのコメントをいただきました！ あとか様、ありがとうございます^^ 昨日の方法は、マーカーを画像に置き換えてしまう方法でしたので、マーカーをナンバリングにする指定とは排他になっ…

【CSS】箇条書きのドットに色をつける【list-style-image】

どうも！LSSです！！ 昨日の記事、 のコメント欄に、 なる(id:narutabi) ドットを箇条書きの前に色でつくるとかも勿論可能ですかね？LSSさんの記事をみてると想像力が膨らみます(#^^#) とのコメントをいただきました。 なる様、ありがとうございます^^ というわけで、今回は「箇条書きのドットに色をつける」方法を試してみたいと思います！！ まず、「箇条書き」とは 箇条書きのHTMLコード CSSで色をつけてみます！ list-style-image について マークを色付きの丸にするには？ とても残念なことに… 応用篇 45degの角度で2色使ってみた例 謎のマーク 円の中心位置を…

【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます！【極端な例】

どうも！LSSです！！ だいぶ前の記事ですが、 で使用した、background-sizeとbackground-positionというプロパティの自由度の高さを確認してみます！ CSSでドット絵が描けます！ まず枠を作ります ドットをひとつ置いてみます 小さすぎて分かりにくいので、大きくしてみます ここで ちょっと解説 その1 background-image: linear-gradient(red,red); background-size: 5px 5px; background-position: 25px 25px; background-repeat: no-repeat; 2つ…

【駄文】書ける気がしない推理小説の設定を考えてみた

どうも！LSSです！！ 以前、こんな記事を書きました。 【駄文】こんな推理小説が書きたい！【と思っているけど多分書けない】 「へっぽこ探偵の事件簿（仮）」記事中にも書いた通り「書ける気がしない」のですが、なのになんか設定を考えてしまったので、ちょっとそれだけ書いてみます。 主人公 平 保孝（たいら やすたか） レギュラーキャラ 新阪 忍（にいざか しのぶ） あらすじ っていう、 主人公 平 保孝（たいら やすたか） 物語の主人公。職業：探偵。 大手探偵事務所に勤めていたが、クビになったのを機に独立し、事務所を設立する。 レギュラーキャラ 新阪 忍（にいざか しのぶ） 物好きにも、平探偵事務所に…