かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
どうも！LSSです！！ 新たに覚えた事を忘れないためには、インプットだけで終わらずにアウトプットするのが大事！ なんですが、繰り返す事よりも新しい事に手を出すほうを優先したところ、自分が何をアウトプットしたかも忘れがちになってる困ったちゃんですwww というわけで、自分で思い出すためにも、今月前半にどんな記事を書いていたか、振り返ってみます。 6/1【JavaScript】テキストアドベンチャーゲームのシステムを作りかけてみました 月の始めはこれでしたね！ この開かない門のサンプル、続きをオチまで考えたような気がしますが…すっかり忘れました^^;;; 6/2任天堂スイッチ、ソフト買わなくてもな…
どうも！LSSです！！ 昨日公開したゲーム、 一応、コードも晒しておきます。 というだけの記事です^^; コード <style><!--@media screen and (min-width:640px) { #jw{ display: grid; grid-template-columns: repeat(12,53px);}#jw div{font-size:53px;}#jwe{font-size:53px;height:150px;}}@media screen and (max-width:639px){#jw{ display: grid; grid-template-colum…
// →'; }else{ if(i==tg[turn] && atkf){ jw.innerHTML+='＊'; }else{ jw.innerHTML+=''; } } jw.innerHTML+=''+((turn==0)&&(i>0)&&!atkf?''+nz[i]+'':nz[i])+''; jwe.innerHTML=''; } } function atk(tg0){ if(nz[tg0]>0){ tg[turn]=tg0; nz[tg[turn]]-=Math.floor(Math.random()+0.8); tg[tg[turn]]=turn; atkf=true; jw_…
【日記】Nintendo Switch Online 加入してみました
どうも！LSSです！！ 先日、Nintendo Switch を中古購入してからだいぶ経ちましたが、今さらようやく？ www.nintendo.co.jp に加入してみました！ 12カ月で2400円。 思ったほど高くないですね^^ 自分的にメリットの大きそうなのは 一部のファミコン・スーファミのソフトが遊び放題 Switch用無料ソフトでOnline加入者のみ楽しめるコンテンツがある といったところ。 一部のファミコン・スーファミのソフト…例えば「すごいへべれけ」はあっても「へべれけ」がない、などありますが、収録タイトルを眺めていると、「そういえばかつて広告などで興味を持ったけど結局入手しなか…
【つまづき】background-positionと%の関係性に悩む
どうも！LSSです！！ 今日はなんだか、background-positionと格闘していて惨敗しました^^;;; ちなみに、やろうとしているのは こういうのなんですが、実は表示位置指定が失敗していて、ちゃんと分割されていない上に画像も端まで表示されてなかったりしますw 失敗しているコード <style><!--#gbox{display:inline-block;position:relative;margin:0px;padding:0px;}#m0,#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8,#m9,#m10,#m11,#m12,#m13,#m14,#m15{posi…
Windows11が発表されましたね！2021年後半リリースだとか
どうも！LSSです！！ 先日、Windows11の情報が発表されましたね！自分はまだあまり細かく情報収集できてはいませんが、特に重要そうに感じた点が3つあります。 www.microsoft.com www.google.co.jp 無料でWindows10→11にアップデートできる！ デザインの変更 Androidアプリがダウンロード・実行できる！？ あとがき（オチ） 無料でWindows10→11にアップデートできる！ 「えー？またWindows買わなきゃいけないの？」って貧乏性の自分なんかは真っ先に思いましたがw 現在Windows10を使っているユーザーは無償アップグレードできるそうで…
【CSS】続・写真画像のちょっと変わった見せ方【後から気づいたバージョン】
↑こうだったのが↓こうなります！ どうも！LSSです！！ 昨日、写真画像をCSSで「ちょっと変わった見せ方」をする方法を思いつき、記事にしていました。 昨日のコードを使用すると、 ↑こんな感じに、枠部分が透けて見えつつ、盛り上がったような形状で表示させる事ができます。 が、実は試していた時点からちょっと気になっていた部分はありました。 枠線（border）にoutsetを指定した場合 が、そうなると気になるのは…左上と右下！ 四辺の色を自分で指定してみました あとがき 枠線（border）にoutsetを指定した場合 borderのstyleにoutsetを指定した場合、盛り上がったように見え…
CSSのborder（枠線）を使って、写真画像を盛り上げたように見せる方法を考えました。 ↑の写真が↓こうなります。 どうも！LSSです！！ ちょっと思いついた事があって試してみたところ、うまく出来ました^^ コード コード解説 盛り上げたように見せる、と言いつつ… コード <div style="width: 300px; height: 225px; background-size: 100% 100%; background-origin: border-box; border: 15px #80808080 outset; border-radius: 10px; background…
どうも！LSSです！！ だいぶ前ですが、 ブラウザ上で遊べる15パズルを作っていました。 この15パズル、実は昔ブラウザゲームサイトをやってた頃にも作ってて、その頃にはこの「1～15の数字」で遊ぶものの他に、用意した画像を16分割してスライドさせて完成する、というのもあったんですね。 （その場合、正解位置が分かりづらくなるので難易度は上がります。） その時は、自分で用意した画像を予め16分割したものをコマにする…という事をやっていたのですが、 のようにCSSで位置調整する事で、予め画像を切り分けなくても画像をパーツ分けする事はできます^^ また、 でやったように「ユーザーが手元のファイルを選択…
ひっさびさに、はてなブログのサイドバーモジュールを追加してみた話
どうも！LSSです！！ だいぶ久々に、このブログのサイドバーにモジュール追加してみました。 （PCで見るとサイドバーですが、スマホから見ている場合、一番下までスクロールするとみる事ができます） ↑こんなのを追加しました。 この「サイコロを振る」をクリックすると… 1～6の目がランダムに出てきます。 突然、サイコロが必要になった時にご利用ください。（どんな時だろwww） はてなブログのサイドバーモジュールって、スクリプトもイケるんですね サイドバーモジュールの設定手順 問題は…何を作って配置するか？ はてなブログのサイドバーモジュールって、スクリプトもイケるんですね って事に気づき、試しに作って…
どうも！LSSです！！ 「ぎなた読み」と言われる、言葉遊びがあります。 例えば、「ここではきものをぬぐこと」と書かれていた場合。 「ここでは、着物を脱ぐ事」とも解釈できますし、「ここで、履物を脱ぐ事」とも解釈できますね。 1975年 つボイノリオさんのオリジナルバージョン発売 1993年 HI-MEさんのカバー 2020年 オメでたい頭でなによりさんのカバー 1975年 つボイノリオさんのオリジナルバージョン発売 www.youtube.com 発売から20日後に、放送禁止指定となった伝説の歌ですw 金太の大冒険 - Wikipedia 1993年 HI-MEさんのカバー www.youtub…
クリックで開始します // '+ans.substr(0,csr)+''+ans.substr(csr,1)+''+ans.substr(csr+1)+'';} function rw(){rireki.innerHTML='文字数:'+mjc+'一文字あたりの秒数:'+Math.floor(1000*ttls/mjc)/1000+''+rtxt;} function nextans(){ans=tng[Math.floor(tng.length*Math.random())];csr=0;stt=0;} function kp(e){ a=e.keyCode; if(a==173 a=…
a // どうも！LSSです！！ なんとなく、「改行を考慮しない文字数カウンタ」を作ってみました。 ↑の入力欄に文字を入れると都度、その下に文字数が表示されます。 全角文字でも半角文字でもスペースでも、1文字としてカウントされます。 改行はカウントしません。 tn198403s.hatenablog.jp またしても カメさん(id:tn198403s)さんの記事を見て思いついたネタになります。 作ってみて…はてなの文字数カウントはどんな計算なんだろう？って疑問が湧いてきましたw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
背景をさらにちょっと凝ってみました。 どうも！LSSです！！ ↑この間 投稿した、 というCSS小ネタですが、さらにちょっと付け足してみました。 小ネタのさらに小改変？ コード ちょっとゴージャスな感じ？ コード <div style="border-radius: 15px; box-shadow: 2px 2px 20px 0px #ffff80 inset; background-image: linear-gradient(45deg,#040404,#141414); background-size: 7px 7px; border: 6px gold ridge; font-siz…
どうも！LSSです！！ やー、かなりびっくりしました。 発売はまだ先ですが…この間、スーパーマリオのゲーム＆ウォッチが出たかと思えば、今度は「ゼルダの伝説」だって！？ ゲーム＆ウォッチ ゼルダの伝説 ゼルダの伝説の思い出 リンクの冒険の思い出 まだ発売までは間があるけど…ポチっちゃいました！ ゲーム＆ウォッチ ゼルダの伝説 store-jp.nintendo.com 今なお継続する「ゼルダの伝説」シリーズ、その初代と、2作目「リンクの冒険」、さらにゲームボーイに進出した最初のゼルダ「夢を見る島（これは何故か後継ハードでも何度かリメイクされてますね）」 がゲーム＆ウォッチとして発売される、と発表…
【CSS】CSSシェイプ…なんてものが存在するのを初めて知りました
まさかこんな事が… CSSシェイプ…CSSで図形を定義できる！？吹き出しとか概念がガラッと変わりそう。 行数を増やすとその分 のびるのびるwこれ、なんか面白い事に使えるのかも？…と、とりあえずは吹き出しで試してみましたが。 どうも！LSSです！！ CSSプロパティの一覧を検索していると、たまたま見つけました。 CSSで↑のような特殊な形状を表現できるんだ！？と。 これまで、CSSで三角を表現しようと思ったら、 こんな感じでborderをいじって…というやり方でしたが、CSSシェイプを使うと三角でも五角で六角でも、星型でも表現できちゃうようです。 コード 他にも色々できるみたい コード <sty…
どうも！LSSです！！ ちょっとCSSでやってみたい事があったのですが、その過程で出来たものを晒してみます^^ 黒地に金文字 背景をちょっと凝ってみた版 やってみたかったのは、 黒地に金文字 黒地に金って映えるかな？ コード <div style="border-radius: 15px; background-color: black; border: 6px gold ridge; font-size: 200%; font-weight: bold; padding: 0.6em; color: gold; text-shadow: -1px -1px 0px lightyellow,1…
【JavaScript】もし、はてなブログ執筆中に電卓が必要になったら【ほぼ冗談】
どうも！LSSです！！ あなたが はてなブログの記事編集中に、ちょっとした計算をする必要に迫られたとします。 PCでもスマホでも電卓アプリは入っていると思いますが、それを立ち上げるのも面倒くさい、リアル電卓を取り出すのも面倒くさい、そんな時にちょっと使えるテクニックをご紹介します！ はてなブログの定型文に、このコードを登録 いざ、計算する必要に迫られた時 というような事ができるっちゃ出来ますが… はてなブログの定型文に、このコードを登録 コード <script>document.write(2*3);</script> あらかじめ上記の1行のコードを、はてなブログの定型文に登録しておきます。 …
今週のお題「575」 どうも！LSSです！！ 久々に、はてなブログのお題記事を書いてみます！ 一句献上 縦書きCSS もうちょっとだけ凝ってみました テキトーな句ですが 一句献上 しとしとと都市をしっとりひたす雨 縦書きCSS …といった感じで、575となると縦書きで書きたくなりますよね！ CSSには文を縦書きにするプロパティが用意されています。 コード <p style="writing-mode: vertical-rl; font-size: 200%;">しとしとと<br />都市をしっとり<br />ひたす雨</p> もうちょっとだけ凝ってみました しとしとと都市をしっとりひたす雨 …
どうも！LSSです！！ ふと、唐突に思い出した「スパイダーマン」についてつらつらと書いてみます。 だんだんまともじゃない方向に向かいますので、そのつもりでw やっぱコレですよね！ 米国アニメ版 日本ではこちらもお馴染み 近年になって制作された映画版スパイダーマン 色々なスパイダーマンがいるけれど…最強の変わり種はこちら！ やっぱコレですよね！ 米国アニメ版 www.youtube.com 元々、古いアメコミから生まれたヒーローです。 このアニメは日本でも放送されていましたが、この主題歌は今聴いてもかっこいい！ その昔、大阪日本橋の米国版のゲームソフトを取り扱う店で、日本では発売されなかったスパ…
シンプルすぎるHTMLファイルの骨組みテンプレートがダウンロードできます！
どうも！LSSです！！ ちょっと手軽にHTMLやCSS、JavaScriptにSVGなどのテストをしたい時。 はてなブログにログインできる環境なら、下書きで試すのも手ですが、そうじゃない環境下でただしPCはある、という時。（かなり限定的ですね^^;） メモ帳などのテキストエディタを開き、最小限のHTML構成である、 <html><head></head><body></body></html> …という内容をささっと手打ちで打ち込み、保存してから、拡張子を「.html」に変更する、なんて事をしたりします。 6つ打って拡張子を変更するだけなので、ささっと出来るのは出来るんですが、なんとなくボタン…
どうも！LSSです！！ 最近、Twitter上でちょっと、このネタに触れているツイートを見かけました。 映画ですが、公開当時「え！？マジで！！」と思ったものの、そういえばいまだに見た事がなかったな…と、Amazonで探してきて、ポチっちゃいました！ 劇場版 仮面ライダーOOO WONDERFUL将軍と21のコアメダル 今日、届きました。 劇場版 仮面ライダーOOO WONDERFUL将軍と21のコアメダル 劇場版 仮面ライダーOOO（オーズ） WONDERFUL 将軍と21のコアメダル ディレクターズカット版【DVD】 渡部秀 Amazon はい、こちらです！ ちなみに、ヒーローものは好きです…
【JavaScript】はてなブログ用 改段落削除ツール？？【試供品】
// ))\n/g,''); smpl.innerHTML='表示例'+t2.value; t2.select(); } // ]]> どうも！LSSです！！ 突然のテキスト入力欄で失礼^^; はてなブロガー向けに、「改段落削除ツール」を試しに作ってみました。 なお、HTML編集画面を開く必要があるため、PC専用となります。 用途 使い方 このツールのコード 開発動機 用途 はてなブログでブログを書き始めた時に、PCから記事を書いていると、 「適当な位置で改行いれておいた方が読みやすいだろうな」 という配慮から、文の途中でもエンターキーで改行を入れる場合があるかと思います。 ところがその時、…
どうも！LSSです！！ 恋の山手線について記事を書きましたが、じゃあ大阪環状線は？と、検索してみました。 大阪環状線は19駅 「恋の大阪環状線」はあるのか？w ドラマがあったらしー 大阪環状線は19駅 www.jorudan.co.jp 山手線が30駅あるのと比べるとだいぶこぢんまりした感じですね。 ゲームにするなら、両バージョン選択できるようにすると、サイズ感が調節できそう。 「恋の大阪環状線」はあるのか？w www.youtube.com 「恋の山手線」があるなら、「恋の大阪環状線」はあるのか？w と、調べてみると、↑のものが見つかりました！ ん－、「恋の山手線」のような、駅名を織り込んだ…
どうも！LSSです！！ かなーり以前にですが、 JavaScriptと<canvas>タグを使って、ブログ記事上に折れ線グラフを表示させてみた事があります。 <canvas>タグを使うと、その中にJavaScriptから自由に線を引いて画像としての表現ができるので、それをただの折れ線グラフに使うという贅沢な？使い方でした。 で、「コードから画像のような表現を行う」という意味ではSVGでも同様なので、今回は「折れ線グラフをSVGで描いてみる」というのを試みてみました！ 折れ線グラフ コード 折れ線データはコードの赤文字部分 余談 折れ線グラフ コード <svg xmlns="http://www…
どうも！LSSです！！ ふと、古い歌を思い出してしまいました。 ふと、というか連想の元は【ゲーム案】環状線制覇双六、なんてのを考えてみました【実験】だったのですが、思い出したついでにググってみると、新たに知った事もあったりして。 「恋の山手線」という歌について書いていきます！ 恋の山手線 モダチョキver 恋の山手線 小林旭（原曲）ver さらに元ネタ…！？ 現在の山手線 あとがき 恋の山手線 モダチョキver www.youtube.com 自分が最初に知った「恋の山手線」は、このモダンチョキチョキズが歌っているバージョンでした^^ ちょこちょこ東京に遊びに行くようになるより前にこの曲に出会…
どうも！LSSです！！ いよいよ来週、最終巻ですね。 2009年9月から連載されたそうなので、もう10年以上になりますか…。 進撃の巨人 34巻（最終巻） 何を書いてもネタバレになるような？ 本編の話も楽しんでいましたが 進撃の巨人 34巻（最終巻） 進撃の巨人（34） (週刊少年マガジンコミックス) 作者:諫山創 講談社 Amazon はい、「進撃の巨人」です。 なお、自分は雑誌連載は追っておらず、もっぱらコミックスを買って読んでいました。 何を書いてもネタバレになるような？ なにぶん、話の展開が急激に方向が変わるので、どこをどう切り取っても未読の方にはネタバレになってしまう、と思うと話題に…
【ゲーム案】環状線制覇双六、なんてのを考えてみました【実験】
どうも！LSSです！！ ふと、双六ゲームのアイデアが浮かびました。 「山手線みたいな環状線を、双六の出た目の数だけ移動し、止まった駅を”制覇”したとして、全駅制覇したらゴール」 というゲーム。 このままだと完全にただの運ゲーなので、実際にゲームとして仕上げるには色々追加要素を入れてゲーム性を持たせる必要があります。 が、その前に、 「そんなゲームがあったとして、実際のところ何回ぐらいサイコロを振る事になるんだろう？」 というのが想像つかなくて（もちろん駅の数によっても違ってくるでしょうし）、ちょっと試作してみる事にしました。 環状線制覇双六（試作） このテストスクリプトのコード 試してみたとこ…
どうも！LSSです！！ 先月の話になりますが…運よく？お目当てのソフトの発売日を迎える前に、任天堂スイッチを入手しました。 …で、目的のソフト、ファミコン探偵倶楽部も速攻でクリアしたのですが、発売待ちの間とクリア後に、ネット接続したスイッチで「ニンテンドーeショップ」を色々見ていると、 「無償提供されているソフト」 「有償ソフトだが体験版がダウンロードプレイできるソフト」 「Nintendo Switch Online会員になると遊べるソフト」 がある事に気づきました。 そのうち、「有償ソフトだが体験版がダウンロードプレイできるソフト」がなかなか凄かった話をしてみます。 ドラゴンクエストビルダ…
【JavaScript】テキストアドベンチャーゲームのシステムを作りかけてみました
どうも！LSSです！！ 先日、このブログに という記事を書きました。 で、考えていたんですが、 「容易にシステムとなるスクリプトをコピペできて、誰でもカンタンに項目を増やせるようなWebゲームブックシステムを公開したら…誰かゲームブック作ってくれないかな？」 とw で、とりあえず、作ってみました！ サンプル コード サンプルはあくまでサンプル と、作ってはみたものの… サンプル // '; } for(i=0;i'+st[hstr[hstr.length-1]].sentaku[i].sttext+''; } gamen.innerHTML=txt; } // ]]> コード <style><…
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
