かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
どうも！LSSです！！ 2020年もまもなく終わりを迎える今、「振り返り記事」をがっつり書いてみようと思います^^ 2020年1月 2020年2月 2020年3月 2020年4月 2020年5月 2020年6月 2020年7月 2020年8月 2020年9月 2020年10月 2020年11月 2020年12月 皆様、大変お世話になりました。 2020年1月 2020年最初の記事は、初詣の話でした！ 元日から行ってたんですねぇ。 サムネ写真は今見てもインパクトがありますw 他には、 「自作小説」カテゴリを作ったのもこの月でした。 月末には「まるいの」初披露してたり。 2020年2月 1月に作っ…
どうも！LSSです！！ 今回はCSS小ネタです。 傍点のサンプル text-emphasis 傍点のサンプル こんな風に、目立たせたい部分の上部に点をつけられます！（dot） こんな風に、目立たせたい部分の上部に点をつけられます！（circle） こんな風に、目立たせたい部分の上部に点をつけられます！（double-circle） こんな風に、目立たせたい部分の上部に点をつけられます！（triangle） こんな風に、目立たせたい部分の上部に点をつけられます！（sesame） こんな風に、目立たせたい部分の上部に点をつけられます！（'★'） コード <p>こんな風に、<span style="…
【CSS】鹿威し（ししおどし）のように揺れる見出し【カタカタ改変】
どうも！LSSです！！ 以前に書いたCSSで、 が結構ウケが良いようで、いくつかのブログで続けて使っていただいています^^ で、今回はそれを改変したものを作ってみました！ もうすぐ年が明けるので、お正月っぽい？和風テイストの「鹿威しししおどし」風に仕上げました。 鹿威しのように揺れる見出し コード 見た目に関する部分 ボックス本体に関する指定 見出し部分に関する設定 今回、主にいじったのはkeyframesの内容 鹿威しのように揺れる見出し こんな風に、ボックス要素につけた見出しが鹿威しししおどしのように揺れる事で自己主張します！ また、ボックス要素にマウスカーソルが乗っている間は動作がちょっ…
【JavaScript】スマホの画面タッチ（スワイプ）イベントも試してみました！
どうも！LSSです！！ 昨日の記事、 スマホでは動作しませんでしたが、今後これを使ってブラウザゲームとか作る上ではやはり、スマホでも遊べるようにしたい！！ というところで、スマホ対応を試みてみました！ マウスドラッグかスマホスワイプで移動する「もぐら」 コード 思ったより手間取りました^^; 難関その1 スマホにはマルチタッチがある事 難関その2 スワイプ操作は画面スクロールになる あとがき マウスドラッグかスマホスワイプで移動する「もぐら」 // コード <div id="g1" style="position: relative;" draggable="true">ドラッグorスワイプで…
【JavaScript】マウスドラッグイベントを試してみました！
どうも！LSSです！！ JavaScriptに「マウスドラッグイベント」というものがあります。 Webページ内の要素に対して、マウスドラッグを行おうとした時に発生するイベントで、これを仕込んでおくと ドラッグが開始された時 ドラッグが終了した時 ドラッグ中 などに、指定の関数を動作させる事ができます。 例えば「ドラッグが終了した時」に「要素の位置指定を、ドラッグ終了した地点に変更」するコードを書いた関数を用意しておけば、「Webページ内で自由にユーザー（読者）が配置変更できるモノ」を作る事ができますね^^ 今回はそれに挑戦してみました！ マウスドラッグで移動する「もぐら」 コード コード解説 …
【CSS】お正月記事向け・ブログの背景をその記事だけ紅白模様にするコードw
どうも！LSSです！！ 先日、クリスマスの記事、 の中で、強引にブログ記事の背景などを書き換えていました。 次のイベントといえば「お正月」ですが、「1記事限定で正月らしい紅白模様にする」コードを公開してみますw サンプルとコード 使い方と解説 あとがき サンプルとコード と言っても、「この記事」を最初から紅白模様にするのはさすがに気が早すぎるかなぁwと思ったので、↓のボタンをクリックする事で、コード導入した時のイメージを見ていただければ、という事にしておきます^^ このブログの背景を紅白模様にしてみる // body{background-image:linear-gradient(90deg…
どうも！LSSです！！ 今日が、今年最後の出勤でした。 「今年最後の出勤」であって、「仕事納め」ではないのが、コロナに翻弄された2020年らしいところで、月曜の在宅勤務が仕事納めですw 昨日の記事、 に多数のコメント・ブクマありがとうございました^^ ちなみに、あれは3つの「radial-gradientで描いた水玉セットを全画面表示」に、それぞれ横方向・縦方向のアニメーション設定をつけたもので、 これらの記事でやってきた事の集大成になります。 「複数のradial-gradientで模様を作る」「縦と横を別々のアニメーション指定で動作させる」「background-positionの指定で背…
どうも！LSSです！！ この記事限定で、めっちゃ雪を降らせてみました。 …なお、そのままだと他のリンク等が操作不能になるため、画面内でクリックすると停止するようにしています。 // コード <style><!--body{background-image:linear-gradient(black 50%,blue 90%,white 100%);background-color:black; }#title a{color:black;text-shadow:0px 0px 7px yellow;}article{background-color:black!important;color:…
どうも！LSSです！！ 今、こうして記事を書いている「はてなブログ」もSNSの一種ですが、SNSっていうと他にfacebook、Twitter、YouTube、インスタグラムなどがありますね。 各種SNS、それぞれに特徴があって、ユーザーの方がおられます。 我らが（？）はてなブログは、読者間の連携機能が手厚く、活用するとあまりSEOとか気にしなくてもある程度読んでもらえたりしますが、他のSNSとの連携をとる事によって更に間口を広くとれたりします^^ 手軽なところでは、Twitterでしょうね。 短文しか投稿できず（裏を返せば長い文章を書く必要がない）、ブロガーじゃない人にまでも「何これ面白そう…
どうも！LSSです！！ ちょっと試みてみたい事ができたので、やってみました。 背景多重アニメーション コード解説 大きいものと小さいものを描いているのは、 また、それに動きを与えているのは、 「縦移動」の動きの内容の指定をしているのは、 「横移動」の動きの内容の指定をしているのは、 あとがき 背景多重アニメーション なんか白くてぼんやりしたもの、大きいのと小さいのが並んでいます。 大きいグループと小さいグループ、それぞれ左右にサインカーブ状に揺れながら、異なる速度で落下するというサンプルです。 コード <style><!--@keyframes snowh{0%{background-posi…
どうも！LSSです！！ 今回は、昨日の記事、 の続きです！！ クリスマスツリー 完成版？ コード とりあえず完成？ クリスマスツリー 完成版？ ★ ● ● ● ● ● ● ● ● コード <style><!--@keyframes redblnk{0%{color:#ff000000;}100%{color:#ff0000ff;}}@keyframes yellowblnk{0%{color:#ffff0000;}100%{color:#ffff00ff;}}@keyframes blueblnk{0%{color:#0000ff00;}100%{color:#0000ffff;}}@keyf…
どうも！LSSです！！ 以前の記事、の続きです！ クリスマスツリー 点滅する飾りをつけてみました クリスマスツリー ★ ● ● ● ● 追加したコード @keyframes redblnk{0%{color:#ff000000;}100%{color:#ff0000ff;}}@keyframes yellowblnk{0%{color:#ffff0000;}100%{color:#ffff00ff;}}<div style="position: absolute; animation: redblnk 2s linear 0s infinite alternate; top: 150px; r…
どうも！LSSです！！ 本日はお題記事！ お題「#買って良かった2020 」 お手頃価格のドローン 格安タブレット スマートウォッチ パズルの本 SVGの本 以上、Amazonの「注文履歴」からw お手頃価格のドローン 何故か↑サムネとクリックした先の値段が違う？？ たっぷり遊びましたねー^^ 記事もいくつか書きましたw ドローン の検索結果 - Little Strange Software 予備バッテリ買うべきか…迷ってます。 格安タブレット 出先でブログを読むのに重宝しています^^ スマホでも読んでいるんですが、中にはスマホだと厳しいところもあり、そんな時には手軽でとても便利！！ スペッ…
【SVG】インラインSVG、ふと思いついたんですが絵文字素材になるかも？？
どうも！LSSです！！ SVGのコードを書いたテキストファイル、拡張子を「.svg」で保存すると、SVG形式の画像ファイルとして使用できます。 それに対し、ここで自分がやってきたように「ページの中に<svg>タグを書く」という使い方を「インラインSVG」といいます。 この「インラインSVG」という名称から、ふと思いつきました！ HTML＋CSSには「インライン要素」と「ブロック要素」があり、ざっくり言えば「インライン要素は一文の中でも部分的に装飾可能な要素」、「ブロック要素は 改段を伴う 装飾可能な要素」って感じですが、「インラインSVG」ってのも、もしかしたら前者のように「一文の中で部分的に…
どうも！LSSです！！ プレイ時間は減少しているものの、時折、ちまちまと、マイクラで遊んでいます^^ 去年は大きいクリスマスツリーを作成しました。 さて、今年は…？ ルミナリエ初の中止！を受けて と、いうわけで、今年のまいくらクリスマスは 同じものを、角度を変えて3枚スクショしてみました 光源ブロック、色合いの違いがいい感じ♪ ルミナリエ初の中止！を受けて リアルの方の話ですが、今年はさすがに、神戸で毎年恒例イベントとなっていた「ルミナリエ」が中止となりました。 https://kobe-luminarie.jp/ ルミナリエ…もうながらく見に行ってないし、とんでもない人混み＆待ち時間だし、行…
【SVG・JavaScript】SVG内の要素をJavaScriptから制御してみるテスト
どうも！LSSです！！ 今回はまたSVG。 ですが、SVGとJavaScriptの連携のごくごく基本的なところを試してみます！ 真っ赤な太陽 コード コード解説 SVGコード中の太陽にあたる部分 太陽をクリックした時に処理を実行 関数 sunclk 内での処理 SVGの一部分をJavaScriptから変化させられる、って事は 真っ赤な太陽 // 青空、お日様、草原！ …今となっては懐かしい？ LSSが初めてSVGで描いた絵をもう一回、引っ張りだしてきました。 で、絵自体は前と全く同じものなんですが、ここにJavaScriptの仕掛けを施してみました！ 「赤い太陽」をクリックしてみてください^^…
【SVG】SVGの練習？がてら、「もぐら」の絵を描いてみた！
どうも！LSSです！！ この間、 即興で「もぐらたたき」を作りました。 即興ゆえ、画像などは用意せずに「もぐら」という字を叩く、という、ネタとしては滑りやすい物になりましたw で、もし、いずれ「画像版」を作るとしたら？「もぐらの絵」ぐらいは自分で用意したいもの。 で、とりあえず絵だけを「SVGの復習」も兼ねてSVGで描いてみる事にしました！ SVGで描いてみた「もぐら」 SVGのSはScalableのS コード手打ちで描いてみましたが まず、輪郭を描きます 眉毛を片方描きます もう一方の眉毛も、左右対称になるように描きます おめめ！ 鼻 ピンクのほっぺで、かわいく、あざとくw あと、もぐらと言…
どうも！LSSです！！ 今週のお題「もう一度見たいドラマ」 というのを見て、かなり以前に見たもののうち、強烈に印象に残っているある番組を思い出しました。 「ムイミダス」ドラマ？コント？ 長男・タケシ 次男・サンスケ 三男・アラタ 長女・アキ という設定で展開されるドラマっぽいコント 4兄妹を演じていた俳優さんたち 「ムイミダス」ドラマ？コント？ 関西ローカルの深夜番組で「ムイミダス」という番組があったんですね。 1年間放送されたうち、前半と後半で番組内容が全く変わってしまいましたが、印象に残っているのは前半の方。 マンションの一室に住む、4人兄妹の話です。 外のシーンは全くなく、常に室内だけで…
どうも！LSSです！！ 文体診断ロゴーンというサイトがあります。 文章をコピペして「診断」すると、「文章の読みやすさ・硬さ・表現力・個性」を評価してくれて、さらにプロの作家さんなどの文体に似ている・似ていないまでも自動で判断してくれます^^ 診断系のサイトの中でも、特に力が入っていそうで、かつ、日々文章を書いているブロガーの方々には楽しく遊べそうですねw なお、このサイトを知ったのは、 minimalist-gyakubari.hatenablog.c ギャクバリさんの↑の記事でした。 さぁ、診断してみようか！ もものおんがえし ハラキリ侍がゆく 愛に飢えた男の夢 さぁ、診断してみようか！ 文…
どうも！LSSです！！ またまた？変わり種のCSSネタを3種、作ってみました。 ちかちかアンダーライン 影分身！ アニメーションマーカー 使い方 その他、テキスト装飾関連記事 ちかちかアンダーライン このように、文章の一部に時々アンダーラインがつきます。 コード <style><!--@keyframes uwavea{0%{text-decoration-line:none;}69%{text-decoration-line:none;}70%{text-decoration-line:underline;}79%{text-decoration-line:underline;}80%{te…
どうも！LSSです！！ 昨日は、 で遊んでいただき、ありがとうございました^^ 「なんの変哲もない もぐらたたき」でしたが、「意外と楽しめる」のは、「もぐらたたき というゲーム自体が、完成されたゲームである」というところゆえ、でしょうね^^ 他にも色々、作っては来ましたが、 ブラウザゲームそのままプレイ カテゴリーの記事一覧 - Little Strange Software 【JavaScript】落ち物パズル制作 その5【コマ移動を滑らかに】 - Little Strange Software やはり、「オリジナリティがあって面白いもの」を作って公開したいものですw オリジナリティというと…
どうも！LSSです！！ これまで、仕事から帰宅後、2～3時間のうちにブログを書いてアップして…アップしてきたものの中には、 JavaScriptで作ったゲームなどもありますが、「そんな短時間の間にゲーム作って記事にしてアップしていた事が自分で信じられない」www※必ずしも短時間で作っていたわけでもないですが。 そんなわけで、面白い面白くないは二の次として、「短時間ゲーム作成チャレンジ」してみました！！ もぐらたたき！ 遊び方 コード あとがき もぐらたたき！ ゲームスタート // 9){document.getElementById('m'+mgt).innerHTML='';mg[mgt]=…
今週のお題「自分にご褒美」 どうも！LSSです！！ 久々に、お題記事を書いてみます。 塩分充填！ pic.twitter.com/n95tsGT155— LSS (@LSS0324) 2020年12月8日 写真撮るの下手過ぎですが、家系ラーメンですねw （本当に好きなラーメン屋さんは別にあるのですが…） だいたい仕事帰り、空腹感と空虚感があった日などに、「それほどお金がかからない自分へのご褒美」として堪能したりします^^ 休日の昼間なんかだと、焼肉ランチもいいですね。スタミナ補充にw 他に、コンビニスイーツに手を出してみるのもいいですね。 疲れた時には甘いものがいい、とか、糖分が脳の栄養になる…
素朴な疑問…2020年度からの小学校からのプログラミング必修化
どうも！LSSです！！ ちと疑問に思い続けていた事があります。 記事タイトルの通りなんですが「2020年度からの小学校のプログラミング必修化」について。 周囲に小学生がいないので分からないのですが、これって実際に始まったんでしょうか？ ググっても「これから始まる」って話以外見つけられず^^; ある程度調べていた話 まぁ、学校で何やってるかは置いといて こういうのは文章で書くより ある程度調べていた話 「プログラミングそのもの」を授業で行うのではなく、「プログラミングの考え方を学ぶ」という話をどっかで見かけていました。 プログラミングの考え方…というとアルゴリズムの事なのかな？ 例えば「1から1…
【Amazon】恐怖新聞 1～3巻を（今さら）初めて読みました
どうも！LSSです！！ Amazonがやってる電子書籍サービス「Kindle」 もちろん有償で本を売ってたりもするんですが、時に古典的な名作をどういうわけか「0円」で出してたりしますね！ で、今回もたまたま、「昔から古い漫画単行本を買うと巻末広告でよく見かけていた、名高い名作、なのにまだ読んだ事がなかった」ものを見かけてしまったので、一気読みしてしまった話になりますw 恐怖新聞 古典名作はおさえておきたい！ 続編もお安く 恐怖新聞 つのだじろう氏の作品です。 「読めば確実に寿命が縮まる」と言われている「恐怖新聞」、それが主人公の元に送りつけられる話、とだけ知っていました。 つのだじろう氏といえ…
どうも！LSSです！！ 今回も小ネタです。 とりあえず「SVGで紗綾型を描く」事には成功しました。 で、もうひとつ興味を持っていた事があって… 「とりあえず緑色と赤色を使っておけばクリスマスっぽくなるの？」 という疑問。 これを、あえて和風の柄である「紗綾型」でやってみました！ …うーん。 どうでしょうか？ クリスマスっぽい？和柄っぽい？ 自分の目には…そのどちらでもなくなってしまった気がしますwww ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
どうも！LSSです！！ 今回は思いつきで、ちょっとした小ネタ。 「JavaScriptからSVGタグを書き出して、約300ピクセルの四角形を1～10ピクセルランダムにずらした頂点で描いてみる」というのをやってみます。 ちょっと歪んだ四角形 さじさんの記事から ちょっと歪んだ四角形 再描画 // '; gamen.innerHTML=txt+''+txt.replace(//g,'>')+''; window.getSelection().removeAllRanges(); } function rns(){ return Math.floor(Math.random()*10+1); } /…
どうも！LSSです！！ この間から、なんとなく調整していた「紗綾型」。 なんかSVGで できたっぽいです。 SVGで描く紗綾型 実はひとつの図形が完成した時点でほぼ完成していた！？ コピー・再利用するためにはまず、IDをつけます 右に20ずらした位置にコピー 同様に、左にもコピーしてみます さらに、上に3つ配置！ 下にも3つ配置 ループの最小単位 実際に並べてみないと脳内での解決は無理そうw SVGで描く紗綾型 コード <p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20"> <path id…
どうも！LSSです！！ 期日までに、はてなブログで新機能「タグ」を完全公開のブログで使うと、もれなくグリーンスターが100個もらえる！ …というキャンペーンがありましたが、「いつ配布されるのか？」が書かれておらず（見落とし？）、いっこうに配布されなかったので、「何か条件を満たしてなかったのか？？」って不安になってきていたところで、とうとう来ました！ 大事に使う事にします^^お祝い・記念・応援的なタイミングで使いたいですね。 以下、雑記。 昨日の記事、 の最後に、「SVGで紗綾型を描く！」に挑戦していました。 PATHを複数使っていましたが「ひとつのカタチを描くならPATHひとつでいけるかな？」…
どうも！LSSです！！ 「時代劇が好きだった」って話をたまに書いていますが、その中でも「大岡越前」や「遠山の金さん」に共通して出てくる、ある模様が気になっていました。 そんな以前から気になっていたにも関わらず、今日になってやっとググって答えを見つけましたw 奉行所、お白洲の場面でのフスマの模様 紗綾形、っていうらしいです 同じ形のループである事から 奉行所、お白洲の場面でのフスマの模様 ↑久々に、はてなブログの「絵を描く」機能を使ってみました。 かなり下手ですが「なんかこんな模様あったな」って思ってもらえるかもらえないか、ギリギリのラインかなとw 紗綾形、っていうらしいです さあやがた、って読…
どうも！LSSです！！ 12月になりましたね。 ふと、「去年はどんな記事書いてたっけ？」と、はてなブログの「こよみモード」を見ると、 …寝すぎていましたw 一年前のブログを見ると、なんだか色々懐かしいですね^^ スターを見るだけでも、懐かしい方も。 それ以前に、自分のブログの方向性自体もだいぶ変わってしまいましたが、この次の2019/12/2の記事が今、検索流入トップな記事だったりします。 （「最近のアクセス傾向」で49%のGoogleからのうち19%ほどでトップ） かろうじてAndroid記事ですが、今検索流入でその次にいるのが が11%で、「とうとうCSSが上位に入ってきたか」って感じがし…
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
