ぴょんぴょん（LSS with JavaScriptの場合）

どうも！LSSです！！ ジャンプ！ // =70){mx=-1;} if(x0 && j●'; gamen.innerHTML+='★'; } // ]]> ↑こんなものを作ってみました！ なにこれ 作ったきっかけ 一応、コードはっておきます タイマー使うとちょっと面白くなってきますね なにこれ 単なる「移動＋ジャンプ」の動きのサンプルです。 ひたすら左右に往復する★にマウスカーソルを重ねるか、下にある「ジャンプ！」というリンクをクリックすると★がぴょんっとジャンプします。 作ったきっかけ はてなブログ仲間のさじさんが、最近動画作成を勉強されていて、AfterEffectsで可愛いキャラをぴょ…

下書きにこんなものがずっと眠っていましたw【下書き供養祭】

どうも！LSSです！！ かなり以前から、自分の下書きに↓こういうものが眠っていました。 ★ 謎の虹色巨大スターw ちなみに <span style="font-size: 250px; background: linear-gradient(90deg,#ff0000,#ff0000,#ff8000,#dddd00,#dddd00,#00dd00,#00dddd,#00dddd,#0000ff,#ee00ee,#ee00ee); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: tran…

「翔んで埼玉」映画版、ようやく見てみました！

どうも！LSSです！！ 「翔んで埼玉」という作品があります。 原作は魔夜峰央、「パタリロ」で有名な漫画家さんですね。 これが何故か、描かれてから何年も経ってから書評で取り上げられた事をきっかけに、大ブレイクしてついに映画化！したのが昨年の話。 で、それが今、AmazonPrimeで無料で見られるという事で見てみました！ Amazon CAPTCHA 自分が原作漫画を読んだのは書評で取り上げられる前、「やおい君の日常的でない生活」という短編集で、「翔んで埼玉」はその中に含まれた一作でした。 短編集のタイトルである「やおい君の~」も表題作として含まれていて、他に「時の流れに」という短編もありました…

なんとなく、素数判定してみました。

どうも！LSSです！！ 取り乱した時に、素数を数えて落ち着く神父さんの話がありますが、LSSは特に意味もなくなんとなく素数判定するスクリプトを書いてみました。 ここをクリックすると10000までの素数が出てきます（結構大量） // 判定回数："+ cst + " 素数の数："+ ss.length; } // ]]> コード <div id="gamen"> </div><script>// <![CDATA[function sosuu(){gamen.innerHTML='';var cst=0;var ss=[];ss.push(2);for(i=3;i<=10000;i+=2){ sh…

ブログで使える（かも知れない？）小ネタ

どうも！LSSです！！ やっと一週間終わった！ 桜もぼちぼち咲き始めてるようですね^^ さて今回は、JavaScriptを利用した、ブログで使える（かも知れない？）小ネタです。 サンプル コード 改変ポイント あとがき サンプル 問題！ 白色と黒色を混ぜると、どんな色になるでしょうか！？ はい いいえ コード <p>問題！ 白色と黒色を混ぜると、どんな色になるでしょうか！？</p><div id="g1"><a href="#" onclick="g1.innerHTML='正解！ もちろん「はい」色ですね！';return false;">はい</a> <a href="#" onclick…

初めてJavaScriptでラインアートをやってみるテスト

どうも！LSSです！！ JavaScriptの本を眺めていると、昔に自分がJavaScriptをいじっていた頃には無かった、「canvas」という要素がある事を知りました。※HTML5から実装されたものらしいです。 名前の通りWebページ内にキャンバスに見立てた枠を用意して、そこにJavaScriptから線を引いたり色々できる、というなんだか面白そうな要素なので、今回はそれを試してみたいと思います^^ 早速、作ってみたものがこれ！ ラインアートについて コードと説明 描いているのは直線だけなのに、曲線が見える不思議 早速、作ってみたものがこれ！ Canvas非対応ブラウザです // ラインアー…

昨日誕生日、今日は飲み会、でした

どうも！LSSです！！ 今日は飲み会で、先程お開いたところ。 今日の分の更新がまだだったので、帰宅途上でスマホからの更新です！…えぇと…昨日誕生日だったのですが、オープンにしていない中、色々と良いことがあったので、それを書いてみますね。（そうです！チラ裏です！！） その1 LINEのタイムラインに、おめでとうカードをいただきました！ が、それをくれたのがめっちゃ意外な人物で、有り難いやら困惑やら…。 とりあえず「いいね」を押しておいた上で、ステータスメッセージに「お祝いありがとう」と書いておきました。 （こちらからLINEメッセージを送るのがはばかられる相手なもので。） その2 まさかのこのタ…

CSS超入門！…のさわりだけ！！

どうも！LSSです！！ 最近、ブログで「桜が咲いた」って記事を見かけて、近場の桜スポットに出かけてみるも全然でした。 開花情報を調べてみると、東京がやたらと早かったんですね。 さて、今回は「CSS超入門！…のさわりだけ！！」と題して、CSSを全く知らない人向けの記事を書いてみます！ だいぶ前に、HTML超入門！…のさわりだけ！！という記事を書きましたが、それの続編的な感じです。 CSSとは？ CSSを使う時には書き方は大きく分けて3種類！ HTMLタグのオプションとして書く 余談：文字の後ろまで効果が及ぶのが気に入らない場合 <style>タグで指定する 外部に置いたCSSファイルを呼び出す …

200記事め！

どうも！LSSです！！ えーと、この記事で200記事めになります！ ブログ日数は191日なので、1日2記事あげた日が9回ぐらいあった、という事ですね。 最近はだいぶギリギリながらも、なんとか毎日投稿を継続しています。 以前にも書いた事の繰り返しになりますが、「必ずしも毎日投稿にこだわらなくてもいい」と分かっていつつも、ここまでくると途切れさせたくなくなる不思議！w そうそう、200記事を目前にして昨日の記事、 ブログで使える！BOX要素装飾ツールを作りました^^ が、はてなブックマークに載ったようで、日ごろの3倍近いアクセスを今日いただいております！ ブクマしてくださった方、読んでくださった方…

ブログで使える！BOX要素装飾ツールを作りました^^

どうも！LSSです！！ 今回は「BOX要素をborder（枠線）と影（box-shadow）で装飾するツール」を作ってみました！ // '; bdc='hsl('+bdch+','+bdcs+'%,'+bdcl+'%)'; bsc='hsl('+bsch+','+bscs+'%,'+bscl+'%)'; ctxt+='枠幅：'+bdw+'px '+(bdw＋':' ')+(bdw>0?'－':' ')+''; ctxt+='枠線：実線 二重 点線 破線 盛下 盛上 窪み 突出'; ctxt+='枠色：彩'+bdcs+'%'+(bdcs＋':' ')+(bdcs>0?'－':' '); ctxt…

【ただの日記】gridレイアウトと超巨大迷宮

どうも！LSSです！！ 三連休で時間あるぞー！と思ってたら、時間はどんどん過ぎていきますね^^; おとといあたりに何か大口を叩いたような気がしますが、gridレイアウトに興味を惹かれて色々いじってるうちにこんな時間！！w 今作りかけの状態ですが、晒してみます！ ↑はてなの「記事を書く」画面のプレビュー、「スマートフォン表示」にしたところで、「中に全角文字を入れて縦横21マス表示」したところです。 なんとか収まってますね^^ これがtableタグでやってると、中の文字のせいでマスを広げてしまっていました。 gridレイアウト＋divタグでやってる分には、 「もし中の文字がサイズオーバーしても、文…

【CSS】gridレイアウトをやってみた

どうも！LSSです！！ 今日はCSSのgridレイアウトを初めてやってみます。 まず、だいぶ手抜きした事例 見栄え コード コード解説 まずHTML部分 次にCSS部分 配置を変にいじってみるテスト 見栄え コード コード解説 ちょっと注意点 はてなブログっぽいレイアウト 見栄え コード コード解説 IEとEdge対策 問題点 コード コード解説 gridレイアウトの配置方法は他にも違うやり方があります まず、だいぶ手抜きした事例 見栄え ↑こういう、3×3のレイアウトに9つの要素をそのまま配置する例。 コード <style><!--.hako{background-color:lightbl…

早いもので、ブログを始めてから半年が経っていました。

どうも！LSSです！！ ふと気づくと半年が既にたっていましたw 早いものですねぇ（しみじみ） かろうじて毎日更新を続けられている事に改めてビックリwww （投稿時間が23：58なんて日もありましたがw） 自分にとっては、ブログを書いている事よりも「皆さんのブログを読ませていただいている」事のほうが意義が大きかった半年だったように思います。 色々な方の人生の一時期を共有したような気持ちです。（もちろん、ブログで公開されているのは一部分でしょうけど、それでも、ね） このブログは、Androidアプリ開発の勉強の記録・および作ったアプリの宣伝のために始めたもので、その先の目標としてマネタイズがあるの…

過去記事「HSL版カラーパレット」にちょっとだけ手を加えてみました

どうも！LSSです！！ がっつりとした記事を書きたいと思いつつも、なかなか余裕のない今日この頃w 以前書いた記事の「迷路の舞台裏！（JavaScriptで迷路を書き出す方法）」で、innerHTMLでtableタグを書き出す方法を書いていました。 が、レイアウトはCSS任せな昨今、tableタグよりCSSで実現する方法があるのでは？と調べてると、HTML4.0時代からのブランクの間に、flexという方法が出てきて、さらにgridレイアウトという方法になっていってる（が、IEがついていってない）みたいなインプットがありました。 まだ試せてないんですけどねw さてそんな中、今日は過去記事「HSL版…

自作小説：「捨てられた少女」

どうも！LSSです！ 今日は、結構久々に「20年近く前に書いた小説」を晒してみますw まえがき 捨てられた少女 TAKE:1 TAKE:2 TAKE:3 ～解明篇～ あとがき まえがき 以前、自作小説：「ステラ」全2話 一挙公開というのをここで晒しましたが、あれの第一話「捨てられた少女」がお題小説として募集された際にもう一本、全く違う話を投稿していました。 さらに今回の話も、話の途中で話が枝分かれして3パターン書いています。 当時「かまいたちの夜」とかのサウンドノベルゲーが出ていた頃で、パターンが分かれる話を自分でも書いてみたかったんですね（分かりやすい動機！w） で、また「ちょっとアレ」な部…

昨日の「袋文字作成ツール」を使って色々やってみるだけの記事！

どうも！LSSです！！ 今日は、昨日の袋文字作成ツールを使って色々やってみます !! スポーツ新聞風 淫靡な雰囲気…？ 絵文字風 ロゴ風 存在感のあるイエロースター 怖い雰囲気…？ 画像使わずに色々できるもんですねぇ スポーツ新聞風 LSSさん初めてドカ盛マッチョに入店！！ 袋：幅3px ぼかし：1px袋色：redフォント：40px 太さ：600文字色：yellow文字種：sans-serif だと↑こんな感じですね。 淫靡な雰囲気…？ あの夜…あんな事になるなんて… 袋：幅2px ぼかし：1px袋色：pinkフォント：28px 太さ：600文字色：black文字種：serif いや、どんな事…

袋文字作成ツール！

どうも！LSSです！ …っといきなりの袋文字を使ってみましたw 今回は、こういう「袋文字」を実現するコードを作れるツールを作ってみました！ // '; ntxt+='袋：幅'+fkrw+'px'+((fkrw＋':' ')+((fkrw>0)?'－':' '); ntxt+=' ぼかし：'+fkrb+'px'+((fkrb＋':' ')+((fkrb>0)?'－':' ')+''; ntxt+='袋色：'; ntxt+='フォント：'+fts+'px'+((fts＋':' ')+((fts>10)?'－':' '); ntxt+=' 太さ：'+ftw+((ftw＋':' ')+((ftw>10…

HSL版カラーパレット

どうも！LSSです！！ 以前公開した、4クリックRGBカラーパレットに続き、HSL版カラーパレットを作ってみました！ // .txt{width:27px;height:27px;float:left;border:1px solid black;}"; txt+='微調整'+(bichousei ?"有":"無")+'' txt+='色相セレクタ:現在 '+vh+''; for(i=0;i'+''+' '; } if(bichousei){ txt+='色相微調整'; for(i=-4;i'+''+' '; } } txt+='彩度セレクタ：現在 '+vs+'％'; for(i=0;i'+'…

はてなブログ初心者向け はてなブログの記事でお手軽に文字に背景色をつける方法！

どうも！LSSです！！ 今回はCSS小ネタです！ よくブログで見かけると思いますが、こんな風に文字に背景色をつけるやり方、皆さんされていますが、「はてなブログの『記事を書く』画面でお手軽に文字に背景色をつける方法」を、今日はネタにしてみます^^ はてなブログ「記事を書く」画面にて まずは普通に文章を書きます 次に「編集 見たまま」画面の機能で、文字に色をつけます 文字につけた色を、文字の背景の色に変えてしまう方法！ 「"」と「color:」の間にカーソルを合わせます そして「編集 見たまま」画面に戻ると… はてなブログ「記事を書く」画面にて まずは普通に文章を書きます ↑おなじみ、はてなブログ…

CSSで開閉メニュー 改造版！

どうも！LSSです！！ 昨日の記事、【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】にいただいた、はてブコメントにて「transitionを組み合わせれば滑らかに開閉する」とありましたので、早速試してみました！ サンプル コード 速度の違いを試してみます CSSは他にも色々な事ができるようです^^ サンプル メニュー（クリックしてみてね） ああああああああああああああああああ こういう感じですね^^ コード <style><!--#menu{transform:scaleY(0);transform-origin:left top;trans…

【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】

JavaScriptを使わず、CSSのみで開閉するメニューのサンプルと解説です。はてなブログの記事内でも使用できます。

4クリックRGBカラーパレット

どうも！LSSです！！ 今回はJavaScriptで「4クリックRGBカラーパレット」を作ってみました！ 始めからやり直す // 10進数で言うと ('+br+','+bg+','+bb+') です。'; txt+=''; for(b=0;b'; for(r=0;r'; if(kz>1){ txt+=''+txt0+''; }else{ txt+=''+txt0+''; } txt+=''; } txt+=''; } } txt+=''; gamen.innerHTML=txt; } function gamen_last(br,bg,bb){ txt=''; txt+='あなたの選んだ色は …

昨日のゲームについて色々考えてみました

どうも！LSSです！！ 昨日の記事にあげたゲーム、勝率を上げる方法はあるのか、それとも完全な運ゲーなのか…と、ずっと考えていましたw 一番勝利数が多くなるパターン ならば、防衛策として… 別案：全てのパターンから確率を割り出す カードの枚数を減らして考えてみるという手 3枚勝負の場合のパターン表 一番勝利数が多くなるパターン これは簡単です。 敵のAに対してこちらは2、敵の2に対してこちらは3、と、敵の出したカードより常に1だけ大きいカードが出せて、敵のKに対してこちらのAを当てれば12勝1敗。 これが最高のパターンになります。 逆に言えば「一番、相手にやられたくないパターン」でもあります。 …

JavaScriptでゲーム（？）を作ってみました。

どうも！LSSです！！ 今回は、JavaScriptで迷路じゃないゲームを作ってみました。 // する'; } function game2(){ aite.innerHTML='俺のカードは「'+tcds.toString()+'」だ。俺はこの中から一枚選ぶ。お前も、お前のカードの中から選ぶんだな。'; kochira.innerHTML=''; for(i=0;i'+mcds[i]+' '; } aite.innerHTML+=''; } function game3(a){ mcd=mcds[a]; mcds.splice(a,1); r=Math.floor(Math.random()…

超巨大迷宮 第四弾！「いつか来た道篇」！！

どうも！LSSです！！ 最近、迷路ばかりになってきている気がしますが、いじっててつい、いい感じのものができると公開したくなる病…^^;;; ステータス // 100000000 Math.abs(j)>100000000){ return 0; }else{ return parseInt(moto.substr(maze(i,j),1)); } } function linker(l1,l2){ if(l2==" "){l2="◆"} return ''+l2+''; } function maze_r(i,j,k){ moto='a'+moto; moto=moto.substr(0…

超巨大迷宮 第三弾！「position:absolute;との闘い篇」…じゃなくて「宝探し篇」！！

どうも！LSSです！！ またまた迷路です。 …前回ちょっと難しすぎたかもなので、今回は簡単にしてみましたw 簡単なだけでもあれなので、宝さがし要素を追加してみました。 ステータス // 100000000 Math.abs(j)>100000000){ return 0; }else{ return parseInt(moto.substr(maze(i,j),1)); } } function linker(l1,l2){ if(l2==" "){l2="◆"} return ''+l2+''; } function maze_w(){ haba=document.getElement…

色々なバグがありました^^;;;→超巨大？迷宮第二弾

どうも！LSSです！！ ↑昨日のこれ、クリアチェックはしていたのですが…それ以外の部分で次から次にバグを見つけてしまいました^^;;; つまづきの記録として残しておきます。 「地下1階にいる時は上がり階段が出ないように」していましたが、判定は残っていて、何もないところで「上に昇る階段があるぞ！」って出てましたw x座標・y座標に「-1憶~+1億を超えた箇所はすべて壁にする」という制約を密かに設けていましたが、そのテストの時に一時的に「-100~+100」に変更していたのを戻し忘れていました^^; 最後、一番ひどいのは「ゴールチェックも上り階段と同様、表示は制約をかけていたのに、判定x・y座標の…

超巨大？迷宮第二弾！！（未だ試作版）

どうも！LSSです！！ とりあえず公開してしまいます！！ クエスチョンマークつけてるのは… 操作性の向上 階層化し、立体迷路になりました 難易度がかなり高くなってしまったかも… とりあえず公開してしまいます！！ 左へ移動 上へ移動 下へ移動 右へ移動 視界レベル 2 4 6 8 10 // 100 Math.abs(j)>100){ return 0; }else{ return parseInt(moto.substr(maze(i,j),1)); } } function linker(l1,l2){ if(l2==" "){l2="●"} return ''+l2+''; } fu…

超巨大迷宮、作ってたら時間ががが…！

どうも！LSSです！！ 標題の通り、超巨大迷宮をまた作っていたのですが… 操作性の向上 階層の実装 を実現したあたりで楽しくなりすぎてきましたw 「操作性の向上」したあたりでお披露目したい気持ちにも駆られましたが…とりあえず寝ます^^;;;。 ※あまりに大きすぎ・複雑すぎてもどうかな~と思う部分もあったり 今しばしお待ちを~

迷路の舞台裏！（JavaScriptで迷路を書き出す方法）

どうも！LSSです！！ 昨日の記事、「超巨大（になりそこなった）迷宮」で多くの方にゴールまで遊んでいただき、ありがとうございました！^^ アーシさんに言及＆紹介までしていただきました！ あちらのブクマコメントにも遊んでくれた方の感想が書かれていてもうウハウハですw 今回は、JavaScriptで作ったその迷路ゲームの「迷路描画部分」だけ、解説してみたいと思います！ コードはこんな感じ ざっくりとした説明 tableタグで迷路を表現しています JavaScriptでtableタグを書き出してみます！ ループを2重にして、<tr>内の<td>も繰り返してみます！ もうひとひねり（というか脱線？） …

超巨大（になりそこなった）迷宮

どうも！LSSです！！ 超巨大迷宮の夢！から色々やっていましたが、遊べるレベルのものが出来たので、いったんお披露目します！ …実はスタート地点近辺が閉じた空間になっているので、まだ「超巨大」ではないのですが^^;ゴールは設定しました^^ はてなブログで、たくさんの迷路を公開されているアーシさんからコメントをいただいたので、気をよくして公開を焦ったLSSでしたw 上へ移動 左へ移動 右へ移動 下へ移動 視界レベル 3 5 7 // 100 Math.abs(j)>100){ return 0; }else{ return parseInt(moto.substr(maze(i,j),1))…