かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです!
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
---|
どうも!LSSです!! 昨日の記事、ゲームにはまだなっていないながらも、それなりに遊べるようになり、また実際に遊んでくださった方もおられました。ありがとうございます^^ で、今日出勤しつつ、スマホから自分で見返してみたんですが、ちょっと修正が必要なところがあり、今日帰宅後になんとか修正をかけました^^; 修正その1 またしても「はてな記法」! 修正その2 さらなる「はてな記法」の罠^^; 修正その3 PCでは感じなかった違和感 といっても、はてな記法は悪者ではないですw 修正その1 またしても「はてな記法」! 以前にも同じ罠にに引っ掛かりましたが、また引っかかってしまいました^^;;;; Ja…
どうも!LSSです!! 昨日の記事、 の続き、「落ちたコマが積みあがる」ようにしてみました。 それに伴い、「落下判定で下にブロックがあれば、そこで落下停止して積む」判定、「左右移動時にブロックがあれば移動しない」判定、「一番上まで積みあがったらゲームオーバー」判定を追加しています。 その他、見ためや列数、コマのサイズなども調整してみました^^ こんな感じ コマをカラフルにするだけで コード 手を加えた箇所 CSSの指定方法をスマートに 二次元配列変数の追加 負荷軽減策 思いついたルール こんな感じ // masu=[]; for(i=0;iここをクリックしてスタート!'; gamen.inne…
【JavaScript】落ち物パズルの落下部分だけ作ってみた話
どうも!LSSです!! 先日、いつもお世話になっている さじさん(id:conasaji)が、こんな記事を書かれていました。 さじさんプログラミングデビュー! これはめでたい!!^^ と、早速コメントしたのですが、「そういえば…LSSは落ち物パズルのプログラムを書いた事なかったな」と、気づいたのですw 全部作るのは大変そうですが、ちょっとさわりだけやってみようかな?と挑戦してみました。 こんな感じです コード 落ちるだけならそう難しくない 左右に動かす処理 落ち物パズル、プログラムの入門に向いているのかな? こんな感じです // 1'; gamen.innerHTML=txt; txt2=''…
【構想】20年以上前のお題小説を全てリンクさせたいが未だまとまってない話
どうも!LSSです!! 早速ですが、標題の件。 もしかしたらちょこっと書いたかも知れませんが、このブログで「自作小説」カテゴリに置いている作品のうち、 「20年以上前の草の根ネットにお題小説として投稿した作品群」を全て繋げたい、と当時から考えていました。 未だに構想がまとまっていないんですけどねw 対象作品 すでにリンクしている設定 双子の姉妹の名前を最近考えましたw 総集編?となる話のおおまかな筋 こういうのは、小説として形にしてあげるべき 対象作品 話としてまとめた際の、時系列順に書き出します。 むかしむかし、の双子の姉妹の話。 この二人は二人とも「不老不死」のゾンビと化しており、今もなお…
どうも!LSSです!! なんとなーく知ってはいたんですが、使った事はなかった事のひとつ。 「CSSのclassをタグオプションで指定する際、半角スペース区切りで複数指定できる」というのを試してみるとともに、それを利用して「色違いの吹き出し」を作ってみました! まずはサンプルから コード コード解説 コピぺして使う際の手順 複数クラス指定による恩恵 まずはサンプルから 天満 玲子 あははは!何が魔女っ子よ。マキなんてスティックがなけりゃタダどんくさいだけの女じゃない。 立倉 麻希 返せーっ。ドロボーっ! 天満 玲子 人聞きが悪いわね。あなたがこれを持ってたってロクな事に使わないから取り上げただけ…
どうも!LSSです!! 最近、あちこちで見かけていた「ブロガーバトン」、LSSんとこにも回ってきました! ご指名いただいた、いのっち様(id:rapisino)、ありがとうございます^^ いのっちさんは、ガジェットや育児の記事を書かれているブロガーさんです。 ガジェットの好みの傾向が自分と似てるかも知れない…^^ LSSが「はてなブックマークコメント」の存在に気づく前から、ちょくちょくブクマコメントを下さっていました!(つまり、コメントをいただいていたのに当初気づかなかった、という事をここに白状します。すみませんっ^^;;;。) ブロガーバトン 一番古い記事 お気に入りの記事 ブロガーバトンテ…
どうも!LSSです!! ついに、マイクラ(マインクラフト)に大型アップデートがきましたね! 普段、Windows10ストア版(統合版)で遊んでいますが、いつもだとすんなりアプデできないのが、今回は割とすんなり?いけました^^ という事で、今日は久々のまいくらにっきです! Realmsで遊んでいます 大型アプデのたびに迷うこと 今回は「ワールド継続」を選択しました ネザーアイスボートロード さしあたって問題は… Realmsで遊んでいます 有料の共有サーバ、Realmsで遊んでいます。 シングルプレイでも楽しいマイクラですが、マルチプレイだと更に楽しい! マイクラをマルチプレイするには、大きく分…
【CSS】レスポンシブデザインに必須!な「メディアクエリ」…の、さわりだけ!
どうも!LSSです!! ついこないだまで「レスポンシブ?何それおいしいの?」だったLSSが、メディアクエリについて語ります!w レスポンシブデザインとは 画面のサイズごとに、使うCSSを切り替えるメディアクエリ メディアクエリ使用例 コード解説 共通の指定 min-width:600pxという条件のメディアクエリ max-width:599pxという条件のメディアクエリ 今回は「メディアクエリ」についてのみ解説しました レスポンシブデザインとは 以前は、「ネットサーフィンはPCでするもの」で、PCの画面で読みやすいサイトを作っておけばそれで良かった、って時代がありました。 が、近年になって、ス…
どうも!LSSです!! 今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますw まずはコード コード解説 吹き出しの三角部分 吹き出し本体の指定 吹き出しを実際に運用する指定方法 改変ポイント 試しに、吹き出し本体に… 謝辞 まずはコード ↑で使っている吹き出しは、こんなコードで実現しています。 <style><!--.fkds::before{content:"";position:absolute;top:-14px;left:50px;width: 0px;height: 0px;border-left: 10px solid transparent;border-right…
どうも!LSSです!! やー、今日はめっちゃ寝てましたw ブログを始めてから9カ月、なんだか当初のAndroidStudioから離れてしまっている昨今ですが、それはそれでまぁいいや、と今日も関係ない記事を書きますw CSS記事を書いてると 逆に影響を受けた話 寄木細工 鯖缶 雪見だいふく CSS記事を書いてると 書いたネタを使ってくださる方、宣伝してくださる方、それを見て読者になってくださる方がおられて、非常に気分が良いですw 主にウケがいいのは、 この記事のネタですね。 この記事には、記事中にも書いていますが元ネタがあって、 本業デザイナーのさじさん(id:conasaji)のデザインのおか…
どうも!LSSです!! コメント欄のCSSいじりシリーズ(?)、今度はコメント欄の中身にまで手を出しました。 コメント欄のクラス まとめ コメント欄の内側のデザインをいじってみた! コード ざっくりと断片的な解説 display:inline-block; content:"\A";white-space:pre; border:4px inset #E0F0C0;の2段重ね float:left; ところどころ、クラス名を並べて指定している理由 コメント本文をどうするか、最後まで迷いましたが… とりあえずこれで コメント欄のクラス まとめ 前回の記事でソースをそのまま載せましたが、その中から…
どうも!LSSです!! 今回は「はてなブログのコメント欄デザイン改造第四弾!」…の準備編といった感じの内容です。 こういうコメント欄 該当部分のコード class名 CSSで、このクラスに対する指定を書くと こういうコメント欄 ↑こういうコメント欄のソースを調べてみました。 GoogleChromeを使用していますが、右クリックからの「ページのソースを表示」では、このコメント部分は見られないんですね。 ですが、「名前をつけて保存」から「ウェブページ、完全」としてHTMLファイルを保存し、保存したものをメモ帳で開く事でやっと中身を見る事ができました! 該当部分のコード <li id="comme…
どうも!LSSです!! 今日は、最近読んだ漫画の話です。(2年前の本ですがw) 夢印 (ビッグコミックススペシャル) 作者:浦沢 直樹 発売日: 2018/07/30 メディア: コミック 自分がこれまでに読んだ浦沢直樹作品 で、今回の「夢印」の話 仏研にいた男 この漫画は一冊で完結しています 自分がこれまでに読んだ浦沢直樹作品 浦沢直樹氏といえば「YAWARA!」が一世を風靡しましたね。 …実は読んでいませんw ドハマリして単行本全巻 揃えたのは「MONSTER」、当時のチャット仲間に教えてもらい、読んでみたらめちゃくちゃ引き込まれて、新刊が出るたびに買いましたw ちょっと遅れて「20世紀少…
どうも!LSSです!! CSSでグラデーションやマーカーを設定する時に、linear-gradientやradial-gradientを使います。 このブログでも何度かネタにしてきましたが、グラデーションする色を指定するところで色が「○%」って指定する部分が、とにかく分かり辛く、説明しづらい! ので、今回はそこに特化した解説記事を書いてみる事にします。 サンプル1 サンプル2 サンプル3 スクリプトで手軽に実験できるツール グラデの色の位置指定のみについての記事でしたが サンプル1 0% 100% こんなものを書いてみました。 コード 0%<span style="display: inlin…
【CSS小ネタ】水玉模様(radial-gradientは複数書けます)
どうも!LSSです!! 今回は小ネタです。 たまたま、水玉 コード <div style="width: 300px; height: 200px; padding: 1em; border-radius: 25px; background-size: 30px 30px; background-color: #ddffdd; background-image: radial-gradient(circle 20px at 25% 25%,white 25%,transparent 30%),radial-gradient(circle 20px at 75% 75%,white 25%,tr…
どうも!LSSです!! 今回は、だいぶ前の記事、 の続きとなります!(だいぶ前すぎるw) 今回は実践編です! HTML編集画面を開きます まず手始めに、<div>タグを書いてみます divタグにstyleオプションをつけたします style=""の中に色々、追加していきます! CSSの指定って 四角い枠を角丸にしてみます 緑が濃くて、黒い「てすと」の文字が見えづらいな 枠の端っこにくっついてるのがいただけない 枠に縁取りもつけちゃえ! こんな感じに作っていきます 今回は実践編です! 前回の記事の内容は「:と;でプロパティと値を指定する」事と、「CSSは3つの指定方法がある」事ぐらいしか書いてい…
どうも!LSSです!! 先日、 という記事を書きましたが、まだまだ書き足りないので続き!(思い出を語ります、といいながら、あまり思い出に触れてなかったのもありw) 発売前から凄く楽しみにしていたタイトル 確かその日は学校が昼までだった 一日目に引っかかったのは「なぞなぞ」 第四世界の衝撃 という感じで 発売前から凄く楽しみにしていたタイトル 当時、学生でしたが、このゲームについては発売前からめっちゃ楽しみにしていました! ファミマガ等の情報誌で事前情報を仕入れ、発売日当日に入手しました。 LSSが発売日当日に買ったゲームって、SaGaとドラクエ3ぐらいじゃないかな。 ドラクエ3のほうはニュース…
どうも!LSSです!! ちょっとふざけて、こんなのを作ってみました 。 お前のものは俺のもの俺のものも俺のもの <div style="background-color: orange; width: 300px; height: 200px; padding: 2.5em 0.5em; color: white; font-size: 24px; font-weight: bold; text-align: center; background-image: linear-gradient(135deg,transparent 30%,black 30%,black 50%,black 70…
どうも!LSSです!! 今日は、以前の記事「最近のAmazonでの購入品」の中で書いたもののうち、 THANKO ネッククーラーNeo TK-NECK2-WH ホワイト メディア: を使ってみての感想記事をお送りします! まず、どういう商品かというと ペルチェ素子 確実にヒンヤリします! 気になる音はどんな感じ? 当てる位置によってもだいぶ感じ方が違う まだ本格的にやってないけど、よさげな使用環境 首掛け扇風機との比較 お値段 冷感 コンパクトさ(使用時) コンパクトさ(非使用時) ファンの音 めだたなさ で、結局どっちのほうがいい? しかし…どうにも気になるのは… まず、どういう商品かという…
【CSS・border】borderで三角形が作れる!?という事に今更びっくりした話
どうも!LSSです!! ↑こんな三角形が、CSSの、それもborderで描ける、というのを知ってびっくりした話です。 これ最初に見つけた人凄いな…!! 実はこの三角、あちこちのブログで使用されています 三角形のコード 順を追って解明していきます まず、縦横50pxの黄色い四角形を作ってみます その四角形の上下左右に幅15pxのborderをつけてみます 上下左右のborderの色を変えてみます 下だけ残し、上左右のborderの色をtranparent(透明)にしてみます。 要素自体のwidthとheightを0pxにし、背景色指定を削ります border-topの指定を削り、border-b…
どうも!LSSです!! やっと出来ました!これが本当の波線マーカー! 以前、公開した記事の波線マーカー 色々やってて辿り着いた、今回の波線マーカー コード コード解説 改変調整ポイントまとめ 余談:実はマーカーじゃなくて下線なら凄く簡単w 以前、公開した記事の波線マーカー …多分、多くの方が「いや、波線ってそうじゃないだろ!」っていう言葉を飲み込んだのではないでしょうか?w ( こういうやつでした⛵ ) あの時点の知識では、あれが精一杯でした^^; 色々やってて辿り着いた、今回の波線マーカー 波線っていったら、本来はこうですよねwww ⛵ 欲を言えば…これはまっすぐな斜め線を交互に配置している…
どうも!LSSです!! 今日は、職場の健康診断がありました。 年に一度のイベント 検便の落とし穴 朝8:30受付 人生初体験! 結果が出るのは後日なわけですが 年に一度のイベント 一年ぶりですねぇ。 だいたい忘れた頃にやってきますw 自腹を切らずに、健康状態を確認していただける、ありがたいイベントですね^^ 検便の落とし穴 健康診断の日の数日前に、A4サイズの書類が入る封筒を職場から渡されます。 中身は説明資料・問診票・検尿/検便キット。 ここで、去年の事を思い出します。 去年は封筒を受け取ってから、問診票だけ書いて「あとは当日でいいや」と放置したんでした。 当日になって、開けてびっくり!! …
どうも!LSSです!! 今日は、以前にやった、 に続いて、またしても さじ(id:conasaji)さん出題のお題?に挑戦してみました! 小田原城の寄木細工 ↑上がさじさんがイラレで描かれた画像、下がそれをCSSで模写してみたものです。(今回、色はツールを使って盗みました。なのに文字の色が違うような^^;;;) 元記事は↓こちら! コード コード解説 の前に考え方から background-size と background-positionというプロパティ ここからコード解説! もうひとつのお題 やってみて凄く勉強になりました! コード <div style="width: 320px; h…
どうも!LSSです!! 今回は、懐かしのゲームの思い出話。 ゲームボーイにスクウェア(現:スクウェア・エニックス)が参入した初タイトルにしてゲームボーイ初の本格RPG(RPGは一応あったんだっけ)、「魔界塔士Sa・Ga」の思い出を語ります! 世界観 システム 人間の成長 エスパーの成長 モンスターの成長 セリフが最高すぎる! 小世界の一幕 鬱すぎる19階 ラスボス「神」と、伝説と化したある要素 世界観 せかいの まんなかに たつとうはらくえんに つうじている というはるかな らくえんを ゆめみておおくの ものたちがこのとうの ひみつに いどんでいっただが かれらの うんめいをしるものはないそし…
【CSS・はてなブログ】今度はコメント欄の個々のコメントを装飾してみた!
どうも!LSSです!! CSS、いじくりだすと楽しいですねw 前回、前々回と「コメントボタン」をカスタマイズしていましたが、今回は「コメント欄にいただいた、ひとつひとつのコメント」をCSS装飾してみました! サンプル コード 解説 コメント欄全体を囲もうとしてたのに サンプル ↑こんな感じにコメントが表示されるようにしてみました。 なお、引用させていただいたのはギャクバリ(id:minimalist_gyakubari)さんから、昨日の記事にいただいたコメントです。 このコメントを読んでLSSが思ったのは「コメント欄全体を枠で囲むようなデザインにすれば、コメントボタンがはてなブログ標準のコメン…
【CSS・はてなブログ】「コメントを書く」ボタンの外観を変えてみた!
どうも!LSSです!! 今回は、昨日の記事のコメント欄にリクエスト?いただいた事をやってみますw 421miyako(id:m421miyako)様、いつもありがとうございます^^ こんなボタンにしてみました! コード 解説 改変ポイント シンプル版 こんなボタンにしてみました! コメントを書く ↑ダミーサンプルです(クリックしてもコメント画面になりませんw) やってみると楽しくなってしまい、ちょっと凝りすぎたかも^^;;; コード .leave-comment-title:before{content:"( ..)φ "!important;}.leave-comment-title{dis…
【CSS・はてなブログ】コメントボタンの文言をちょっと変えてみました【小ネタ】
どうも!LSSです!! 今回はCSS小ネタです。 「コメントを書く」ボタンの文言に付け足すCSS 一応、説明 はてなブログでCSSを設定する方法 はてなブログの管理画面を開きます。 行番号つきの画面が入力欄です。 なお、この方法では これをやってみたきっかけ 「コメントを書く」ボタンの文言に付け足すCSS デザインCSSに、この一行を書き足します。 .leave-comment-title:after{content:"なら、ここをクリックしてね^^";} すると、 となります^^ また、前後ともに文言を付け足す場合は .leave-comment-title:before{content:"…
どうも!LSSです!! 今回の記事は、 の続きのような話です。 そう、今回も妄想ですw 太陽光発電をより安価に効率アップする案 向いている地勢 ソーラーパネルの設置場所 周囲の高層ビルに協力を願います 鏡の狙い なお… 問題点 こういう妄想が好きw 太陽光発電をより安価に効率アップする案 太陽光発電、おうちの屋根に設置して、一般家庭でも発電!とか、広大な敷地にソーラーパネルを並べまくって、結構な量の発電を行う「メガソーラー」なんてのもありますね。 ソーラーパネルの原理はよく分かっていませんが、 ソーラーパネルはそれなりにお高い事 曇りの日など発電量が落ちる事 から、「発電はソーラーパネルに任せ…
どうも!LSSです!! 今回はお買い物記事になります。 書籍「楽しいAI体験から始める機械学習」 kindle書籍「伊藤潤二自選傑作集 歪」 ネッククーラー 書籍「楽しいAI体験から始める機械学習」 楽しいAI体験から始める機械学習 ~算数・数学をやらせてみたら~ 「最近の購入品」と言いながら、ひとつめのこの本は結構以前から予約していました。 5月末発売の本で、LSSんちには6/1に届いたばかりです^^ まだ最初の方を読んだだけですが、「AI」という聞くと難しそうな、本屋で専門書を見るとやっぱり難しそうなものを、難しい話抜きにフリーソフトを使って試してみる!という内容の本です。 実際に試しなが…
どうも!LSSです!! 昨日、「暑いのが苦手」って話をしましたが、そんな自分が毎年夏になると考える事を記事にしてみます。 タイトル通り、ぶっちゃけ妄想ですw 酷暑により、熱中症など人類に被害をもたらす夏。 クーラーなどの文明の利器により、膨大な電力を消費して対策をとりますが、本来は「熱=エネルギー」であり、エネルギー資源の枯渇が憂慮される今日、この「ありあまって困る熱エネルギー」を有効活用できないものか? …なんて事を考えます。 今の技術で、エネルギーを利用しやすい形にしたものといえば「電気」ですが、この夏の熱を電気に変換できないものか? と思い、検索してみると、一応そうした試みはあるみたいで…
「ブログリーダー」を活用して、LSSさんをフォローしませんか?
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。