かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
どうも！LSSです！！ またしても、区切り線CSSネタです。 鎖の区切り線 コード コードが2種ありますが、 【＋α】区切り線ではなく背景にしてみると…？ 終わりに 鎖の区切り線 .chain{ height:20px; background: radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px ,radial-gradient(10px 10px,#66666600 46%,#666666 50%,#e…
どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com で、ページ内の区切りとして使用できるような区切り線をデザインしました。 .yokosen{ height:30px; background: linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaaaff 50%,#eeaaaa00 54%,#eeaaaaff 58%,#eeaaaa00 62%) 0 0/30px 30px ,linear-gradient(-30deg,#aaaaee00 38%,#aaaaee…
どうも！LSSです！！ CSS小ネタとして、区切り線を作ってみました。 赤と青の区切り線 コード 区切り線代わりに使用できますね 赤と青の線ですが、本当は… 赤と青の区切り線 .yokosen{ height:30px; background: linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaaaff 50%,#eeaaaa00 54%,#eeaaaaff 58%,#eeaaaa00 62%) 0 0/30px 30px ,linear-gradient(-30deg,#aaaaee00 38%,#aaa…
今週のお題「試験の思い出」 どうも！LSSです！！ 今回は、はてなブログお題記事です。 「試験の思い出」ですか…。 今年4回目の年男となるLSS。学生時代の試験の思い出を思い出そうにも、遠すぎる過去で、特に記憶に残るようなエピソードもないんですねw 高校時代に授業に全くついていけず、物理の小テストで0点を取った事がある、というのが思い出と言えば思い出w って、それは「試験結果の思い出」ですねw ここではなんとなく、約20年前に今の職場に入った時の思い出でも語ってみます。 前職を退職後、とりあえず派遣会社に登録 まず、派遣会社のスキルテストから で、派遣会社の営業さんと会社に向かう ところが… …
どうも！LSSです！！ 昨日のゲーム、 little-strange.hatenablog.com ゲームになるかどうか不安なまま作り、自分で何度かプレイして「まぁまぁ遊べる…かな？」と思いながら公開。 問題作成も解くのもシンプルなので、実はとんでもなく簡単になってしまう攻略法が（気づいていないだけで）あったりしたらどうしよう？みたいなのもありつつw（まだ見つけていません） で、ふと思い出した昔の思い出 魔女っ子大作戦 ちょっと脱線しましたが、話を本筋に戻すと で、ふと思い出した昔の思い出 このゲーム、数字は全て先に見えているので、クリックする前に脳内で取る手順を考える事ができれば、必ず解ける…
どうも！LSSです！！ ちょっとまた謎な？ゲームを即興で作ってみました。 ナンバー☆ピッカー 遊び方 こういう、乱数で問題生成できるパズル 改善の余地 ナンバー☆ピッカー #gamen div{ display:inline-block; font-size:25px; user-select: none; } #rbtn{ display:inline-block; border-radius:10px; padding:10px; background:radial-gradient(farthest-corner,#ffffff 30%,#888888 100%); user-selec…
どうも！LSSです！！ やたら2が多い日、2022年2月22日、皆様いかがお過ごしでしょうか？ LSSはですね…このただでさえ2が多い日に、ICOCA定期券2枚持ちがいつかやるだろうと警戒していた事をついにやっちゃいました^^; まず、現状確認から ICOCA定期券2枚持ちのリスク 前置きが長くなりましたが、今日のやらかしの話 すぐに気づけたからいいけど という事で、同様の不安を持たれている方、 まず、現状確認から little-strange.hatenablog.com 通勤に、神戸市バスと阪神電車を利用していたLSS。 当初はどちらも磁気定期券だったのですが、神戸市バスが磁気定期券撤廃す…
どうも！LSSです！！ 2月も終盤ですね。 イベントとしては、節分も終わり、バレンタインも終わり…次は ひなまつり？っと、その前に明日は2/22。 しかも今年は「2022年2月22日」とやたら「2」だらけの2/22です。 全てが「2」になる「2222年2月22日」まであとちょうど200年！となる日ですね。 自分はその時には247歳になっているハズです。 その頃にはもう少し落ち着いた性格になって…こんなお馬鹿な事を言ったりしない人になっていそうですね^^（言わないし書けない状態になってるだろうな） ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^ これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。 ところが。 CSSのプロパティというのは数が膨大で、この本に掲載されているものも数が膨大なのですが、それでも本が全ての…
どうも！LSSです！！ この記事で900記事めになります^^ 投稿日数でいうと890日め。 1000の大台が見えてきましたね。 といって 「駄文中の駄文」カテゴリ 読みふけってしまいました といって 特にネタを用意しているわけでもなかったりw 昨日、 little-strange.hatenablog.com という記事をあげましたが、その後、自分で自分のとあるカテゴリの記事を読みふけってしまいました。 「駄文中の駄文」カテゴリ little-strange.hatenablog.com 現時点で90記事（この記事で91記事め）となるこのカテゴリ。 ブログを書き続けていると、無意識のうちに「こ…
どうも！LSSです！！ このブログもだいぶ長く続き、もうすぐ900記事になろうかとしています。 CSSやJavaScriptに力を入れている感じになっていますが、「カテゴリ」に入れたり入れなかったり。 「カテゴリ」ってアレです。はてなブログの機能で、サイドバー（PCで見た時は画面右、スマホで見た時は記事の下）にある、ブログ記事のジャンルを分けたものですね。 新たに読者になっていただいた方も増えてきたところで、ここらで少し「推しカテゴリ」をご紹介してみます。 学びはじめたい方向け「超入門のさわりだけ」 ブログで使えるコードが欲しい、でも人と同じじゃなんか嫌 もっと気軽に楽しめるもの、といえばゲー…
どうも！LSSです！！ 昨日は久々に、1時間以上の尺のある劇場版アニメを観ました^^ amzn.to 劇場版BEM~BECOME HUMAN~ 初代リスペクト！ マンストール という話を あと余談 劇場版BEM~BECOME HUMAN~ たまたま、AmazonPrimeVideoを覗いてると見かけました。Amazonプライム会員は、今なら無料で見られるやつですね。 タイトルから想像する通り、かの名作…いや、超名作「妖怪人間ベム」のリメイク作で、2020年の作品だそうです。 …と、これの前にTVアニメシリーズもあったらしく、そのシリーズの後の話だそうで。 始まりは、女性刑事の報告書という形で妖…
どうも！LSSです！！ いやぁ、やられましたw 日々、結構ギリギリにブログ記事を書いて、日付が変わる前になんとか投稿しているこのブログですが、ついさっき思いがけないピンチが発生しました^^; 記事をデスクトップPCから書いているのですが「なんとか今日も間に合うかな～」と書いている最中に…ブレーカーが落ちましたwww うーん、これは想定外^^; ブレーカーを戻して立ち上げると、今度はシステム更新が始まり、また焦らされますw まぁ…「毎日更新を維持したいなら、下書きに記事を用意しておくなり、早めに書いて予約投稿しかけるなり」しとけばいいと分かってるんですけど、これがなかなか。 ちなみに、うっかり0…
どうも！LSSです！！ 先日、 little-strange.hatenablog.com にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。 「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」で行うものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^） という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。 リンクボタン CSS版 コード コード概要…
バレンタイン記事に使うのに良さそう…なものを、バレンタイン当日に公開するという、完全に時期を逸した感じになってしまいましたw
どうも！LSSです！！ little-strange.hatenablog.com の派生で、いくつか考えてみました。 ブログでの使い勝手…にとらわれず、CSSアニメーションの動きを見て楽しむ感じ？ 跳ねる画像 跳ねるボール二次元版 ブロック崩し風（ブロックはないけどw） あとがき 跳ねる画像 @keyframes boundimga1{ 0%{width:100px;} 100%{width:100%;} } @keyframes boundimga2{ 0%{background-position:0% 0%;} 100%{background-position:100% 0%;} } .…
どうも！LSSです！！ 【CSS】跳ねるボール【多重アニメーションの実験】 - Little Strange Software に、さじさんからいただいたコメント、 さじ(id:conasaji) 円を足しつつ、タイミングずらしたら不思議な何かができそうです。（何かはわからないw）昨日ちょっと知りたいことがありましてCSSとはてなでググったらLSSさんの記事とフジグチさんの記事がヒットしました（笑）本文にリンクのボタンを入れたいんですが、そんな記事ありませんでしたっけ？ CSS装飾でボタン風に見せかける、ような事はよくやっていましたが、本物（？）のボタン（ここではフォームパーツとしてのボタン、…
どうも！LSSです！！ なんとなく「2つのkeyframesアニメーションで、2つめの動きが1つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。 跳ねるボール コード 2つのアニメーション あとがき 跳ねるボール @keyframes dblanm1{ 0%{width:135px;} 100%{width:100%;} } @keyframes dblanm2{ 0%{background-position:0% 0%;} 100%{background-position:100% 0%;} } .dblanm{ height…
どうも！LSSです！！ 金・土・日の三連休がやってきますね^^ …はて、2/11って何の祝日でしたっけ？？と調べてみると『建国記念の日』なんですね。 ja.wikipedia.org Wikiをみると、なかなかゴタゴタがあったらしい記載も。歴史の長さからハッキリしないところがあるようですね。「の」が重要っぽいです。 ふと、このめでたい日に、このブログではどんな記事を書いていたんだろう？ と、こよみモードから調べてみると… little-strange.hatenablog.com little-strange.hatenablog.com 一昨年、「嘘」ってw 昨年のは、なかなか手のかかったツ…
どうも！LSSです！！ だいぶ前から「なんとなく雰囲気だけ」のCSSアニメーション案で、雰囲気だけでどんな見た目にするかとか思いつかずにいる案があったりします。 その雰囲気というのも「ウィーン、ガシャン、って感じの」というだけw「動」と「静」の組み合わせでメカっぽい動き…ですね。 どんな見た目にするかアイデアが浮かびませんが、なんとなく雰囲気だけ、お伝えしてみようと試みる記事です。 ウィーン、ガシャン。 コード 概要 ウィーン、ガシャン。 @keyframes wga{ 0%,23%{background-position:0px 0px,0px 0px;} 25%,48%{backgroun…
今週のお題「自分に贈りたいもの」 どうも！LSSです！！ お題記事、今週のお題は「自分に贈りたいもの」。 うーん、考えてみると…なかなかイミシンなお題かもですね。 裏を返すと、自分が求めているもの、という事になりますが、はたして…？ 自分を甘やかしたい時に贈りたいもの 無形のものもアリなら 自分を甘やかしたい時に贈りたいもの 疲れた時など、自分へのご褒美的なやつ、でいうと…スイーツかなw コンビニスイーツも良いのですが、もうちょっと豪華に、でも安価に行きたい時は、 ちょい久！ pic.twitter.com/l9xXNJqatE— LSS (@LSS0324) 2022年1月30日 こんな感じ…
どうも！LSSです！！ 何がきっかけだったかすら覚えていない…かなり以前に1枚だけエレファントカシマシのCDを購入した事がありました。 何か1曲だけを目当てにCDを買う、なんて事がよくありましたが、これについては全く思い出せないw もしかしたら、その頃チャットか何かで話してた相手がエレカシにハマっていて、どんなものか聴いてみようと思ったのかも？ その後、他に買わなかった事から、アーティストとしては特に自分にはささらなかったという事なんだと思いますが…最近になって購読中の2，3のブログで「エレファントカシマシ」の名前を見かける機会がありました。 すると…その昔、購入したCDに入っていた「珍奇男」…
どうも！LSSです！！ 以前、ICOCAデビューについて記事を書きました。 little-strange.hatenablog.com その後について書きます。 連絡定期券 複数枚持ちへの抵抗 結局 連絡定期券 神戸市バスと阪神電車を通勤に使用していますが、神戸市バスが磁気定期券廃止の方向に動いたため、定期更新のタイミングで市バス定期券だけICOCAデビューしていました。 このたび、阪神電車の定期券も更新のタイミングを迎えたため、更新は自動発券機で出来るのですが、ようやく窓口に聞きにいったんですね。 「神戸市バスのICOCA定期券と阪神電車の定期券を1枚のICOCAにまとめる事はできますか？」…
「空きマスと縦か横に並ぶコマ」をクリックする事で、コマをスライドさせられます。 空きマスに見える元画像をヒントに、全てのコマを正しい位置に配置する事を目指すパズルゲームです。
どうも！LSSです！！ 15パズル画像版に手をつけはじめて、ほぼほぼ出来かけているのですが…謎の10pxぐらいのズレに気づき、marginやらpaddingやら設定しても治らず。 と、すっごく単純なコードで試しても再現する事に気づき、初めて「imgタグそのものにそういう仕様がある」事を知りました^^; 現象の再現 解決策 あとがき 現象の再現 わずか、これだけのコード↓で現象を確認できます。 <div style="border: 1px solid black;"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/littl…
【CSS】background-positionを使った画像の16分割（4x4）やっとできた
どうも！LSSです！！ もう何か月も前の記事ですが、 little-strange.hatenablog.com で頭を悩ませていた問題が解決しました！ 画像の16分割 コード background-positionの%指定の特異性 16分割する意味 画像の16分割 画像を16分割した上で、borderで各枠に盛り上がったような効果を書けています。 これ、16個のdivタグで一つ一つ、16分割した各画像を割り当てています。（画像の縦横サイズを得るために、その下に一枚絵も隠されていたりしますが。） なお、元の画像は↓こちら。 悩ましかった表示位置のズレ、画像の端まで表示できていないなどの問題が解…
どうも！LSSです！！ 節分にちなんだパズルゲームを作ってみました。 …これをパズルと言っていいかどうか疑問もありますがw 鬼はそと福はうち 突貫で作りましたが 鬼はそと福はうち #gamen{position:relative;width:300px;height:300px;background-color:#eeeecc;} #gamen div{position:absolute;transform-origin:50% 100%;left:140px;font:bold 25px serif;transition:0.5s;} #btn1,#btn2{display:inline-b…
【妄想】もしも「鬼は外 福は内」をテーマにゲームを作るとしたら
今週のお題「鬼」 どうも！LSSです！！ もうすぐ節分ですね。今年の節分は2/3、恵方は北北西だとか。 北北西と聞くと思い出すのは… www.youtube.com ↑ 3:35 …それはさておき、ふと「鬼は外 福は内」をテーマに簡単なゲームを作るとしたら、というのを考えてみました。（作るとは言っていない） シューティング パズル あとがき シューティング 真っ先に連想するのはシューティングゲーム。 自機が「豆」を射出して「鬼」を撃ち、「福」を回収するというゲーム。 ブラウザゲームとして作るなら例えば画面内で自機はマウスカーソルに近づくように動き、クリックで豆弾を射出するような。 …スマホの場…
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
