どうも！LSSです！！ 【CSS】要素のリサイズを可能にしてみました - Little Strange Software で、CSSでのリサイズ許可を行う方法について書きましたが、これがどうもiPhoneではうまく行かない^^; ので、JavaScriptを使って「PCでもiPhoneでも、大きさを変えられる」ようにしてみました。 JavaScriptで要素リサイズ コード 難がない…わけでもなかったり 個人的な裏話 JavaScriptで要素リサイズ CSSでは出来ない事もJavaScriptなら…！ ↑の四角い枠の中で、マウスドラッグ（またはスワイプ）すると、枠の大きさが変化します。 右ドラッグで幅が拡がり、下ドラッグで高さが増し、左と上は小さくなります。 コード <style> #rsz{ overflow:hidden; border:1px solid black; user-s

どうも！LSSです！！ JavaScriptで、背景に「青い空と白い雲」を乱数を用いて描いてみました。 乱数なので、ページを開くたびに模様が変わります。 コード ついでに、記事部分の背景も透過 乱数なもので… コード <script> bgtxt=''; for(i=0;i<50;i++){ cr=Math.floor(Math.random()*60+30); ct=Math.floor(Math.random()*50+cr); cx=Math.floor(Math.random()*400+ct*2); cy=Math.floor(Math.random()*400+ct*2); cpx=Math.floor(Math.random()*100); cpy=Math.floor(Math.random()*100); bgtxt+='radial-gradient('+cr+'px

どうも！LSSです！！ 昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。 ※1/25追記。PC（Windows＋Chrome）とiPhone7で動作確認していましたが、Androidスマホで動作しなかったため、一部コード修正しました。 コード コード解説 HTML部分 コード解説 CSS部分 コード解説 スクリプト部分 あとがき コード ^^) _旦~~ <style> #stalker{ position:absolute; pointer-events: none; transition:linear 0.1s; } </style> <div id="stalker">^^) _旦~~</div> <p> <script> stkx=0;stky=0; pntx=0;pnty=0; stks=10;//速度調整

どうも！LSSです！！ よく見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせてCSS指定が変化します。 コード <div id="gamen">画面スクロールにあわせてCSS指定が変化します。</div> <script> document.addEventListener('scroll',fscr,false); function fscr(){ a=100-(Math.min(Math.max(gamen.getBoundingClientRect().top,200),600)-200)/4; gamen.style.backgroundImage='linear-gradient(90deg,#8

どうも！LSSです！！ 【CSSお絵描き】サイコロの目を描いてみよう - Little Strange Software で、サイコロのデザインが完成していました。 今回はいよいよ、そのサイコロを振って遊べるバージョンの公開です^^ サイコロをクリックまたはタップしてください コード コード解説（CSS部分） コード解説（JavaScript部分） 配列変数の設定 イベントリスナーの設定 あとがき サイコロをクリックまたはタップしてください ※以下、「コード」や「コード解説」が長々と続きます。 興味のない方は「あとがき」まで読み飛ばしてください^^; コード <style> .cb01{ position:relative; transform-style:preserve-3d; width:150px; height:150px; left:75px; transition:1.5s;

どうも！LSSです！！ 先日公開した little-strange.hatenablog.com の、ツール自体のコードです。 ざっくりした解説もつけてみました。 【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Software 【JavaScript】コード作成ツールの作り方【コード出力篇】 - Little Strange Software を基本とした、ちょっとややこしくなった（カラーパレットを増やせる部分）感じですね。 コード ツールを構成するHTML 初期設定 fctradd関数 「色追加」ボタンが押された時の処理 fctr関数「カラーパレット」の色が変更された時の処理 ctrw関数 「カラーパレット」を書き出す処理 gw関数 「サンプル」と「コード」を書き出す処理 以上がこのツールの全貌です コード <p>繰り返し回数<br /><

どうも！LSSです！！ 【JavaScript】アナログ時計を作ってみました で、即興でアナログ時計を作ってみました。 画面を構成する、CSS部分についての解説はしていましたが、今回は肝心の「JavaScript」部分についての解説記事となります。 コード（script部分のみ） コード解説（JavaScript部分） setInterval 時刻を秒で取得 Date.now() getTimezoneOffset() 時針の角度計算 分針、秒針も同様に。 って、かなり長くなってしまいましたが… あとがき コード（script部分のみ） <script> tokeitm=setInterval(function(){ tokein=((Date.now()-(new Date()).getTimezoneOffset()*60000)%86400000)/1000; tokeih.styl

どうも！LSSです！！ この記事は、JavaScript初学者向けの記事となります。 先日の記事、 は、CSSを用いた枠線（囲み枠）のコードを生成するツールでした。 そのツール自体のコードはJavaScriptで書いていましたが、今回はそのコードの公開です。 ついでに、その中で冗長的（無駄）と思われた部分があったのが気になっていたのですが、簡略化に成功したので覚え書き。 なお、スクリプト自体は で解説した方法と同じ作り方で作成しています。 しましま枠線メーカー コード 冗長と思った部分 １行で出来ました^^ あとがき しましま枠線メーカー コード <p>サンプル</p> <div id="gamen"></div> <p> </p> <p><input id="col1" type="color" value="#000000" /> <input id="col2" type="colo

どうも！フジグチです！ 今回は、おすすめ記事を設置するカスタマイズを紹介したいと思います。 以前Cappuccinoで（Neumorphismでも）使えるおすすめ記事の設置方法は紹介しましたが、今回ははてなブログのどのテーマでも使えるおすすめ記事を設置するカスタマイズを紹介したいと思います。 ヘッダー下におすすめ記事を設置することで回遊性が良くなり、ユーザーがサイト内を巡回しやすくなるのでPV数の向上にもつながります。 おすすめの「記事」に限らず、カテゴリやまとめページを設置することで、よりユーザーに適したコンテンツを提供することも出来ます。 今回紹介するカスタマイズはHTMLが苦手な方や初心者の方でも、簡単に導入できるようにしています。 以下に、今回の記事の特徴を挙げます。 この記事の特徴 入力が簡単 使用する画像のアスペクト比に合わせてCSSを変えられる レスポンシブで画像サイズが違っ

どうも！LSSです！！ 落ち物パズルシリーズ、今回は番外編！ 大幅に雰囲気の変わったゲームをお楽しみください^^ 落ち物パズル「泡」 ルール Designed by id:conasaji コード 消し判定について解説します 挙動の変更 謝辞 余談 7/14追記 落ち物パズル「泡」 ルール ↑こちらに、とても分かりやすく画像で説明されています。 簡単に書くと「色のついた泡の周囲（斜め含む８マス）を透明の泡で囲めばOK！」です^^ Designed by id:conasaji このゲームは、LSSが当ブログにて制作していた落ち物パズルの「消し実装」前に、さじさん(id:conasaji)が改変に挑戦してくださって生まれたものです^^ その、作っていただいたものを今度は逆にＬＳＳがパク消し機能を付与したものが、今回の記事となります！ コード <style><!-- #gamen{ posit

どうも！LSSです！！ 昨日の記事、 の続き、「落ちたコマが積みあがる」ようにしてみました。 それに伴い、 「落下判定で下にブロックがあれば、そこで落下停止して積む」判定、 「左右移動時にブロックがあれば移動しない」判定、 「一番上まで積みあがったらゲームオーバー」判定を追加しています。 その他、見ためや列数、コマのサイズなども調整してみました^^ こんな感じ コマをカラフルにするだけで コード 手を加えた箇所 CSSの指定方法をスマートに 二次元配列変数の追加 負荷軽減策 思いついたルール こんな感じ ※「強制停止」はゲーム動作を強制的に終了します。 スターが押せないなどブログの挙動に困った場合に押してください。 コマをカラフルにするだけで ちょっと楽しげな感じが増したような気がしますね^^ なお、いまだに「パズルとしてのルール」は決めておらず、コマを消す手段は無いのですが、カラフルなコ

お題「#おうち時間」 どうも！LSSです！！ 今回はお題記事です。 というより、ぶっちゃけお題にかこつけた記事ですｗｗｗ 在宅している人が増えた今 ちょっと遊べるもの 超巨大迷宮　第四弾！「いつか来た道篇」！！ カードゲーム？ たんごちょう神経衰弱 タイピング練習ゲーム ちょっと学べるもの はてなブログで始める！JavaScript超入門！ というわけで、 在宅している人が増えた今 ブログ巡回やTwitterを眺めていると、家に籠ってる事でのストレスを嘆いたり、いかに長期間籠るかみたいな話をよく見かけます。 この機会に自分を磨く！という方、嫌な事を忘れて家で遊ぶ方法を模索する方、様々ですね。 一人のブロガーとして、微力ながらも何か今の情勢に対して協力できることは？と考えた時、「ちょっと遊べるもの」や「ちょっと学べるもの」を提供するのがいいんじゃないかな、という考えに至ったので、最近の記事は

どうも！LSSです！！ 昨日の記事、自作小説：「嘘（長文注意）」の中で使用していた、 記事中のリンクをクリックすると、 こんな風に続きが出てくる仕掛け。 以前に記事として公開した、【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】や、 ブログで使える（かも知れない？）小ネタでも実現は可能ですが、昨日のやつのように中身の量が増えてくるとちょっと大変ですよね^^; 実は昨日の記事では、より簡略化した方法を使って実現していました。 今回はそのタネ明かし記事となります。 まずは、普通に記事を書きます 書き終えたら「HTML編集」に切り替えます この時点でもう隠されています！ 再度HTML編集画面を開きます aタグの中身を軽く解説します まとめ！（2020/4/5追記） まずは、普通に記事を書きます 隠したり出したりする部分も、普通に表示した後の状態

どうも！LSSです！！ ジャンプ！ ↑こんなものを作ってみました！ なにこれ 作ったきっかけ 一応、コードはっておきます タイマー使うとちょっと面白くなってきますね なにこれ 単なる「移動＋ジャンプ」の動きのサンプルです。 ひたすら左右に往復する★にマウスカーソルを重ねるか、下にある「ジャンプ！」というリンクをクリックすると★がぴょんっとジャンプします。 作ったきっかけ はてなブログ仲間のさじさんが、最近動画作成を勉強されていて、AfterEffectsで可愛いキャラをぴょんぴょんさせる技術を習得されました。 のを見て、JavaScriptでやってみたくなったのです（真似しぃｗ） さじさんのは動きが凄く凝ってます！ キャラも可愛いので、未見の方はぜひ見てきてください^^ 対して、LSSのは単に上下に★が動くだけで、真似というのもおこがましいのですが、「二次関数を使ってのジャンプの表現」をや